Created separate JoinedProgramDetail to differentiate between details…

… of unjoined program and joined program
bounswe · Dec 14, 2024 · 1ebd187 · 1ebd187
1 parent ebc25be
commit 1ebd187
Show file tree

Hide file tree

Showing 4 changed files with 170 additions and 6 deletions.
diff --git a/mobile/App.js b/mobile/App.js
@@ -20,6 +20,7 @@ import WorkoutDetails from './components/WorkoutDetails';
 import JoinedWorkout from './components/JoinedWorkout';
 import JoinedWeek from './components/JoinedWeek';
 import JoinedExercise from './components/JoinedExercise';
+import JoinedProgramDetail from './components/JoinedProgramDetail';
 
 import { Provider as ReduxProvider } from 'react-redux';
 import {
@@ -78,6 +79,8 @@ const App = () => {
                 <Stack.Screen name="JoinedWeek" component={JoinedWeek} />
                 <Stack.Screen name="JoinedWorkout" component={JoinedWorkout} />
                 <Stack.Screen name="JoinedExercise" component={JoinedExercise} />
+                <Stack.Screen name="JoinedProgramDetail" component={JoinedProgramDetail} />
+
               </Stack.Navigator>
             </NavigationContainer>
           </AuthProvider>

diff --git a/mobile/components/JoinedProgramDetail.js b/mobile/components/JoinedProgramDetail.js
@@ -0,0 +1,164 @@
+import React,{useState} from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  FlatList,
+  ScrollView,
+} from 'react-native';
+
+const JoinedProgramDetail = ({ route }) => {
+  const {
+    trainerUsername,
+    title,
+    description,
+    programId,
+    weeks,
+    rating,
+    level,
+    date,
+    participants,
+    navigation
+  } = route.params;
+  const {expandedState,setExpandedState} = useState(0);
+  const renderWeek = ({ item, index }) => {
+    const workoutCount = item.workouts.length;
+    return (
+      <View style={styles.weekContainer}>
+        <Text style={styles.weekTitle}>Week {index + 1}</Text>
+        <Text style={styles.workoutCount}>{workoutCount} Workouts</Text>
+        <TouchableOpacity style={styles.startButton} onPress = {()=>{navigation.navigate("JoinedWeek",{programId,programTitle:title,weekId:item.id,weekNumber:item.weekNumber,workouts:item.workouts, navigation:navigation})}}>
+          <Text style={styles.startButtonText}>Start Workout</Text>
+        </TouchableOpacity>
+        <Text style={styles.completionText}>0%</Text>
+      </View>
+    );
+  };
+
+  return (
+    <ScrollView style={styles.container}>
+      <Text style={styles.title}>{title}</Text>
+      <View style={styles.detailsContainer}>
+        <Text style={styles.level}>Level: {level}</Text>
+        <Text style={styles.type}>Type: BODY_BUILDING</Text>
+        <Text style={styles.trainer}>Trainer: {trainerUsername}</Text>
+        <Text style={styles.date}>Created @ {date}</Text>
+      </View>
+      <Text style={styles.description}>{description}</Text>
+      <Text style={styles.rating}>Rating: {rating}/5 (0 ratings)</Text>
+
+      <FlatList
+        data={weeks}
+        renderItem={renderWeek}
+        keyExtractor={(item, index) => index.toString()}
+      />
+
+      <TouchableOpacity style={styles.commitButton}>
+        <Text style={styles.commitButtonText}>Commit to Program</Text>
+      </TouchableOpacity>
+
+      <TouchableOpacity style={styles.detailButton} onPress = {()=>navigation.navigate("WorkoutDetails",{weeks,navigation})}>
+        <Text style={styles.detailButtonText}>Show Detailed Description</Text>
+      </TouchableOpacity>
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 16,
+    backgroundColor: '#fff',
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    marginBottom: 16,
+    textAlign: 'center',
+  },
+  detailsContainer: {
+    marginBottom: 16,
+  },
+  level: {
+    fontSize: 14,
+    color: 'orange',
+  },
+  type: {
+    fontSize: 14,
+    color: 'blue',
+  },
+  trainer: {
+    fontSize: 14,
+    color: 'red',
+  },
+  date: {
+    fontSize: 12,
+    color: 'gray',
+  },
+  description: {
+    fontSize: 16,
+    marginVertical: 8,
+  },
+  rating: {
+    fontSize: 16,
+    marginBottom: 16,
+    textAlign: 'center',
+  },
+  weekContainer: {
+    backgroundColor: '#f9f9f9',
+    padding: 16,
+    marginBottom: 8,
+    borderRadius: 8,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  weekTitle: {
+    fontSize: 16,
+    fontWeight: 'bold',
+  },
+  workoutCount: {
+    fontSize: 14,
+    color: 'gray',
+  },
+  startButton: {
+    backgroundColor: '#007bff',
+    paddingVertical: 8,
+    paddingHorizontal: 16,
+    borderRadius: 4,
+  },
+  startButtonText: {
+    color: '#fff',
+    fontSize: 14,
+  },
+  completionText: {
+    fontSize: 14,
+    color: 'green',
+  },
+  commitButton: {
+    backgroundColor: 'green',
+    padding: 16,
+    borderRadius: 8,
+    alignItems: 'center',
+    marginTop: 16,
+  },
+  commitButtonText: {
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: 'bold',
+  },
+  detailButton: {
+    backgroundColor: 'gray',
+    padding: 16,
+    borderRadius: 8,
+    alignItems: 'center',
+    marginTop: 8,
+  },
+  detailButtonText: {
+    color: '#fff',
+    fontSize: 16,
+  },
+});
+
+export default JoinedProgramDetail;
diff --git a/mobile/components/ProgramCard.js b/mobile/components/ProgramCard.js
@@ -5,7 +5,7 @@ const ProgramCard = ({ trainerUsername, title, description, programId, weeks, ra
   return (
     <TouchableOpacity
           style={styles.card}
-          onPress={() => navigation.navigate('ProgramDetail', { trainerUsername, title, description, programId, weeks, rating, level, date, participants, navigation })}
+          onPress={() => navigation.navigate('JoinedProgramDetail', { trainerUsername, title, description, programId, weeks, rating, level, date, participants, navigation })}
         >
       <TouchableOpacity onPress={() => navigation.navigate('UserProfile', { username: trainerUsername })}>
         <Text style={styles.owner}>{trainerUsername}</Text>

diff --git a/mobile/components/ProgramDetail.js b/mobile/components/ProgramDetail.js
@@ -28,10 +28,7 @@ const ProgramDetail = ({ route }) => {
       <View style={styles.weekContainer}>
         <Text style={styles.weekTitle}>Week {index + 1}</Text>
         <Text style={styles.workoutCount}>{workoutCount} Workouts</Text>
-        <TouchableOpacity style={styles.startButton} onPress = {()=>{navigation.navigate("JoinedWeek",{programId,programTitle:title,weekId:item.id,weekNumber:item.weekNumber,workouts:item.workouts, navigation:navigation})}}>
-          <Text style={styles.startButtonText}>Start Workout</Text>
-        </TouchableOpacity>
-        <Text style={styles.completionText}>0%</Text>
+
       </View>
     );
   };
@@ -55,7 +52,7 @@ const ProgramDetail = ({ route }) => {
       />
 
       <TouchableOpacity style={styles.commitButton}>
-        <Text style={styles.commitButtonText}>Commit to Program</Text>
+        <Text style={styles.commitButtonText}>Join Program</Text>
       </TouchableOpacity>
 
       <TouchableOpacity style={styles.detailButton} onPress = {()=>navigation.navigate("WorkoutDetails",{weeks,navigation})}>