diff --git a/README.md b/README.md
index 8af319d..e834043 100644
--- a/README.md
+++ b/README.md
@@ -97,8 +97,10 @@ Notre environnement de travail se base sur plusieurs outils et langages :👇
---
+ 
+ 
@@ -117,7 +119,7 @@ La composition pour le projet se voit réaliser par deux élèves de l'IUT d'Aub
Emre KARTAL : emre.kartal@etu.uca.fr
-⚙️ David D'ALMEIDA : david.d_almeida@etu.uca.fr
+David D'ALMEIDA : david.d_almeida@etu.uca.fr
diff --git a/doc/Images/Real_LoginPage.JPG b/doc/Images/Real_LoginPage.JPG
deleted file mode 100644
index bd37f63..0000000
Binary files a/doc/Images/Real_LoginPage.JPG and /dev/null differ
diff --git a/doc/Images/Real_LoginPage.png b/doc/Images/Real_LoginPage.png
new file mode 100644
index 0000000..b5a8dfe
Binary files /dev/null and b/doc/Images/Real_LoginPage.png differ
diff --git a/doc/Images/Real_RegisterPage.JPG b/doc/Images/Real_RegisterPage.JPG
index 9c1611e..b73b267 100644
Binary files a/doc/Images/Real_RegisterPage.JPG and b/doc/Images/Real_RegisterPage.JPG differ
diff --git a/src/FLAD/assets/GraphicalCharterDark.tsx b/src/FLAD/assets/GraphicalCharterDark.tsx
index abedb9c..9095c3a 100644
--- a/src/FLAD/assets/GraphicalCharterDark.tsx
+++ b/src/FLAD/assets/GraphicalCharterDark.tsx
@@ -1,4 +1,6 @@
export const GraphicalCharterDark = {
"body": "#141414",
"Text": "white",
+ "Card": "#232123",
+ "Line": "#403F3F"
}
\ No newline at end of file
diff --git a/src/FLAD/assets/GraphicalCharterLight.tsx b/src/FLAD/assets/GraphicalCharterLight.tsx
index 5422020..0d748b1 100644
--- a/src/FLAD/assets/GraphicalCharterLight.tsx
+++ b/src/FLAD/assets/GraphicalCharterLight.tsx
@@ -1,4 +1,6 @@
export const GraphicalCharterLight = {
- "body": "#E7E7E7",
+ "body": "#f2f2f6",
"Text": "black",
+ "Card": "#fff",
+ "Line": "#e2e2e3"
}
\ No newline at end of file
diff --git a/src/FLAD/components/CardMusic.tsx b/src/FLAD/components/CardMusic.tsx
index 4c8e34b..c46f577 100644
--- a/src/FLAD/components/CardMusic.tsx
+++ b/src/FLAD/components/CardMusic.tsx
@@ -2,6 +2,8 @@ import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
import { SharedElement } from 'react-navigation-shared-element';
import { useSelector } from 'react-redux';
+import { GraphicalCharterDark } from '../assets/GraphicalCharterDark';
+import { GraphicalCharterLight } from '../assets/GraphicalCharterLight';
import normalize from '../components/Normalize';
@@ -14,10 +16,51 @@ type CustomCardMusic = { //Props
export default function CardMusic(CBP: CustomCardMusic) {
-
+ const isDark = useSelector(state => state.userReducer.dark);
+ const style = isDark ? GraphicalCharterLight : GraphicalCharterDark;
const currentMusic = useSelector(state => state.appReducer.currentMusic);
const source = typeof CBP.image === 'string' ? { uri: CBP.image } : CBP.image;
+ const styles = StyleSheet.create({
+ container: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ justifyContent: 'space-between',
+ marginBottom: 15
+ },
+ imageContainer: {
+ width: normalize(92),
+ height: normalize(92),
+ alignItems: 'center',
+ justifyContent: 'center',
+ marginRight: 20,
+ marginLeft: 20
+ },
+ image: {
+ width: '100%',
+ height: '100%',
+ borderRadius: 10
+
+ },
+ textContainer: {
+ flex: 1,
+ alignItems: 'flex-start',
+ justifyContent: 'center',
+ },
+ title: {
+ fontWeight: 'bold',
+ color: style.Text,
+ fontSize: normalize(23),
+ marginBottom: 10
+ },
+ description: {
+ color: style.Text,
+ fontSize: normalize(18)
+ },
+ currentMusic: {
+ color: 'red'
+ }
+ });
return (
@@ -33,43 +76,3 @@ export default function CardMusic(CBP: CustomCardMusic) {
);
}
-const styles = StyleSheet.create({
- container: {
- flexDirection: 'row',
- alignItems: 'center',
- justifyContent: 'space-between',
- marginBottom: 15
- },
- imageContainer: {
- width: normalize(92),
- height: normalize(92),
- alignItems: 'center',
- justifyContent: 'center',
- marginRight: 20,
- marginLeft: 20
- },
- image: {
- width: '100%',
- height: '100%',
- borderRadius: 10
-
- },
- textContainer: {
- flex: 1,
- alignItems: 'flex-start',
- justifyContent: 'center',
- },
- title: {
- fontWeight: 'bold',
- color: 'white',
- fontSize: normalize(23),
- marginBottom: 10
- },
- description: {
- color: 'white',
- fontSize: normalize(18)
- },
- currentMusic: {
- color: 'red'
- }
-});
\ No newline at end of file
diff --git a/src/FLAD/navigation/Navigation.tsx b/src/FLAD/navigation/Navigation.tsx
index 05fa63d..6a3b08c 100644
--- a/src/FLAD/navigation/Navigation.tsx
+++ b/src/FLAD/navigation/Navigation.tsx
@@ -13,28 +13,43 @@ import Login from '../screens/login';
import FladLoading from '../components/FladLoadingScreen';
import { useDispatch, useSelector } from 'react-redux';
import { getFavoritesMusic } from '../redux/actions/appActions';
+import { GraphicalCharterDark } from '../assets/GraphicalCharterDark';
+import { GraphicalCharterLight } from '../assets/GraphicalCharterLight';
+import { getCurrentUserMusic } from '../redux/thunk/spotThunk';
+import SpotifyService from '../services/spotify/spotify.service';
// import { fetchFavoritesMusic } from '../redux/thunk/spotThunk';
export default function Navigation() {
+ const isDark = useSelector(state => state.userReducer.dark);
+ const style = isDark ? GraphicalCharterLight : GraphicalCharterDark;
const BottomTabNavigator = createBottomTabNavigator();
const MyTheme = {
dark: false,
colors: {
primary: 'rgb(255, 45, 85)',
- card: 'rgb(35, 33, 35)',
- border: 'rgb(35, 33, 35)',
+ card: style.Card,
+ border: style.Card,
text: 'rgb(138, 138, 138)',
}
};
//@ts-ignore
const favoritesMusicLength : number = useSelector(state => state.appReducer.favoriteMusic.length);
- // const dispatch = useDispatch();
+ const dispatch = useDispatch();
// useEffect(() => {
// const loadFavoritesMusics = async () => {
// await dispatch(fetchFavoritesMusic());
// };
// loadFavoritesMusics();
// }, [dispatch]);
+ const token = "BQBNdaYRkD3GAOFASk8uc-l72zVwQeQ0sFB4GJnkBGudsJHnuAXd4eIWb78gbFLKZeBoHrWpHxMeSmqvHk75Utg9fsOJp7XyJfm-tAlgGhUQ-xiUM8rXTpa9k3M40BMSnujPDrap_O1ChCyGhBWYVHDd2t67qY0NVDvCJ4Qz7LucJJdgu1BN838qXTScQV90zriO8lp6Rjx6SsWov_fMZTyadzxebYIiQ-VDQDs63gUordThas-jFlAHLgJlqPhVOHJ1WaZt-_oLhgY3fk4bhORkyeAFZVRTnjw38A70b0eZU3ziQkOYW6w7kN__tzgP5gis0Y8mEIiUyTnyuQ"
+ const sheet = async () => {
+ const service = new SpotifyService(token)
+ dispatch(getCurrentUserMusic(service))
+ }
+
+ useEffect(() => {
+ sheet()
+ }, []);
return (
// @ts-ignore
diff --git a/src/FLAD/redux/actions/spotActions.tsx b/src/FLAD/redux/actions/spotActions.tsx
index 41fbfa3..331b6bd 100644
--- a/src/FLAD/redux/actions/spotActions.tsx
+++ b/src/FLAD/redux/actions/spotActions.tsx
@@ -1,5 +1,6 @@
import Music from "../../Model/Music";
import { Spot } from "../../Model/Spot";
+import { spotifyTypes } from "../types/spotifyTypes";
import {spotTypes} from "../types/spotTypes";
export const setSpotList = (spotList: Spot[]) => {
@@ -11,7 +12,7 @@ export const setSpotList = (spotList: Spot[]) => {
export const setUserCurrentMusic = (currentMusic: Music) => {
return {
- type: spotTypes.FETCH_SPOT,
+ type: spotifyTypes.GET_USER_CURRENT_MUSIC,
playload: currentMusic,
};
}
\ No newline at end of file
diff --git a/src/FLAD/redux/actions/userActions.tsx b/src/FLAD/redux/actions/userActions.tsx
index f470e84..86a0086 100644
--- a/src/FLAD/redux/actions/userActions.tsx
+++ b/src/FLAD/redux/actions/userActions.tsx
@@ -43,4 +43,9 @@ export const restoreToken = (token : string) => {
type: userTypes.USER_LOGOUT,
};
}
-
\ No newline at end of file
+
+ export const userChangeMode = () => {
+ return {
+ type: userTypes.CHANGE_MODE,
+ };
+ }
\ No newline at end of file
diff --git a/src/FLAD/redux/reducers/appReducer.tsx b/src/FLAD/redux/reducers/appReducer.tsx
index 2d6bc04..0b5de26 100644
--- a/src/FLAD/redux/reducers/appReducer.tsx
+++ b/src/FLAD/redux/reducers/appReducer.tsx
@@ -34,7 +34,7 @@ const initialState = {
case discoveriesTypes.FETCH_DISCOVERIES:
return;
case spotifyTypes.GET_USER_CURRENT_MUSIC:
- return {...state, userCurrentMusic: action.payload};
+ return {...state, userCurrentMusic: action.playload};
default:
return state;
}
diff --git a/src/FLAD/redux/reducers/userReducer.tsx b/src/FLAD/redux/reducers/userReducer.tsx
index 421f706..74c4bad 100644
--- a/src/FLAD/redux/reducers/userReducer.tsx
+++ b/src/FLAD/redux/reducers/userReducer.tsx
@@ -7,6 +7,7 @@ const initialState = {
userSpotifyToken : null,
error: null,
isLogedIn: false,
+ dark: false,
}
const userReducer = (state = initialState, action : any) => {
@@ -45,6 +46,8 @@ const initialState = {
return {...state,
user :null,
isLogedIn: false }
+ case userTypes.CHANGE_MODE:
+ return {...state, dark: !state.dark }
default:
return state;
}
diff --git a/src/FLAD/redux/thunk/authThunk.tsx b/src/FLAD/redux/thunk/authThunk.tsx
index 0aac8e6..b5397d2 100644
--- a/src/FLAD/redux/thunk/authThunk.tsx
+++ b/src/FLAD/redux/thunk/authThunk.tsx
@@ -4,7 +4,7 @@ import axios from "axios";
import { json } from "express";
import { useEffect } from "react";
import { API_URL } from "../../fladConfig";
-import { Credentials, CredentialsRegister, restoreToken, setLoginState, UserLogout } from "../actions/userActions";
+import { Credentials, CredentialsRegister, restoreToken, setLoginState, UserLogout, userChangeMode } from "../actions/userActions";
import * as SecureStore from 'expo-secure-store';
import { User } from "../../Model/User";
import { UserFactory } from "../../Model/factory/UserFactory";
@@ -147,6 +147,14 @@ export const DeleteToken = () => {
}
}
+export const ChangeMode = () => {
+ //@ts-ignore
+ return async dispatch => {
+ dispatch(userChangeMode());
+ await SecureStore.deleteItemAsync(key);
+ }
+}
+
// const logIn = (email, password) => {
// const action = (dispatch) => {
// if (email === user.email && password === user.password) {
diff --git a/src/FLAD/redux/thunk/spotThunk.tsx b/src/FLAD/redux/thunk/spotThunk.tsx
index 051d19d..1e4862b 100644
--- a/src/FLAD/redux/thunk/spotThunk.tsx
+++ b/src/FLAD/redux/thunk/spotThunk.tsx
@@ -91,7 +91,7 @@ export const getCurrentUserMusic = (resuestHandler : SpotifyService)=> {
catch (error) {
console.log('Error---------', error);
}
-}
+ }
}
export const searchMusic = async (resuestHandler : SpotifyService,search: string) => {
//
diff --git a/src/FLAD/redux/types/userTypes.tsx b/src/FLAD/redux/types/userTypes.tsx
index cdea161..1bebc1c 100644
--- a/src/FLAD/redux/types/userTypes.tsx
+++ b/src/FLAD/redux/types/userTypes.tsx
@@ -5,5 +5,6 @@ export const userTypes = {
UPDATE_USER: 'UPDATE_USER',
UPDATE_PROFILE_PICTURE: 'UPDATE_PROFILE_PICTURE',
USER_LOGOUT : 'USER_LOGOUT',
- RESTORE_TOKEN : "RESTORE_TOKEN"
+ RESTORE_TOKEN : "RESTORE_TOKEN",
+ CHANGE_MODE : "CHANGE_MODE"
}
\ No newline at end of file
diff --git a/src/FLAD/screens/Favorite.tsx b/src/FLAD/screens/Favorite.tsx
index daab988..a9e11d7 100644
--- a/src/FLAD/screens/Favorite.tsx
+++ b/src/FLAD/screens/Favorite.tsx
@@ -1,15 +1,21 @@
-import React, { useEffect, useState} from 'react';
-import { Image,StyleSheet, Text, View, FlatList, ScrollView, TouchableOpacity, TouchableHighlight, SafeAreaView } from 'react-native';
+import React, { useEffect, useState } from 'react';
+import { Image, StyleSheet, Text, View, FlatList, ScrollView, TouchableOpacity, TouchableHighlight, SafeAreaView } from 'react-native';
import CardMusic from '../components/CardMusic';
import normalize from '../components/Normalize';
import Music from '../Model/Music'
import FladyComponent from '../components/FladyComponent';
-import {useNavigation} from "@react-navigation/native";
+import { useNavigation } from "@react-navigation/native";
import { useDispatch, useSelector } from 'react-redux';
import { getFavoritesMusic } from '../redux/actions/appActions';
import { SharedElement } from 'react-navigation-shared-element';
+import { GraphicalCharterDark } from '../assets/GraphicalCharterDark';
+import { GraphicalCharterLight } from '../assets/GraphicalCharterLight';
export default function favoritePage() {
+ //Dark Mode
+ const isDark = useSelector(state => state.userReducer.dark);
+ const style = isDark ? GraphicalCharterLight : GraphicalCharterDark;
+
const navigation = useNavigation();
//@ts-ignore
const favoritesMusic = useSelector(state => state.appReducer.favoriteMusic);
@@ -19,14 +25,14 @@ export default function favoritePage() {
{ id: 2, 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})
+ ];
+ const navigueToDetail = (music: any) => {
+ navigation.navigate("MusicDetail", { "music": music })
};
- // to do
- const [filteredDataSource, setFilteredDataSource] = useState([]);
- const [search, setSearch] = useState('');
- const searchMusic = (text: string) => {
+ // to do
+ const [filteredDataSource, setFilteredDataSource] = useState([]);
+ const [search, setSearch] = useState('');
+ const searchMusic = (text: string) => {
if (text) {
const newData = favoritesMusic.filter(function (item: Music) {
const search = item.title
@@ -42,31 +48,76 @@ export default function favoritePage() {
}
};
+ const styles = StyleSheet.create({
+ mainSafeArea: {
+ flex: 1,
+ backgroundColor: style.body,
+ },
+ titleContainer: {
+ marginTop: 30,
+ marginLeft: 20,
+ },
+ title: {
+ fontSize: normalize(28),
+ fontWeight: 'bold',
+ color: style.Text,
+ },
+ description: {
+ marginTop: 10,
+ fontSize: normalize(20),
+ color: '#787878',
+ marginBottom: 20
+ },
+ button: {
+ marginTop: '10%',
+ flexDirection: 'row',
+ alignItems: 'center',
+ justifyContent: 'center',
+ alignSelf: 'center',
+ backgroundColor: 'white',
+ width: normalize(100),
+ height: normalize(100),
+ borderRadius: 21
+ },
+ buttonImage: {
+ width: normalize(46),
+ height: normalize(46),
+ },
+ shadow: {
+ shadowColor: '#000',
+ shadowOffset: {
+ width: 2,
+ height: 3,
+ },
+ shadowOpacity: 0.50,
+ shadowRadius: 3.84,
+ }
+ });
+
return (
-
-
+
Favoris
Retrouvez ici vos musiques favorites
- (
- {navigueToDetail(item)}}>
+ { navigueToDetail(item) }}>
-
+
)}
- keyExtractor={(item: Music) => item.title }
+ keyExtractor={(item: Music) => item.title}
/>
- What's your mood?
+ What's your mood?
item.id.toString()}
horizontal
@@ -75,64 +126,12 @@ export default function favoritePage() {
)}
/>
- navigation.navigate('Genre')}>
-
-
-
-
-
+ onPress={() => navigation.navigate('Genre')}>
+
+
+
+
);
-};
-
-const styles = StyleSheet.create({
- mainSafeArea: {
- flex: 1,
- backgroundColor: "#141414",
- },
- body: {
- flex: 1,
- justifyContent: 'center',
- backgroundColor: "#141414",
- },
- titleContainer: {
- marginTop: 30,
- marginLeft: 20,
- },
- title: {
- fontSize: normalize(28),
- fontWeight: 'bold',
- color: 'white',
- },
- description: {
- marginTop: 10,
- fontSize: normalize(20),
- color: '#787878',
- marginBottom: 20
- },
- button: {
- marginTop: '10%',
- flexDirection: 'row',
- alignItems: 'center',
- justifyContent: 'center',
- alignSelf: 'center',
- backgroundColor: 'white',
- width: normalize(100),
- height: normalize(100),
- borderRadius: 21
- },
- buttonImage: {
- width: normalize(46),
- height: normalize(46),
- },
- shadow: {
- shadowColor: '#000',
- shadowOffset: {
- width: 2,
- height: 3,
- },
- shadowOpacity: 0.50,
- shadowRadius: 3.84,
- }
-});
+};
\ No newline at end of file
diff --git a/src/FLAD/screens/Register.tsx b/src/FLAD/screens/Register.tsx
index 6cf229a..48fb9af 100644
--- a/src/FLAD/screens/Register.tsx
+++ b/src/FLAD/screens/Register.tsx
@@ -36,27 +36,27 @@ 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 [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);
- const [username, setUsername] = useState('');
- const [email, setEmail] = useState('');
- const [password, setPassword] = useState('');
- const toggleRememberMe = () => {
- setRememberMe(!rememberMe);
- }
+ console.log('Playing Sound');
+ await sound.playAsync();
+ }
+
+ const [username, setUsername] = useState('');
+ const [email, setEmail] = useState('');
+ const [password, setPassword] = useState('');
+ const toggleRememberMe = () => {
+ setRememberMe(!rememberMe);
+ }
//spotify auth
const [request, response, promptAsync] = useAuthRequest(
diff --git a/src/FLAD/screens/Setting.tsx b/src/FLAD/screens/Setting.tsx
index f62ed8b..4f12304 100644
--- a/src/FLAD/screens/Setting.tsx
+++ b/src/FLAD/screens/Setting.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react';
+import React, { useEffect, 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";
@@ -6,7 +6,12 @@ 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';
+import { ChangeMode, DeleteToken } from '../redux/thunk/authThunk';
+import { useSelector } from 'react-redux';
+import { GraphicalCharterDark } from '../assets/GraphicalCharterDark';
+import { GraphicalCharterLight } from '../assets/GraphicalCharterLight';
+import SpotifyService from '../services/spotify/spotify.service';
+import { getCurrentUserMusic } from '../redux/thunk/spotThunk';
// @ts-ignore
const DismissKeyboard = ({ children }) => (
@@ -24,12 +29,15 @@ export default function Setting() {
textInputRef.current?.focus();
};
- //Dark Mode
- const [isCheckedDarkMode, setIsCheckedDarkMode] = useState(false);
+ const currentMusic = useSelector(state => state.appReducer.userCurrentMusic);
- const toggleDarkMode =
- () => setIsCheckedDarkMode(value => !value);
+ //Dark Mode
+ const isDark = useSelector(state => state.userReducer.dark);
+ const style = isDark ? GraphicalCharterLight : GraphicalCharterDark;
+ const ChangeDarkMode = () => {
+ dispatch(ChangeMode())
+ }
//Notification
const [isCheckedNotif, setIsCheckedNotif] = useState(false);
@@ -39,6 +47,7 @@ export default function Setting() {
//Deconnection
const Deconnection = () => {
+ //@ts-ignore
dispatch(DeleteToken())
}
//Localisation
@@ -46,6 +55,189 @@ export default function Setting() {
const toggleLocalisation =
() => setIsCheckedLocalisation(value => !value);
+
+ //Style
+
+
+ const styles = StyleSheet.create({
+ mainSafeArea: {
+ flex: 1,
+ backgroundColor: style.body,
+ },
+ container: {
+ marginTop: 30,
+ marginHorizontal: normalize(25),
+ paddingBottom: normalize(400),
+ flex: 1,
+ backgroundColor: style.body,
+ },
+ title: {
+ fontSize: normalize(30),
+ fontWeight: 'bold',
+ color: style.Text,
+ alignItems: 'center',
+ },
+ search: {
+ paddingVertical: 9,
+ backgroundColor: style.Card,
+ borderRadius: 13,
+ flexDirection: 'row',
+ marginTop: 9,
+ marginBottom: 22
+ },
+ inputSearch: {
+ placeholderTextColor: 'red',
+ color: 'white',
+ width: normalize(350),
+ },
+ profil: {
+ paddingVertical: 9,
+ backgroundColor: style.Card,
+ borderRadius: 13,
+ flexDirection: 'row',
+ alignItems: 'center',
+ marginBottom: normalize(45)
+ },
+ imageProfil: {
+ marginLeft: 15,
+ marginRight: 7,
+ width: 50,
+ height: 50
+ },
+ NameProfil: {
+ fontWeight: 'bold',
+ color: style.Text,
+ fontSize: normalize(22)
+ },
+ description: {
+ color: style.Text,
+ fontSize: normalize(15)
+ },
+ profilContainer: {
+ flex: 1,
+ marginLeft: 9,
+ alignItems: 'flex-start',
+ justifyContent: 'center',
+ },
+ buttonSetting: {
+ width: normalize(17),
+ height: normalize(17),
+ marginRight: 22
+ },
+ body: {
+ paddingTop: normalize(10),
+ backgroundColor: style.Card,
+ borderRadius: 13,
+ alignItems: 'flex-start',
+ marginBottom: normalize(45),
+ paddingLeft: normalize(10),
+ },
+ view: {
+ backgroundColor: '#fe9500',
+ padding: 5,
+ borderRadius: 10,
+ marginLeft: 15,
+ marginBottom: normalize(11)
+ },
+ Option: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ },
+ secondOption: {
+ marginTop: normalize(11),
+ flexDirection: 'row',
+ alignItems: 'center',
+ },
+ textOption: {
+ fontSize: normalize(18),
+ color: style.Text,
+ fontWeight: 'bold',
+ marginBottom: normalize(8)
+ },
+ firstOptionView: {
+ flex: 1,
+ marginLeft: 15,
+ justifyContent: 'space-between',
+ flexDirection: 'row',
+ alignItems: 'center',
+ borderBottomWidth: 1,
+ borderColor: style.Line
+ },
+ deconnectedOption: {
+ paddingVertical: 9,
+ paddingLeft: 5,
+ backgroundColor: style.Card,
+ borderRadius: 13,
+ flexDirection: 'row',
+ alignItems: 'center',
+ },
+ buttonDeconectedOption: {
+ backgroundColor: '#DF0404',
+ padding: 5,
+ borderRadius: 10,
+ marginLeft: 15
+ },
+ textDeconnectionOption: {
+ fontSize: normalize(18),
+ color: '#F80404',
+ fontWeight: 'bold',
+ marginLeft: 12
+ },
+ notification: {
+ backgroundColor: '#fe3c30',
+ padding: 5,
+ borderRadius: 10,
+ marginLeft: 15,
+ marginBottom: normalize(11)
+ },
+ secondOptionView: {
+ flex: 1,
+ marginLeft: 15,
+ justifyContent: 'space-between',
+ flexDirection: 'row',
+ alignItems: 'center',
+ borderBottomWidth: 1,
+ borderColor: style.Line
+ },
+ lastOptionView: {
+ flex: 1,
+ marginLeft: 15,
+ justifyContent: 'space-between',
+ flexDirection: 'row',
+ alignItems: 'center'
+ },
+ localisation: {
+ backgroundColor: '#0835A7',
+ padding: 5,
+ borderRadius: 10,
+ marginLeft: 15,
+ marginBottom: normalize(11)
+ },
+ lastOption: {
+ marginTop: normalize(11),
+ flexDirection: 'row',
+ alignItems: 'center',
+ },
+ musicActually: {
+ paddingTop: normalize(17),
+ backgroundColor: style.Card,
+ borderRadius: 13,
+ alignItems: 'flex-start',
+ marginBottom: normalize(45)
+ },
+ titleMusic: {
+ flexDirection: 'row',
+ marginBottom: 5
+ },
+ mascot: {
+ width: normalize(90),
+ height: normalize(90),
+ position: 'absolute',
+ right: normalize(0),
+ top: normalize(10)
+ }
+
+ })
return (
@@ -86,7 +278,7 @@ export default function Setting() {
Dark Mode
-
+
@@ -117,18 +309,18 @@ export default function Setting() {
En cours d’écoute...
-
-
+
+
@@ -148,183 +340,3 @@ export default function Setting() {
);
};
-
-const styles = StyleSheet.create({
- mainSafeArea: {
- flex: 1,
- backgroundColor: "#141414",
- },
- container: {
- marginTop: 30,
- marginHorizontal: normalize(25),
- paddingBottom: normalize(400),
- flex: 1,
- backgroundColor: '#141414',
- },
- title: {
- fontSize: normalize(30),
- fontWeight: 'bold',
- color: 'white',
- alignItems: 'center',
- },
- search: {
- paddingVertical: 9,
- backgroundColor: "#232123",
- borderRadius: 13,
- flexDirection: 'row',
- marginTop: 9,
- marginBottom: 22
- },
- inputSearch: {
- placeholderTextColor: 'red',
- color: 'white',
- width: normalize(350),
- },
- profil: {
- paddingVertical: 9,
- backgroundColor: "#232123",
- borderRadius: 13,
- flexDirection: 'row',
- alignItems: 'center',
- marginBottom: normalize(45)
- },
- imageProfil: {
- marginLeft: 15,
- marginRight: 7,
- width: 50,
- height: 50
- },
- NameProfil: {
- fontWeight: 'bold',
- color: 'white',
- fontSize: normalize(22)
- },
- description: {
- color: 'white',
- fontSize: normalize(15)
- },
- profilContainer: {
- flex: 1,
- marginLeft: 9,
- alignItems: 'flex-start',
- justifyContent: 'center',
- },
- buttonSetting: {
- width: normalize(17),
- height: normalize(17),
- marginRight: 22
- },
- body: {
- paddingTop: normalize(10),
- backgroundColor: "#232123",
- borderRadius: 13,
- alignItems: 'flex-start',
- marginBottom: normalize(45),
- paddingLeft: normalize(10),
- },
- view: {
- backgroundColor: '#fe9500',
- padding: 5,
- borderRadius: 10,
- marginLeft: 15,
- marginBottom: normalize(11)
- },
- Option: {
- flexDirection: 'row',
- alignItems: 'center',
- },
- secondOption: {
- marginTop: normalize(11),
- flexDirection: 'row',
- alignItems: 'center',
- },
- textOption: {
- fontSize: normalize(18),
- color: 'white',
- fontWeight: 'bold',
- marginBottom: normalize(8)
- },
- firstOptionView: {
- flex: 1,
- marginLeft: 15,
- justifyContent: 'space-between',
- flexDirection: 'row',
- alignItems: 'center',
- borderBottomWidth: 1,
- borderColor: '#403F3F'
- },
- deconnectedOption: {
- paddingVertical: 9,
- paddingLeft: 5,
- backgroundColor: "#232123",
- borderRadius: 13,
- flexDirection: 'row',
- alignItems: 'center',
- },
- buttonDeconectedOption: {
- backgroundColor: '#DF0404',
- padding: 5,
- borderRadius: 10,
- marginLeft: 15
- },
- textDeconnectionOption: {
- fontSize: normalize(18),
- color: '#F80404',
- fontWeight: 'bold',
- marginLeft: 12
- },
- notification: {
- backgroundColor: '#fe3c30',
- padding: 5,
- borderRadius: 10,
- marginLeft: 15,
- marginBottom: normalize(11)
- },
- secondOptionView: {
- flex: 1,
- marginLeft: 15,
- justifyContent: 'space-between',
- flexDirection: 'row',
- alignItems: 'center',
- borderBottomWidth: 1,
- borderColor: '#403F3F'
- },
- lastOptionView: {
- flex: 1,
- marginLeft: 15,
- justifyContent: 'space-between',
- flexDirection: 'row',
- alignItems: 'center'
- },
- localisation: {
- backgroundColor: '#0835A7',
- padding: 5,
- borderRadius: 10,
- marginLeft: 15,
- marginBottom: normalize(11)
- },
- lastOption: {
- marginTop: normalize(11),
- flexDirection: 'row',
- alignItems: 'center',
- },
- musicActually: {
- paddingTop: normalize(17),
- backgroundColor: "#232123",
- borderRadius: 13,
- alignItems: 'flex-start',
- marginBottom: normalize(45)
- },
- titleMusic: {
- flexDirection: 'row',
- marginBottom: 5
- },
- mascot: {
- width: normalize(90),
- height: normalize(90),
- position: 'absolute',
- right: normalize(0),
- top: normalize(10)
- }
-
-})
\ No newline at end of file
diff --git a/src/FLAD/screens/SettingProfil.tsx b/src/FLAD/screens/SettingProfil.tsx
index 3dc5aae..66dff37 100644
--- a/src/FLAD/screens/SettingProfil.tsx
+++ b/src/FLAD/screens/SettingProfil.tsx
@@ -4,10 +4,13 @@ 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 normalize from '../components/Normalize';
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';
// @ts-ignore
const DismissKeyboard = ({ children }) => (
@@ -18,6 +21,10 @@ const DismissKeyboard = ({ children }) => (
export default function SettingProfil() {
+ //Dark Mode
+ const isDark = useSelector(state => state.userReducer.dark);
+ const style = isDark ? GraphicalCharterLight : GraphicalCharterDark;
+
const [image, setImage] = useState(null);
const navigation = useNavigation();
const [currentIndex, setCurrentIndex] = useState(0);
@@ -45,6 +52,218 @@ export default function SettingProfil() {
}
};
+ const styles = StyleSheet.create({
+ mainSafeArea: {
+ flex: 1,
+ backgroundColor: style.body,
+ },
+ container: {
+ marginTop: 20,
+ marginHorizontal: normalize(25),
+ flex: 1,
+ backgroundColor: style.body,
+ },
+ buttonSetting: {
+ width: normalize(17),
+ height: normalize(17),
+ marginRight: 5
+ },
+ modalContent: {
+ position: 'absolute',
+ top: '5%',
+ left: '-5%',
+ right: '-5%',
+ height: '100%',
+ backgroundColor: style.body,
+ borderRadius: 12
+ },
+ modalView: {
+ flexDirection: 'row',
+ marginTop: 20,
+ marginLeft: 30,
+ marginBottom: normalize(45)
+ },
+ exit: {
+ flexDirection: 'row',
+ justifyContent: 'flex-start',
+ alignItems: 'center'
+ },
+ textExit: {
+ fontSize: normalize(20),
+ color: '#454545',
+ fontWeight: 'bold'
+ },
+ profilHead: {
+ alignItems: 'center',
+ },
+ title: {
+ fontSize: normalize(30),
+ fontWeight: 'bold',
+ color: style.Text,
+ },
+ imageWrapper: {
+ width: 126,
+ height: 126,
+ borderRadius: 63,
+ borderWidth: 3,
+ borderColor: style.Text,
+ overflow: 'hidden',
+ marginVertical: 20,
+ alignItems: 'center',
+ justifyContent: 'center',
+ },
+ imageProfil: {
+ width: 120,
+ height: 120,
+ },
+ editButton: {
+ width: 50,
+ height: 50,
+ borderRadius: 25,
+ backgroundColor: '#7C7C7C',
+ alignItems: 'center',
+ justifyContent: 'center'
+ },
+ body: {
+ paddingVertical: 9,
+ paddingLeft: normalize(10),
+ backgroundColor: style.Card,
+ borderRadius: 13,
+ alignItems: 'flex-start',
+ marginBottom: normalize(45)
+ },
+ textOption: {
+ fontSize: normalize(18),
+ color: style.Text,
+ fontWeight: 'bold',
+ marginLeft: 12
+ },
+ deleteOption: {
+ paddingVertical: 9,
+ paddingLeft: 5,
+ backgroundColor: style.Card,
+ borderRadius: 13,
+ flexDirection: 'row',
+ alignItems: 'center',
+ },
+ textOptionPassword: {
+ fontSize: normalize(18),
+ color: '#1c77fb',
+ marginLeft: 12
+ },
+ buttonDeleteOption: {
+ backgroundColor: '#DF0404',
+ padding: 5,
+ borderRadius: 10,
+ marginLeft: 15
+ },
+ textDeleteOption: {
+ fontSize: normalize(18),
+ color: '#F80404',
+ marginLeft: 12
+ },
+ optionId: {
+ flexDirection: 'row',
+ marginBottom: 20,
+ },
+ optionMail: {
+ flexDirection: 'row',
+ },
+ textInputId: {
+ marginLeft: 50,
+ width: '57%',
+ color: 'white',
+ fontSize: normalize(18),
+ },
+ textInputMail: {
+ marginLeft: 100,
+ color: 'white',
+ width: '57%',
+ fontSize: normalize(18)
+ },
+ passwordOption: {
+ paddingVertical: 9,
+ paddingLeft: normalize(10),
+ backgroundColor: style.Card,
+ borderRadius: 13,
+ alignItems: 'flex-start',
+ marginBottom: normalize(45)
+ },
+ passwordIcon: {
+ backgroundColor: '#8e8d92',
+ padding: 5,
+ paddingHorizontal: 8,
+ borderRadius: 10,
+ marginLeft: 10
+ },
+ optionView: {
+ flexDirection: 'row',
+ marginTop: 5
+ },
+ cancelText: {
+ fontSize: normalize(20),
+ color: '#1c77fb'
+ },
+ updateText: {
+ marginLeft: 60,
+ fontSize: normalize(20),
+ color: '#404040'
+ },
+ titlePassword: {
+ fontSize: normalize(22),
+ color: style.Text,
+ marginLeft: 50
+ },
+ warning: {
+ color: '#98989f',
+ fontSize: normalize(15)
+ },
+ warningView: {
+ marginTop: 10,
+ paddingHorizontal: 40
+ },
+ bodyModal: {
+ paddingVertical: 12,
+ paddingLeft: 30,
+ marginHorizontal: normalize(25),
+ backgroundColor: style.Card,
+ borderRadius: 13,
+ alignItems: 'flex-start'
+ },
+ optionModalWithUnderline: {
+ flexDirection: 'row',
+ borderBottomWidth: 1,
+ borderColor: style.Line,
+ paddingBottom: 10,
+ marginBottom: 10
+ },
+ optionModal: {
+ flexDirection: 'row'
+ },
+ textOptionModal: {
+ fontSize: normalize(18),
+ color: style.Text,
+ fontWeight: 'bold',
+ },
+ textInputNewModal: {
+ marginLeft: 40,
+ color: style.Text,
+ width: '67.5%',
+ fontSize: normalize(18)
+ },
+ textInputConfirmModal: {
+ marginLeft: 30,
+ color: style.Text,
+ fontSize: normalize(18)
+ },
+ textInputOldModal: {
+ marginLeft: 55,
+ color: style.Text,
+ width: '67.5%',
+ fontSize: normalize(18)
+ }
+ })
+
return (
@@ -147,216 +366,4 @@ export default function SettingProfil() {
);
-};
-
-const styles = StyleSheet.create({
- mainSafeArea: {
- flex: 1,
- backgroundColor: "#141414",
- },
- container: {
- marginTop: 20,
- marginHorizontal: normalize(25),
- flex: 1,
- backgroundColor: '#141414',
- },
- buttonSetting: {
- width: normalize(17),
- height: normalize(17),
- marginRight: 5
- },
- modalContent: {
- position: 'absolute',
- top: '5%',
- left: '-5%',
- right: '-5%',
- height: '100%',
- backgroundColor: '#141414',
- borderRadius: 12
- },
- modalView: {
- flexDirection: 'row',
- marginTop: 20,
- marginLeft: 30,
- marginBottom: normalize(45)
- },
- exit: {
- flexDirection: 'row',
- justifyContent: 'flex-start',
- alignItems: 'center'
- },
- textExit: {
- fontSize: normalize(20),
- color: '#454545',
- fontWeight: 'bold'
- },
- profilHead: {
- alignItems: 'center',
- },
- title: {
- fontSize: normalize(30),
- fontWeight: 'bold',
- color: 'white',
- },
- imageWrapper: {
- width: 126,
- height: 126,
- borderRadius: 63,
- borderWidth: 3,
- borderColor: 'white',
- overflow: 'hidden',
- marginVertical: 20,
- alignItems: 'center',
- justifyContent: 'center',
- },
- imageProfil: {
- width: 120,
- height: 120,
- },
- editButton: {
- width: 50,
- height: 50,
- borderRadius: 25,
- backgroundColor: '#7C7C7C',
- alignItems: 'center',
- justifyContent: 'center'
- },
- body: {
- paddingVertical: 9,
- paddingLeft: normalize(10),
- backgroundColor: "#232123",
- borderRadius: 13,
- alignItems: 'flex-start',
- marginBottom: normalize(45)
- },
- textOption: {
- fontSize: normalize(18),
- color: 'white',
- fontWeight: 'bold',
- marginLeft: 12
- },
- deleteOption: {
- paddingVertical: 9,
- paddingLeft: 5,
- backgroundColor: "#232123",
- borderRadius: 13,
- flexDirection: 'row',
- alignItems: 'center',
- },
- textOptionPassword: {
- fontSize: normalize(18),
- color: '#1c77fb',
- marginLeft: 12
- },
- buttonDeleteOption: {
- backgroundColor: '#DF0404',
- padding: 5,
- borderRadius: 10,
- marginLeft: 15
- },
- textDeleteOption: {
- fontSize: normalize(18),
- color: '#F80404',
- marginLeft: 12
- },
- optionId: {
- flexDirection: 'row',
- marginBottom: 20,
- },
- optionMail: {
- flexDirection: 'row',
- },
- textInputId: {
- marginLeft: 50,
- width: '57%',
- color: 'white',
- fontSize: normalize(18),
- },
- textInputMail: {
- marginLeft: 100,
- color: 'white',
- width: '57%',
- fontSize: normalize(18)
- },
- passwordOption: {
- paddingVertical: 9,
- paddingLeft: normalize(10),
- backgroundColor: "#232123",
- borderRadius: 13,
- alignItems: 'flex-start',
- marginBottom: normalize(45)
- },
- passwordIcon: {
- backgroundColor: '#8e8d92',
- padding: 5,
- paddingHorizontal: 8,
- borderRadius: 10,
- marginLeft: 10
- },
- optionView: {
- flexDirection: 'row',
- marginTop: 5
- },
- cancelText: {
- fontSize: normalize(20),
- color: '#1c77fb'
- },
- updateText: {
- marginLeft: 60,
- fontSize: normalize(20),
- color: '#404040'
- },
- titlePassword: {
- fontSize: normalize(22),
- color: 'white',
- marginLeft: 50
- },
- warning: {
- color: '#98989f',
- fontSize: normalize(15)
- },
- warningView: {
- marginTop: 10,
- paddingHorizontal: 40
- },
- bodyModal: {
- paddingVertical: 12,
- paddingLeft: 30,
- marginHorizontal: normalize(25),
- backgroundColor: "#232123",
- borderRadius: 13,
- alignItems: 'flex-start'
- },
- optionModalWithUnderline: {
- flexDirection: 'row',
- borderBottomWidth: 1,
- borderColor: '#403F3F',
- paddingBottom: 10,
- marginBottom: 10
- },
- optionModal: {
- flexDirection: 'row'
- },
- textOptionModal: {
- fontSize: normalize(18),
- color: 'white',
- fontWeight: 'bold',
- },
- textInputNewModal: {
- marginLeft: 40,
- color: 'white',
- width: '67.5%',
- fontSize: normalize(18)
- },
- textInputConfirmModal: {
- marginLeft: 30,
- color: 'white',
- fontSize: normalize(18)
- },
- textInputOldModal: {
- marginLeft: 55,
- color: 'white',
- width: '67.5%',
- fontSize: normalize(18)
- }
-})
\ No newline at end of file
+};
\ No newline at end of file
diff --git a/src/FLAD/services/spotify/spotify.service.ts b/src/FLAD/services/spotify/spotify.service.ts
index e188434..abcbb15 100644
--- a/src/FLAD/services/spotify/spotify.service.ts
+++ b/src/FLAD/services/spotify/spotify.service.ts
@@ -32,6 +32,7 @@ export default class SpotifyService implements IspotifyService {
if (respMusic.status != 200) {
return null;
}
+ console.log(respMusic.data.items.track.id)
return respMusic.data.items.track.id;
}
@@ -56,7 +57,6 @@ export default class SpotifyService implements IspotifyService {
}
};
const respMusic = await this.spotifyRequestHandler.spotifyFetch(requestData, fetchOptions,this.token);
- console.log(respMusic.data);
// need to handle when
// if (respMusic.status != 200) {
// if (respMusic.status == 400 && respMusic.data.message =='need to use Spotify premium'){