From 2a633cb3f4735665d2c5e1769fa2a591a346487f Mon Sep 17 00:00:00 2001
From: Torpenn <ciscau@proton.me>
Date: Sun, 13 Oct 2024 23:18:08 +0200
Subject: [PATCH] feat: add settings page

---
 app/+not-found.tsx                            |  2 +-
 app/RootStackParamList.ts                     |  5 +-
 app/Settings.tsx                              | 80 +++++++++++++++++++
 app/_layout.tsx                               | 11 +--
 app/dashboard.tsx                             |  8 +-
 app/timer.tsx                                 | 21 ++++-
 .../useCases/timer/view/FinishContent.tsx     |  4 +-
 .../useCases/timer/view/TimerContent.tsx      |  4 +-
 8 files changed, 118 insertions(+), 17 deletions(-)
 create mode 100644 app/Settings.tsx

diff --git a/app/+not-found.tsx b/app/+not-found.tsx
index 45c0b68..068a869 100644
--- a/app/+not-found.tsx
+++ b/app/+not-found.tsx
@@ -1,4 +1,4 @@
-import { Link, Stack } from 'expo-router';
+import { Stack } from 'expo-router';
 import { StyleSheet } from 'react-native';
 
 import { Text, View } from '@/components/shared/Themed';
diff --git a/app/RootStackParamList.ts b/app/RootStackParamList.ts
index 309d108..fe7d722 100644
--- a/app/RootStackParamList.ts
+++ b/app/RootStackParamList.ts
@@ -1,4 +1,5 @@
 export type RootStackParamList = {
-  dashboard: undefined;
-  timer: { reps: number, restTime: number, workTime: number};
+  Dashboard: undefined;
+  Timer: { reps: number, restTime: number, workTime: number};
+  Settings: undefined;
 };
diff --git a/app/Settings.tsx b/app/Settings.tsx
new file mode 100644
index 0000000..9753fb4
--- /dev/null
+++ b/app/Settings.tsx
@@ -0,0 +1,80 @@
+import React, { useEffect, useState } from 'react';
+
+import { Text } from '@/components/shared/Themed';
+import styled from '@emotion/native';
+import { useNavigation } from '@react-navigation/native';
+import { NativeStackNavigationProp } from '@react-navigation/native-stack';
+import { RootStackParamList } from '@/app/RootStackParamList';
+import { loadUserSettings, saveUserSettings } from '@/components/shared/business/AsyncStorage';
+import { Switch } from 'react-native';
+import { VerticalSpacer } from '@/components/shared/Spacers';
+import Button from '@/components/shared/Button';
+
+type NavigationProp = NativeStackNavigationProp<RootStackParamList, 'Dashboard'>;
+
+export default function Dashboard() {
+  const navigation = useNavigation<NavigationProp>();
+  const [soundEnabled, setSoundEnabled] = useState<boolean>(false);
+
+  useEffect(() => {
+    const init = async () => {
+      try {
+        const soundEnabledLocal = await loadUserSettings('soundEnabled');
+        console.log('soundEnabledLocal', soundEnabledLocal);
+
+        if (soundEnabledLocal === null) {
+          console.log('soundEnabledLocal is null');
+          setSoundEnabled(true);
+        } else {
+          console.log('soundEnabledLocal is present', );
+          setSoundEnabled(Boolean(Number(soundEnabledLocal)));
+        }
+      } catch (error) {
+        throw new Error('Erreur lors du chargement des paramètres utilisateur');
+      }
+    };
+
+    init();
+  }, []);
+
+  useEffect(() => {
+    saveUserSettings('soundEnabled', String(Number(soundEnabled)));
+  }, [soundEnabled]);
+
+  return (
+    <Container>
+      <Title>Preferences</Title>
+
+      <Button label="Retour" onPress={() => navigation.navigate('Dashboard')} />
+
+      <VerticalSpacer heightUnits={8} />
+
+      <Row>
+        <Text>Son activé ?</Text>
+
+        <Switch
+          onValueChange={() => setSoundEnabled(previousState => !previousState)}
+          value={soundEnabled}
+        />
+      </Row>
+    </Container>
+  );
+}
+
+const Title = styled(Text)(({ theme }) => ({
+  textAlign: 'center',
+  fontSize: 40,
+  fontWeight: 'bold',
+  color: theme.colors.black
+}));
+
+const Row = styled.View({
+  flexDirection: 'row',
+  justifyContent: 'space-between',
+  alignItems: 'center'
+})
+
+const Container = styled.View({
+  padding: 20
+})
+
diff --git a/app/_layout.tsx b/app/_layout.tsx
index 3a7f1ad..2b623d6 100644
--- a/app/_layout.tsx
+++ b/app/_layout.tsx
@@ -1,6 +1,6 @@
 import FontAwesome from '@expo/vector-icons/FontAwesome';
 import { ThemeProvider } from '@emotion/react';
-import { theme } from '@/app/shared/theme';
+import { theme } from '@/app/shared/theme/index';
 import { useFonts } from 'expo-font';
 import { Stack } from 'expo-router';
 import * as SplashScreen from 'expo-splash-screen';
