workouts

frontend/app/home.tsx

@@ -1,35 +1,40 @@
 import { TouchableOpacity, Text, SafeAreaView } from 'react-native';
 import { Stack, useRouter } from 'expo-router';
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import ProfileButton from '../components/ProfileButton';
 import styles from '../styles';
 import Card from '../components/Card';
 import AddCard from '../components/AddCard';
 import HorizontalScrollView from '../components/HorizontalScollView';
 import customFetch from '../customFetch';
+import { useFocusEffect } from '@react-navigation/native';
 
 const HomeScreen = () => {
   const router = useRouter();
   const [workouts, setWorkouts] = useState([]);
 
-  useEffect(() => {
-    const fetchWorkouts = async () => {
-      try {
-        const response = await customFetch(
-          'http://192.168.178.79:3000/workouts/workouts',
-        );
-        if (!response.ok) {
-          throw new Error('Failed to fetch workouts');
+  useFocusEffect(
+    React.useCallback(() => {
+      const fetchWorkouts = async () => {
+        try {
+          const response = await customFetch(
+            'http://192.168.178.79:3000/workouts/workouts',
+          );
+          if (!response.ok) {
+            throw new Error('Failed to fetch workouts');
+          }
+          const data = await response.json();
+          setWorkouts(data.data);
+        } catch (error) {
+          console.error(error);
         }
-        const data = await response.json();
-        setWorkouts(data.data);
-      } catch (error) {
-        console.error(error);
-      }
-    };
+      };
 
-    fetchWorkouts();
-  }, []);
+      fetchWorkouts();
+
+      return () => {};
+    }, []),
+  );
 
   return (
     <>
@@ -41,7 +46,10 @@ const HomeScreen = () => {
         }}
       />
       <SafeAreaView style={styles.container}>
-        <HorizontalScrollView title="Workouts">
+        <HorizontalScrollView
+          title="Workouts"
+          showAllAction={() => router.navigate('workouts')}
+        >
           {workouts.map((workout, index) => (
             <TouchableOpacity
               onPress={() => router.navigate(`/workout/${workout._id}`)}

frontend/app/workout/[id].tsx

@@ -1,6 +1,6 @@
 import { useLocalSearchParams } from 'expo-router';
 import React, { useEffect, useState } from 'react';
-import { SafeAreaView, Text } from 'react-native';
+import { SafeAreaView, Text, TouchableOpacity } from 'react-native';
 import styles from '../../styles';
 import ExerciseCard from '../../components/ExerciseCard';
 import HorizontalScrollView from '../../components/HorizontalScollView';
@@ -38,6 +38,9 @@ const WorkoutPage = () => {
           <ExerciseCard key={index} exercise={exercise} />
         ))}
       </HorizontalScrollView>
+      <TouchableOpacity style={styles.buttonContainer}>
+        <Text style={styles.buttonText}>Start Workout</Text>
+      </TouchableOpacity>
     </SafeAreaView>
   );
 };

frontend/app/workout/create.tsx

@@ -12,6 +12,7 @@ const CreateWorkout = () => {
   const router = useRouter();
   const [name, setName] = useState('');
   const [exercises, setExercises] = useState([]);
+  const [selectedExercise, setSelectedExercise] = useState(null);
   const [modalVisible, setModalVisible] = useState(false);
 
   const handleSubmit = async () => {
@@ -45,10 +46,30 @@ const CreateWorkout = () => {
   };
 
   const handleAddExercise = (exercise) => {
+    if (selectedExercise) {
+      handleUpdateExercise(exercise);
+      return;
+    }
     setExercises([...exercises, exercise]);
     setModalVisible(false);
   };
 
+  const handleUpdateExercise = (updatedExercise) => {
+    setExercises(
+      exercises.map((exercise) =>
+        exercise.id === updatedExercise.id ? updatedExercise : exercise,
+      ),
+    );
+    setSelectedExercise(null);
+    setModalVisible(false);
+  };
+
+  const handleExerciseClick = (exercise) => {
+    // console.log(exercise);
+    setSelectedExercise(exercise);
+    setModalVisible(true);
+  };
+
   return (
     <SafeAreaView style={styles.container}>
       <Text style={styles.title}>Create a New Workout</Text>
@@ -60,7 +81,12 @@ const CreateWorkout = () => {
       />
       <HorizontalScrollView title="Exercises">
         {exercises.map((exercise, index) => (
-          <ExerciseCard key={index} exercise={exercise} />
+          <TouchableOpacity
+            key={index}
+            onPress={() => handleExerciseClick(exercise)}
+          >
+            <ExerciseCard exercise={exercise} />
+          </TouchableOpacity>
         ))}
         <TouchableOpacity onPress={() => setModalVisible(true)}>
           <AddCard />
@@ -73,6 +99,7 @@ const CreateWorkout = () => {
         modalVisible={modalVisible}
         onClose={() => setModalVisible(false)}
         onAddExercise={handleAddExercise}
+        exercise={selectedExercise}
       />
     </SafeAreaView>
   );

frontend/components/AddExerciseModal.tsx

@@ -1,13 +1,24 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Modal, Text, TextInput, TouchableOpacity } from 'react-native';
 import styles from '../styles';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import NumericInput from './NumericInput';
 
-const AddExerciseModal = ({ modalVisible, onClose, onAddExercise }) => {
-  const [exerciseName, setExerciseName] = useState('');
-  const [reps, setReps] = useState(12);
-  const [sets, setSets] = useState(3);
+const AddExerciseModal = ({
+  modalVisible,
+  onClose,
+  onAddExercise,
+  exercise,
+}) => {
+  const [exerciseName, setExerciseName] = useState(exercise?.name ?? null);
+  const [reps, setReps] = useState(exercise?.reps ?? 12);
+  const [sets, setSets] = useState(exercise?.sets ?? 3);
+
+  useEffect(() => {
+    setExerciseName(exercise?.exercise.name || '');
+    setReps(exercise?.reps || 12);
+    setSets(exercise?.sets || 3);
+  }, [exercise]);
 
   return (
     <Modal
@@ -23,16 +34,8 @@ const AddExerciseModal = ({ modalVisible, onClose, onAddExercise }) => {
           value={exerciseName}
           onChangeText={setExerciseName}
         />
-        <NumericInput
-          title="Reps"
-          initialValue={12}
-          onChange={setReps}
-        ></NumericInput>
-        <NumericInput
-          title="Sets"
-          initialValue={3}
-          onChange={setSets}
-        ></NumericInput>
+        <NumericInput title="Reps" value={reps} onChange={setReps} />
+        <NumericInput title="Sets" value={sets} onChange={setSets} />
         <TouchableOpacity
           style={styles.buttonContainer}
           onPress={() =>

frontend/components/HorizontalScollView.tsx

@@ -1,11 +1,29 @@
 import React from 'react';
-import { ScrollView, View, Text } from 'react-native';
+import { ScrollView, View, Text, TouchableOpacity } from 'react-native';
+
 import styles from '../styles';
 
-const HorizontalScrollView = ({ title, children }) => {
+interface HorizontalScrollViewProps {
+  title: string;
+  children: React.ReactNode;
+  showAllAction?: () => void;
+}
+
+const HorizontalScrollView: React.FC<HorizontalScrollViewProps> = ({
+  title,
+  children,
+  showAllAction,
+}) => {
   return (
     <View style={styles.container}>
-      <Text style={styles.subtitile}>{title}</Text>
+      <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+        <Text style={styles.subtitile}>{title}</Text>
+        {showAllAction && (
+          <TouchableOpacity onPress={showAllAction}>
+            <Text style={styles.subtitile}>Show all</Text>
+          </TouchableOpacity>
+        )}
+      </View>
       <ScrollView
         horizontal
         showsHorizontalScrollIndicator={false}

frontend/components/NumericInput.tsx

@@ -1,29 +1,18 @@
-import React, { useState } from 'react';
 import { View, Text, TouchableOpacity } from 'react-native';
 import { MaterialIcons } from '@expo/vector-icons';
 import styles from '../styles';
 
-const NumericInput = ({
-  title,
-  initialValue,
-  onChange,
-  min = 0,
-  max = 100,
-}) => {
-  const [value, setValue] = useState(initialValue);
-
+const NumericInput = ({ title, value, onChange, min = 0, max = 100 }) => {
   const handleMinus = () => {
     if (value > min) {
       const newValue = value - 1;
-      setValue(newValue);
       onChange(newValue);
     }
   };
 
   const handlePlus = () => {
     if (value < max) {
       const newValue = value + 1;
-      setValue(newValue);
       onChange(newValue);
     }
   };

http-requests/workouts.http

@@ -13,7 +13,7 @@ GET {{baseUrl}}/workouts/exercises
 
 ###
 
-GET {{baseUrl}}/workouts/exercises?filter=bench
+GET {{baseUrl}}/workouts/exercises
 
 ###
 # @name create_workout