Correct eror from LocalStorage ✅ and beginning Binding for settings Profil

src/FLAD/navigation/AuthNavigation.tsx

@@ -1,5 +1,5 @@
 import Navigation from './Navigation';
-import { StyleSheet, SafeAreaView } from 'react-native';
+import { StyleSheet, SafeAreaView, AsyncStorage } from 'react-native';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import StartNavigation from './StartNavigation';
 import { Provider, useDispatch, useSelector } from 'react-redux';
@@ -7,7 +7,7 @@ import store from '../redux/store';
 import { useCallback, useEffect, useState } from 'react';
 import * as SplashScreen from 'expo-splash-screen';
 import { View } from 'react-native';
-import { getRefreshToken } from '../redux/thunk/authThunk';
+import { ChangeMode, getRefreshToken } from '../redux/thunk/authThunk';
 import * as Location from 'expo-location';
 
 // const LOCATION_TASK_NAME = 'flad-background-location-task';
@@ -60,16 +60,28 @@ export default function AuthNavigation() {
   //   };
   // }, []);
 
+  async function prepare() {
+    //@ts-ignore
+    await dispatch(getRefreshToken())
+    if (tokenProcesed && appIsReady) {
+      await SplashScreen.hideAsync();
+    }      // await SplashScreen.hideAsync();
+  }
 
+  async function ChangeDarkMode() {
+    try {
+      const currentValue = await AsyncStorage.getItem('dark');
+      if (currentValue !== null) {
+        const newValue = JSON.stringify(JSON.parse(currentValue));
+        dispatch(ChangeMode(JSON.parse(newValue)))
+      }
+    } catch (error) {
+      console.log(`Une erreur s'est produite lors de la mise à jour de la valeur booléenne pour la clé 'dark': `, error);
+    }
+  }
 
   useEffect(() => {
-    async function prepare() {
+    ChangeDarkMode();
-      //@ts-ignore
-      await dispatch(getRefreshToken())
-      if (tokenProcesed && appIsReady) {
-        await SplashScreen.hideAsync();
-      }      // await SplashScreen.hideAsync();
-    }
     prepare();
   }, [appIsReady, tokenProcesed]);
 

src/FLAD/navigation/Navigation.tsx

@@ -21,7 +21,7 @@ import SpotifyService from '../services/spotify/spotify.service';
 
 export default function Navigation() {
   const isDark = useSelector(state => state.userReducer.dark);
-  const style = isDark ? GraphicalCharterLight : GraphicalCharterDark;
+  const style = isDark ? GraphicalCharterDark : GraphicalCharterLight;
   const BottomTabNavigator = createBottomTabNavigator();
   const MyTheme = {
     dark: false,

src/FLAD/redux/actions/userActions.tsx

@@ -19,10 +19,11 @@ export interface CredentialsRegister {
 //     loggedInState,
 //   }
 // );
-export const setLoginState = (cred: Credentials) => {
+export const setLoginState = (userJson: any) => {
+  const user = new User(userJson.data.idFlad,userJson.data.idSpotify,userJson.data.email,new Date(),userJson.data.name, require('../../assets/images/jul.png'));
   return {
     type: userTypes.LOGIN,
-    playload: cred
+    playload: user
   };
 }
 

src/FLAD/redux/thunk/authThunk.tsx

@@ -8,6 +8,7 @@ import { Credentials, CredentialsRegister, restoreToken, setLoginState, UserLogo
 import * as SecureStore from 'expo-secure-store';
 import { User } from "../../Model/User";
 import { UserFactory } from "../../Model/factory/UserFactory";
+import * as ImagePicker from 'expo-image-picker';
 
 const key = 'userToken';
 
@@ -97,6 +98,7 @@ export const userLogin = (loginCredential: Credentials) => {
         )
         // dispatch(setLoginState(resp.data.user) ); // our action is called here
         console.log(user.data);
+        
         dispatch(setLoginState(user.data)); // our action is called here
       } else {
         console.log('Login Failed', 'Username or Password is incorrect');
@@ -156,6 +158,14 @@ export const ChangeMode = (value: boolean) => {
   }
 }
 
+export const ChangeImageUserCurrent = (value: ImagePicker) => {
+  //@ts-ignore
+  return async dispatch => {
+    dispatch(userChangeImage(value));
+  }
+}
+
+
 // const logIn = (email, password) => {
 //   const action = (dispatch) => {
 //     if (email === user.email && password === user.password) {

src/FLAD/screens/Setting.tsx

@@ -33,16 +33,8 @@ export default function Setting() {
     const currentMusic = useSelector(state => state.appReducer.userCurrentMusic);
 
     //Dark Mode
-    const [isDark, setIsDark] = useState(null);
+    const isDark = useSelector(state => state.userReducer.dark);
-    useEffect(() => {
+
-        const retrieveDarkMode = async () => {
-            const darkModeValue = await AsyncStorage.getItem('dark');
-            if (darkModeValue !== null) {
-                setIsDark(JSON.parse(darkModeValue));
-            }
-        };
-        retrieveDarkMode();
-    }, []);
     const style = isDark ? GraphicalCharterDark : GraphicalCharterLight;
 
     async function ChangeDarkMode() {
@@ -51,7 +43,6 @@ export default function Setting() {
             if (currentValue !== null) {
                 const newValue = JSON.stringify(!JSON.parse(currentValue));
                 await AsyncStorage.setItem('dark', newValue);
-                setIsDark(JSON.parse(newValue));
                 dispatch(ChangeMode(JSON.parse(newValue)))
             }
         } catch (error) {

src/FLAD/screens/SettingProfil.tsx

@@ -4,7 +4,7 @@ import { TextInput, TouchableOpacity } from 'react-native-gesture-handler';
 import { Svg, Path } from 'react-native-svg';
 import Modal from "react-native-modal";
 import { useNavigation } from "@react-navigation/native";
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 
 import normalize from '../components/Normalize';
 import * as ImagePicker from 'expo-image-picker';
@@ -23,23 +23,20 @@ const DismissKeyboard = ({ children }) => (
 
 export default function SettingProfil() {
     //Dark Mode
-    const [isDark, setIsDark] = useState(null);
+    const dispatch = useDispatch();
-    useEffect(() => {
+    const isDark = useSelector(state => state.userReducer.dark);
-        const retrieveDarkMode = async () => {
+    const UserCurrent = useSelector(state => state.userReducer.user);
-            const darkModeValue = await AsyncStorage.getItem('dark');
+
-            if (darkModeValue !== null) {
-                setIsDark(JSON.parse(darkModeValue));
-            }
-        };
-        retrieveDarkMode();
-    }, []);
     const style = isDark ? GraphicalCharterDark : GraphicalCharterLight;
 
-    const [image, setImage] = useState(null);
     const navigation = useNavigation();
     const [currentIndex, setCurrentIndex] = useState(0);
     const [isModalVisible, setIsModalVisible] = React.useState(false);
 
+    useEffect(() => {
+        console.log(UserCurrent.image);
+      });
+
     const handleModal = () => setIsModalVisible(() => !isModalVisible);
     // @ts-ignore
     const viewableItemsChanged = useRef(({ viewableItems }) => {
@@ -54,11 +51,7 @@ export default function SettingProfil() {
             aspect: [4, 3],
             quality: 1,
         });
-
-        console.log(result);
-
         if (!result.canceled) {
-            setImage(result.assets[0].uri);
         }
     };
 
@@ -182,12 +175,12 @@ export default function SettingProfil() {
         textInputId: {
             marginLeft: 50,
             width: '57%',
-            color: 'white',
+            color: style.Text,
             fontSize: normalize(18),
         },
         textInputMail: {
             marginLeft: 100,
-            color: 'white',
+            color: style.Text,
             width: '57%',
             fontSize: normalize(18)
         },
@@ -288,7 +281,7 @@ export default function SettingProfil() {
                         <View style={styles.profilHead}>
                             <Text style={styles.title}>Profil</Text>
                             <View style={styles.imageWrapper}>
-                                {image && <Image source={{ uri: image }} style={styles.imageProfil} />}
+                                <Image source={{ uri: UserCurrent.image }} style={styles.imageProfil} />
                             </View>
                             <View style={styles.editButton}>
                                 <TouchableOpacity onPress={pickImage} >
@@ -301,11 +294,11 @@ export default function SettingProfil() {
                         <View style={styles.body}>
                             <View style={styles.optionId}>
                                 <Text style={styles.textOption}>Identifiant</Text>
-                                <TextInput placeholderTextColor='#828288' placeholder='Flady' style={styles.textInputId} />
+                                <TextInput placeholderTextColor='#828288' placeholder={UserCurrent.name} style={styles.textInputId} />
                             </View>
                             <View style={styles.optionMail}>
                                 <Text style={styles.textOption}>Mail</Text>
-                                <TextInput placeholderTextColor='#828288' placeholder='emre.kartal@etu.uca.fr' style={styles.textInputMail} />
+                                <TextInput placeholderTextColor='#828288' placeholder={UserCurrent.email} style={styles.textInputMail} />
                             </View>
                         </View>