bugfixing: update in realtime the posts vote

src/lib/components/PostSection.svelte

@@ -6,7 +6,7 @@
   import Downvote from '$lib/components/Downvote.svelte';
   import Upvote from '$lib/components/Upvote.svelte';
 
-  import {userRegion, tagList, postIdDeleted} from '$lib/store';
+  import {userRegion, postVote, tagList, postIdDeleted} from '$lib/store';
   import toast from 'svelte-french-toast';
 
   
@@ -144,6 +144,9 @@ const handleUpvote = async (event) => {
     } else {
       upvoteCounter[postId]--;
     }
+  
+  $postVote = {'id': postId, 'upvote': upvoteCounter[postId], 'downvote': downvoteCounter[postId], 'upvoteClicked': upvoteButtonClicked[postId], 'downvoteClicked': downvoteButtonClicked[postId]};
+
   const response = await fetch(fastifyURL+'/upvote', {
     method: 'POST',
     headers: {
@@ -178,6 +181,7 @@ const handleDownvote = async (event) => {
       downvoteCounter[postId]--;
     }
   
+    $postVote = {'id': postId, 'upvote': upvoteCounter[postId], 'downvote': downvoteCounter[postId], 'upvoteClicked': upvoteButtonClicked[postId], 'downvoteClicked': downvoteButtonClicked[postId]};
 
   const response = await fetch(fastifyURL+'/downvote', {
     method: 'POST',

src/lib/store.ts

@@ -82,6 +82,7 @@ export const switchWatchList = writable(<boolean>(false));
 
 export const cachedPosts = writable(<Array<any>> {});
 export const currentPagePosition = writable(<Number> (0));
+export const postVote = writable(<Array<any>> {});
 
 export const similarTickerClicked = writable(<boolean>(false));
 

src/routes/community/+page.svelte

@@ -1,7 +1,7 @@
 <script lang='ts'>
   
   import { onMount,onDestroy } from 'svelte';
-  import { userRegion, discordMembers, setCache, getCache, cachedPosts, currentPagePosition, numberOfUnreadNotification, postIdDeleted } from '$lib/store';
+  import { userRegion, postVote, discordMembers, setCache, getCache, cachedPosts, currentPagePosition, numberOfUnreadNotification, postIdDeleted } from '$lib/store';
 
   import { afterNavigate } from '$app/navigation';
   import { base } from '$app/paths'
@@ -236,7 +236,6 @@ onMount(async () => {
       //getTickerMentioning(),
     ]);
 
-
       window.scrollTo(0, 0);
       loading = false;
   }
@@ -263,6 +262,7 @@ onMount(async () => {
 
 onDestroy(async () => {
     $postIdDeleted ='';
+    $postVote = {};
   });
 
 
@@ -304,6 +304,36 @@ afterNavigate(({from}) => {
 
 }) 
 
+// Function to update the vote
+function updateVote(posts, postVote) {
+  const { id, upvote, downvote, upvoteClicked, downvoteClicked } = postVote;
+  
+  // Find the post by ID
+  const post = posts?.find(post => post?.id === id);
+  
+  if (post) {
+      post.upvote = upvote;
+      post.downvote = downvote;
+
+     // Check if expand['alreadyVoted(post)'] exists
+    if (!post.expand['alreadyVoted(post)']) {
+      // Create the structure if it does not exist
+      post.expand['alreadyVoted(post)'] = [
+        {
+          type: upvoteClicked ? 'upvote' : downvoteClicked ? 'downvote' : 'neutral',
+          user: data?.user?.id
+        }
+      ];
+    } else {
+      // Update the existing type based on the click flags
+      post.expand['alreadyVoted(post)'][0].type = upvoteClicked ? 'upvote' : downvoteClicked ? 'downvote' : 'neutral';
+    }
+
+  } else {
+    console.log("Post not found.");
+  }
+  return posts
+}
 
 $: {
   if($postIdDeleted.length !== 0)
@@ -315,9 +345,24 @@ $: {
 }
 
 
+$: {
+  if($postVote && Object?.keys($postVote).length !== 0)
+  {
+    //Update in realtime the already downloaded posts list when user votes
+    posts = updateVote(posts, $postVote)
+    //console.log(posts?.at(0))
+    $postVote = {};
+
+  }
+
+}
+
+
+
 $: {
   if(posts)
   {
+    console.log('caching saved')
     $cachedPosts = {"sortingPosts": sortingPosts,'currentPage': currentPage, 'seenPostId': seenPostId, 'posts': posts};
   }
 }
@@ -341,7 +386,6 @@ $: {
 
 
 
-
 </script>
 
 

src/routes/community/post/[postId]/+page.svelte

@@ -9,7 +9,7 @@
   
   
   import { onMount, onDestroy } from 'svelte';
-  import {userRegion, screenWidth, scrollToComment, postIdDeleted, setCache, getCache, tagList, numberOfUnreadNotification, commentAdded, commentUpdated, commentIdDeleted } from '$lib/store';
+  import {userRegion, cachedPosts, postVote, screenWidth, scrollToComment, postIdDeleted, setCache, getCache, tagList, numberOfUnreadNotification, commentAdded, commentUpdated, commentIdDeleted } from '$lib/store';
   import { goto, afterNavigate } from '$app/navigation';
   import { base } from '$app/paths'
   
@@ -68,6 +68,9 @@
       } else {
         upvoteCounter[postId]--;
       }
+
+    $postVote = {'id': postId, 'upvote': upvoteCounter[postId], 'downvote': downvoteCounter[postId], 'upvoteClicked': upvoteButtonClicked[postId], 'downvoteClicked': downvoteButtonClicked[postId]};
+
     const response = await fetch(fastifyURL+'/upvote', {
       method: 'POST',
       headers: {
@@ -102,7 +105,8 @@
         downvoteCounter[postId]--;
       }
     
-  
+    $postVote = {'id': postId, 'upvote': upvoteCounter[postId], 'downvote': downvoteCounter[postId], 'upvoteClicked': upvoteButtonClicked[postId], 'downvoteClicked': downvoteButtonClicked[postId]};
+
     const response = await fetch(fastifyURL+'/downvote', {
       method: 'POST',
       headers: {
@@ -148,7 +152,7 @@
     
   const handleReport = async () => {
   
-      dropdownOpen = !dropdownOpen;
+    dropdownOpen = !dropdownOpen;
     toast.success('Post has been reported. Thank you!', {
       style: 'border-radius: 200px; background: #333; color: #fff;'
       });
@@ -356,8 +360,41 @@
       $commentAdded = '';
       $commentIdDeleted = '';
       $scrollToComment = '';
+      $postVote = {};
   })
   
+
+// Function to update the vote when posts are cached
+function updateVote(postVote) {
+  const { id, upvote, downvote, upvoteClicked, downvoteClicked } = postVote;
+  console.log(postVote)
+  // Find the post by ID
+  const item = $cachedPosts?.posts?.find(post => post?.id === id);
+  console.log(item)
+  if (item) {
+      item.upvote = upvote;
+      item.downvote = downvote;
+
+     // Check if expand['alreadyVoted(item)'] exists
+    if (!item.expand['alreadyVoted(item)']) {
+      // Create the structure if it does not exist
+      item.expand['alreadyVoted(post)'] = [
+        {
+          type: upvoteClicked ? 'upvote' : downvoteClicked ? 'downvote' : 'neutral',
+          user: data?.user?.id
+        }
+      ];
+    } else {
+      // Update the existing type based on the click flags
+      item.expand['alreadyVoted(post)'][0].type = upvoteClicked ? 'upvote' : downvoteClicked ? 'downvote' : 'neutral';
+    }
+
+  } else {
+    console.log("Post not found.");
+  }
+}
+
+
   
   function addCommentToParent(comments, newComment) {
     // Helper function to handle the recursion
@@ -466,7 +503,17 @@
   }
   
   
-  
+  $: {
+  if($postVote && Object?.keys($postVote).length !== 0)
+  {
+    //Update in realtime the already downloaded posts list when user votes in cached posts
+    updateVote($postVote)
+    //console.log(posts?.at(0))
+    $postVote = {};
+  }
+
+}
+
   </script>
   
   
@@ -480,7 +527,6 @@
     <!-- Other meta tags -->
     <meta property="og:title" content="{post.title} · stocknear"/>
     <meta property="og:description" content="Your daily dose of stock market funny memes, GIFs, videos and weird news stories. We deliver hundreds of new stock market memes daily.">
-    <meta property="og:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
     <meta property="og:type" content="website"/>
     <!-- Add more Open Graph meta tags as needed -->
   
@@ -488,7 +534,6 @@
     <meta name="twitter:card" content="summary_large_image"/>
     <meta name="twitter:title" content="{post.title} · stocknear"/>
     <meta name="twitter:description" content="Your daily dose of stock market funny memes, GIFs, videos and weird news stories. We deliver hundreds of new stock market memes daily.">
-    <meta name="twitter:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
     <!-- Add more Twitter meta tags as needed -->
   </svelte:head>
       
@@ -523,7 +568,7 @@
       </form>
       <!--End Upvote-->
       <label class="px-6 py-4 w-14 rounded-lg bg-[#202020] text-[1rem] text-bold text-white">
-          {upvoteCounter[post?.id] - downvoteCounter[post?.id] }
+          {typeof upvoteCounter[post?.id] === 'number' || typeof downvoteCounter[post?.id] === 'number' ? (upvoteCounter[post?.id] - downvoteCounter[post?.id]) : '-' }
       </label>
       <!--Start Downvote-->
       <form on:submit={handleDownvote}>