@@ -14,7 +14,7 @@ export {
 
 export const unstable_settings = {
   // Ensure that reloading on `/modal` keeps a back button present.
-  initialRouteName: 'dashboard',
+  initialRouteName: 'Dashboard',
 };
 
 // Prevent the splash screen from auto-hiding before asset loading is complete.
@@ -47,9 +47,10 @@ export default function RootLayout() {
 function RootLayoutNav() {
   return (
     <ThemeProvider theme={theme}>
-      <Stack>
-        <Stack.Screen name="dashboard" options={{ headerShown: false }} />
-        <Stack.Screen name="timer" options={{ headerShown: false }} />
+      <Stack initialRouteName="Dashboard">
+        <Stack.Screen name="Dashboard" options={{ headerShown: false }} />
+        <Stack.Screen name="Timer" options={{ headerShown: false }} />
+        <Stack.Screen name="Setting" options={{ headerShown: false }} />
       </Stack>
     </ThemeProvider>
   );
diff --git a/app/dashboard.tsx b/app/dashboard.tsx
index 47d8e76..6cf91c6 100644
--- a/app/dashboard.tsx
+++ b/app/dashboard.tsx
@@ -12,7 +12,7 @@ import { TimerPickerModal } from 'react-native-timer-picker';
 import Button from '@/components/shared/Button';
 import NumberSelector from '@/components/shared/NumberSelector';
 
-type NavigationProp = NativeStackNavigationProp<RootStackParamList, 'timer'>;
+type NavigationProp = NativeStackNavigationProp<RootStackParamList, 'Timer'>;
 
 export default function Dashboard() {
   const navigation = useNavigation<NavigationProp>();
@@ -97,7 +97,11 @@ export default function Dashboard() {
 
       <VerticalSpacer heightUnits={5} />
 
-      <Button label="Commencer" onPress={() => navigation.navigate('timer', { reps, restTime, workTime})} />
+      <Button label="Commencer" onPress={() => navigation.navigate('Timer', { reps, restTime, workTime})} />
+
+      <VerticalSpacer heightUnits={5} />
+
+      <Button label="Préférences" onPress={() => navigation.navigate('Settings')} />
     </Container>
   );
 }
diff --git a/app/timer.tsx b/app/timer.tsx
index 813f6cb..26744c2 100644
--- a/app/timer.tsx
+++ b/app/timer.tsx
@@ -9,6 +9,7 @@ import { TimerBgColor } from '@/components/useCases/timer/business/type';
 import { Audio } from 'expo-av';
 import { Sound } from 'expo-av/build/Audio';
 import { activateKeepAwakeAsync, deactivateKeepAwake } from 'expo-keep-awake';
+import { loadUserSettings } from '@/components/shared/business/AsyncStorage';
 
 interface TimerProps {
   reps: number;
@@ -27,11 +28,23 @@ export default function Timer() {
   const [isRunning, setIsRunning] = useState<boolean>(false);
   const [isFinish, setIsFinish] = useState<boolean>(false);
   const [sound, setSound] = useState<Sound>();
+  const [soundEnabled, setSoundEnabled] = useState<boolean>(true);
 
   useEffect(() => {
-    configureAudio();
-    handleStart();
-    activateKeepAwakeAsync();
+    const init = async () => {
+      try {
+        const soundEnabledLocal = await loadUserSettings('soundEnabled');
+        setSoundEnabled(Boolean(Number(soundEnabledLocal)));
+
+        if (soundEnabled) await configureAudio();
+        handleStart();
+        await activateKeepAwakeAsync();
+      } catch (error) {
+        throw new Error('Erreur lors du chargement des paramètres utilisateur');
+      }
+    };
+
+    init();
   }, []);
 
   // when the user exits the screen, desactivate the keepAwake
@@ -94,6 +107,8 @@ export default function Timer() {
   }
 
   async function playSound() {
+    if (!soundEnabled) return;
+
     const { sound } = await Audio.Sound.createAsync(require('../assets/audios/boxingBell.mp3'));
     setSound(sound);
 
diff --git a/components/useCases/timer/view/FinishContent.tsx b/components/useCases/timer/view/FinishContent.tsx
index 4ab834a..7a6d4d8 100644
--- a/components/useCases/timer/view/FinishContent.tsx
+++ b/components/useCases/timer/view/FinishContent.tsx
@@ -11,7 +11,7 @@ type FinishContentProps = {
   handleStart: () => void;
 };
 
-type NavigationProp = NativeStackNavigationProp<RootStackParamList, 'dashboard'>;
+type NavigationProp = NativeStackNavigationProp<RootStackParamList, 'Dashboard'>;
 
 export default function FinishContent({
   handleStart
@@ -29,7 +29,7 @@ export default function FinishContent({
 
         <HorizontalSpacer widthUnits={3} />
 
-        <Button label="Retour" onPress={() => navigation.navigate('dashboard')} />
+        <Button label="Retour" onPress={() => navigation.navigate('Dashboard')} />
       </Row>
     </>
   );
diff --git a/components/useCases/timer/view/TimerContent.tsx b/components/useCases/timer/view/TimerContent.tsx
index 22a4b9e..474663f 100644
--- a/components/useCases/timer/view/TimerContent.tsx
+++ b/components/useCases/timer/view/TimerContent.tsx
@@ -19,7 +19,7 @@ interface TimerContentProps {
   bgColor: TimerBgColor;
 }
 
-type NavigationProp = NativeStackNavigationProp<RootStackParamList, 'dashboard'>;
+type NavigationProp = NativeStackNavigationProp<RootStackParamList, 'Dashboard'>;
 
 export default function TimerContent({
   isWorkPhase,
@@ -58,7 +58,7 @@ export default function TimerContent({
 
         <VerticalSpacer heightUnits={3} />
 
-        <Button label="Retour" onPress={() => navigation.navigate('dashboard')} />
+        <Button label="Retour" onPress={() => navigation.navigate('Dashboard')} />
       </ButtonContainer>
     </>
   );