fix post feed bugs

archive/frontend/src/components/PostFeed,component.jsx

@@ -17,8 +17,6 @@ import PostFeedCard from './PostFeedCard.component'
 function PostFeed() {
     const { posts, isLoadingPosts, isFetchingPosts } = useContext(PostContext)
 
-    console.log(posts)
-
     return (
         <Box
             w="full"

frontend/src/components/Detailed_Ex_Modal.component.jsx

@@ -112,6 +112,16 @@ const DetailedExModal = ({ isOpen, onClose, data, setData, excersizeID }) => {
                         queryKey: ['joinedPrograms']
                     }
                 )
+                queryClient.invalidateQueries(
+                    {
+                        queryKey: ['explore-programs']
+                    }
+                )
+                queryClient.invalidateQueries(
+                    {
+                        queryKey: ['recommended-programs']
+                    }
+                )
             }
         },
     )

frontend/src/components/PostFeed.component.jsx

@@ -17,6 +17,8 @@ import UserJoinedProgramsCard from './UserJoinedProgramsCard.component'
 import { useRef } from 'react';
 import { useSelector } from 'react-redux';
 import { userSessionToken } from '../context/user';
+import { useEffect } from 'react';
+import { useState } from 'react';
 
 function PostFeed() {
     const { 
@@ -35,14 +37,22 @@ function PostFeed() {
         isLoadingExplore,
     } = useContext(PostContext);
 
-    const { user } = useContext(UserContext);
+    const { user, joinedPrograms } = useContext(UserContext);
+    const [ongoingJoinedPrograms, setOngoingJoinedPrograms] = useState([]);
     const sessionToken = useSelector(userSessionToken);
 
     const isLoading = isLoadingPosts || isFetchingPrograms;
 
     const observerForYou = useRef();
     const observerExplore = useRef();
 
+    useEffect(() => {
+        if (joinedPrograms.length > 0) {
+            const ongoingPrograms = joinedPrograms.filter((program) => program.status === 'ONGOING');
+            setOngoingJoinedPrograms(ongoingPrograms);
+        }
+    }, [joinedPrograms]);
+
     // Observer for "For You" posts
     const lastForYouPostRef = (node) => {
         if (isLoadingForYou) return;
@@ -89,7 +99,7 @@ function PostFeed() {
                     })
                 }
             >
-                {programs.length > 0 && (
+                {ongoingJoinedPrograms.length > 0 && user && (
                     <Box>
                         <Heading size="lg" mb={4}>Your Active Programs:</Heading>
                         <UserJoinedProgramsCard />

frontend/src/components/ProgramCard.component.jsx

@@ -98,11 +98,6 @@ const ProgramCard = () => {
         }
     }, [programData]);
 
-    // Log the programs
-    useEffect(() => {
-        console.log(program);
-    }, [program]);
-
     // Handle complete exercise
     const { mutate: completeExercise } = useMutation({
         mutationFn: async (exerciseId) => {
@@ -119,7 +114,6 @@ const ProgramCard = () => {
     const handleCheckboxChange = (index, step) => {
         const newCompletedSteps = [...completedSteps];
         newCompletedSteps[index] = true;
-        console.log(step)
         completeExercise(step.id);
         setCompletedSteps(newCompletedSteps);
 

frontend/src/components/ProgramFeedCard.component.jsx

@@ -19,7 +19,7 @@ import FeedbackModal from './FeedbackModal.component';
 import { ViewIcon } from '@chakra-ui/icons';
 // import { useNavigate } from 'react-router-dom';
 import { useNavigate } from '@tanstack/react-router'
-import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { useContext } from 'react'
 import { useSelector } from 'react-redux'
 import { userProfile, userPassword, userSessionToken } from '../context/user'
@@ -34,7 +34,6 @@ import { useDisclosure } from '@chakra-ui/react';
 function ProgramFeedCard({
     program
 }) {
-
     const { isOpen, onOpen, onClose } = useDisclosure();
     const {
         isOpen: isFeedbackOpen,
@@ -45,11 +44,14 @@ function ProgramFeedCard({
     const sessionToken = useSelector(userSessionToken)
     const toast = useToast()
     const queryClient = useQueryClient()
+    const [isProgramCompleted, setIsProgramCompleted] = useState(false)
+    const [programWithTracking, setProgramWithTracking] = useState(program)
 
     const {
         followers,
         following,
         user,
+        joinedPrograms,
     } = useContext(UserContext)
 
     const [isProgramOwnerFollowed, setIsProgramOwnerFollowed] = useState(
@@ -63,6 +65,15 @@ function ProgramFeedCard({
             .map((joinedProgram) => joinedProgram.id).includes(program.id)
     )
 
+    useEffect(() => {
+        if (user && joinedPrograms) {
+            // Check the ongoing programs
+            const isProgramCompleted = programWithTracking.status === 'COMPLETED'
+
+            setIsProgramCompleted(isProgramCompleted)
+        }
+    }, [user, joinedPrograms])
+
     useEffect(() => {
         if (user && following) {
             setIsProgramOwnerFollowed(following.includes(program.trainer))
@@ -71,11 +82,7 @@ function ProgramFeedCard({
 
     useEffect(() => {
         if (user && user.joinedPrograms) {
-            setIsUserJoined(user.joinedPrograms
-                .filter(
-                    (joinedProgram) => joinedProgram.status !== 'LEFT'
-                )
-                .map((joinedProgram) => joinedProgram.id).includes(program.id))
+            setIsUserJoined(programWithTracking.status !== 'LEFT')
         }
     }, [user])
 
@@ -183,6 +190,9 @@ function ProgramFeedCard({
                 queryClient.invalidateQueries({
                     queryKey: ['user']
                 })
+                queryClient.invalidateQueries({
+                    queryKey: ['joinedPrograms']
+                })
             },
             onError: (error) => {
                 console.log(error)
@@ -229,6 +239,9 @@ function ProgramFeedCard({
                 queryClient.invalidateQueries({
                     queryKey: ['user']
                 })
+                queryClient.invalidateQueries({
+                    queryKey: ['joinedPrograms']
+                })
             },
             onError: (error) => {
                 console.log(error)
@@ -242,6 +255,26 @@ function ProgramFeedCard({
         }
     )
 
+    const {
+        data: programData,
+        isLoading: programIsLoading,
+    } = useQuery({
+        queryKey: ['training-programs', program.id],
+        queryFn: async () => {
+            const response = await apiInstance(sessionToken).get(`api/training-programs/tracking/${program.id}`)
+
+            return response.data
+        },
+        refetchOnWindowFocus: false,
+    })
+
+    useEffect(() => {
+        if (programData && !programIsLoading) {
+            console.log(programData)
+            setProgramWithTracking(programData)
+        }
+    }, [programData])
+
     const navigate = useNavigate()
     const handleStartPracticing = (program_id) => {
         navigate(
@@ -343,13 +376,6 @@ function ProgramFeedCard({
                         {program.description}
                     </Text>
 
-                    {/* <Text>
-                        {program.exercises.map((exercise) => (
-                            <li key={exercise.id}>
-                                {exercise.name} - {exercise.exerciseDetail.sets} sets of {exercise.exerciseDetail.repetitions} reps for {exercise.muscleGroup.toLowerCase()}
-                            </li>
-                        ))}
-                    </Text> */}
                     <Button
                         onClick={onOpen}
                         colorScheme="gray"
@@ -376,7 +402,9 @@ function ProgramFeedCard({
                         <Tooltip
                             label={
                                 user && program.trainer === user.username ? null : (
-                                    isUserJoined ? 'Leave the program' : 'Join the program'
+                                    isUserJoined ? (
+                                        isProgramCompleted ? 'You have completed this program. Click to rejoin' : 'Leave the program'
+                                    ) : 'Join the program'
                                 )
                             }
                         >
@@ -389,8 +417,10 @@ function ProgramFeedCard({
                                     if (user) {
                                         if (!isUserJoined) {
                                             joinProgram(program.id)
-                                        } else {
+                                        } else if (isUserJoined && !isProgramCompleted) {
                                             unjoinProgram(program.id)
+                                        } else if (isUserJoined && isProgramCompleted) {
+                                            joinProgram(program.id)
                                         }
                                     } else {
                                         toast({
@@ -409,13 +439,15 @@ function ProgramFeedCard({
                             >
                                 {
                                     user && program.trainer === user.username ? 'You are the trainer' : (
-                                        isUserJoined ? 'Joined' : 'Join'
+                                        isUserJoined ? (
+                                            isProgramCompleted ? 'Completed' : 'Leave'
+                                        ) : 'Join'
                                     )
                                 }
                             </Button>
                         </Tooltip>
 
-                        {isUserJoined && user && program.trainer !== user.username && (
+                        {isUserJoined && user && program.trainer !== user.username && !isProgramCompleted && (
                             <Flex gap={2} flex="1">
                                 <Button
                                     flex='1'

frontend/src/components/RegisterComponent.component.jsx

@@ -73,7 +73,6 @@ export default function RegisterComponent() {
 
     const handleUserRegister = async () => {
         try {
-            console.log(username, email, password, role, level, interestAreas)
             const response = await apiInstance().post(
                 "auth/register",
                 {

frontend/src/components/Training.component.jsx

@@ -207,13 +207,9 @@ const TrainingCard = () => {
 
                 if (user) {
                     const joinedProgramsResponse = await apiInstance(sessionToken).get(
-                        `/api/training-programs/joined/${user.username}`
-                    );
-                    // console.log(joinedProgramsResponse);
-                    // Get the current program if the user has joined
-                    const joinedProgram = joinedProgramsResponse.data.find(
-                        (program) => program.id === parseInt(programID)
+                        `/api/training-programs/ongoing/${programID}`
                     );
+                    const joinedProgram = joinedProgramsResponse.data;
 
                     setIsUserJoined(joinedProgram ? true : false);
                     setError(null);

frontend/src/components/UserJoinedProgramsCard.component.jsx

@@ -15,7 +15,8 @@ import {
     VStack,
     Heading,
     Spinner,
-    useToast
+    useToast,
+    Link
 } from '@chakra-ui/react';
 import Detailed_Ex_Modal from './Detailed_Ex_Modal.component';
 import { useDisclosure } from '@chakra-ui/react';
@@ -44,7 +45,7 @@ const UserJoinedProgramsCard = () => {
     const { data: joinedProgramsData, isLoading: joinedProgramsIsLoading } = useQuery({
         queryKey: ['joinedPrograms'],
         queryFn: async () => {
-            if (!user || !sessionToken) {
+            if (!user || !sessionToken || !user.username) {
                 return [];
             }
 
@@ -149,7 +150,9 @@ const UserJoinedProgramsCard = () => {
                 Your Active Programs
             </Heading> */}
 
-            {joinedPrograms.map((program) => {
+            {joinedPrograms
+            .filter(program => program.status === 'ONGOING')
+            .map((program) => {
                 // Find the first uncompleted exercise to determine week and workout
                 let firstUncompletedExercise = null;
                 program.weeks.some(week =>
@@ -177,7 +180,9 @@ const UserJoinedProgramsCard = () => {
                         <Heading size="md" mb={4} color="gray.700" display="flex" alignItems="flex-start" gap={3}
                             flexDirection={"column"}
                         >
-                            {program.title}
+                            <Link href={`/training?trainingId=${program.id}`}>
+                                {program.title}
+                            </Link>
                             <div className="flex space-x-2">
                                 <span className="inline-flex items-center px-2 py-1 text-sm font-medium text-blue-800 bg-blue-100 rounded">
                                     <StarIcon className="w-4 h-4 mr-1" />

frontend/src/components/profilePage.component.jsx

@@ -11,6 +11,7 @@ import {
     Divider,
     Button,
     Center,
+    Badge
 } from '@chakra-ui/react';
 import { useContext } from "react";
 import { UserContext } from "../context/UserContext";
@@ -24,7 +25,7 @@ import TrainerProgramCard from './TrainerProgramCard.component.jsx';
 export default function ProfilePage() {
     const username = useSelector(userName);
     const profile = useSelector(userProfile);
-    const { user, followers, following, posts, programs, progressDataForAllPrograms, joinedPrograms } = useContext(UserContext);
+    const { user, followers, following, posts, programs, progressDataForAllPrograms, joinedPrograms, fitnessGoals } = useContext(UserContext);
     const { bookmarkedPosts, isLoadingBookmarks } = useContext(PostContext);
     const [view, setView] = useState('posts');
 
@@ -43,6 +44,23 @@ export default function ProfilePage() {
                 <Text color="gray.500" mt={2}>
                     {user.role || "Add a bio to tell people about yourself."}
                 </Text>
+                {/* 
+                    Show fitness goals if user has any
+                */}
+                {fitnessGoals.length > 0 && (
+                    <>
+                        <Text mt={4} fontSize="lg" fontWeight="bold">
+                            Fitness Goals
+                        </Text>
+                        <Stack direction="row" mt={4}>
+                            {fitnessGoals.map((goal) => (
+                                <Badge key={goal} colorScheme="teal">
+                                    {goal}
+                                </Badge>
+                            ))}
+                        </Stack>
+                    </>
+                )}
                 <Flex mt={4} justify="center" gap={8}>
                     <Stack textAlign="center">
                         <Text fontSize="sm" color="gray.600">Followers</Text>