diff --git a/app/(tabs)/index.tsx b/app/(tabs)/index.tsx index 7c9ca90..165fdf1 100644 --- a/app/(tabs)/index.tsx +++ b/app/(tabs)/index.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useEffect, useState } from 'react'; import { Text } from '@/components/shared/Themed'; import Card from '@/components/shared/Card'; @@ -12,6 +12,8 @@ import { TimerPickerModal } from 'react-native-timer-picker'; import Button from '@/components/shared/Button'; import NumberSelector from '@/components/shared/NumberSelector'; import { i18n } from '@/app/i18n/i18n'; +import { useTimerContext } from '@/app/store/TimerContext'; +import { ActivityIndicator } from 'react-native'; type NavigationProp = NativeStackNavigationProp; @@ -19,14 +21,41 @@ const t = i18n.scoped('dashboard'); export default function Dashboard() { const navigation = useNavigation(); + const { timerState, isLoading, updateReps, updateWorkTime, updateRestTime } = useTimerContext(); - const [reps, setReps] = useState(1); - const [workTime, setWorkTime] = useState(0); - const [restTime, setRestTime] = useState(0); const [showWorkTimePicker, setShowWorkTimePicker] = useState(false); const [showRestTimePicker, setShowRestTimePicker] = useState(false); - const totalWorkTime: string = formatTime((workTime + restTime) * reps); + // Local variables for UI changes + const [localReps, setLocalReps] = useState(timerState.reps); + const [localWorkTime, setLocalWorkTime] = useState(timerState.workTime); + const [localRestTime, setLocalRestTime] = useState(timerState.restTime); + + // Update local states when store data is loaded + useEffect(() => { + if (!isLoading) { + setLocalReps(timerState.reps); + setLocalWorkTime(timerState.workTime); + setLocalRestTime(timerState.restTime); + } + }, [isLoading, timerState]); + + // Handle repetition changes + const handleRepsChange = (value: number) => { + setLocalReps(value); + updateReps(value); + }; + + const totalWorkTime: string = formatTime((localWorkTime + localRestTime) * localReps); + + if (isLoading) { + return ( + + + Chargement... + + ); + } return ( @@ -38,14 +67,14 @@ export default function Dashboard() { {t('repetition')} - + setShowWorkTimePicker(true)}> {t('fight')} - {formatTime(workTime)} + {formatTime(localWorkTime)} @@ -54,7 +83,9 @@ export default function Dashboard() { visible={showWorkTimePicker} setIsVisible={setShowWorkTimePicker} onConfirm={(pickedDuration: any) => { - setWorkTime(pickedDuration.minutes * 60 + pickedDuration.seconds); + const newWorkTime = pickedDuration.minutes * 60 + pickedDuration.seconds; + setLocalWorkTime(newWorkTime); + updateWorkTime(newWorkTime); setShowWorkTimePicker(false); }} modalTitle={t('setWorkTime')} @@ -63,6 +94,7 @@ export default function Dashboard() { styles={{ theme: "dark", }} + initialValue={{ minutes: Math.floor(timerState.workTime / 60), seconds: timerState.workTime % 60 }} modalProps={{ overlayOpacity: 0.2, }} @@ -71,7 +103,7 @@ export default function Dashboard() { setShowRestTimePicker(true)}> {t('rest')} - {formatTime(restTime)} + {formatTime(localRestTime)} @@ -80,12 +112,15 @@ export default function Dashboard() { visible={showRestTimePicker} setIsVisible={setShowRestTimePicker} onConfirm={(pickedDuration: any) => { - setRestTime(pickedDuration.minutes * 60 + pickedDuration.seconds); + const newRestTime = pickedDuration.minutes * 60 + pickedDuration.seconds; + setLocalRestTime(newRestTime); + updateRestTime(newRestTime); setShowRestTimePicker(false); }} modalTitle={t('setRestTime')} onCancel={() => setShowRestTimePicker(false)} closeOnOverlayPress + initialValue={{ minutes: Math.floor(timerState.restTime / 60), seconds: timerState.restTime % 60 }} styles={{ theme: "dark", }} @@ -100,7 +135,7 @@ export default function Dashboard() { -