bugfixing: community post position

src/lib/components/Footer.svelte

@@ -53,7 +53,7 @@
           </li>
           
           <li class="mt-2 inline-block mr-2 md:block md:mr-0" >
-            <a href="/donation" class="no-underline sm:hover:underline text-gray-100  sm:hover:text-blue-400">Sponsor Us ❤</a>
+            <a href="/donation" class="no-underline sm:hover:underline text-gray-100  sm:hover:text-blue-400">Support Us ❤</a>
           </li>
         </ul>
       </div>

src/lib/store.ts

@@ -106,6 +106,7 @@ export const corporateLobbyingComponent = writable(<boolean>false);
 export const fomcImpactComponent = writable(<boolean>false);
 export const scoreComponent = writable(<boolean>false);
 
+export const goBackToPostId = writable(<string>"");
 export const strategyId = writable(<string>"");
 export const articleId = writable(<string>"");
 

src/routes/+page.svelte

@@ -78,68 +78,7 @@ function convertTimestamp(unixTimestamp) {
     return formattedDate;
 }
 
-//const tickerGraphName = data?.getDashboard?.retailTracker?.map(item => item?.symbol) || [];
-//const tradedList = data?.getDashboard?.retailTracker?.map(item => item?.traded) || [];
 
-/*
-const optionsGraph = {
-  animation: false,
-  grid: {
-    left: '2%',
-    right: '3%',
-    bottom: '6%',
-    top: '0%',
-    containLabel: true
-  },
-  xAxis: {
-    type: 'value',
-    splitLine: {
-      show: false, // Disable x-axis grid lines
-    },
-    axisLabel: {
-      show: false // Hide x-axis labels
-    },
-    axisTick: {
-      show: false // Hide x-axis ticks
-    },
-    axisLine: {
-      show: false // Hide x-axis line
-    }
-  },
-  yAxis: {
-    type: 'category',
-    data: tickerGraphName,
-    inverse: true,
-    axisTick: {
-      show: false // Hide x-axis ticks
-    },
-    axisLabel: {
-        color: '#fff' // Set the y-axis label color to white
-    }
-  },
-  series: [
-    {
-      data: tradedList,
-      label: {
-        show: true,
-        position: 'inside',
-        formatter: function(params) {
-          return abbreviateNumber(params?.value,true);
-        },
-        fontWeight: 600,
-      },
-      type: 'bar',
-      showBackground: true,
-      backgroundStyle: {
-        color: 'rgba(180, 180, 180, 0.2)'
-      },
-      itemStyle: {
-        color: 'white'  // Bar color is white
-      }
-    }
-  ]
-};
-*/
 
 function latestInfoDate(inputDate) {
     // Convert the input date string to milliseconds since epoch
@@ -205,10 +144,10 @@ onMount( async() => {
 <svelte:options immutable={true}/>
 
 
-<div class="w-full xl:max-w-screen-2xl overflow-hidden m-auto min-h-screen bg-[#09090B]">
+<div class="w-full xl:max-w-screen-2xl overflow-hidden m-auto min-h-screen bg-[#09090B] mb-40">
   
   {#if data?.user?.tier !== 'Pro' || data?.user?.freeTrial === true}
-  <div class="mb-5 relative isolate text-center flex justify-center items-center gap-x-6 overflow-hidden bg-purple-600 px-6 py-3.5 sm:py-2.5 sm:px-3.5 sm:before:flex-1">
+  <div class="mb-5 relative isolate sm:rounded text-center flex justify-center items-center gap-x-6 overflow-hidden bg-purple-600 px-6 py-3.5 sm:py-2.5 sm:px-3.5 sm:before:flex-1">
   <div class="absolute left-[max(-7rem,calc(50%-52rem))] top-1/2 -z-10 -translate-y-1/2 transform-gpu blur-2xl" aria-hidden="true">
     <div class="aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-[#ff80b5] to-[#9089fc] opacity-30" style="clip-path: polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)"></div>
   </div>
@@ -453,7 +392,7 @@ onMount( async() => {
               </Card.Content>
             </Card.Root>
 
-              <Card.Root class="order-1 sm:order-2 overflow-x-scroll overflow-hidden overflow-y-scroll no-scrollbar sm:max-h-[400px]">
+              <Card.Root class="order-1 sm:order-2 overflow-x-scroll overflow-hidden overflow-y-scroll no-scrollbar sm:max-h-[550px]">
                 <Card.Header class="flex flex-row items-center">
                   <div class="flex flex-col items-start w-full">
                     <div class="flex flex-row w-full items-center">
@@ -493,7 +432,7 @@ onMount( async() => {
                 </Card.Content>
               </Card.Root>
               
-              <Card.Root class="order-2 sm:order-3 overflow-x-scroll overflow-hidden overflow-y-scroll no-scrollbar sm:max-h-[400px]">
+              <Card.Root class="order-2 sm:order-3 overflow-x-scroll overflow-hidden overflow-y-scroll no-scrollbar sm:max-h-[550px]">
                 <Card.Header class="flex flex-row items-center">
                   <div class="flex flex-col items-start w-full">
                     <div class="flex flex-row w-full items-center">

src/routes/community/+page.svelte

@@ -1,7 +1,7 @@
 <script lang='ts'>
   
   import { onMount,onDestroy } from 'svelte';
-  import { postVote, discordMembers, setCache, getCache, cachedPosts, currentPagePosition, numberOfUnreadNotification, postIdDeleted } from '$lib/store';
+  import { postVote, discordMembers, cachedPosts, goBackToPostId, numberOfUnreadNotification, postIdDeleted } from '$lib/store';
 
   import { afterNavigate } from '$app/navigation';
   import { base } from '$app/paths'
@@ -19,7 +19,7 @@
   let discordURL = import.meta.env.VITE_DISCORD_URL;
   
 
-  let loading = true;
+  let isLoaded = false;
 
 
   let moderators = data?.getModerators;
@@ -115,14 +115,11 @@ onMount(async () => {
       getPost(),
       //getTickerMentioning(),
     ]);
-
-      window.scrollTo(0, 0);
   }
 
   else {
     // Use cached data if available
     posts = $cachedPosts?.posts;
-    //tickerMentioning = getCache('','getTickerMentioning');
   }
 
   if(!data?.user)
@@ -132,7 +129,7 @@ onMount(async () => {
 
     BottomNavigation = (await import('$lib/components/BottomNavigation.svelte')).default;
 
-    loading = false;
+    isLoaded = true;
 
 });
 
@@ -140,6 +137,7 @@ onMount(async () => {
 onDestroy(async () => {
     $postIdDeleted ='';
     $postVote = {};
+    $goBackToPostId = '';
   });
 
 
@@ -148,7 +146,7 @@ onDestroy(async () => {
 let sortingPosts = $cachedPosts?.sortingPosts?.length > 0 ? $cachedPosts?.sortingPosts : 'hot';
 
 async function handleCategoryOfPosts(state) {
-  loading = true;
+  isLoaded = false;
   posts = [];
   currentPage = 1;
   postLoading = false;
@@ -158,12 +156,11 @@ async function handleCategoryOfPosts(state) {
   sortingPosts = state;
   $cachedPosts = {};
   posts = await getPost();
-  loading = false;
+  isLoaded = true;
 }
 
 
 
-let yPosition;
 let goBackToPosition = false;
 
 
@@ -230,6 +227,7 @@ $: {
 }
 
 
+
 $: {
   if($postVote && Object?.keys($postVote).length !== 0 && data?.user?.id)
   {
@@ -251,22 +249,27 @@ $: {
   }
 }
 
-$: {
+
-  if(yPosition)
+  // Reactive statement to check and scroll to the target post
-  {
+$: if ($goBackToPostId?.length !== 0 && $cachedPosts?.posts?.length !== 0&& typeof window !== 'undefined') {
-    $currentPagePosition = Math.floor(yPosition);
+    const postExists = $cachedPosts?.posts?.find(post => post?.id === $goBackToPostId);
+    isLoaded = false;
+    if (postExists) {
+      scrollToPost($goBackToPostId);
+      $goBackToPostId = '';
     }
-}
+    isLoaded = true;
-
-$: {
-  if(goBackToPosition && typeof window !== 'undefined')
-  {
-    goBackToPosition = false;
-    window?.scrollTo({top: $currentPagePosition});
-
   }
-}
 
+function scrollToPost(postId) {
+  // Add a small delay to ensure DOM is updated
+  setTimeout(() => {
+    const targetDiv = document.getElementById(`post-${postId}`);
+    if (targetDiv) {
+       targetDiv.scrollIntoView(true);
+    }
+  }, 0);
+}
 
 
 
@@ -294,14 +297,6 @@ $: {
 </svelte:head>
     
 
-
-
-<svelte:window bind:scrollY={yPosition} />
-
-
-
-
-
 <body class="bg-[#09090B] sm:mt-5 max-w-3xl sm:max-w-screen-2xl">
 
 
@@ -329,7 +324,7 @@ $: {
                         <div class="sm:pt-6 pb-12 w-full">
                             <div class="lg:pr-5">
                                 <!--<CreateNewPost />-->
-                                <div class="{!loading? 'hidden' : ''}">
+                                <div class="{isLoaded ? 'hidden' : ''}">
                                   {#each Array(5) as _}
                                     <SkeletonLoading />
                                   {/each}
@@ -364,12 +359,12 @@ $: {
                                 </div>
                               <!--End choose Hot or New Posts-->
 
-                               {#if !loading}
+                               {#if isLoaded}
                         
                                 {#each posts as post}
                                 
                                 <div class="flex items-start w-full">
-                                    <div class="w-full m-auto">
+                                    <div id="post-{post.id}" class="w-full m-auto">
                                       <PostSection 
                                         data={data}
                                         posts= {post}
@@ -414,7 +409,7 @@ $: {
                         <!-- Sidebar -->
                         <aside class="hidden lg:inline-block h-sh lg:w-1/2 pt-[1.5rem] pr-0 lg:pr-2 xl:pr-0">
 
-                          {#if !loading}
+                          {#if isLoaded}
                           
                            <!-- Sidebar content -->
                             <div class="lg:pl-2 z-20 h-full">

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

@@ -9,7 +9,7 @@
   
   
   import { onMount, onDestroy } from 'svelte';
-  import {cachedPosts, postVote, screenWidth, scrollToComment, postIdDeleted, setCache, getCache, tagList, numberOfUnreadNotification, commentAdded, commentUpdated, commentIdDeleted } from '$lib/store';
+  import {cachedPosts, postVote, screenWidth, scrollToComment, postIdDeleted, goBackToPostId, tagList, numberOfUnreadNotification, commentAdded, commentUpdated, commentIdDeleted } from '$lib/store';
   import { goto, afterNavigate } from '$app/navigation';
   import { base } from '$app/paths'
   
@@ -33,7 +33,6 @@
   let userAlreadyVoted;
   
   
-  
   const handleUpvote = async (event) => {
     
     event.preventDefault(); // prevent the default form submission behavior
@@ -293,6 +292,7 @@
       $commentIdDeleted = '';
       $scrollToComment = '';
       $postVote = {};
+      $goBackToPostId = data?.getPostId
   })