ui changes

tomyRomero · Apr 18, 2024 · 155c62d · 155c62d
1 parent 7a2abc3
commit 155c62d
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 6 deletions.
diff --git a/app/(root)/page.tsx b/app/(root)/page.tsx
@@ -18,7 +18,7 @@ async function Home()
 
  return (
     <>
-      <h1 className='head-text text-left text-black mb-4'>Recent Sparks...</h1>
+      <h1 className='head-text text-left text-black mb-6'>Recent Sparks...</h1>
       <FilterBox />
       <br/>
       <SearchButton />

diff --git a/app/globals.css b/app/globals.css
@@ -103,10 +103,10 @@
 
   /* Shared */
   .topbar {
-    @apply fixed top-0 z-30 flex w-full items-center justify-between bg-black px-6 py-3;
+    @apply fixed top-0 z-30 flex w-full items-center justify-between bg-black px-6 py-5 rounded-b-xl;
   }
   .bottombar {
-    @apply fixed bottom-0 z-10 w-full p-4 backdrop-blur-lg xs:px-7 md:hidden bg-black
+    @apply fixed bottom-0 z-10 w-full p-4 backdrop-blur-lg xs:px-7 md:hidden bg-black rounded-t-xl
   }
   .bottombar_container {
     @apply flex items-center justify-between gap-3 xs:gap-5 ;

diff --git a/components/InfiniteFeed.tsx b/components/InfiniteFeed.tsx
@@ -9,7 +9,7 @@ import { Button } from './ui/button';
 
 const InfiniteFeed = ({user}: {user: string}) => {
 
-    const {title} = useAppContext();
+    const {title, scrollPosition, setScrollPosition} = useAppContext();
     const [posts, setPosts] = useState<any[]>([]);
     const [isLoading, setIsLoading] = useState(false);
     const [page, setPage] = useState(1);
@@ -46,6 +46,7 @@ const InfiniteFeed = ({user}: {user: string}) => {
         ) {
           setPage((prevPage) => prevPage + 1);
         }
+
       };
       window.addEventListener('scroll', handleScroll);
       return () => {
@@ -57,6 +58,26 @@ const InfiniteFeed = ({user}: {user: string}) => {
       window.scrollTo({ top: 0, behavior: 'smooth' });
     };
 
+    useEffect(() => {
+      const storedScrollY = localStorage.getItem('infiniteFeedScrollPosition');
+      if (storedScrollY) {
+        window.scrollTo(0, parseInt(storedScrollY, 10));
+      }
+    }, []);
+
+    useEffect(() => {
+      const handleBeforeUnload = () => {
+        localStorage.setItem('infiniteFeedScrollPosition', window.scrollY.toString());
+      };
+
+      window.addEventListener('beforeunload', handleBeforeUnload);
+
+      // Cleanup function
+      return () => {
+        window.removeEventListener('beforeunload', handleBeforeUnload);
+      };
+    }, []);
+
   return (
       <>
         <section ref={containerRef} className='mt-9 flex flex-col gap-10'>
@@ -66,7 +87,7 @@ const InfiniteFeed = ({user}: {user: string}) => {
             <>
               {posts.map((post: any) => (
                 <Post
-                  key={post.idpost}
+                  key={post.idpost * Math.random()}
                   id={post.idpost}
                   currentUserId={user}
                   parentId={post.parent_Id}

diff --git a/lib/AppContext.tsx b/lib/AppContext.tsx
@@ -34,6 +34,8 @@ type AppContextProps = {
   activityNoti: any;
   setActivityNoti: React.Dispatch<React.SetStateAction<any>>;
 
+  scrollPosition: any;
+  setScrollPosition: React.Dispatch<React.SetStateAction<any>>;
 };
 
 // Create the AppContext with an initial value of undefined
@@ -66,6 +68,9 @@ export const AppProvider: React.FC<{ children: ReactNode }> = ({ children }) =>
   //For global activity notifcation
   const [activityNoti, setActivityNoti] = useState(false);
 
+  //For scroll position
+  const [scrollPosition, setScrollPosition] = useState(0);
+
   //Client Pusher Instance Logic
   const pusher = pusherClient;
   const [pusherChannel, setPusherChannel] = useState(pusher.subscribe('sparks'));
@@ -105,7 +110,7 @@ export const AppProvider: React.FC<{ children: ReactNode }> = ({ children }) =>
     setTitle, title,
     messageNoti, setMessageNoti,
     activityNoti, setActivityNoti,
-
+    scrollPosition, setScrollPosition
   };
 
   // Set up event listeners for user activity (adjust as needed based on your application)