From aae6eeb191b9294abb2cbf2c35fbf91c3966fa55 Mon Sep 17 00:00:00 2001
From: Samet Alan <a.sametalan56@gmail.com>
Date: Mon, 16 Dec 2024 20:10:06 +0300
Subject: [PATCH] Fix programs bug on feed page

---
 .../components/CreatePostModal.component.jsx  |   7 +-
 .../src/components/PostFeed.component.jsx     | 114 +++++--
 .../src/components/PostFeedCard.component.jsx | 315 ++++++++----------
 .../UserJoinedProgramsCard.component.jsx      |   4 +-
 frontend/src/context/PostContext.jsx          |  99 +++---
 5 files changed, 291 insertions(+), 248 deletions(-)

diff --git a/frontend/src/components/CreatePostModal.component.jsx b/frontend/src/components/CreatePostModal.component.jsx
index c2af0fa..1e738fb 100644
--- a/frontend/src/components/CreatePostModal.component.jsx
+++ b/frontend/src/components/CreatePostModal.component.jsx
@@ -236,7 +236,12 @@ function CreatePostModal({
                                 :
                                 <Select
                                     styles={selectComponentStyles}
-                                    options={programs.map((program) => ({
+                                    options={
+                                        Array.isArray(programs) ?
+                                        programs?.map((program) => ({
+                                        value: program.id,
+                                        label: program.title
+                                    })) : programs.programs.map((program) => ({
                                         value: program.id,
                                         label: program.title
                                     }))
diff --git a/frontend/src/components/PostFeed.component.jsx b/frontend/src/components/PostFeed.component.jsx
index c9de6e8..8fe0316 100644
--- a/frontend/src/components/PostFeed.component.jsx
+++ b/frontend/src/components/PostFeed.component.jsx
@@ -10,15 +10,63 @@ import {
     Tabs, TabList, TabPanels, Tab, TabPanel
 } from '@chakra-ui/react';
 import { PostContext } from '../context/PostContext';
+import { UserContext } from '../context/UserContext';
 import PostFeedCard from './PostFeedCard.component';
 import ProgramFeedCard from './ProgramFeedCard.component';
 import UserJoinedProgramsCard from './UserJoinedProgramsCard.component'
+import { useRef } from 'react';
+import { useSelector } from 'react-redux';
+import { userSessionToken } from '../context/user';
 
 function PostFeed() {
-    const { posts, isLoadingPosts, programs, isFetchingPrograms, recommendedPrograms, explorePrograms, forYouPosts, explorePosts } = useContext(PostContext);
+    const { 
+        isLoadingPosts, 
+        programs, 
+        isFetchingPrograms, 
+        recommendedPrograms, 
+        explorePrograms,
+        forYouPosts,
+        fetchNextForYouPage,
+        hasMoreForYou,
+        isLoadingForYou,
+        explorePosts,
+        fetchNextExplorePage,
+        hasMoreExplore,
+        isLoadingExplore,
+    } = useContext(PostContext);
+
+    const { user } = useContext(UserContext);
+    const sessionToken = useSelector(userSessionToken);
 
     const isLoading = isLoadingPosts || isFetchingPrograms;
 
+    const observerForYou = useRef();
+    const observerExplore = useRef();
+
+    // Observer for "For You" posts
+    const lastForYouPostRef = (node) => {
+        if (isLoadingForYou) return;
+        if (observerForYou.current) observerForYou.current.disconnect();
+        observerForYou.current = new IntersectionObserver((entries) => {
+            if (entries[0].isIntersecting && hasMoreForYou) {
+                fetchNextForYouPage();
+            }
+        });
+        if (node) observerForYou.current.observe(node);
+    };
+
+    // Observer for "Explore" posts
+    const lastExplorePostRef = (node) => {
+        if (isLoadingExplore) return;
+        if (observerExplore.current) observerExplore.current.disconnect();
+        observerExplore.current = new IntersectionObserver((entries) => {
+            if (entries[0].isIntersecting && hasMoreExplore) {
+                fetchNextExplorePage();
+            }
+        });
+        if (node) observerExplore.current.observe(node);
+    };
+
     return (
         <Flex
             w="full"
@@ -55,8 +103,11 @@ function PostFeed() {
                     width={'full'} // Full width on small screens, larger on desktop
                 >
                     <Heading size="lg" mb={4}>Recommended Programs</Heading>
-                    {recommendedPrograms.length > 0 ? (
-                        programs.map((program) => (
+                    {
+                        !user || !sessionToken ?
+                            <Text>Please log in to see personalized programs.</Text>
+                            : recommendedPrograms.length > 0 ? (
+                        recommendedPrograms.map((program) => (
                             <ProgramFeedCard program={program} key={program.id} />
                         ))
                     ) : (
@@ -73,7 +124,7 @@ function PostFeed() {
                 >
                     <Heading size="lg" mb={4}>Explore Programs</Heading>
                     {explorePrograms.length > 0 ? (
-                        programs.map((program) => (
+                        explorePrograms.map((program) => (
                             <ProgramFeedCard program={program} key={program.id} />
                         ))
                     ) : (
@@ -102,25 +153,42 @@ function PostFeed() {
                                 <Tab>Explore</Tab>
                             </TabList>
                             <TabPanels>
-                                <TabPanel>
-                                    {forYouPosts.length > 0 ? (
-                                        forYouPosts.map((post) => (
-                                            <PostFeedCard post={post} key={post.id} />
-                                        ))
-                                    ) : (
-                                        <Text>No posts for you right now.</Text>
-                                    )}
-                                </TabPanel>
-                                <TabPanel>
-                                    {explorePosts.length > 0 ? (
-                                        explorePosts.map((post) => (
-                                            <PostFeedCard post={post} key={post.id} />
-                                        ))
-                                    ) : (
-                                        <Text>No posts to explore right now.</Text>
-                                    )}
-                                </TabPanel>
-                            </TabPanels>
+                            {/* For You Tab */}
+                            <TabPanel>
+                                { !user || !sessionToken ? 
+                                    <Text>Please log in to see personalized posts.</Text>
+                                    : forYouPosts.map((post, index) => {
+                                    if (forYouPosts.length === index + 1) {
+                                        return (
+                                            <PostFeedCard
+                                                ref={lastForYouPostRef}
+                                                post={post}
+                                                key={post.id}
+                                            />
+                                        );
+                                    }
+                                    return <PostFeedCard post={post} key={post.id} />;
+                                })}
+                                {isLoadingForYou && <Spinner size="lg" />}
+                            </TabPanel>
+
+                            {/* Explore Tab */}
+                            <TabPanel>
+                                {explorePosts.map((post, index) => {
+                                    if (explorePosts.length === index + 1) {
+                                        return (
+                                            <PostFeedCard
+                                                ref={lastExplorePostRef}
+                                                post={post}
+                                                key={post.id}
+                                            />
+                                        );
+                                    }
+                                    return <PostFeedCard post={post} key={post.id} />;
+                                })}
+                                {isLoadingExplore && <Spinner size="lg" />}
+                            </TabPanel>
+                        </TabPanels>
                         </Tabs>
                     </Box>
                 )
diff --git a/frontend/src/components/PostFeedCard.component.jsx b/frontend/src/components/PostFeedCard.component.jsx
index 7707981..59feee4 100644
--- a/frontend/src/components/PostFeedCard.component.jsx
+++ b/frontend/src/components/PostFeedCard.component.jsx
@@ -34,35 +34,15 @@ import { userSessionToken } from '../context/user'
 import apiInstance from '../instance/apiInstance'
 import { useColorModeValue } from '@chakra-ui/react'
 import Detailed_Training_Modal from './Detailed_Training_Modal.component';
+import { forwardRef } from 'react'
 
-function PostFeedCard({ post }) {
+const PostFeedCard = forwardRef(({ post }, ref) => {
     const sessionToken = useSelector(userSessionToken)
     const toast = useToast()
     const { isOpen, onOpen, onClose } = useDisclosure()
     const queryClient = useQueryClient()
     const likeButtonColor = useColorModeValue('#6b46c1', '#d6bcfa')
 
-    const program = {
-        title: 'Heavy Gym Instruments Fitness Program',
-        steps: [
-            {
-                title: 'Step 1: Deadlift',
-                description: 'Use the barbell for deadlifting. Ensure your feet are shoulder-width apart, grip the bar just outside your knees, and lift the bar while keeping your back straight.',
-                gif: 'https://v2.exercisedb.io/image/ogjzsJ3u4sUljM',
-            },
-            {
-                title: 'Step 2: Squat',
-                description: 'Set the barbell on your upper back. Lower your body by bending your knees and hips, keeping your chest up, until your thighs are parallel to the ground.',
-                gif: 'https://v2.exercisedb.io/image/ogjzsJ3u4sUljM',
-            },
-            {
-                title: 'Step 3: Bench Press',
-                description: 'Lie flat on the bench, grip the barbell slightly wider than shoulder-width, and press the bar up and down with control.',
-                gif: 'https://v2.exercisedb.io/image/ogjzsJ3u4sUljM',
-            }
-        ]
-    }
-
     const { mutate: likePost } = useMutation(
         {
             mutationFn: async (postId) => {
@@ -196,176 +176,145 @@ function PostFeedCard({ post }) {
     )
 
     return (
-        <>
-            <Card maxW='lg'>
-                <CardHeader>
-                    <Flex spacing='4'>
-                        <Flex flex='1' gap='4' alignItems='center' flexWrap='wrap'>
-                            <Avatar
-                                size='sm'
-                                name={post.username}
-                            />
+        <Card maxW='lg'
+            ref={ref}
+        >
+            <Detailed_Training_Modal
+                isOpen={isOpen}
+                onClose={onClose}
+                data={post.trainingProgram}
+            />
+            <CardHeader>
+                <Flex spacing='4'>
+                    <Flex flex='1' gap='4' alignItems='center' flexWrap='wrap'>
+                        <Avatar
+                            size='sm'
+                            name={post.username}
+                        />
 
-                            <Box>
-                                <Heading size='sm'>
-                                    {post.username}
-                                </Heading>
-                                <Text
-                                    fontSize='sm'
-                                    color='gray.500'
-                                >
-                                    {
-                                        new Date(post.createdAt).toLocaleDateString(
-                                            'tr-TR',
-                                            {
-                                                month: 'long',
-                                                day: 'numeric',
-                                                year: 'numeric',
-                                            }
-                                        ) + ' at ' + new Date(post.createdAt).toLocaleTimeString(
-                                            'tr-TR',
-                                            {
-                                                hour: 'numeric',
-                                                minute: 'numeric',
-                                            }
-                                        )
-                                    }
-                                </Text>
-                            </Box>
-                        </Flex>
+                        <Box>
+                            <Heading size='sm'>
+                                {post.username}
+                            </Heading>
+                            <Text
+                                fontSize='sm'
+                                color='gray.500'
+                            >
+                                {
+                                    new Date(post.createdAt).toLocaleDateString(
+                                        'tr-TR',
+                                        {
+                                            month: 'long',
+                                            day: 'numeric',
+                                            year: 'numeric',
+                                        }
+                                    ) + ' at ' + new Date(post.createdAt).toLocaleTimeString(
+                                        'tr-TR',
+                                        {
+                                            hour: 'numeric',
+                                            minute: 'numeric',
+                                        }
+                                    )
+                                }
+                            </Text>
+                        </Box>
                     </Flex>
-                </CardHeader>
-                <CardBody
-                    sx={{
-                        '& > img': {
-                            borderRadius: 'md',
-                        },
+                </Flex>
+            </CardHeader>
+            <CardBody
+                sx={{
+                    '& > img': {
+                        borderRadius: 'md',
+                    },
+                }}
+                display='flex'
+                flexDirection='column'
+                gap='4'
+            >
+                <Text>
+                    {post.content}
+                </Text>
+                <Flex flexWrap='wrap' gap='2'>
+                    {
+                        post.tags.map((tag, index) => (
+                            <Badge
+                                key={index}
+                                colorScheme='purple'
+                                padding={"4px 6px"}
+                                borderRadius={6}
+                            >
+                                {tag}
+                            </Badge>
+                        ))
+                    }
+                </Flex>
+                {post.trainingProgram && (
+                    <Button colorScheme="purple" variant="outline" onClick={onOpen}>
+                        View Training Program
+                    </Button>
+                )}
+            </CardBody>
+            {
+                post.imageUrl && (
+                    <Image
+                        objectFit='contain'
+                        src={post.imageUrl}
+                        alt={post.content}
+                        maxHeight='400px'
+                    />
+                )
+            }
+
+            <CardFooter
+                justify='space-between'
+                flexWrap='wrap'
+                sx={{
+                    '& > button': {
+                        minW: '136px',
+                    },
+                }}
+            >
+                <Button flex='1' variant='ghost' leftIcon={
+                    <HeartIcon
+                        fill={
+                            post.isLiked ?
+                                likeButtonColor : 'none'
+                        }
+                    />
+                }
+                    colorScheme='purple'
+                    onClick={() => {
+                        if (post.isLiked) {
+                            unlikePost(post.id)
+                            return
+                        }
+
+                        likePost(post.id)
                     }}
-                    display='flex'
-                    flexDirection='column'
-                    gap='4'
                 >
-                    <Text>
-                        {post.content}
-                    </Text>
-                    <Flex flexWrap='wrap' gap='2'>
-                        {
-                            post.tags.map((tag, index) => (
-                                <Badge
-                                    key={index}
-                                    colorScheme='purple'
-                                    padding={"4px 6px"}
-                                    borderRadius={6}
-                                >
-                                    {tag}
-                                </Badge>
-                            ))
+                    {post.likeCount > 0 ? post.likeCount : 'Like'}
+                </Button>
+                <Button
+                    flex='1'
+                    variant='ghost'
+                    leftIcon={<BookmarkAddIcon />}
+                    onClick={() => {
+                        if (post.isSaved) {
+                            unsavePost(post.id)
+                            return
                         }
-                    </Flex>
-                    {post.trainingProgram && (
-                        <Button colorScheme="purple" variant="outline" onClick={onOpen}>
-                            View Training Program
-                        </Button>
-                    )}
-                </CardBody>
-                {
-                    post.imageUrl && (
-                        <Image
-                            objectFit='contain'
-                            src={post.imageUrl}
-                            alt={post.content}
-                            maxHeight='400px'
-                        />
-                    )
-                }
 
-                <CardFooter
-                    justify='space-between'
-                    flexWrap='wrap'
-                    sx={{
-                        '& > button': {
-                            minW: '136px',
-                        },
+                        savePost(post.id)
                     }}
                 >
-                    <Button flex='1' variant='ghost' leftIcon={
-                        <HeartIcon
-                            fill={
-                                post.isLiked ?
-                                    likeButtonColor : 'none'
-                            }
-                        />
+                    {
+                        post.bookmarked ?
+                            'Unsave' : 'Save'
                     }
-                        colorScheme='purple'
-                        onClick={() => {
-                            if (post.isLiked) {
-                                unlikePost(post.id)
-                                return
-                            }
-
-                            likePost(post.id)
-                        }}
-                    >
-                        {post.likeCount > 0 ? post.likeCount : 'Like'}
-                    </Button>
-                    <Button
-                        flex='1'
-                        variant='ghost'
-                        leftIcon={<BookmarkAddIcon />}
-                        onClick={() => {
-                            if (post.isSaved) {
-                                unsavePost(post.id)
-                                return
-                            }
-
-                            savePost(post.id)
-                        }}
-                    >
-                        {
-                            post.bookmarked ?
-                                'Unsave' : 'Save'
-                        }
-                    </Button>
-                </CardFooter>
-            </Card>
-            <Detailed_Training_Modal
-                isOpen={isOpen}
-                onClose={onClose}
-                data={post.trainingProgram}
-            />
-            {/* 
-            <Modal isOpen={isOpen} onClose={onClose} size="xl">
-                <ModalOverlay />
-                <ModalContent>
-                    <ModalHeader>{post.trainingProgram?.title}</ModalHeader>
-                    <ModalCloseButton />
-                    <ModalBody pb={6}>
-                        <Accordion allowToggle>
-                            {post.trainingProgram?.steps?.map((step, index) => (
-                                <AccordionItem key={index}>
-                                    <AccordionButton>
-                                        <Box flex="1" textAlign="left">
-                                            {step.title}
-                                        </Box>
-                                        <AccordionIcon />
-                                    </AccordionButton>
-                                    <AccordionPanel>
-                                        <Text mb={4}>{step.description}</Text>
-                                        <Image
-                                            src={step.gif}
-                                            alt={step.title}
-                                            boxSize="256px"
-                                            objectFit="cover"
-                                        />
-                                    </AccordionPanel>
-                                </AccordionItem>
-                            ))}
-                        </Accordion>
-                    </ModalBody>
-                </ModalContent>
-            </Modal> */}
-        </>
+                </Button>
+            </CardFooter>
+        </Card>
     )
-}
+})
 
 export default PostFeedCard
\ No newline at end of file
diff --git a/frontend/src/components/UserJoinedProgramsCard.component.jsx b/frontend/src/components/UserJoinedProgramsCard.component.jsx
index fd30bfd..a981e26 100644
--- a/frontend/src/components/UserJoinedProgramsCard.component.jsx
+++ b/frontend/src/components/UserJoinedProgramsCard.component.jsx
@@ -44,7 +44,7 @@ const UserJoinedProgramsCard = () => {
     const { data: joinedProgramsData, isLoading: joinedProgramsIsLoading } = useQuery({
         queryKey: ['joinedPrograms'],
         queryFn: async () => {
-            if (!user) {
+            if (!user || !sessionToken) {
                 return [];
             }
 
@@ -123,7 +123,7 @@ const UserJoinedProgramsCard = () => {
         );
     }
 
-    if (!user) {
+    if (!user || !sessionToken) {
         return (
             <Box textAlign="center" p={10}>
                 <Text color="gray.500" fontSize="xl">
diff --git a/frontend/src/context/PostContext.jsx b/frontend/src/context/PostContext.jsx
index 5343b4c..b0b266c 100644
--- a/frontend/src/context/PostContext.jsx
+++ b/frontend/src/context/PostContext.jsx
@@ -1,6 +1,6 @@
 import { createContext, useEffect, useState } from "react";
 import apiInstance from "../instance/apiInstance";
-import { useQuery } from "@tanstack/react-query";
+import { useQuery, useInfiniteQuery } from "@tanstack/react-query";
 import { useSelector } from "react-redux";
 import { userProfile, userPassword, userSessionToken } from "../context/user";
 
@@ -21,7 +21,13 @@ export const PostContext = createContext(
         recommendedPrograms: [],
         explorePrograms: [],
         forYouPosts: [],
+        fetchNextForYouPage: () => {},
+        hasMoreForYou: false,
+        isLoadingForYou: false,
         explorePosts: [],
+        fetchNextExplorePage: () => {},
+        hasMoreExplore: false,
+        isLoadingExplore: false,
     }
 )
 
@@ -102,7 +108,7 @@ export const PhaseContextProvider = ({ children }) => {
         isFetching: recommendedProgramsIsFetching,
         isLoading: recommendedProgramsIsLoading,
     } = useQuery({
-        queryKey: ['training-programs'],
+        queryKey: ['recommended-programs'],
         queryFn: async () => {
             const response = await apiInstance(sessionToken).get('/api/training-programs/recommended')
             return response.data
@@ -116,7 +122,7 @@ export const PhaseContextProvider = ({ children }) => {
         isFetching: exploreProgramsIsFetching,
         isLoading: exploreProgramsIsLoading,
     } = useQuery({
-        queryKey: ['training-programs'],
+        queryKey: ['explore-programs'],
         queryFn: async () => {
             const response = await apiInstance().get('/api/training-programs/explore')
             return response.data
@@ -126,30 +132,36 @@ export const PhaseContextProvider = ({ children }) => {
 
     const {
         data: forYouPostsData,
-        isFetching: forYouPostsIsFetching,
-        isLoading: forYouPostsIsLoading,
-    } = useQuery({
-        queryKey: ['posts'],
-        queryFn: async () => {
-            const response = await apiInstance(sessionToken).get('/api/posts/for-you')
-            return response.data
+        fetchNextPage: fetchNextForYouPage,
+        hasNextPage: hasMoreForYou,
+        isFetchingNextPage: isLoadingForYou,
+    } = useInfiniteQuery({
+        queryKey: ['forYouPosts'],
+        queryFn: async ({ pageParam = 0 }) => {
+            const response = await apiInstance(sessionToken).get(`/api/posts/for-you?page=${pageParam}&size=10`);
+            return response.data;
         },
-        refetchOnWindowFocus: false,
-        enabled: !!sessionToken
-    })
+        getNextPageParam: (lastPage) =>
+            lastPage.currentPage + 1 < lastPage.totalPages ? lastPage.currentPage + 1 : undefined,
+    }
+    );
 
+    // Infinite Query for "Explore" posts
     const {
         data: explorePostsData,
-        isFetching: explorePostsIsFetching,
-        isLoading: explorePostsIsLoading,
-    } = useQuery({
-        queryKey: ['posts'],
-        queryFn: async () => {
-            const response = await apiInstance().get('/api/posts/explore')
-            return response.data
+        fetchNextPage: fetchNextExplorePage,
+        hasNextPage: hasMoreExplore,
+        isFetchingNextPage: isLoadingExplore,
+    } = useInfiniteQuery({
+        queryKey: ['explorePosts'],
+        queryFn: async ({ pageParam = 0 }) => {
+            const response = await apiInstance().get(`/api/posts/explore?page=${pageParam}&size=10`);
+            return response.data;
         },
-        refetchOnWindowFocus: false
-    })
+        getNextPageParam: (lastPage) =>
+            lastPage.currentPage + 1 < lastPage.totalPages ? lastPage.currentPage + 1 : undefined,
+    }
+    );
 
     useEffect(() => {
         if (postsData && !postsIsFetching) {
@@ -177,33 +189,36 @@ export const PhaseContextProvider = ({ children }) => {
     }, [tagsData, tagsIsFetching])
 
     useEffect(() => {
-        if (recommendedProgramsData && !recommendedProgramsIsFetching) {
-            setRecommendedPrograms(recommendedProgramsData)
+        if (recommendedProgramsData && !recommendedProgramsIsLoading) {
+            setRecommendedPrograms(
+                recommendedProgramsData?.programs || []
+            )
         }
-    }, [recommendedProgramsData, recommendedProgramsIsFetching])
+    }, [recommendedProgramsData, recommendedProgramsIsLoading])
 
     useEffect(() => {
-        if (exploreProgramsData && !exploreProgramsIsFetching && recommendedProgramsData) {
-            // Map through the data and set the state. Explore programs are not user-specific not should not include recommendations
-            const explorePrograms = exploreProgramsData.filter(program => !recommendedProgramsData.some(recommendedProgram => recommendedProgram.id === program.id))
-
-            setExplorePrograms(explorePrograms)
+        if (exploreProgramsData && !exploreProgramsIsLoading) {
+            setExplorePrograms(
+                exploreProgramsData?.programs || []
+            )
         }
-    }, [exploreProgramsData, exploreProgramsIsFetching, recommendedProgramsData])
+    }, [exploreProgramsData, exploreProgramsIsLoading])
 
     useEffect(() => {
-        if (forYouPostsData && !forYouPostsIsFetching) {
-            setForYouPosts(forYouPostsData)
+        if (forYouPostsData && !isLoadingForYou) {
+            setForYouPosts(
+                forYouPostsData?.pages?.flatMap((page) => page.posts) || []
+            )
         }
-    }, [forYouPostsData, forYouPostsIsFetching])
+    }, [forYouPostsData, isLoadingForYou])
 
     useEffect(() => {
-        if (explorePostsData && !explorePostsIsFetching && forYouPostsData) {
-            const explorePosts = explorePostsData.filter(post => !forYouPostsData.some(forYouPost => forYouPost.id === post.id))
-
-            setExplorePosts(explorePosts)
+        if (explorePostsData && !isLoadingExplore) {
+            setExplorePosts(
+                explorePostsData?.pages?.flatMap((page) => page.posts) || []
+            )
         }
-    }, [explorePostsData, explorePostsIsFetching, forYouPostsData])
+    }, [explorePostsData, forYouPostsData, isLoadingExplore])
 
     return (
         <PostContext.Provider value={{
@@ -222,7 +237,13 @@ export const PhaseContextProvider = ({ children }) => {
             recommendedPrograms,
             explorePrograms,
             forYouPosts,
+            fetchNextForYouPage,
+            hasMoreForYou,
+            isLoadingForYou,
             explorePosts,
+            fetchNextExplorePage,
+            hasMoreExplore,
+            isLoadingExplore,
         }}>
             {children}
         </PostContext.Provider>