Local storage successful but some error remaining on darkmode

src/FLAD/components/CardMusic.tsx

@@ -17,7 +17,7 @@ type CustomCardMusic = { //Props
 
 export default function CardMusic(CBP: CustomCardMusic) {
   const isDark = useSelector(state => state.userReducer.dark);
-  const style = isDark ? GraphicalCharterLight : GraphicalCharterDark;
+  const style = isDark ? GraphicalCharterDark : GraphicalCharterLight;
   const currentMusic = useSelector(state => state.appReducer.currentMusic);
 
   const source = typeof CBP.image === 'string' ? { uri: CBP.image } : CBP.image;

src/FLAD/package.json

@@ -9,6 +9,7 @@
     "web": "expo start --web"
   },
   "dependencies": {
+    "@react-native-async-storage/async-storage": "^1.17.11",
     "@react-navigation/bottom-tabs": "^6.5.4",
     "@react-navigation/native": "^6.1.4",
     "@react-navigation/native-stack": "^6.9.8",

src/FLAD/redux/actions/userActions.tsx

@@ -3,15 +3,15 @@ import { userTypes } from "../types/userTypes";
 
 
 export interface Credentials {
-  email : string,
-  password : string
+  email: string,
+  password: string
 }
 export interface CredentialsRegister {
-  email : string,
-  password : string,
-  name : string,
-  idFlad : string,
-  idSpotify : string
+  email: string,
+  password: string,
+  name: string,
+  idFlad: string,
+  idSpotify: string
 }
 // export const setLoggedInState = loggedInState => (
 //   {
@@ -19,34 +19,47 @@ export interface CredentialsRegister {
 //     loggedInState,
 //   }
 // );
-export const setLoginState = (cred : Credentials) => {
+export const setLoginState = (cred: Credentials) => {
   return {
     type: userTypes.LOGIN,
-    playload : cred
+    playload: cred
   };
 }
 
-export const restoreToken = (token : string) => {
+export const restoreToken = (token: string) => {
   return {
     type: userTypes.RESTORE_TOKEN,
-    playload : token
+    playload: token
+  };
+}
+export const userSignUp = (user: User) => {
+  return {
+    type: userTypes.LOGIN,
+    playload: user
+  };
+}
+
+export const UserLogout = () => {
+  return {
+    type: userTypes.USER_LOGOUT,
+  };
+}
+
+export const userChangeMode = (value: boolean) => {
+  return {
+    type: userTypes.CHANGE_MODE,
+    playload: value
   };
 }
-export const userSignUp = (user : User) => {
-    return {
-      type: userTypes.LOGIN, 
-      playload : user
-    };
-  }
 
-  export const UserLogout = () => {
-    return {
-      type: userTypes.USER_LOGOUT, 
-    };
-  }
+export const ChangeErrorLogin = () => {
+  return {
+    type: userTypes.CHANGE_ERROR_LOGIN,
+  };
+}
 
-  export const userChangeMode = () => {
-    return {
-      type: userTypes.CHANGE_MODE, 
-    };
-  }
+export const ChangeErrorSignup = () => {
+  return {
+    type: userTypes.CHANGE_ERROR_SIGNUP,
+  };
+}

src/FLAD/redux/reducers/userReducer.tsx

@@ -1,3 +1,4 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
 import { User } from "../../Model/User";
 import { userTypes } from "../types/userTypes";
 const initialState = {
@@ -7,7 +8,9 @@ const initialState = {
   userSpotifyToken: null,
   error: null,
   isLogedIn: false,
-  dark: false,
+  failedLogin: false,
+  failedSignup: false,
+  dark: null
 }
 
 const userReducer = (state = initialState, action: any) => {
@@ -24,25 +27,38 @@ const userReducer = (state = initialState, action: any) => {
         isLogedIn: resp,
       };
     case userTypes.LOGIN:
+      AsyncStorage.setItem('dark', JSON.stringify(false)).then(() => {
+        console.log('La nouvelle clé et sa valeur ont été créées dans le localstorage');
+      });
       console.log("++++++++++++++++++++++++++++++++++++++userRducer+++++++++++++++++++++++++++++3");
       console.log(action.playload, "LOOGGIIINN");
       console.log("++++++++++++++++++++++++++++++++++++++userRducer+++++++++++++++++++++++++++++3");
       return {
         ...state,
         user: action.playload,
-        isLogedIn: true
+        failedLogin: false,
+        isLogedIn: true,
+        dark: false
       };
     case userTypes.SIGNUP:
+      AsyncStorage.setItem('dark', JSON.stringify(false)).then(() => {
+        console.log('La nouvelle clé et sa valeur ont été créées dans le localstorage');
+      });
       console.log("++++++++++++++++++++++++++++++++++++++userRducer+++++++++++++++++++++++++++++3");
 
-      console.log(action.playload, "LOOGGIIINN");
+      console.log(action.playload, "SIGNNNNNUUUUPPPPPPP");
       console.log("++++++++++++++++++++++++++++++++++++++userRducer+++++++++++++++++++++++++++++3");
       return {
         ...state,
         user: action.playload,
-        isLogedIn: true
+        failedSignup: false,
+        isLogedIn: true,
+        dark: false
       };
     case userTypes.USER_LOGOUT:
+      AsyncStorage.removeItem('dark').then(() => {
+        console.log('La clé a été supprimée du localstorage');
+      });
       return {
         ...state,
         user: null,
@@ -53,8 +69,12 @@ const userReducer = (state = initialState, action: any) => {
         ...state,
         userSpotifyToken: action.playload,
       };
+    case userTypes.CHANGE_ERROR_LOGIN:
+      return { ...state, failedLogin: true }
+    case userTypes.CHANGE_ERROR_SIGNUP:
+      return { ...state, failedSignup: true }
     case userTypes.CHANGE_MODE:
-      return { ...state, dark: !state.dark }
+      return { ...state, dark: action.playload }
     default:
       return state;
   }

src/FLAD/redux/thunk/authThunk.tsx

@@ -4,57 +4,59 @@ import axios from "axios";
 import { json } from "express";
 import { useEffect } from "react";
 import { API_URL } from "../../fladConfig";
-import { Credentials, CredentialsRegister, restoreToken, setLoginState, UserLogout, userChangeMode, userSignUp } from "../actions/userActions";
+import { Credentials, CredentialsRegister, restoreToken, setLoginState, UserLogout, userChangeMode, userSignUp, ChangeErrorLogin, ChangeErrorSignup } from "../actions/userActions";
 import * as SecureStore from 'expo-secure-store';
 import { User } from "../../Model/User";
 import { UserFactory } from "../../Model/factory/UserFactory";
 
 const key = 'userToken';
 
-export const registerUser = ( resgisterCredential : CredentialsRegister) => {
+export const registerUser = (resgisterCredential: CredentialsRegister) => {
   //@ts-ignore
   return async dispatch => {
     try {
       console.log(resgisterCredential);
 
-  const config = {
-      headers: {
+      const config = {
+        headers: {
           'Content-Type': 'application/json',
-      },
+        },
       }
       const resp = await axios.post(
-          `${API_URL}/api/users/register`,
-          resgisterCredential,
-          config
-        )
+        `${API_URL}/api/users/register`,
+        resgisterCredential,
+        config
+      )
 
-        if (resp.data.token) {
-          console.log(resp.data.token);
-          const token = resp.data.token;
+      if (resp.data.token) {
+        console.log(resp.data.token);
+        const token = resp.data.token;
         // await SecureStore.setItemAsync(key, token);
         const headers = {
-                'Authorization': 'Bearer ' + token};
+          'Authorization': 'Bearer ' + token
+        };
         const user = await axios.get(
           "https://flad-api-production.up.railway.app/api/users",
-          {headers}
-            )
-        dispatch(userSignUp( UserFactory.JsonToModel(user.data) )); // our action is called here
-          // console.log(user.data);
+          { headers }
+        )
+        dispatch(userSignUp(UserFactory.JsonToModel(user.data))); // our action is called here
+        // console.log(user.data);
         // dispatch(setLoginState(user.data) ); // our action is called here
-        } else {
+      } else {
         console.log('Login Failed', 'Username or Password is incorrect');
-        }
+      }
 
 
-        // if (resp.data.msg === 'success') { // response success checking logic could differ
-        //   await SecureStore.setItemAsync(key, resp.data.token);
-        //   dispatch(setLoginState(resp.data.user) ); // our action is called here
-        // } else {
-        //   console.log('Login Failed', 'Username or Password is incorrect');
-        // }
+      // if (resp.data.msg === 'success') { // response success checking logic could differ
+      //   await SecureStore.setItemAsync(key, resp.data.token);
+      //   dispatch(setLoginState(resp.data.user) ); // our action is called here
+      // } else {
+      //   console.log('Login Failed', 'Username or Password is incorrect');
+      // }
 
     } catch (error) {
       console.log('Error---------', error);
+      dispatch(ChangeErrorSignup())
     }
   }
 }
@@ -101,6 +103,7 @@ export const userLogin = (loginCredential: Credentials) => {
       }
 
     } catch (error) {
+      dispatch(ChangeErrorLogin())
       console.log('Error---------', error);
     }
   }
@@ -146,11 +149,10 @@ export const DeleteToken = () => {
   }
 }
 
-export const ChangeMode = () => {
+export const ChangeMode = (value: boolean) => {
   //@ts-ignore
   return async dispatch => {
-    dispatch(userChangeMode());
-    await SecureStore.deleteItemAsync(key);
+    dispatch(userChangeMode(value));
   }
 }
 

src/FLAD/redux/types/userTypes.tsx

@@ -6,5 +6,7 @@ export const userTypes = {
     UPDATE_PROFILE_PICTURE: 'UPDATE_PROFILE_PICTURE',
     USER_LOGOUT: 'USER_LOGOUT',
     RESTORE_TOKEN: "RESTORE_TOKEN",
-    CHANGE_MODE: "CHANGE_MODE"
+    CHANGE_MODE: "CHANGE_MODE",
+    CHANGE_ERROR_LOGIN: "CHANGE_ERROR_LOGIN",
+    CHANGE_ERROR_SIGNUP: "CHANGE_ERROR_SIGNUP"
 }

src/FLAD/screens/Favorite.tsx

@@ -12,14 +12,14 @@ import { GraphicalCharterDark } from '../assets/GraphicalCharterDark';
 import { GraphicalCharterLight } from '../assets/GraphicalCharterLight';
 
 export default function favoritePage() {
+    const dispatch = useDispatch();
     //Dark Mode
     const isDark = useSelector(state => state.userReducer.dark);
-    const style = isDark ? GraphicalCharterLight : GraphicalCharterDark;
+    const style = isDark ? GraphicalCharterDark : GraphicalCharterLight;
 
     const navigation = useNavigation();
     //@ts-ignore
     const favoritesMusic = useSelector(state => state.appReducer.favoriteMusic);
-    const dispatch = useDispatch();
     const images = [
         { id: 1, source: require('../assets/images/FLADYLove.png') },
         { id: 2, source: require('../assets/images/FLADYStar.png') },

src/FLAD/screens/LoginPage.tsx

@@ -3,7 +3,7 @@ import { View, Image, StyleSheet, Text, ImageBackground, TextInput, TouchableWit
 import { useNavigation } from "@react-navigation/native";
 import normalize from '../components/Normalize';
 import { userLogin } from '../redux/thunk/authThunk';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { Audio } from 'expo-av';
 import { Credentials } from '../redux/actions/userActions';
 
@@ -19,6 +19,8 @@ export default function loginPage() {
     const [rememberMe, setRememberMe] = useState(false);
     const navigation = useNavigation();
 
+    const failedLogin = useSelector(state => state.userReducer.failedLogin);
+
     const [username, setUsername] = useState('');
     const [password, setPassword] = useState('');
     async function playSound() {
@@ -56,14 +58,19 @@ export default function loginPage() {
                     </Text>
                     <Image source={require("../assets/icons/Logo_White_Flad.png")} style={styles.imageLogo} />
                     <Text style={styles.text}>SE CONNECTER</Text>
-                    <View>
-                        <TextInput placeholder="Username"
+                    {failedLogin && (
+                        <Text style={styles.textError}>Email ou mot de passe incorrect!</Text>
+                    )}
+                    <View style={{ marginTop: 7 }}>
+                        <TextInput placeholder="Email"
+                            placeholderTextColor="#B8B4B8"
                             value={username}
                             onChangeText={setUsername} style={[styles.input, styles.shadow]} />
                         <Image source={require('../assets/icons/icons/User.png')} style={styles.iconUser} />
                     </View>
                     <View>
                         <TextInput placeholder="Password"
+                            placeholderTextColor="#B8B4B8"
                             value={password}
                             onChangeText={setPassword}
                             secureTextEntry style={[styles.input, styles.shadow]} />
@@ -118,6 +125,12 @@ const styles = StyleSheet.create({
         height: normalize(100),
         borderRadius: 21
     },
+    textError: {
+        fontSize: 15, 
+        alignSelf: "center", 
+        color: "red", 
+        fontWeight: 'bold'
+    },
     buttonImage: {
         width: normalize(46),
         height: normalize(46),
@@ -152,7 +165,7 @@ const styles = StyleSheet.create({
         fontSize: normalize(29),
         alignSelf: 'center',
         color: 'white',
-        marginBottom: 15
+        marginBottom: 8
     },
     shadow: {
         shadowColor: 'black',

src/FLAD/screens/Register.tsx

@@ -7,7 +7,7 @@ import * as AuthSession from 'expo-auth-session';
 import * as WebBrowser from 'expo-web-browser';
 import { makeRedirectUri, useAuthRequest } from 'expo-auth-session';
 import { registerUser } from '../redux/thunk/authThunk';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { Audio } from 'expo-av';
 import { CredentialsRegister } from '../redux/actions/userActions';
 import { Buffer } from 'buffer';
@@ -41,6 +41,8 @@ export default function InscriptionPage() {
   const navigation = useNavigation();
   const [spotifyToken, setSpotifyToken] = useState('');
   const [spotifyID, setSpotifyIds] = useState('')
+  const failedSignup = useSelector(state => state.userReducer.failedSignup);
+
   async function playSound() {
     console.log('Loading Sound');
     const { sound } = await Audio.Sound.createAsync(
@@ -238,20 +240,26 @@ export default function InscriptionPage() {
           </Text>
           <Image source={require("../assets/icons/Logo_White_Flad.png")} style={styles.imageLogo} />
           <Text style={styles.text}>S'INSCRIRE</Text>
-          <View>
+          {failedSignup && (
+            <Text style={styles.textError}>Email ou mot de passe incorrect!</Text>
+          )}
+          <View style={{ marginTop: 7 }}>
             <TextInput style={[styles.input, styles.shadow]} placeholder="Username"
+              placeholderTextColor="#B8B4B8"
               value={username}
               onChangeText={setUsername} />
             <Image source={require('../assets/icons/icons/User.png')} style={styles.iconUser} />
           </View>
           <View>
             <TextInput style={[styles.input, styles.shadow]} placeholder="Email"
+              placeholderTextColor="#B8B4B8"
               value={email}
               onChangeText={setEmail} />
             <Image source={require('../assets/icons/icons/lock.png')} style={styles.iconLock} />
           </View>
           <View>
             <TextInput style={[styles.input, styles.shadow]} placeholder="Password"
+              placeholderTextColor="#B8B4B8"
               value={password} secureTextEntry={true}
               onChangeText={setPassword} />
             <Image source={require('../assets/icons/icons/lock.png')} style={styles.iconLock} />
@@ -307,6 +315,12 @@ const styles = StyleSheet.create({
     height: normalize(100),
     borderRadius: 21
   },
+  textError: {
+    fontSize: 15,
+    alignSelf: "center",
+    color: "red",
+    fontWeight: 'bold'
+  },
   buttonImage: {
     width: normalize(46),
     height: normalize(46),
@@ -324,7 +338,7 @@ const styles = StyleSheet.create({
     fontSize: normalize(29),
     alignSelf: 'center',
     color: 'white',
-    marginBottom: 15
+    marginBottom: 8
   },
   textIntoButton: {
     fontWeight: 'bold',

src/FLAD/screens/Setting.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
+import AsyncStorage from '@react-native-async-storage/async-storage';
 import { View, StyleSheet, Text, Image, TouchableWithoutFeedback, Keyboard, TouchableOpacity, SafeAreaView } from 'react-native';
 import { Svg, Path } from 'react-native-svg';
 import { useNavigation } from "@react-navigation/native";
@@ -32,11 +33,30 @@ export default function Setting() {
     const currentMusic = useSelector(state => state.appReducer.userCurrentMusic);
 
     //Dark Mode
-    const isDark = useSelector(state => state.userReducer.dark);
-    const style = isDark ? GraphicalCharterLight : GraphicalCharterDark;
+    const [isDark, setIsDark] = useState(null);
+    useEffect(() => {
+        const retrieveDarkMode = async () => {
+            const darkModeValue = await AsyncStorage.getItem('dark');
+            if (darkModeValue !== null) {
+                setIsDark(JSON.parse(darkModeValue));
+            }
+        };
+        retrieveDarkMode();
+    }, []);
+    const style = isDark ? GraphicalCharterDark : GraphicalCharterLight;
 
-    const ChangeDarkMode = () => {
-        dispatch(ChangeMode())
+    async function ChangeDarkMode() {
+        try {
+            const currentValue = await AsyncStorage.getItem('dark');
+            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) {
+            console.log(`Une erreur s'est produite lors de la mise à jour de la valeur booléenne pour la clé 'dark': `, error);
+        }
     }
 
     //Notification
@@ -87,7 +107,7 @@ export default function Setting() {
         },
         inputSearch: {
             placeholderTextColor: 'red',
-            color: 'white',
+            color: style.Text,
             width: normalize(350),
         },
         profil: {
@@ -319,7 +339,7 @@ export default function Setting() {
                         </View>
 
                         <View style={styles.musicActually}>
-                            <CardMusic image={currentMusic.image} title={currentMusic.title} description="PNL" />
+                            <CardMusic image="{currentMusic.image}" title="{currentMusic.title}" description="PNL" />
                             <Image source={require("../assets/images/FladyShadow.png")} style={styles.mascot} />
                         </View>
 

src/FLAD/screens/SettingProfil.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import { View, Text, StyleSheet, TouchableWithoutFeedback, Keyboard, ScrollView, Image } from 'react-native';
 import { TextInput, TouchableOpacity } from 'react-native-gesture-handler';
 import { Svg, Path } from 'react-native-svg';
@@ -11,6 +11,7 @@ import * as ImagePicker from 'expo-image-picker';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { GraphicalCharterDark } from '../assets/GraphicalCharterDark';
 import { GraphicalCharterLight } from '../assets/GraphicalCharterLight';
+import AsyncStorage from '@react-native-async-storage/async-storage';
 
 // @ts-ignore
 const DismissKeyboard = ({ children }) => (
@@ -22,8 +23,17 @@ const DismissKeyboard = ({ children }) => (
 
 export default function SettingProfil() {
     //Dark Mode
-    const isDark = useSelector(state => state.userReducer.dark);
-    const style = isDark ? GraphicalCharterLight : GraphicalCharterDark;
+    const [isDark, setIsDark] = useState(null);
+    useEffect(() => {
+        const retrieveDarkMode = async () => {
+            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();