From 767ea1aa671704210a5b4848487e7f586a4541de Mon Sep 17 00:00:00 2001 From: tonyfages Date: Thu, 16 Jan 2025 15:26:24 +0100 Subject: [PATCH] Add Acvities component --- app/(tabs)/(home)/HomeScreen.tsx | 62 ++++++++-------- components/ActivitiesComponent.tsx | 111 ++++++++++++++++++++++++++++ components/CalendarComponent.tsx | 51 +++++++++++++ components/ExerciceOverview.tsx | 42 ----------- components/WelcomeComponent.tsx | 33 +++++++++ components/WorkoutCardComponent.tsx | 27 ++++--- model/Workout.ts | 43 +++++++++++ package-lock.json | 56 +++++++++++++- package.json | 5 +- 9 files changed, 346 insertions(+), 84 deletions(-) create mode 100644 components/ActivitiesComponent.tsx create mode 100644 components/CalendarComponent.tsx delete mode 100644 components/ExerciceOverview.tsx create mode 100644 components/WelcomeComponent.tsx diff --git a/app/(tabs)/(home)/HomeScreen.tsx b/app/(tabs)/(home)/HomeScreen.tsx index c4b743d..7d1915b 100644 --- a/app/(tabs)/(home)/HomeScreen.tsx +++ b/app/(tabs)/(home)/HomeScreen.tsx @@ -1,51 +1,53 @@ -import {Image, SafeAreaView, Text, TouchableOpacity, View} from "react-native"; +import {SafeAreaView, ScrollView, Text, View} from "react-native"; import React from "react"; -import {Ionicons} from "@expo/vector-icons"; import WorkoutCardComponent from "@/components/WorkoutCardComponent"; +import Screen from "@/components/ui/Screen"; +import CalendarComponent from "@/components/CalendarComponent"; +import WelcomeComponent from "@/components/WelcomeComponent"; +import ActivitiesComponent from "@/components/ActivitiesComponent"; export default function HomeScreen() { - const date = new Date(); - const formattedDate = date.toLocaleDateString('fr-FR', { - year: 'numeric', - month: 'long', - day: 'numeric', - }); return ( - - - - - {formattedDate} + + + + - - - - Hello, Tata Yoyo! + + + Activities + See All - - {/* Notifications */} - - {/* Notification Badge */} - - - 8 - - + - + + + Fitness Metrics + See All + + + - + + + Workout + See All + + + + + + + ); } \ No newline at end of file diff --git a/components/ActivitiesComponent.tsx b/components/ActivitiesComponent.tsx new file mode 100644 index 0000000..a969c2f --- /dev/null +++ b/components/ActivitiesComponent.tsx @@ -0,0 +1,111 @@ +import {Text, TouchableOpacity, View} from "react-native"; +import {CurveType, LineChart} from "react-native-gifted-charts"; +import React, {useRef, useState} from "react"; + +export default function ActivitiesComponent() { + const ref = useRef(null) + const [dateSelected, setDateSelected] = useState('1d'); + const [lineData, setLineData] = useState([ + {value: 4}, + {value: 14}, + {value: 8}, + {value: 38}, + {value: 36}, + {value: 28}, + ]); + + const months = ['1d','1w','1m','1y','All'] + const changeMonthSelected = (ind) => { + const selectedMonth = months[ind]; + setDateSelected(selectedMonth); + + // Update lineData based on the selected month + let newData; + switch (selectedMonth) { + case '1d': + newData = [ + {value: 4}, + {value: 14}, + {value: 8}, + {value: 38}, + {value: 36}, + {value: 28}, + ]; + break; + case '1w': + newData = [ + {value: 8}, + {value: 14}, + {value: 8}, + {value: 38}, + {value: 14}, + {value: 28}, + {value: 4}, + ]; + break; + case '1m': + newData = [ + {value: 10}, + {value: 20}, + {value: 30}, + {value: 40}, + {value: 50}, + {value: 60}, + ]; + break; + case '1y': + newData = [ + {value: 15}, + {value: 25}, + {value: 35}, + {value: 45}, + {value: 55}, + {value: 65}, + ]; + break; + case 'All': + newData = [ + {value: 5}, + {value: 15}, + {value: 25}, + {value: 35}, + {value: 45}, + {value: 55}, + ]; + break; + default: + newData = []; + } + setLineData(newData); + }; + + return ( + + + {months.map((item, index) => { + return ( + changeMonthSelected(index)}> + {months[index]} + + ); + })} + + + + ); +} \ No newline at end of file diff --git a/components/CalendarComponent.tsx b/components/CalendarComponent.tsx new file mode 100644 index 0000000..b784d3d --- /dev/null +++ b/components/CalendarComponent.tsx @@ -0,0 +1,51 @@ +import {FlatList, TouchableOpacity,Text, View} from "react-native"; +import {useState} from "react"; +import dayjs from "dayjs"; + +export default function CalendarComponent() { + const [selectedDay] = useState(dayjs().date()); + + const days = Array.from({ length: 7 }, (_, index) => { + const day = dayjs().add(index, "day"); + return { + id: day.date(), + label: day.format("ddd"), + }; + }); + + return ( + + item.id.toString()} + showsHorizontalScrollIndicator={false} + contentContainerStyle={{ gap: 12 }} // Espacement entre les items + renderItem={({ item }) => ( + + + {item.label} + + + {item.id} + + + )} + /> + + ); +} \ No newline at end of file diff --git a/components/ExerciceOverview.tsx b/components/ExerciceOverview.tsx deleted file mode 100644 index 9288e46..0000000 --- a/components/ExerciceOverview.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import React from "react"; -import { Text } from "./ui/text"; -import { Box } from "./ui/box"; -import { ImageBackground } from "react-native"; -import { HStack } from "@/components/ui/hstack"; -import { Button } from "@/components/ui/Button"; -import { AntDesign } from "@expo/vector-icons"; - -export default function ExerciceOverview() { - const exercise = { - name: "Jumping Jacks", - time: "00:30", - kcal: 5, - sets: 3, - difficulty: "Medium", - imageUri: "https://random-image-pepebigotes.vercel.app/api/random-image", - }; - - const image = { uri: exercise.imageUri }; - return ( - - - - {exercise.time} - {exercise.kcal} kcal - - - - - {exercise.name} - {exercise.sets} Sets - {exercise.difficulty} Difficulty - - - - - - - ); -} diff --git a/components/WelcomeComponent.tsx b/components/WelcomeComponent.tsx new file mode 100644 index 0000000..85576ad --- /dev/null +++ b/components/WelcomeComponent.tsx @@ -0,0 +1,33 @@ +import {Image, Text, TouchableOpacity, View} from "react-native"; +import {Ionicons} from "@expo/vector-icons"; +import React from "react"; + +export default function WelcomeComponent() { + const date = new Date(); + const formattedDate = date.toLocaleDateString('fr-FR', { + year: 'numeric', + month: 'long', + day: 'numeric', + }); + + return ( + + + + + {formattedDate} + + + + + + + Hello, Tata Yoyo! + + + + + ); +} \ No newline at end of file diff --git a/components/WorkoutCardComponent.tsx b/components/WorkoutCardComponent.tsx index 3cc7b1c..dbc4142 100644 --- a/components/WorkoutCardComponent.tsx +++ b/components/WorkoutCardComponent.tsx @@ -1,13 +1,18 @@ import {ImageBackground, SafeAreaView,Text, TouchableOpacity, View} from "react-native"; import React from "react"; -import {AntDesign} from "@expo/vector-icons"; +import {AntDesign, MaterialCommunityIcons} from "@expo/vector-icons"; +import {Workout} from "@/model/Workout"; export default function WorkoutCardComponent() { + + const exercise = new Workout("Faire caca par Terre", 25,"8 Series Workout", 412, "assets/images/Sigma-2.jpg","Intense" ); + + + return ( - - + - 25min + {exercise.duration} min + + + - 412kcal + {exercise.calories} kcal - Faire caca par Terre - 8 Series Workout + {exercise.name} + {exercise.repetitions} Intense @@ -34,12 +42,11 @@ export default function WorkoutCardComponent() { - - + + - ); } \ No newline at end of file diff --git a/model/Workout.ts b/model/Workout.ts index e69de29..cb2a670 100644 --- a/model/Workout.ts +++ b/model/Workout.ts @@ -0,0 +1,43 @@ +export class Workout { + + private _name: string + private _duration: number + private _calories: number + private _repetitions: string + private _image: string + private _level: string + + + get name(): string { + return this._name; + } + + get duration(): number { + return this._duration; + } + + get calories(): number { + return this._calories; + } + + get repetitions(): string { + return this._repetitions; + } + + get image(): string { + return this._image; + } + + get level(): string { + return this._level; + } + + constructor(name: string, duration: number, repetition: string, calories: number, image: string, level: string) { + this._name = name; + this._duration = duration; + this._repetitions = repetition + this._calories = calories; + this._image = image; + this._level = level; + } +} diff --git a/package-lock.json b/package-lock.json index 6dc9fe6..b73a6fe 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,12 +14,14 @@ "@react-navigation/native": "^7.0.14", "@react-navigation/native-stack": "^7.2.0", "@react-navigation/stack": "^7.1.1", + "dayjs": "^1.11.13", "expo": "^52.0.24", "expo-asset": "^11.0.2", "expo-blur": "^14.0.1", "expo-constants": "^17.0.3", "expo-font": "^13.0.2", "expo-haptics": "^14.0.0", + "expo-linear-gradient": "~14.0.2", "expo-linking": "^7.0.3", "expo-router": "~4.0.16", "expo-secure-store": "^14.0.1", @@ -33,10 +35,11 @@ "react-dom": "18.3.1", "react-native": "0.76.6", "react-native-gesture-handler": "^2.20.2", + "react-native-gifted-charts": "^1.4.54", "react-native-reanimated": "~3.16.1", "react-native-safe-area-context": "4.12.0", "react-native-screens": "^4.4.0", - "react-native-svg": "^15.8.0", + "react-native-svg": "15.8.0", "react-native-vector-icons": "^10.2.0", "react-native-web": "^0.19.13", "react-native-webview": "13.12.5", @@ -5985,6 +5988,12 @@ "node": ">=12" } }, + "node_modules/dayjs": { + "version": "1.11.13", + "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz", + "integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==", + "license": "MIT" + }, "node_modules/debug": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz", @@ -6833,6 +6842,17 @@ "react": "*" } }, + "node_modules/expo-linear-gradient": { + "version": "14.0.2", + "resolved": "https://registry.npmjs.org/expo-linear-gradient/-/expo-linear-gradient-14.0.2.tgz", + "integrity": "sha512-nvac1sPUfFFJ4mY25UkvubpUV/olrBH+uQw5k+beqSvQaVQiUfFtYzfRr+6HhYBNb4AEsOtpsCRkpDww3M2iGQ==", + "license": "MIT", + "peerDependencies": { + "expo": "*", + "react": "*", + "react-native": "*" + } + }, "node_modules/expo-linking": { "version": "7.0.4", "resolved": "https://registry.npmjs.org/expo-linking/-/expo-linking-7.0.4.tgz", @@ -7562,6 +7582,16 @@ "node": ">=6" } }, + "node_modules/gifted-charts-core": { + "version": "0.1.56", + "resolved": "https://registry.npmjs.org/gifted-charts-core/-/gifted-charts-core-0.1.56.tgz", + "integrity": "sha512-Gey9dxjUB4/4bCin+xSyLuudSoBffJ9GK1qd0epBd3vrjHMGYrKFNRlkxI5MRxIJjvTcWOL2Fi43glNC2gs/0w==", + "license": "MIT", + "peerDependencies": { + "react": "*", + "react-native": "*" + } + }, "node_modules/glob": { "version": "10.4.5", "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz", @@ -12191,6 +12221,30 @@ "react-native": "*" } }, + "node_modules/react-native-gifted-charts": { + "version": "1.4.54", + "resolved": "https://registry.npmjs.org/react-native-gifted-charts/-/react-native-gifted-charts-1.4.54.tgz", + "integrity": "sha512-FvDRbymuJMxpsPbveQqyLUIYzfgJeY6xC6hNYD0d1OLZdnv/HgNYFMIwpoh2Hv25GRS0BXwPLjf8zE0f2zY9Wg==", + "license": "MIT", + "dependencies": { + "gifted-charts-core": "0.1.56" + }, + "peerDependencies": { + "expo-linear-gradient": "*", + "react": "*", + "react-native": "*", + "react-native-linear-gradient": "*", + "react-native-svg": "*" + }, + "peerDependenciesMeta": { + "expo-linear-gradient": { + "optional": true + }, + "react-native-linear-gradient": { + "optional": true + } + } + }, "node_modules/react-native-helmet-async": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/react-native-helmet-async/-/react-native-helmet-async-2.0.4.tgz", diff --git a/package.json b/package.json index 058057d..5ca6bb1 100644 --- a/package.json +++ b/package.json @@ -21,12 +21,14 @@ "@react-navigation/native": "^7.0.14", "@react-navigation/native-stack": "^7.2.0", "@react-navigation/stack": "^7.1.1", + "dayjs": "^1.11.13", "expo": "^52.0.24", "expo-asset": "^11.0.2", "expo-blur": "^14.0.1", "expo-constants": "^17.0.3", "expo-font": "^13.0.2", "expo-haptics": "^14.0.0", + "expo-linear-gradient": "~14.0.2", "expo-linking": "^7.0.3", "expo-router": "~4.0.16", "expo-secure-store": "^14.0.1", @@ -40,10 +42,11 @@ "react-dom": "18.3.1", "react-native": "0.76.6", "react-native-gesture-handler": "^2.20.2", + "react-native-gifted-charts": "^1.4.54", "react-native-reanimated": "~3.16.1", "react-native-safe-area-context": "4.12.0", "react-native-screens": "^4.4.0", - "react-native-svg": "^15.8.0", + "react-native-svg": "15.8.0", "react-native-vector-icons": "^10.2.0", "react-native-web": "^0.19.13", "react-native-webview": "13.12.5",