SCRUM-143 Add Autosave feature

FYP-2024-IQMA · Oct 10, 2024 · bebd622 · bebd622
1 parent 1d045ba
commit bebd622
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 38 deletions.
diff --git a/frontend/iQMA-Skills-Builder/app/screens/Settings.tsx b/frontend/iQMA-Skills-Builder/app/screens/Settings.tsx
@@ -1,51 +1,83 @@
-import {Button, StyleSheet, Text, View, Switch} from 'react-native';
-import React, {useContext, useState} from 'react';
-import {router} from 'expo-router';
+import { StyleSheet, Text, View } from 'react-native';
+import React, { useContext, useEffect, useState } from 'react';
 import CustomSwitch from '@/components/CustomSwitch';
-import {CustomButton} from '@/components/CustomButton';
-import {AuthContext} from '@/context/AuthContext';
+import { CustomButton } from '@/components/CustomButton';
+import { AuthContext } from '@/context/AuthContext';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { LoadingIndicator } from '@/components/LoadingIndicator';
 
 export default function Settings() {
-    const {logOut, currentUser} = useContext(AuthContext);
+    const { logOut } = useContext(AuthContext);
 
     const [isSoundEffectsEnabled, setIsSoundEffectsEnabled] = useState(false);
     const [isNotificationsEnabled, setIsNotificationsEnabled] = useState(false);
+    const [isLoading, setIsLoading] = useState(true);
 
-    const toggleSoundEffects = (value: boolean) => {
+    // Get Settings from AsyncStorage
+    const getSettingsData = async () => {
+        try {
+            const soundEffects = await AsyncStorage.getItem('soundEffects');
+            const notifications = await AsyncStorage.getItem('notifications');
+
+            if (soundEffects !== null) {
+                const parsedSoundEffects = JSON.parse(soundEffects);
+                setIsSoundEffectsEnabled(parsedSoundEffects);
+            }
+            if (notifications !== null) {
+                const parsedNotifications = JSON.parse(notifications);
+                setIsNotificationsEnabled(parsedNotifications);
+            }
+        } catch (e) {
+            console.error('Error reading AsyncStorage values:', e);
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    useEffect(() => {
+        getSettingsData();
+    }, []);
+
+    // Auto save to AsyncStorage when user make changes
+    const toggleSoundEffects = async (value: boolean) => {
         setIsSoundEffectsEnabled(value);
+        try {
+            await AsyncStorage.setItem('soundEffects', JSON.stringify(value));
+            console.log('Sound Effects setting saved!');
+        } catch (e) {
+            console.error('Error saving sound effects setting:', e);
+        }
     };
 
-    const toggleNotifications = (value: boolean) => {
+    // Auto save to AsyncStorage when user make changes
+    const toggleNotifications = async (value: boolean) => {
         setIsNotificationsEnabled(value);
+        try {
+            await AsyncStorage.setItem('notifications', JSON.stringify(value));
+            console.log('Notifications setting saved!');
+        } catch (e) {
+            console.error('Error saving notifications setting:', e);
+        }
     };
 
+    // If still loading, show the loading indicator
+    if (isLoading) {
+        return <View />;
+    }
+
     return (
         <View style={styles.container}>
             <Text style={styles.textHeading}>GENERAL</Text>
-            <View
-                style={{flexDirection: 'row', justifyContent: 'space-between'}}
-            >
-                <Text style={{alignSelf: 'center'}}>Sound Effects</Text>
-                <CustomSwitch
-                    isEnabled={isSoundEffectsEnabled}
-                    onToggle={toggleSoundEffects}
-                />
+            <View style={styles.switchContainer}>
+                <Text style={styles.label}>Sound Effects</Text>
+                <CustomSwitch isEnabled={isSoundEffectsEnabled} onToggle={toggleSoundEffects} />
             </View>
+
             <Text style={styles.textHeading}>NOTIFICATIONS</Text>
-            <View
-                style={{flexDirection: 'row', justifyContent: 'space-between'}}
-            >
-                <Text style={{alignSelf: 'center'}}>All Notifications</Text>
-                <CustomSwitch
-                    isEnabled={isNotificationsEnabled}
-                    onToggle={toggleNotifications}
-                />
+            <View style={styles.switchContainer}>
+                <Text style={styles.label}>All Notifications</Text>
+                <CustomSwitch isEnabled={isNotificationsEnabled} onToggle={toggleNotifications} />
             </View>
-            <CustomButton label="Save" backgroundColor="white" />
-
-            {/* <CustomButton label="Help Center" backgroundColor="white" />
-
-            <CustomButton label="Feedback" backgroundColor="white" /> */}
 
             <CustomButton
                 label="Log out"
@@ -65,4 +97,13 @@ const styles = StyleSheet.create({
         color: '#7654F2',
         fontWeight: 'bold',
     },
+    switchContainer: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        marginVertical: 10,
+    },
+    label: {
+        fontSize: 16,
+    },
 });
diff --git a/frontend/iQMA-Skills-Builder/components/CustomSwitch.tsx b/frontend/iQMA-Skills-Builder/components/CustomSwitch.tsx
@@ -26,7 +26,7 @@ const CustomSwitch: React.FC<CustomSwitchProps> = ({ isEnabled, onToggle }) => {
 
     const knobPosition = animationValue.interpolate({
       inputRange: [0, 1],
-      outputRange: [0, 21], // Left position for 'Off' and 'On'
+      outputRange: [0, 20], // Left position for 'Off' and 'On'
     });
 
     return (

diff --git a/frontend/iQMA-Skills-Builder/package-lock.json b/frontend/iQMA-Skills-Builder/package-lock.json
diff --git a/frontend/iQMA-Skills-Builder/package.json b/frontend/iQMA-Skills-Builder/package.json
@@ -49,7 +49,6 @@
         "react-native-safe-area-context": "^4.10.1",
         "react-native-screens": "^3.31.1",
         "react-native-svg": "^15.6.0",
-        "react-native-toggle-input": "^1.0.12",
         "react-native-vector-icons": "^10.1.0",
         "react-native-web": "~0.19.10",
         "react-native-webview": "^13.12.0",