Update fetching

app/(Main)/feed/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 import { getSessionUser } from '@/components/get-session-user';
 import { useSession } from 'next-auth/react';
-import { useState, useEffect, useRef, Key, Suspense } from 'react'
+import { useState, useEffect, useRef, Key, Suspense, useCallback } from 'react'
 import { Icons } from '@/components/icon';
 import PopularPosts from '@/components/feed/popular-posts';
 import { usePathname, useRouter } from 'next/navigation';
@@ -10,6 +10,7 @@ import { Skeleton } from '@/components/ui/skeleton';
 import FeedComponent from '@/components/feed/feed';
 import UserExplore from '@/components/explore/user/details';
 import ExploreTabs from '@/components/explore/navbar/navbar';
+import { revalidatePath } from 'next/cache';
 
 export default function Feed() {
   const { status, data: session } = useSession()
@@ -26,45 +27,85 @@ export default function Feed() {
 
   const pathname = usePathname()
 
-  useEffect(() => {
-    async function fetchFeed() {
-      if (status !== "unauthenticated") {
-        const user = (await sessionUser)?.id
-        try {
-          const response = await fetch(`/api/feed?user=${user}&page=${page}`);
-          if (!response.ok) {
-            throw new Error(`Fetch failed with status: ${response.status}`);
-          }
-          const topUsers = await fetch(`/api/users/top?user=${user}`, {
-            method: "GET",
-          }).then((res) => res.json());
-          const data = await response.json();
+  const fetchFeed = useCallback(async () => {
+    if (status !== "unauthenticated") {
+      const user = (await sessionUser)?.id
+      try {
+        const response = await fetch(`/api/feed?user=${user}&page=${page}`, { next: { revalidate: 3600 } });
+        if (!response.ok) {
+          throw new Error(`Fetch failed with status: ${response.status}`);
+        }
+        const data = await response.json();
+
+        setFeed((prevFeed: any) => [...prevFeed, ...data.feed]);
+        setFeedLength(data.feedLength);
+        setFetching(false);
+        setLoading(false);
+      } catch (error) {
+        console.error('Error fetching feed:', error);
+        setLoading(false);
+        setFetching(false);
+      }
+    } else {
+      setFetching(false)
+      route.push('/')
+    }
+  }, [page])
 
-          setFeed((prevFeed: any) => [...prevFeed, ...data.feed]);
-          setPopularPosts(data.popular);
-          setTopUsers(topUsers.topUsers);
-          setFeedLength(data.feedLength);
-          setFetching(false);
-          setLoading(false);
-        } catch (error) {
-          console.error('Error fetching feed:', error);
-          setLoading(false);
-          setFetching(false);
+  const fetchPopularPosts = useCallback(async () => {
+    if(status === "authenticated") {
+      try {
+        const response = await fetch(`/api/posts/popular`, { next: { revalidate: 3600 } });
+        if (!response.ok) {
+          throw new Error(`Fetch failed with status: ${response.status}`);
         }
-      } else {
-        setFetching(false)
-        route.push('/')
+        const data = await response.json();
+        setPopularPosts(data.popular);
+      } catch (error) {
+        console.error('Error fetching popular posts:', error);
       }
     }
+  }, [status])
 
-    fetchFeed()
+      const fetchTopUsers = useCallback(async () => {
+        if(status === "authenticated") {
+          try {
+            const response = await fetch(`/api/users/top?user=${(await sessionUser).id}`, {
+              method: "GET",
+              next: { revalidate: 3600 }
+            });
+            if (!response.ok) {
+              throw new Error(`Fetch failed with status: ${response.status}`);
+            }
+            const data = await response.json();
+            setTopUsers(data.topUsers);
+          } catch (error) {
+            console.error('Error fetching top users:', error);
+          }
+        }
+      }, [status])
+
+    useEffect(() => {
+      if(status === "authenticated") {
+      fetchPopularPosts()
+      fetchTopUsers()
+      }
+    }, [status])
+
+  useEffect(() => {
+    console.log('Feed length:', feedLength, 'Feed:', feed.length)
+    if (feedLength >= 0){
+      if (feed.length <= feedLength) {
+        fetchFeed()
+      }
+    }
   }, [page])
 
   useEffect(() => {
-    if (feedLength !== 0 && feed.length !== feedLength) {
+    if (feed.length < feedLength) {
       const observer = new IntersectionObserver(
         entries => {
-          if (entries[0].isIntersecting && !loading) {
+          if (entries[0].isIntersecting && !loading && feed.length < feedLength) {
             setPage(prevPage => prevPage + 1)
           }
         },

app/api/feed/route.ts

@@ -5,14 +5,9 @@ export async function GET(req: NextRequest, res: NextResponse) {
   try {
      const user_id = Number(req.nextUrl.searchParams.get('user'))
   let page = parseInt(req.nextUrl.searchParams.get('page')!)
-  let limit = 10
+  let limit = 5
   let offset = 0
 
-  if (page > 0) {
-    limit = 5
-    offset = (page + 1) * limit 
-  }
-
   const userFollowings = await postgres.follow.findMany({
     select: {
       followingId: true,
@@ -31,9 +26,14 @@ export async function GET(req: NextRequest, res: NextResponse) {
       createdAt: 'desc',
     },
     take: limit,
-    skip: offset,
+    skip: page * limit,
     include: {
-      author: true,
+      author: {
+        include: {
+          Followers: true,
+          Followings: true,
+        }
+      },
       _count: {
         select: {
           likes: true,
@@ -54,25 +54,7 @@ export async function GET(req: NextRequest, res: NextResponse) {
       },
   })
 
-  const popular = await postgres.post.findMany({
-    orderBy: {
-      views: 'desc',
-    },
-    take: 5,
-    include: {
-      author: true,
-      _count: {
-        select: {
-          likes: true,
-          comments: true,
-          savedUsers: true,
-        },
-      },
-      tags: true,
-    }
-  })
-
-  return NextResponse.json({ feed, feedLength, popular })
+  return NextResponse.json({ feed, feedLength }, { status: 200 })
   }
      catch (error) {
      console.error(error)

app/api/posts/popular/route.ts

@@ -0,0 +1,30 @@
+import postgres from "@/lib/postgres";
+import { NextRequest, NextResponse } from "next/server";
+
+export async function GET(req: NextRequest) {
+     try {
+          const popular = await postgres.post.findMany({
+               orderBy: {
+                 views: 'desc',
+               },
+               take: 5,
+               include: {
+                 author: true,
+                 _count: {
+                   select: {
+                     likes: true,
+                     comments: true,
+                     savedUsers: true,
+                   },
+                 },
+                 tags: true,
+               }
+             })
+
+          return NextResponse.json({ popular }, { status: 200 });
+     }
+     catch (error) {
+          console.error(error);
+          return NextResponse.error();
+     }
+}

components/explore/navbar/items.ts

@@ -1,4 +1,4 @@
-import { Compass, Hash, Home, Zap } from "lucide-react";
+import { Compass, GalleryVerticalEnd, Hash, Zap } from "lucide-react";
 type Item = {
   label: string;
   icon: React.ElementType;
@@ -8,7 +8,7 @@ type Item = {
 export const items = [
   {
     label: "Feed",
-    icon: Home,
+    icon: GalleryVerticalEnd,
     path: "/feed",
   },
   {

components/feed/feed.tsx

@@ -42,12 +42,6 @@ export default function FeedComponent({ feed, children, isLoaded }: { feed: any;
       </div>
 
       {children}
-      {feed.length !== 0 && (
-        <div className="feed__list_loadmore my-8">
-          {children}
-          <Icons.spinner className="h-10 animate-spin mr-2" /> Loading...
-        </div>
-      )}
     </div>
      )
 }

components/get-session-user.ts

@@ -1,7 +1,8 @@
 import { getSession } from "next-auth/react";
+import { cache } from "react";
 
 //Get session user using getSession() from next-auth and return user object
-export async function getSessionUser() {
+async function fetchData() {
      const session = await getSession();
      console.log(session);
      const sessionUser = session?.user as any;
@@ -23,4 +24,6 @@ export async function getSessionUser() {
           //If there is no user details in database return null
           return Promise.reject(null);
      }
-}
+}
+
+export const getSessionUser = cache(fetchData)