diff --git a/flad/src/FLAD/components/Onboarding.tsx b/flad/src/FLAD/components/Onboarding.tsx deleted file mode 100644 index 0e14e61..0000000 --- a/flad/src/FLAD/components/Onboarding.tsx +++ /dev/null @@ -1,199 +0,0 @@ -import React, { useState, useRef } from 'react'; -import { Modal, View, StyleSheet, Text, FlatList, Animated, TouchableOpacity, ImageBackground, Image } from 'react-native'; -// import Modal from "react-native-modal"; -import {useNavigation} from "@react-navigation/native"; - -import normalize from '../components/Normalize'; -import OnboardingItem from './OnboardingItem'; -import Paginator from './Paginator'; -import NextButton from './NextButton'; -import slides from '../data/slides'; - -export default function Onboarding() { - const [currentIndex, setCurrentIndex] = useState(0); - const scrollX = useRef(new Animated.Value(0)).current; - const slidesRef = useRef(null); - const navigation = useNavigation(); - - const [isModalVisible, setIsModalVisible] = React.useState(false); - - const handleModal = () => setIsModalVisible(() => !isModalVisible); - // @ts-ignore - const viewableItemsChanged = useRef(({ viewableItems }) => { - setCurrentIndex(viewableItems[0].index); - }).current; - - const viewConfig = useRef({ viewAreaCoveragePercentThreshold: 50 }).current; - - const scrollTo = () => { - if(currentIndex < slides.length - 1) { - // @ts-ignore - slidesRef.current.scrollToIndex({ index: currentIndex + 1 }); - } else { - setIsModalVisible(() => !isModalVisible); - } - }; - - return ( - // @ts-ignore - - - } - horizontal - showsHorizontalScrollIndicator={false} - pagingEnabled - bounces={false} - keyExtractor={(item) => item.id} - onScroll={Animated.event([{ nativeEvent: { contentOffset: { x: scrollX } } }], { - useNativeDriver: false, - })} - scrollEventThrottle={32} - onViewableItemsChanged={viewableItemsChanged} - viewabilityConfig={viewConfig} - ref={slidesRef} - /> - - - - - - - - - v2.0 - - - - - - - - {handleModal(); - // @ts-ignore - navigation.navigate('Login'); - }}> - CONTINUER AVEC SPOTIFY - - {handleModal(); navigation.navigate('Register');}}> - S’INSCRIRE MAINTENANT - - - {handleModal(); navigation.navigate('Login');}}> - SE CONNECTER - - - - - - - ); -} - -const styles = StyleSheet.create({ - container: { - flex: 1, - justifyContent: 'center', - alignItems: 'center', - backgroundColor: '#141414' - }, - imageLogo: { - width: normalize(324), - height: normalize(162), - marginBottom: '25%' - }, - balise: { - flex: 1, - justifyContent: 'center', - alignItems: 'center', - marginBottom: normalize(110) - }, - closeButtonCircle: { - backgroundColor: 'gray', - opacity: 0.4, - width: 40, - height: 40, - borderRadius: 20, - justifyContent: 'center', - alignItems: 'center', - position: 'absolute', - top: 10, - right: 10 - }, - modalContent: { - - flex: 1, - justifyContent: 'center', - alignItems: 'center', - }, - modalView: { - flex: 1, - justifyContent: 'center', - alignItems: 'center' - }, - backgroundImage: { - flex: 1, - width: '100%', - height: '100%', - }, - imageButton: { - width: 20, - height: 20 - }, - versionText: { - position: 'absolute', - top: 50, - right: 10, - color: 'gray', - fontWeight: 'bold', - fontSize: normalize(17) - }, - buttonConnection: { - width: 262, - height: 57, - justifyContent: 'center', - alignItems: 'center', - backgroundColor: '#24CF5F', - borderRadius: 11, - borderColor: '#68F097', - borderWidth: 1, - marginBottom: 12 - }, - buttonInscription: { - width: 262, - height: 57, - justifyContent: 'center', - alignItems: 'center', - backgroundColor: '#951DDE', - borderRadius: 11, - borderColor: '#C656ED', - borderWidth: 1, - marginBottom: 220 - }, - text: { - fontWeight: 'bold', - color: 'white', - fontSize: normalize(18) - }, - button2Connection: { - width: '100%', - height: normalize(92), - backgroundColor: '#232123', - borderTopColor: '#3C3C3C', - borderTopWidth: 1, - justifyContent: 'center', - alignItems: 'center', - position: 'absolute', - bottom: normalize(0) - }, - mascot: { - width: normalize(130), - height: normalize(130), - position: 'absolute', - bottom: normalize(90), - right: normalize(0) - } -}) diff --git a/src/FLAD/assets/GraphicalCharterDark.tsx b/src/FLAD/assets/GraphicalCharterDark.tsx new file mode 100644 index 0000000..abedb9c --- /dev/null +++ b/src/FLAD/assets/GraphicalCharterDark.tsx @@ -0,0 +1,4 @@ +export const GraphicalCharterDark = { + "body": "#141414", + "Text": "white", +} \ No newline at end of file diff --git a/src/FLAD/assets/GraphicalCharterLight.tsx b/src/FLAD/assets/GraphicalCharterLight.tsx new file mode 100644 index 0000000..5422020 --- /dev/null +++ b/src/FLAD/assets/GraphicalCharterLight.tsx @@ -0,0 +1,4 @@ +export const GraphicalCharterLight = { + "body": "#E7E7E7", + "Text": "black", +} \ No newline at end of file diff --git a/src/FLAD/assets/images/Board_Image.png b/src/FLAD/assets/images/Board_Image.png index de93bdd..10532a6 100644 Binary files a/src/FLAD/assets/images/Board_Image.png and b/src/FLAD/assets/images/Board_Image.png differ diff --git a/src/FLAD/assets/images/FLADYCry.png b/src/FLAD/assets/images/FLADYCry.png new file mode 100644 index 0000000..e7079fb Binary files /dev/null and b/src/FLAD/assets/images/FLADYCry.png differ diff --git a/src/FLAD/assets/images/FLADYHate.png b/src/FLAD/assets/images/FLADYHate.png new file mode 100644 index 0000000..da322f7 Binary files /dev/null and b/src/FLAD/assets/images/FLADYHate.png differ diff --git a/src/FLAD/assets/sounds/Click.mp3 b/src/FLAD/assets/sounds/Click.mp3 new file mode 100644 index 0000000..42d254a Binary files /dev/null and b/src/FLAD/assets/sounds/Click.mp3 differ diff --git a/src/FLAD/components/AdjustSize.tsx b/src/FLAD/components/AdjustSize.tsx index 409be07..65142a6 100644 --- a/src/FLAD/components/AdjustSize.tsx +++ b/src/FLAD/components/AdjustSize.tsx @@ -1,6 +1,5 @@ import React from 'react'; -// @ts-ignore export default function AdjustSize(Text: String) { const titleLength = Text.length; const minFontSize = 23; diff --git a/src/FLAD/components/CardMusic.tsx b/src/FLAD/components/CardMusic.tsx index 89b1602..4c8e34b 100644 --- a/src/FLAD/components/CardMusic.tsx +++ b/src/FLAD/components/CardMusic.tsx @@ -1,34 +1,34 @@ import React from 'react'; -import { StyleSheet, Text, View , Image } from 'react-native'; +import { StyleSheet, Text, View, Image } from 'react-native'; import { SharedElement } from 'react-navigation-shared-element'; import { useSelector } from 'react-redux'; import normalize from '../components/Normalize'; type CustomCardMusic = { //Props - image: string; - title: string; - description: string; - id : string; + image: string; + title: string; + description: string; + id: string; } export default function CardMusic(CBP: CustomCardMusic) { -const currentMusic = useSelector(state => state.appReducer.currentMusic); + const currentMusic = useSelector(state => state.appReducer.currentMusic); const source = typeof CBP.image === 'string' ? { uri: CBP.image } : CBP.image; return ( - - - - - {/* currentMusic.id === CBP.id && styles.currentMusic */} - {CBP.title} - {CBP.description} - + + + + + {/* currentMusic.id === CBP.id && styles.currentMusic */} + {CBP.title} + {CBP.description} + ); } diff --git a/src/FLAD/components/FladyComponent.tsx b/src/FLAD/components/FladyComponent.tsx index 76bbf4d..4dee542 100644 --- a/src/FLAD/components/FladyComponent.tsx +++ b/src/FLAD/components/FladyComponent.tsx @@ -4,28 +4,28 @@ import normalize from './Normalize'; type Flady = { image: string | object; - }; +}; export default function FladyComponent(monFlady: Flady) { const source = typeof monFlady.image === 'string' ? { uri: monFlady.image } : monFlady.image; return ( - + ) } -const styles = StyleSheet.create ({ +const styles = StyleSheet.create({ container: { - alignItems: "flex-start", width: normalize(152), height: normalize(152), borderRadius: 90, - backgroundColor: "white", marginHorizontal: normalize(15), + overflow: 'hidden', }, image: { - width: normalize(200), - height: normalize(200), + width: normalize(220), + height: normalize(220), + marginLeft: -1 } }) \ No newline at end of file diff --git a/src/FLAD/components/NextButton.tsx b/src/FLAD/components/NextButton.tsx index 47b5bd6..4ab5e91 100644 --- a/src/FLAD/components/NextButton.tsx +++ b/src/FLAD/components/NextButton.tsx @@ -1,12 +1,15 @@ import React, { useRef, useEffect } from 'react'; -import { View, StyleSheet, TouchableOpacity , Animated } from 'react-native'; +import { View, StyleSheet, TouchableOpacity , Animated, useColorScheme } from 'react-native'; import Svg, { G, Circle } from 'react-native-svg'; import { AntDesign } from '@expo/vector-icons'; - +import { GraphicalCharterDark } from '../assets/GraphicalCharterDark'; +import { GraphicalCharterLight } from '../assets/GraphicalCharterLight'; import normalize from '../components/Normalize'; // @ts-ignore export default function NextButton({ percentage, scrollTo }) { + const style = useColorScheme() == 'light' ? GraphicalCharterLight : GraphicalCharterDark; + const size = normalize(148); const strokeWidth = 2; const center = size / 2; @@ -56,11 +59,11 @@ export default function NextButton({ percentage, scrollTo }) { - + { - if(currentIndex < slides.length - 1) { + if (currentIndex < slides.length - 1) { // @ts-ignore slidesRef.current.scrollToIndex({ index: currentIndex + 1 }); } else { @@ -34,13 +36,119 @@ export default function Onboarding() { } }; + const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + backgroundColor: style.body + }, + imageLogo: { + width: normalize(324), + height: normalize(162), + marginBottom: '25%' + }, + balise: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + marginBottom: normalize(110) + }, + closeButtonCircle: { + backgroundColor: 'gray', + opacity: 0.4, + width: 40, + height: 40, + borderRadius: 20, + justifyContent: 'center', + alignItems: 'center', + position: 'absolute', + top: 10, + right: 10 + }, + modalContent: { + + flex: 1, + justifyContent: 'center', + alignItems: 'center', + }, + modalView: { + flex: 1, + justifyContent: 'center', + alignItems: 'center' + }, + backgroundImage: { + flex: 1, + width: '100%', + height: '100%', + }, + imageButton: { + width: 20, + height: 20 + }, + versionText: { + position: 'absolute', + top: 50, + right: 10, + color: 'gray', + fontWeight: 'bold', + fontSize: normalize(17) + }, + buttonConnection: { + width: 262, + height: 57, + justifyContent: 'center', + alignItems: 'center', + backgroundColor: '#24CF5F', + borderRadius: 11, + borderColor: '#68F097', + borderWidth: 1, + marginBottom: 12 + }, + buttonInscription: { + width: 262, + height: 57, + justifyContent: 'center', + alignItems: 'center', + backgroundColor: '#DA1D1D', + borderRadius: 11, + borderColor: '#F40C1C', + borderWidth: 1, + marginBottom: 220 + }, + text: { + fontWeight: 'bold', + color: 'white', + fontSize: normalize(18) + }, + button2Connection: { + width: '100%', + height: normalize(92), + backgroundColor: '#232123', + borderTopColor: '#3C3C3C', + borderTopWidth: 1, + justifyContent: 'center', + alignItems: 'center', + position: 'absolute', + bottom: normalize(0) + }, + mascot: { + width: normalize(130), + height: normalize(130), + position: 'absolute', + bottom: normalize(90), + right: normalize(0) + } + }) + + return ( // @ts-ignore - } + } horizontal showsHorizontalScrollIndicator={false} pagingEnabled @@ -50,12 +158,12 @@ export default function Onboarding() { useNativeDriver: false, })} scrollEventThrottle={32} - onViewableItemsChanged={viewableItemsChanged} + onViewableItemsChanged={viewableItemsChanged} viewabilityConfig={viewConfig} ref={slidesRef} - /> - - + /> + + @@ -66,23 +174,24 @@ export default function Onboarding() { - + - - {handleModal(); - // @ts-ignore - navigation.navigate('Login'); - }}> + + { + handleModal(); + // @ts-ignore + navigation.navigate('Login'); + }}> CONTINUER AVEC SPOTIFY - {handleModal(); navigation.navigate('Register');}}> + { handleModal(); navigation.navigate('Register'); }}> S’INSCRIRE MAINTENANT - - {handleModal(); navigation.navigate('Login');}}> + + { handleModal(); navigation.navigate('Login'); }}> SE CONNECTER @@ -92,108 +201,3 @@ export default function Onboarding() { ); } - -const styles = StyleSheet.create({ - container: { - flex: 1, - justifyContent: 'center', - alignItems: 'center', - backgroundColor: '#141414' - }, - imageLogo: { - width: normalize(324), - height: normalize(162), - marginBottom: '25%' - }, - balise: { - flex: 1, - justifyContent: 'center', - alignItems: 'center', - marginBottom: normalize(110) - }, - closeButtonCircle: { - backgroundColor: 'gray', - opacity: 0.4, - width: 40, - height: 40, - borderRadius: 20, - justifyContent: 'center', - alignItems: 'center', - position: 'absolute', - top: 10, - right: 10 - }, - modalContent: { - - flex: 1, - justifyContent: 'center', - alignItems: 'center', - }, - modalView: { - flex: 1, - justifyContent: 'center', - alignItems: 'center' - }, - backgroundImage: { - flex: 1, - width: '100%', - height: '100%', - }, - imageButton: { - width: 20, - height: 20 - }, - versionText: { - position: 'absolute', - top: 50, - right: 10, - color: 'gray', - fontWeight: 'bold', - fontSize: normalize(17) - }, - buttonConnection: { - width: 262, - height: 57, - justifyContent: 'center', - alignItems: 'center', - backgroundColor: '#24CF5F', - borderRadius: 11, - borderColor: '#68F097', - borderWidth: 1, - marginBottom: 12 - }, - buttonInscription: { - width: 262, - height: 57, - justifyContent: 'center', - alignItems: 'center', - backgroundColor: '#DA1D1D', - borderRadius: 11, - borderColor: '#F40C1C', - borderWidth: 1, - marginBottom: 220 - }, - text: { - fontWeight: 'bold', - color: 'white', - fontSize: normalize(18) - }, - button2Connection: { - width: '100%', - height: normalize(92), - backgroundColor: '#232123', - borderTopColor: '#3C3C3C', - borderTopWidth: 1, - justifyContent: 'center', - alignItems: 'center', - position: 'absolute', - bottom: normalize(0) - }, - mascot: { - width: normalize(130), - height: normalize(130), - position: 'absolute', - bottom: normalize(90), - right: normalize(0) - } -}) diff --git a/src/FLAD/components/OnboardingItem.tsx b/src/FLAD/components/OnboardingItem.tsx index 0846358..9feb16f 100644 --- a/src/FLAD/components/OnboardingItem.tsx +++ b/src/FLAD/components/OnboardingItem.tsx @@ -1,11 +1,43 @@ import React from 'react'; -import { View, StyleSheet, Text, Image, useWindowDimensions } from 'react-native'; +import { View, StyleSheet, Text, Image, useWindowDimensions, useColorScheme } from 'react-native'; import normalize from '../components/Normalize'; +import { GraphicalCharterDark } from '../assets/GraphicalCharterDark'; +import { GraphicalCharterLight } from '../assets/GraphicalCharterLight'; // @ts-ignore export default function Onboarding({ item }) { + const style = useColorScheme() == 'light' ? GraphicalCharterLight : GraphicalCharterDark; const { width, height } = useWindowDimensions(); - + const styles = StyleSheet.create({ + container: { + flex: 1, + marginTop: normalize(60), + backgroundColor: style.body + }, + image: { + width: '100%', + height: '100%', + justifyContent: 'center' + }, + title: { + fontWeight: '800', + fontSize: normalize(32), + marginBottom: 10, + color: style.Text, + textAlign: 'left', + paddingRight: 30, + paddingLeft: 20, + marginTop: normalize(30) + }, + description: { + fontWeight: '300', + color: style.Text, + fontSize: normalize(16), + textAlign: 'left', + paddingRight: 30, + paddingLeft: 20 + } + }) return ( @@ -17,33 +49,3 @@ export default function Onboarding({ item }) { ); } -const styles = StyleSheet.create({ - container: { - flex: 1, - marginTop: normalize(60), - backgroundColor: '#141414' - }, - image: { - width: '100%', - height: '100%', - justifyContent: 'center' - }, - title: { - fontWeight: '800', - fontSize: normalize(32), - marginBottom: 10, - color: 'white', - textAlign: 'left', - paddingRight: 30, - paddingLeft: 20, - marginTop: normalize(30) - }, - description: { - fontWeight: '300', - color: 'white', - fontSize: normalize(16), - textAlign: 'left', - paddingRight: 30, - paddingLeft: 20 - } -}) diff --git a/src/FLAD/components/Paginator.tsx b/src/FLAD/components/Paginator.tsx index a5d69cb..8252a6e 100644 --- a/src/FLAD/components/Paginator.tsx +++ b/src/FLAD/components/Paginator.tsx @@ -7,7 +7,7 @@ export default function Paginator({ data, scrollX }) { const { width } = useWindowDimensions(); return ( - + {data.map((_, i) => { const inputRange = [(i - 1) * width, i * width, (i + 1) * width]; @@ -23,14 +23,14 @@ export default function Paginator({ data, scrollX }) { extrapolate: 'clamp' }) - return })} diff --git a/src/FLAD/navigation/AuthNavigation.tsx b/src/FLAD/navigation/AuthNavigation.tsx index e913b9c..cb5f4d0 100644 --- a/src/FLAD/navigation/AuthNavigation.tsx +++ b/src/FLAD/navigation/AuthNavigation.tsx @@ -1,5 +1,5 @@ import Navigation from './Navigation'; -import { StyleSheet,SafeAreaView } from 'react-native'; +import { StyleSheet, SafeAreaView } from 'react-native'; import { SafeAreaProvider } from 'react-native-safe-area-context'; import StartNavigation from './StartNavigation'; import { Provider, useDispatch, useSelector } from 'react-redux'; @@ -12,10 +12,10 @@ import { getRefreshToken } from '../redux/thunk/authThunk'; SplashScreen.preventAutoHideAsync(); export default function AuthNavigation() { - //@ts-ignore - const appIsReady : boolean = useSelector(state => state.userReducer.loading); //@ts-ignore - const isLogin : boolean = useSelector(state => state.userReducer.isLogedIn); + const appIsReady: boolean = useSelector(state => state.userReducer.loading); + //@ts-ignore + const isLogin: boolean = useSelector(state => state.userReducer.isLogedIn); // const userToken : string = useSelector(state => state.userReducer.userFladToken); const dispatch = useDispatch(); @@ -24,7 +24,7 @@ export default function AuthNavigation() { async function prepare() { console.log(appIsReady, "1 AuthNav") - //@ts-ignore + //@ts-ignore await dispatch(getRefreshToken()) await SplashScreen.hideAsync(); } @@ -40,10 +40,14 @@ export default function AuthNavigation() { if (appIsReady == false) { return null; } - return ( - - - + return ( + + + {isLogin ? ( + + ) : + + } - ) - } + ) +} diff --git a/src/FLAD/redux/thunk/authThunk.tsx b/src/FLAD/redux/thunk/authThunk.tsx index df93371..0aac8e6 100644 --- a/src/FLAD/redux/thunk/authThunk.tsx +++ b/src/FLAD/redux/thunk/authThunk.tsx @@ -4,147 +4,161 @@ import axios from "axios"; import { json } from "express"; import { useEffect } from "react"; import { API_URL } from "../../fladConfig"; -import { Credentials, CredentialsRegister, restoreToken, setLoginState } from "../actions/userActions"; +import { Credentials, CredentialsRegister, restoreToken, setLoginState, UserLogout } 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) => { - //@ts-ignore - return async dispatch => { - try { - console.log(resgisterCredential); - - const config = { + +export const registerUser = (resgisterCredential: CredentialsRegister) => { + //@ts-ignore + return async dispatch => { + try { + console.log(resgisterCredential); + + const config = { headers: { - 'Content-Type': 'application/json', + 'Content-Type': 'application/json', }, - } - const resp = await axios.post( - `${API_URL}/api/users/register`, - resgisterCredential, - config - ) - - if (resp.data.token) { - console.log(resp.data.token); - const token = resp.data.token; - // await SecureStore.setItemAsync(key, token); - const headers = { - 'Authorization': 'Bearer ' + token}; - const user = await axios.get( - "https://flad-api-production.up.railway.app/api/users", - {headers} - ) - dispatch(setLoginState( UserFactory.JsonToModel(user.data) )); // 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'); - } - - - // 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); } + const resp = await axios.post( + `${API_URL}/api/users/register`, + resgisterCredential, + config + ) + + if (resp.data.token) { + console.log(resp.data.token); + const token = resp.data.token; + // await SecureStore.setItemAsync(key, token); + const headers = { + 'Authorization': 'Bearer ' + token + }; + const user = await axios.get( + "https://flad-api-production.up.railway.app/api/users", + { headers } + ) + dispatch(setLoginState(UserFactory.JsonToModel(user.data))); // 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'); + } + + + // 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); } } -export const userLogin = ( loginCredential : Credentials) => { -//@ts-ignore -return async dispatch => { +} +export const userLogin = (loginCredential: Credentials) => { + //@ts-ignore + return async dispatch => { try { console.log(loginCredential); - const config = { + const config = { headers: { - 'Content-Type': 'application/json', + 'Content-Type': 'application/json', }, - } - // const resppp = await axios.get(`${API_URL}/toto`); - // console.log(resppp.data, "sddsd"); - - const resp = await axios.post( - "https://flad-api-production.up.railway.app/api/users/login", + } + // const resppp = await axios.get(`${API_URL}/toto`); + // console.log(resppp.data, "sddsd"); + + const resp = await axios.post( + "https://flad-api-production.up.railway.app/api/users/login", loginCredential, config - ) - console.log("====================================================================================") - console.log(resp.data) - console.log("====================================================================================") - if (resp.data.token) { - console.log(resp.data.token); - const token = resp.data.token; + ) + console.log("====================================================================================") + console.log(resp.data) + console.log("====================================================================================") + 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} - ) + { headers } + ) // 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(user.data); + dispatch(setLoginState(user.data)); // our action is called here + } else { console.log('Login Failed', 'Username or Password is incorrect'); - } + } } catch (error) { - console.log('Error---------', error); + console.log('Error---------', error); } + } } -} - + export const getRefreshToken = () => { - //@ts-ignore - return async dispatch => { - try { - let userToken : string | null = await SecureStore.getItemAsync(key); - console.log("==========key =================="); - console.log(userToken); - console.log("==========key =================="); - - if (userToken) { - console.log("==========key2 =================="); - console.log(userToken); - console.log("==========key =================="); - - dispatch(restoreToken(userToken) ); - - } else { - console.log("==========OOOOOORRRRRRRRHHHHHHHHHH =================="); - const empty = ""; - dispatch(restoreToken(empty) ); - - console.log("merddee"); - } - } catch (e) { - console.log('Error---------', e); - } + //@ts-ignore + return async dispatch => { + try { + let userToken: string | null = await SecureStore.getItemAsync(key); + console.log("==========key =================="); + console.log(userToken); + console.log("==========key =================="); + + if (userToken) { + console.log("==========key2 =================="); + console.log(userToken); + console.log("==========key =================="); + + dispatch(restoreToken(userToken)); + + } else { + console.log("==========OOOOOORRRRRRRRHHHHHHHHHH =================="); + const empty = ""; + dispatch(restoreToken(empty)); + + console.log("merddee"); + } + } catch (e) { + console.log('Error---------', e); } + } } - - // const logIn = (email, password) => { - // const action = (dispatch) => { - // if (email === user.email && password === user.password) { - // dispatch(setLoggedInState(true)); - // return true; - // } - // dispatch(setLoggedInState(false)); - // return false; - // }; - // return action; - // }; - // better - async function save(key : string, value : string) { - await SecureStore.setItemAsync(key, value); - } \ No newline at end of file + +export const DeleteToken = () => { + //@ts-ignore + return async dispatch => { + try { + await SecureStore.deleteItemAsync(key); + dispatch(UserLogout()); + } catch (e) { + console.log('Error deleting token', e); + } + } +} + +// const logIn = (email, password) => { +// const action = (dispatch) => { +// if (email === user.email && password === user.password) { +// dispatch(setLoggedInState(true)); +// return true; +// } +// dispatch(setLoggedInState(false)); +// return false; +// }; +// return action; +// }; +// better +async function save(key: string, value: string) { + await SecureStore.setItemAsync(key, value); +} \ No newline at end of file diff --git a/src/FLAD/screens/Favorite.tsx b/src/FLAD/screens/Favorite.tsx index a1e34e2..daab988 100644 --- a/src/FLAD/screens/Favorite.tsx +++ b/src/FLAD/screens/Favorite.tsx @@ -17,7 +17,8 @@ export default function favoritePage() { const images = [ { id: 1, source: require('../assets/images/FLADYLove.png') }, { id: 2, source: require('../assets/images/FLADYStar.png') }, - { id: 3, source: require('../assets/images/FLADYStar.png') }, + { id: 3, source: require('../assets/images/FLADYHate.png') }, + { id: 4, source: require('../assets/images/FLADYCry.png') }, ]; const navigueToDetail = (music : any) => { navigation.navigate("MusicDetail", {"music": music}) diff --git a/src/FLAD/screens/LoginPage.tsx b/src/FLAD/screens/LoginPage.tsx index 7268dd9..a6e9d0e 100644 --- a/src/FLAD/screens/LoginPage.tsx +++ b/src/FLAD/screens/LoginPage.tsx @@ -4,6 +4,7 @@ import {useNavigation} from "@react-navigation/native"; import normalize from '../components/Normalize'; import { userLogin } from '../redux/thunk/authThunk'; import { useDispatch } from 'react-redux'; +import { Audio } from 'expo-av'; import { Credentials } from '../redux/actions/userActions'; // @ts-ignore @@ -14,12 +15,22 @@ const DismissKeyboard = ({ children }) => ( ) export default function loginPage() { + const [sound, setSound] = useState(); const [rememberMe, setRememberMe] = useState(false); const navigation = useNavigation(); const [username, setUsername] = useState(''); const [password, setPassword] = useState(''); - + async function playSound() { + console.log('Loading Sound'); + const { sound } = await Audio.Sound.createAsync( + require('../assets/sounds/Click.mp3') + ); + setSound(sound); + + console.log('Playing Sound'); + await sound.playAsync(); + } const dispatch = useDispatch(); const submitForm = () => { @@ -27,8 +38,9 @@ export default function loginPage() { email: username, password: password }; - //@ts-ignore - dispatch(userLogin(credentials)) + //@ts-ignore + dispatch(userLogin(credentials)) + playSound() } const toggleRememberMe = () => { diff --git a/src/FLAD/screens/Register.tsx b/src/FLAD/screens/Register.tsx index 9a9bddc..6cf229a 100644 --- a/src/FLAD/screens/Register.tsx +++ b/src/FLAD/screens/Register.tsx @@ -8,6 +8,7 @@ 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 { Audio } from 'expo-av'; import { CredentialsRegister } from '../redux/actions/userActions'; import { Buffer } from 'buffer'; @@ -34,10 +35,21 @@ await SecureStore.setItemAsync(key, value); export default function InscriptionPage() { + const [sound, setSound] = useState(); const [rememberMe, setRememberMe] = useState(false); const navigation = useNavigation(); const [spotifyToken, setSpotifyToken] = useState(''); const [spotifyID, setSpotifyIds] = useState('') + async function playSound() { + console.log('Loading Sound'); + const { sound } = await Audio.Sound.createAsync( + require('../assets/sounds/Click.mp3') + ); + setSound(sound); + + console.log('Playing Sound'); + await sound.playAsync(); + } const [username, setUsername] = useState(''); const [email, setEmail] = useState(''); @@ -82,6 +94,7 @@ export default function InscriptionPage() { }; //@ts-ignore dispatch(registerUser(credentials)) + playSound() } const scopesArr = ['user-read-private','user-read-email','user-read-playback-state','user-read-currently-playing','user-read-recently-played','playlist-modify-public','ugc-image-upload','user-modify-playback-state']; const scopes = scopesArr.join(' '); diff --git a/src/FLAD/screens/Setting.tsx b/src/FLAD/screens/Setting.tsx index 1ef8114..f62ed8b 100644 --- a/src/FLAD/screens/Setting.tsx +++ b/src/FLAD/screens/Setting.tsx @@ -1,11 +1,12 @@ import React, { useRef, useState } from 'react'; 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"; - +import { useNavigation } from "@react-navigation/native"; +import { useDispatch } from 'react-redux'; import normalize from '../components/Normalize'; import { ScrollView, Switch, TextInput } from 'react-native-gesture-handler'; import CardMusic from '../components/CardMusic'; +import { DeleteToken } from '../redux/thunk/authThunk'; // @ts-ignore const DismissKeyboard = ({ children }) => ( @@ -16,30 +17,34 @@ const DismissKeyboard = ({ children }) => ( export default function Setting() { const textInputRef = useRef(null); + const dispatch = useDispatch(); const navigation = useNavigation(); const handleSvgPress = () => { - //@ts-ignore - textInputRef.current?.focus(); + //@ts-ignore + textInputRef.current?.focus(); }; //Dark Mode - const[isCheckedDarkMode, setIsCheckedDarkMode] = useState(false); - - const toggleDarkMode = + const [isCheckedDarkMode, setIsCheckedDarkMode] = useState(false); + + const toggleDarkMode = () => setIsCheckedDarkMode(value => !value); //Notification - const[isCheckedNotif, setIsCheckedNotif] = useState(false); + const [isCheckedNotif, setIsCheckedNotif] = useState(false); - const toggleNotif = + const toggleNotif = () => setIsCheckedNotif(value => !value); - + //Deconnection + const Deconnection = () => { + dispatch(DeleteToken()) + } //Localisation - const[isCheckedLocalisation, setIsCheckedLocalisation] = useState(false); + const [isCheckedLocalisation, setIsCheckedLocalisation] = useState(false); - const toggleLocalisation = + const toggleLocalisation = () => setIsCheckedLocalisation(value => !value); return ( @@ -49,91 +54,91 @@ export default function Setting() { Réglages - - + + - - + + navigation.navigate('SettingProfil')}> - + Emre KARTAL id. Spotify, mail et mot de passe - + - + - - - - + + + + Dark Mode - + - - - + + + Notification - + - + Localisation - + - - - - - + + + + + - En cours d’écoute... + En cours d’écoute... - - + + - - + + - console.log("Tkt t deconnecter")}> + Deconnection()}> Se deconnecter @@ -171,7 +176,7 @@ const styles = StyleSheet.create({ marginBottom: 22 }, inputSearch: { - placeholderTextColor:'red', + placeholderTextColor: 'red', color: 'white', width: normalize(350), }, @@ -192,7 +197,7 @@ const styles = StyleSheet.create({ NameProfil: { fontWeight: 'bold', color: 'white', - fontSize: normalize(22) + fontSize: normalize(22) }, description: { color: 'white', diff --git a/src/FLAD/screens/SettingProfil.tsx b/src/FLAD/screens/SettingProfil.tsx index bf239b1..3dc5aae 100644 --- a/src/FLAD/screens/SettingProfil.tsx +++ b/src/FLAD/screens/SettingProfil.tsx @@ -1,9 +1,9 @@ import React, { useState, useRef } from 'react'; -import { View, Text, StyleSheet, TouchableWithoutFeedback, Keyboard, ScrollView, Image } from 'react-native'; +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'; import Modal from "react-native-modal"; -import {useNavigation} from "@react-navigation/native"; +import { useNavigation } from "@react-navigation/native"; import normalize from '../components/Normalize'; import * as ImagePicker from 'expo-image-picker'; @@ -32,16 +32,16 @@ export default function SettingProfil() { const pickImage = async () => { // No permissions request is necessary for launching the image library let result = await ImagePicker.launchImageLibraryAsync({ - mediaTypes: ImagePicker.MediaTypeOptions.All, - allowsEditing: true, - aspect: [4, 3], - quality: 1, + mediaTypes: ImagePicker.MediaTypeOptions.All, + allowsEditing: true, + aspect: [4, 3], + quality: 1, }); console.log(result); if (!result.canceled) { - setImage(result.assets[0].uri); + setImage(result.assets[0].uri); } }; @@ -52,8 +52,8 @@ export default function SettingProfil() { navigation.navigate('Setting')}> - - Exit + + Exit @@ -64,27 +64,27 @@ export default function SettingProfil() { - + source={require('../assets/icons/icons/edit.png')} style={{ resizeMode: "stretch", height: '85%', aspectRatio: 1 }} + /> + Identifiant - + Mail - + - + - + @@ -96,12 +96,12 @@ export default function SettingProfil() { - - - - - - + + + + + + console.log("Tkt t deconnecter")}> @@ -121,20 +121,20 @@ export default function SettingProfil() { Modifier - + Ancien - + Nouveau - + Confirmer - + @@ -204,7 +204,7 @@ const styles = StyleSheet.create({ borderRadius: 63, borderWidth: 3, borderColor: 'white', - overflow: 'hidden', + overflow: 'hidden', marginVertical: 20, alignItems: 'center', justifyContent: 'center', @@ -260,11 +260,11 @@ const styles = StyleSheet.create({ marginLeft: 12 }, optionId: { - flexDirection:'row', + flexDirection: 'row', marginBottom: 20, }, optionMail: { - flexDirection:'row', + flexDirection: 'row', }, textInputId: { marginLeft: 50,