Merge branch 'add-previous-and-next-button' into 'main'

feat: add prev and next buttons to Timer

See merge request torpenn/boxons!6

app/i18n/translations/en.ts

@@ -24,6 +24,8 @@ export const en = {
       rest: 'Rest',
       stop: 'Stop',
       start: 'Start',
+      prev: 'Previous',
+      next: 'Next',
     },
     finishContent: {
       finish: 'Finished',

app/i18n/translations/fr.ts

@@ -24,6 +24,8 @@ export const fr = {
       rest: 'Repos',
       stop: 'Arrêter',
       start: 'Commencer',
+      prev: 'Précédent',
+      next: 'Suivant',
     },
     finishContent: {
       finish: 'Terminé',

app/timer.tsx

@@ -123,6 +123,35 @@ export default function Timer() {
       : undefined;
   }, [sound]);
 
+  const nextRep = () => {
+    if (currentRep < reps) {
+      if (isWorkPhase) {
+        setIsWorkPhase(false);
+        setTimeLeft(restTime);
+      } else {
+        setIsWorkPhase(true);
+        setTimeLeft(workTime);
+        setCurrentRep((prevRep) => prevRep + 1);
+      }
+    } else {
+      setIsFinish(true);
+      setIsRunning(false);
+    }
+  };
+
+  const previousRep = () => {
+    if (isWorkPhase) {
+      if (currentRep > 1) {
+        setIsWorkPhase(false);
+        setTimeLeft(restTime);
+        setCurrentRep((prevRep) => prevRep - 1);
+      }
+    } else {
+      setIsWorkPhase(true);
+      setTimeLeft(workTime);
+    }
+  };
+
   const handleContine = () => {
     setIsRunning(true);
   };
@@ -152,6 +181,8 @@ export default function Timer() {
           bgColor={renderBgColor()}
           currentRep={currentRep}
           isRunning={isRunning}
+          nextRep={nextRep}
+          previousRep={previousRep}
           handleStop={handleStop}
           handleContine={handleContine}
         />

components/shared/Spacers.tsx

@@ -14,3 +14,7 @@ export const VerticalSpacer = styled(Spacer)<{ heightUnits: number }>(({ theme,
 export const HorizontalSpacer = styled(Spacer)<{ widthUnits: number }>(({ theme, widthUnits }) => ({
   width: theme.layout.gridUnit * widthUnits,
 }));
+
+export const ElasticSpacer = styled(Spacer)({
+  flexGrow: 1,
+});

components/useCases/timer/view/TimerContent.tsx

@@ -2,7 +2,7 @@ import { Text, View } from '@/components/shared/Themed';
 import styled from '@emotion/native';
 import { formatTime } from '@/components/shared/business/timeHelpers';
 import Button from '@/components/shared/Button';
-import { VerticalSpacer } from '@/components/shared/Spacers';
+import { ElasticSpacer, HorizontalSpacer, VerticalSpacer } from '@/components/shared/Spacers';
 import { TimerBgColor } from '@/components/useCases/timer/business/type';
 import { useNavigation } from 'expo-router';
 import { NativeStackNavigationProp } from 'react-native-screens/lib/typescript/native-stack/types';
@@ -17,6 +17,8 @@ interface TimerContentProps {
   isRunning: boolean;
   handleStop: () => void;
   handleContine: () => void;
+  nextRep: () => void;
+  previousRep: () => void;
   bgColor: TimerBgColor;
 }
 
@@ -32,6 +34,8 @@ export default function TimerContent({
   isRunning,
   handleStop,
   handleContine,
+  nextRep,
+  previousRep,
   bgColor,
 }: TimerContentProps ) {
   const navigation = useNavigation<NavigationProp>();
@@ -53,22 +57,32 @@ export default function TimerContent({
       <VerticalSpacer heightUnits={8} />
 
       <ButtonContainer bgColor={bgColor}>
+        <Button label={t('prev')} onPress={previousRep} />
+
+        <ElasticSpacer />
+
         {isRunning ? (
           <Button label={t('stop')} onPress={handleStop} />
         ) : (
           <Button label={t('start')} onPress={handleContine} />
         )}
 
-        <VerticalSpacer heightUnits={3} />
+        <ElasticSpacer />
+
+        <Button label={t('next')} onPress={nextRep} />
+      </ButtonContainer>
+
+      <VerticalSpacer heightUnits={4} />
 
       <Button label={i18n.t('back')} onPress={() => navigation.navigate('Dashboard')} />
-      </ButtonContainer>
     </>
   );
 }
 
 const ButtonContainer = styled(View)<{ bgColor: TimerBgColor }>(({ theme, bgColor }) => ({
-  backgroundColor: theme.colors[bgColor]
+  backgroundColor: theme.colors[bgColor],
+  flexDirection: 'row',
+  justifyContent: 'space-between',
 }));
 
 const Title = styled(Text)(({ theme }) => ({