Add view workout details ✨

app/(tabs)/(add)/AddScreen.tsx

@@ -1,32 +1,33 @@
-import {SafeAreaView, View, Text, ImageBackground, TouchableOpacity} from "react-native";
-import InternalError from "@/app/(error)/InternalErrorProblem";
 import React from "react";
+import {
+  ImageBackground,
+  SafeAreaView,
+  Text,
+  TouchableOpacity,
+  View,
+} from "react-native";
 
 export default function AddScreen() {
-    return (
+  return (
-        <ImageBackground
+    <ImageBackground
-            className="h-full w-full"
+      className="h-full w-full"
-            source={require("assets/images/TrainingPresentation.png")}
+      source={require("assets/images/TrainingPresentation.png")}
-        >
+    >
-            <SafeAreaView>
+      <SafeAreaView>
-                <View className="flex-row justify-between items-center mb-4">
+        <View className="flex-row justify-between items-center mb-4">
-                    <TouchableOpacity
+          <TouchableOpacity className="bg-blue-500 px-4 py-2 rounded"></TouchableOpacity>
-                        className="bg-blue-500 px-4 py-2 rounded"
-                    >
-                    </TouchableOpacity>
 
-                    <TouchableOpacity
+          <TouchableOpacity className="bg-green-500 px-4 py-2 rounded">
-                        className="bg-green-500 px-4 py-2 rounded"
+            <Text className="text-white font-bold">Action</Text>
-                    >
+          </TouchableOpacity>
-                        <Text className="text-white font-bold">Action</Text>
+        </View>
-                    </TouchableOpacity>
-                </View>
 
-                <View className="flex-1 items-center justify-center">
+        <View className="flex-1 items-center justify-center">
-                    <Text className="text-xl font-semibold">Contenu de l'entraînement</Text>
+          <Text className="text-xl font-semibold">
-                </View>
+            Contenu de l'entraînement
-            </SafeAreaView>
+          </Text>
-
+        </View>
-        </ImageBackground>
+      </SafeAreaView>
-    );
+    </ImageBackground>
-}
+  );
+}

app/(tabs)/(workout)/ExercicesScreen.tsx

@@ -1,9 +1,9 @@
 import { ExerciceServiceRef } from "@/api/services/service.ref";
 import WorkoutCardComponent from "@/components/WorkoutCardComponent";
 import { Workout } from "@/model/Workout";
-import { useRouter } from "expo-router";
+import {useNavigation, useRouter} from "expo-router";
 import React, { useEffect, useState } from "react";
-import { FlatList, Text, TouchableOpacity, View } from "react-native";
+import {FlatList, SafeAreaView, Text, TouchableOpacity, View} from "react-native";
 
 export default function ExercicesScreen() {
   const [exercices, setExercices] = useState<Workout[]>([]);
@@ -37,24 +37,18 @@ export default function ExercicesScreen() {
   }
 
   return (
-    <View className="p-4">
+    <SafeAreaView>
       <FlatList
         data={exercices}
         keyExtractor={(item) => item.id ?? ""}
         renderItem={({ item }) => (
           <TouchableOpacity
-            className="p-4 mb-2 bg-gray-800 rounded-lg"
+            className="flex-1 m-2"
-            onPress={() =>
-              router.push({
-                pathname: "/WorkoutScreen",
-                params: { workout: JSON.stringify(item) },
-              })
-            }
           >
             <WorkoutCardComponent exercise={item} background={"black"} />
           </TouchableOpacity>
         )}
       />
-    </View>
+    </SafeAreaView>
   );
 }

app/(tabs)/_layout.tsx

@@ -20,7 +20,8 @@ export default function TabBarLayout() {
   }
 
   return (
-    <Tabs
+
+      <Tabs
       screenOptions={{
         headerShown: false,
       }}
@@ -36,7 +37,7 @@ export default function TabBarLayout() {
       />
 
       <Tabs.Screen
-        name="(exercice)"
+        name="(workout)"
         options={{
           tabBarShowLabel: false,
           tabBarIcon: () => (

components/WorkoutCardComponent.tsx

@@ -1,11 +1,10 @@
+import Text from "@/components/ui/Text";
 import { Workout } from "@/model/Workout";
+import { useWorkoutStore } from "@/store/workoutStore";
 import { AntDesign, MaterialCommunityIcons } from "@expo/vector-icons";
 import { useRouter } from "expo-router";
 import React from "react";
-import Text from "@/components/ui/Text"
+import { ImageBackground, TouchableOpacity, View } from "react-native";
-import {ImageBackground, TouchableOpacity, View} from "react-native";
-import {useWorkoutStore} from "@/store/workoutStore";
-import {getState} from "jest-circus";
 
 interface WorkoutCardComponentProps {
   exercise?: Workout;
@@ -13,8 +12,9 @@ interface WorkoutCardComponentProps {
   height?: number;
 }
 
-export default function WorkoutCardComponent({exercise}: WorkoutCardComponentProps) {
+export default function WorkoutCardComponent({
-
+  exercise,
+}: WorkoutCardComponentProps) {
   const router = useRouter();
   return (
     <View className="h-full rounded-2xl overflow-hidden bg-black">
@@ -61,7 +61,7 @@ export default function WorkoutCardComponent({exercise}: WorkoutCardComponentPro
             if (exercise) {
               useWorkoutStore.getState().setWorkout(exercise);
             }
-            router.push('/WorkoutDetailScreen');
+            router.push("/WorkoutDetailScreen");
           }}
         >
           <AntDesign name="play" size={50} color="orange" />

components/WorkoutPresentationComponent.tsx

@@ -2,14 +2,12 @@ import LinearProgressBar from "@/components/LinearProgressBar";
 import Screen from "@/components/ui/Screen";
 import { Workout } from "@/model/Workout";
 import { Ionicons } from "@expo/vector-icons";
-import { router, Router } from "expo-router";
+import { router } from "expo-router";
 import * as React from "react";
 import { ImageBackground, Text, TouchableOpacity, View } from "react-native";
 
 type WorkoutPresentationComponentProps = {
   workout: Workout;
-  dataExercise: Workout[];
-  router: Router;
 };
 
 export default function WorkoutPresentationComponent({

package.json

@@ -1,22 +1,8 @@
 {
-  "name": "optifit",
-  "main": "expo-router/entry",
-  "version": "1.0.0",
-  "scripts": {
-    "start": "expo start",
-    "reset-project": "node ./scripts/reset-project.js",
-    "android": "expo start --android",
-    "ios": "expo start --ios",
-    "web": "expo start --web",
-    "test": "jest --watchAll",
-    "lint": "expo lint"
-  },
-  "jest": {
-    "preset": "jest-expo"
-  },
   "dependencies": {
     "@expo/html-elements": "^0.4.2",
     "@expo/vector-icons": "^14.0.2",
+    "@gorhom/bottom-sheet": "^5.1.5",
     "@react-native-async-storage/async-storage": "^2.1.2",
     "@gorhom/bottom-sheet": "^5.1.5",
     "@react-native-community/slider": "4.5.6",
@@ -77,5 +63,20 @@
     "react-test-renderer": "19.0.0",
     "typescript": "^5.3.3"
   },
-  "private": true
+  "jest": {
-}
+    "preset": "jest-expo"
+  },
+  "main": "expo-router/entry",
+  "name": "optifit",
+  "private": true,
+  "scripts": {
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "lint": "expo lint",
+    "reset-project": "node ./scripts/reset-project.js",
+    "start": "expo start",
+    "test": "jest --watchAll",
+    "web": "expo start --web"
+  },
+  "version": "1.0.0"
+}