Merge pull request #366 from bounswe/issue#365

Add explore and for you posts

frontend/src/components/PostFeed.component.jsx

@@ -6,15 +6,16 @@ import {
     Stack,
     Text,
     Spinner,
-    useBreakpointValue, VStack
+    useBreakpointValue, VStack,
+    Tabs, TabList, TabPanels, Tab, TabPanel
 } from '@chakra-ui/react';
 import { PostContext } from '../context/PostContext';
 import PostFeedCard from './PostFeedCard.component';
 import ProgramFeedCard from './ProgramFeedCard.component';
 import UserJoinedProgramsCard from './UserJoinedProgramsCard.component'
 
 function PostFeed() {
-    const { posts, isLoadingPosts, programs, isFetchingPrograms } = useContext(PostContext);
+    const { posts, isLoadingPosts, programs, isFetchingPrograms, recommendedPrograms, explorePrograms, forYouPosts, explorePosts } = useContext(PostContext);
 
     const isLoading = isLoadingPosts || isFetchingPrograms;
 
@@ -40,19 +41,6 @@ function PostFeed() {
                     })
                 }
             >
-                {/* Today's Programs */}
-                {/* {programs.length > 0 && (
-                    <Box
-                    // borderRadius="md"
-                    // p={4}
-                    // bg="gray.50"
-                    // boxShadow="sm"
-                    >
-                        <Heading size="lg" mb={4}>Your Progress Today</Heading>
-                        <ProgressToday />
-                    </Box>
-                )} */}
-
                 {programs.length > 0 && (
                     <Box>
                         <Heading size="lg" mb={4}>Your Active Programs:</Heading>
@@ -67,37 +55,76 @@ function PostFeed() {
                     width={'full'} // Full width on small screens, larger on desktop
                 >
                     <Heading size="lg" mb={4}>Recommended Programs</Heading>
-                    {programs.length > 0 ? (
+                    {recommendedPrograms.length > 0 ? (
                         programs.map((program) => (
                             <ProgramFeedCard program={program} key={program.id} />
                         ))
                     ) : (
                         <Text>No programs to recommend right now.</Text>
                     )}
                 </Box>
-            </VStack>
 
-            {/* Main Feed */}
-            <Box
-                flex={{ base: 'none', lg: '2' }} // Full width on small screens, larger on desktop
-                maxW={{ base: '100%', lg: '2xl' }} // Responsive max width
-            >
-                <Stack spacing={6}>
-                    <Heading size="lg">Your Feed</Heading>
-                    {isLoading ? (
-                        <Flex justify="center" align="center">
-                            <Spinner />
-                            <Text>Loading Content...</Text>
-                        </Flex>
-                    ) : posts.length > 0 ? (
-                        posts.map((post) => (
-                            <PostFeedCard post={post} key={post.id} />
+                {/* Explore Programs */}
+                <Box
+                    borderRadius="md"
+                    p={4}
+                    boxShadow="sm"
+                    width={'full'} // Full width on small screens, larger on desktop
+                >
+                    <Heading size="lg" mb={4}>Explore Programs</Heading>
+                    {explorePrograms.length > 0 ? (
+                        programs.map((program) => (
+                            <ProgramFeedCard program={program} key={program.id} />
                         ))
                     ) : (
-                        <Text>Nothing to show here...</Text>
+                        <Text>No programs to explore right now.</Text>
                     )}
-                </Stack>
-            </Box>
+                </Box>
+            </VStack>
+
+            {/* 
+                Tabs for different types of posts. Explore and For You
+            */}
+            {
+                isLoading ? (
+                    <Spinner size="xl" />
+                ) : (
+                    <Box
+                        flex={{ base: 'none', lg: '1' }} // Full width on small screens, larger on desktop
+                        maxW={{ base: '100%', lg: '2xl' }} // Responsive max width
+                    >
+                        <Tabs isFitted
+                            colorScheme='purple'
+                        >
+                            <TabList mb={4}
+                            >
+                                <Tab>For You</Tab>
+                                <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>
+                        </Tabs>
+                    </Box>
+                )
+            }
         </Flex>
     );
 }

frontend/src/context/PostContext.jsx

@@ -18,6 +18,10 @@ export const PostContext = createContext(
         bookmarkedPosts: [],
         isLoadingBookmarks: false,
         isFetchingBookmarks: false,
+        recommendedPrograms: [],
+        explorePrograms: [],
+        forYouPosts: [],
+        explorePosts: [],
     }
 )
 
@@ -26,6 +30,10 @@ export const PhaseContextProvider = ({ children }) => {
     const [programs, setPrograms] = useState([])
     const [bookmarkedPosts, setBookmarkedPosts] = useState([])
     const [tags, setTags] = useState([])
+    const [recommendedPrograms, setRecommendedPrograms] = useState([])
+    const [explorePrograms, setExplorePrograms] = useState([])
+    const [forYouPosts, setForYouPosts] = useState([])
+    const [explorePosts, setExplorePosts] = useState([])
 
     const sessionToken = useSelector(userSessionToken)
 
@@ -89,6 +97,60 @@ export const PhaseContextProvider = ({ children }) => {
         refetchOnWindowFocus: false
     })
 
+    const {
+        data: recommendedProgramsData,
+        isFetching: recommendedProgramsIsFetching,
+        isLoading: recommendedProgramsIsLoading,
+    } = useQuery({
+        queryKey: ['training-programs'],
+        queryFn: async () => {
+            const response = await apiInstance(sessionToken).get('/api/training-programs/recommended')
+            return response.data
+        },
+        refetchOnWindowFocus: false,
+        enabled: !!sessionToken
+    })
+
+    const {
+        data: exploreProgramsData,
+        isFetching: exploreProgramsIsFetching,
+        isLoading: exploreProgramsIsLoading,
+    } = useQuery({
+        queryKey: ['training-programs'],
+        queryFn: async () => {
+            const response = await apiInstance().get('/api/training-programs/explore')
+            return response.data
+        },
+        refetchOnWindowFocus: false
+    })
+
+    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
+        },
+        refetchOnWindowFocus: false,
+        enabled: !!sessionToken
+    })
+
+    const {
+        data: explorePostsData,
+        isFetching: explorePostsIsFetching,
+        isLoading: explorePostsIsLoading,
+    } = useQuery({
+        queryKey: ['posts'],
+        queryFn: async () => {
+            const response = await apiInstance().get('/api/posts/explore')
+            return response.data
+        },
+        refetchOnWindowFocus: false
+    })
+
     useEffect(() => {
         if (postsData && !postsIsFetching) {
             // Order posts by createdAt date
@@ -114,6 +176,35 @@ export const PhaseContextProvider = ({ children }) => {
         }
     }, [tagsData, tagsIsFetching])
 
+    useEffect(() => {
+        if (recommendedProgramsData && !recommendedProgramsIsFetching) {
+            setRecommendedPrograms(recommendedProgramsData)
+        }
+    }, [recommendedProgramsData, recommendedProgramsIsFetching])
+
+    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)
+        }
+    }, [exploreProgramsData, exploreProgramsIsFetching, recommendedProgramsData])
+
+    useEffect(() => {
+        if (forYouPostsData && !forYouPostsIsFetching) {
+            setForYouPosts(forYouPostsData)
+        }
+    }, [forYouPostsData, forYouPostsIsFetching])
+
+    useEffect(() => {
+        if (explorePostsData && !explorePostsIsFetching && forYouPostsData) {
+            const explorePosts = explorePostsData.filter(post => !forYouPostsData.some(forYouPost => forYouPost.id === post.id))
+
+            setExplorePosts(explorePosts)
+        }
+    }, [explorePostsData, explorePostsIsFetching, forYouPostsData])
+
     return (
         <PostContext.Provider value={{
             posts,
@@ -127,7 +218,11 @@ export const PhaseContextProvider = ({ children }) => {
             isFetchingBookmarks: bookmarksIsFetching,
             tags: tags,
             isLoadingTags: tagsIsLoading,
-            isFetchingTags: tagsIsFetching
+            isFetchingTags: tagsIsFetching,
+            recommendedPrograms,
+            explorePrograms,
+            forYouPosts,
+            explorePosts,
         }}>
             {children}
         </PostContext.Provider>