From dfabaa9ffada09426489140233ad40a114932cec Mon Sep 17 00:00:00 2001 From: Emre Date: Sat, 11 Mar 2023 22:14:01 +0100 Subject: [PATCH] Local storage successful but some error remaining on darkmode --- src/FLAD/components/CardMusic.tsx | 2 +- src/FLAD/package.json | 1 + src/FLAD/redux/actions/userActions.tsx | 73 +++++++++++++++---------- src/FLAD/redux/reducers/userReducer.tsx | 30 ++++++++-- src/FLAD/redux/thunk/authThunk.tsx | 58 ++++++++++---------- src/FLAD/redux/types/userTypes.tsx | 4 +- src/FLAD/screens/Favorite.tsx | 4 +- src/FLAD/screens/LoginPage.tsx | 21 +++++-- src/FLAD/screens/Register.tsx | 20 ++++++- src/FLAD/screens/Setting.tsx | 32 +++++++++-- src/FLAD/screens/SettingProfil.tsx | 16 +++++- 11 files changed, 178 insertions(+), 83 deletions(-) diff --git a/src/FLAD/components/CardMusic.tsx b/src/FLAD/components/CardMusic.tsx index c46f577..ff62bbe 100644 --- a/src/FLAD/components/CardMusic.tsx +++ b/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; diff --git a/src/FLAD/package.json b/src/FLAD/package.json index 72ede96..31ffb22 100644 --- a/src/FLAD/package.json +++ b/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", diff --git a/src/FLAD/redux/actions/userActions.tsx b/src/FLAD/redux/actions/userActions.tsx index 7164c60..fb6aac4 100644 --- a/src/FLAD/redux/actions/userActions.tsx +++ b/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 + type: userTypes.LOGIN, + playload: cred }; } -export const restoreToken = (token : string) => { +export const restoreToken = (token: string) => { return { - type: userTypes.RESTORE_TOKEN, - playload : token + type: userTypes.RESTORE_TOKEN, + playload: token + }; +} +export const userSignUp = (user: User) => { + return { + type: userTypes.LOGIN, + playload: user }; } -export const userSignUp = (user : User) => { - return { - type: userTypes.LOGIN, - playload : user - }; - } - export const UserLogout = () => { - return { - type: userTypes.USER_LOGOUT, - }; - } - - export const userChangeMode = () => { - return { - type: userTypes.CHANGE_MODE, - }; - } \ No newline at end of file +export const UserLogout = () => { + return { + type: userTypes.USER_LOGOUT, + }; +} + +export const userChangeMode = (value: boolean) => { + return { + type: userTypes.CHANGE_MODE, + playload: value + }; +} + +export const ChangeErrorLogin = () => { + return { + type: userTypes.CHANGE_ERROR_LOGIN, + }; +} + +export const ChangeErrorSignup = () => { + return { + type: userTypes.CHANGE_ERROR_SIGNUP, + }; +} \ No newline at end of file diff --git a/src/FLAD/redux/reducers/userReducer.tsx b/src/FLAD/redux/reducers/userReducer.tsx index 908bef2..ad28a6e 100644 --- a/src/FLAD/redux/reducers/userReducer.tsx +++ b/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; } diff --git a/src/FLAD/redux/thunk/authThunk.tsx b/src/FLAD/redux/thunk/authThunk.tsx index f6931e1..e746279 100644 --- a/src/FLAD/redux/thunk/authThunk.tsx +++ b/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)); } } diff --git a/src/FLAD/redux/types/userTypes.tsx b/src/FLAD/redux/types/userTypes.tsx index 12d45ad..8ced6fe 100644 --- a/src/FLAD/redux/types/userTypes.tsx +++ b/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" } \ No newline at end of file diff --git a/src/FLAD/screens/Favorite.tsx b/src/FLAD/screens/Favorite.tsx index a9e11d7..042a6fb 100644 --- a/src/FLAD/screens/Favorite.tsx +++ b/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') }, diff --git a/src/FLAD/screens/LoginPage.tsx b/src/FLAD/screens/LoginPage.tsx index 617f1fb..9453f6d 100644 --- a/src/FLAD/screens/LoginPage.tsx +++ b/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() { SE CONNECTER - - Email ou mot de passe incorrect! + )} + + @@ -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', diff --git a/src/FLAD/screens/Register.tsx b/src/FLAD/screens/Register.tsx index e543f5f..d96411a 100644 --- a/src/FLAD/screens/Register.tsx +++ b/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() { S'INSCRIRE - + {failedSignup && ( + Email ou mot de passe incorrect! + )} + @@ -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', diff --git a/src/FLAD/screens/Setting.tsx b/src/FLAD/screens/Setting.tsx index 33049e1..3cc487b 100644 --- a/src/FLAD/screens/Setting.tsx +++ b/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() { - + diff --git a/src/FLAD/screens/SettingProfil.tsx b/src/FLAD/screens/SettingProfil.tsx index 66dff37..c0bf5e6 100644 --- a/src/FLAD/screens/SettingProfil.tsx +++ b/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();