Merge pull request 'Settings_Binding_ReadMe' (#10) from Settings_Binding_ReadMe into master

Reviewed-on: #10

README.md

@@ -7,7 +7,7 @@
 **Nom de l’application** : FLAD :musical_note:
 </br>
 
-**Thème de l’application** :  Réseau social cross-plateforme dans le thème de la musique destiné aux utilisateurs d'appareils mobiles.
+**Thème de l’application** :  Il s'agit d'un réseau social cross-plateforme axé sur la musique et destiné aux utilisateurs de terminaux mobiles. Son objectif est de permettre aux utilisateurs situés à moins de 100 mètres les uns des autres de visualiser les musiques écoutées par chacun. Ils pourront faire connaissance grâce à un chat et, qui sait, devenir amis. :grin:
 </br>
 
 **Contexte** : 👇
@@ -19,7 +19,7 @@
 
 La racine de notre gitlab est composée de deux dossiers essentiels au projet:
 
-[**src**](src) : **Toute la partie codage de l'application web**
+[**src**](src) : **Toute la partie codage de l'application mobile** (contient un dossier API pour l'API FLAD qui effectue les requêtes vers l'API SPOTIFY et la base de données, ainsi qu'un dossier FLAD qui contient toute la partie côté client de l'application)
 
 [**doc**](doc) : **Documentation de l'application** 
 
@@ -76,6 +76,18 @@ Maintenant vous pouvez à tout moment lancer l'application grâce à la commande
 <br>
 :information_source: *Cliquer sur la touche 'w' si vous voulez le visualiser sur un navigateur (ce que je ne conseille pas) ou installer l'application 'Expo go' de votre téléphone et scanner le QR code proposer pour le visualiser (à noter que l'ordinateur dans lequel il se voit lancer doit être dans le même réseau local que votre téléphone)*
 
+- ### Comment s'inscrire sur l'application ? 
+
+Tout d'abord, il faut fournir votre *adresse e-mail* et votre *nom Spotify* aux **techniciens de l'application** (voir plus bas). Ils s'occuperont de vous ajouter définitivement à l'application. Une fois que cela est fait, inscrivez-vous via la **page d'inscription** de l'application en cliquant d'abord sur le bouton 'lier mon compte':
+
+<div align = center>
+
+<img src="doc/Images/Real_RegisterPage.JPG" width="250" >
+
+</div>
+
+
+Vous serez normalement redirigé sur la page Spotify où vous devrez vous connecter. Une fois connecté, entrez votre nom, votre adresse e-mail et votre mot de passe en tant qu'utilisateur FLAD (n'oubliez pas ces informations car vous en aurez besoin pour vous connecter). Ensuite, cliquez sur le bouton 'suivant' et bienvenue sur l'application !
 
 ## Environnement de Travail
 
@@ -102,9 +114,9 @@ Notre environnement de travail se base sur plusieurs outils et langages :👇
 
 La composition pour le projet se voit réaliser par deux élèves de l'IUT d'Aubière:
 <br>
-⚙️ Emre KARTAL
+⚙️ Emre KARTAL : emre.kartal@etu.uca.fr
 <br>
-⚙️ David D'ALMEIDA
+⚙️ David D'ALMEIDA : david.d_almeida@etu.uca.fr
 
 <div align = center>
 © PM2 (Projet inspiré par nos très chers développeurs de la Dafl Team (S.O les Dafl dev))

src/FLAD/components/AnimatedParalax.tsx

@@ -1,6 +1,4 @@
-import { SharedElement } from "react-navigation-shared-element";
+import { View, useWindowDimensions } from "react-native";
-import { NavigationProp, RouteProp } from "@react-navigation/native";
-import { View,Image,StyleSheet, Dimensions, useWindowDimensions } from "react-native";
 import Animated, { interpolate, SensorType, useAnimatedSensor, useAnimatedStyle, withTiming } from "react-native-reanimated";
 
 interface SpotProps {

src/FLAD/components/Artist.tsx

@@ -1,7 +1,6 @@
-import { View, StyleSheet, Dimensions, Image, Pressable, TouchableWithoutFeedback, TouchableOpacity, TouchableHighlight } from "react-native";
+import { View, StyleSheet, Dimensions, Image, TouchableOpacity } from "react-native";
 import Animated, {
     Layout,
-    Transition,
     ZoomIn,
     ZoomOut,
   } from "react-native-reanimated";

src/FLAD/components/Card.tsx

@@ -1,12 +1,9 @@
-import { View, Text, Image , Dimensions, StyleSheet } from 'react-native'
+import { View, Image , Dimensions, StyleSheet } from 'react-native'
-import React, { useRef, useState } from 'react'
+import React from 'react'
 import Animated,{ Extrapolate, interpolate, runOnJS, useAnimatedGestureHandler, useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
 
 import { PanGestureHandler, PanGestureHandlerGestureEvent } from 'react-native-gesture-handler';
-import * as Haptics from 'expo-haptics';
 
-const {width : wWidht} = Dimensions.get("window");
-const SCREEN_HEIGHT = Dimensions.get('window').height
 const SCREEN_WIDTH = Dimensions.get('window').width
 // const width = wWidht *0.75;
 // const height = wWidht * (465/264);

src/FLAD/components/FladLoadingScreen.tsx

@@ -76,7 +76,7 @@ const FladLoading = () => {
 
     
     return (
-      <View style={{flex : 1, justifyContent : 'center', alignItems :'center'}}>
+      <View style={{ justifyContent : 'center', alignItems :'center'}}>
     
         <Animated.View style={[{backgroundColor : '#B40404', justifyContent : 'center', alignItems : 'center'}, breatheStyleSquare]}>
             <Animated.Image source={require('../assets/icons/icon.png')} style={[{height: size, width : size, borderColor : '#fff',borderRadius : size/2}]}/>

src/FLAD/components/HalfCircle.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { View, Text, Image, Animated ,PanResponder, Dimensions, StyleSheet, ImageBackground, Button, Pressable, TextInput } from 'react-native'
+import { View, StyleSheet } from 'react-native'
 
 interface HalfCirlceProps {
     backgroundColor : string;

src/FLAD/components/Onboarding.tsx

@@ -180,20 +180,20 @@ const styles = StyleSheet.create({
     },
     button2Connection: {
         width: '100%',
-        height: 80,
+        height: normalize(92),
         backgroundColor: '#232123',
         borderTopColor: '#3C3C3C',
         borderTopWidth: 1,
         justifyContent: 'center',
         alignItems: 'center',
         position: 'absolute',
-        bottom: normalize(46)
+        bottom: normalize(0)
     },
     mascot: {
         width: normalize(130),
         height: normalize(130),
         position: 'absolute',
-        bottom: normalize(140),
+        bottom: normalize(90),
         right: normalize(0)
     }
 })

src/FLAD/data/data.ts

@@ -1,34 +1,41 @@
 export const cards = [{
-  name : "blue",
+  musicName : "Je bibi",
+  name : "Kaaris",
   sourceUrl : "https://th.bing.com/th/id/R.dbf87f0d8cbfd078ab6a589a5d921994?rik=1%2f6KliMpOAeh8A&pid=ImgRaw&r=0",
   index : 4
 },
 {
-  name : "her",
+  musicName : "Breathin",
+  name : "Ariana Grande",
   sourceUrl : "https://i.ebayimg.com/images/g/rY0AAOSw97djEo2C/s-l500.jpg",
   index : 9
 },
 {
+  musicName : "Zombies",
   name : "gambino",
   sourceUrl : "https://th.bing.com/th/id/R.0b2d1a59bfda9b1a49ecb561e08535a8?rik=Xyc35OZU%2f6VOVw&pid=ImgRaw&r=0",
   index : 3
 },
 {
+  musicName : "Bambina",
   name : "PNL",
   sourceUrl : "https://upload.wikimedia.org/wikipedia/en/a/a0/PNL_-_Dans_la_l%C3%A9gende.png",
   index : 10
 },
 {
-  name : "Freeze Raël",
+  musicName : "Freeze Raël",
+  name : "Freeze Corleone",
   sourceUrl : "https://intrld.com/wp-content/uploads/2020/08/freeze-corleone-la-menace-fanto%CC%82me.png",
   index : 23
 },
 {
+  musicName : "Autobahn",
   name : "Sch",
   sourceUrl : "https://images.genius.com/83b6c98680d38bde1571f6b4093244b5.1000x1000x1.jpg",
   index : 44
 },
 {
+  musicName : "Lakehouse",
   name : "Stratos",
   sourceUrl : "https://images.genius.com/ddc9cadedd1d4cef0860aaa85af9cd46.705x705x1.png",
   index : 89

src/FLAD/navigation/AuthNavigation.tsx

@@ -47,9 +47,9 @@ export default function AuthNavigation() {
         <>
                  {isLogin ? (
          /* {userToken != null ? ( */
-        <SafeAreaView style={styles.mainSafeArea} >
+        <SafeAreaProvider>
             <Navigation/>
-        </SafeAreaView>
+        </SafeAreaProvider>
     
         ) : 
         <SafeAreaProvider >
@@ -59,9 +59,3 @@ export default function AuthNavigation() {
     </>
     )
   }
-  const styles = StyleSheet.create({
-    mainSafeArea: {
-      flex: 1,
-      backgroundColor: "#141414",
-    }
-  });

src/FLAD/navigation/Navigation.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
+import { View, StyleSheet, Platform } from 'react-native';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { NavigationContainer } from '@react-navigation/native';
 import FavoriteNavigation from './FavoriteNavigation';
 import SettingNavigation from './SettingNavigation';
-import Spot from '../screens/spot';
 
+import normalize from '../components/Normalize';
 // @ts-ignore
 import FontAwesome from 'react-native-vector-icons/FontAwesome';
 import SpotNavigation from './SpotNavigation';
@@ -29,14 +30,17 @@ export default function Navigation() {
             initialRouteName="Spots" 
             screenOptions={{
               //tabBarShowLabel: false, //to remove the titles under the icons
-              tabBarStyle: {height: 60, position: 'absolute', bottom: 20, borderRadius: 30, marginHorizontal: 25},
+              tabBarStyle: styles.tabBar,
-              tabBarLabelStyle: { bottom: 5 }
+              ...(Platform.OS === 'android' 
+              ? { tabBarLabelStyle: { bottom: normalize(10) } }
+              : { tabBarLabelStyle: { bottom: normalize(-22) } }
+            ),
 
             }}>
               <BottomTabNavigator.Screen name="Spots" component={SpotNavigation}
                         options={{ 
                             headerShown: false,
-                            tabBarIcon: ({color}) => <TabBarIcon name="music" color={color}/>,
+                            tabBarIcon: ({color}) => <View style={styles.IconContainer}><TabBarIcon name="music" color={color}/></View>,
                          }}/>
               <BottomTabNavigator.Screen name="Favorites" component={FavoriteNavigation}
                         options={{
@@ -45,17 +49,17 @@ export default function Navigation() {
                           tabBarBadge : 2,
                           tabBarBadgeStyle : {backgroundColor : 'yellow'}, 
                             headerShown: false,
-                            tabBarIcon: ({color}) => <TabBarIcon name="heart" color={color}/>,
+                            tabBarIcon: ({color}) => <View style={styles.IconContainer}><TabBarIcon name="heart" color={color}/></View>,
                          }}/>
               <BottomTabNavigator.Screen name="Messages" component={Login}
                         options={{ 
                             headerShown: false,
-                            tabBarIcon: ({color}) => <TabBarIcon name="comment" color={color}/>,
+                            tabBarIcon: ({color}) => <View style={styles.IconContainer}><TabBarIcon name="comment" color={color}/></View>,
                          }}/>
               <BottomTabNavigator.Screen name="Setting" component={SettingNavigation}
                         options={{ 
                             headerShown: false,
-                            tabBarIcon: ({color}) => <TabBarIcon name="cog" color={color}/>,
+                            tabBarIcon: ({color}) => <View style={styles.IconContainer}><TabBarIcon name="cog" color={color}/></View>,
                          }}/>
           </BottomTabNavigator.Navigator>
       </NavigationContainer>
@@ -68,3 +72,17 @@ function TabBarIcon(props: {
 }) {
     return <FontAwesome size={30} {...props} />;
 }
+
+const styles = StyleSheet.create({
+  tabBar: {
+    height: 60, 
+    position: 'absolute', 
+    bottom: normalize(50), 
+    borderRadius: 30, 
+    marginHorizontal: 25
+  },
+  IconContainer: {
+    position: 'absolute', 
+    top: 5, 
+  }
+})

src/FLAD/screens/Favorite.tsx

@@ -1,5 +1,5 @@
 import React, { useState} from 'react';
-import { Image,StyleSheet, Text, View, FlatList, ScrollView, TouchableOpacity } from 'react-native';
+import { Image,StyleSheet, Text, View, FlatList, ScrollView, TouchableOpacity, SafeAreaView } from 'react-native';
 import CardMusic from '../components/CardMusic';
 import normalize from '../components/Normalize';
 import Music from '../Model/Music'
@@ -39,6 +39,7 @@ export default function favoritePage() {
 
     return (
         <View style={styles.body}>
+            <SafeAreaView style={styles.mainSafeArea}>
                 <View style={styles.titleContainer}>
                     <Text style={styles.title}>Favoris</Text>
                     <Text style={styles.description}>Retrouvez ici vos musiques favorites</Text>
@@ -61,11 +62,16 @@ export default function favoritePage() {
                             <Image source={require("../assets/icons/icons/next.png")} style={styles.buttonImage}/>
                         </TouchableOpacity>
                 </ScrollView>
+            </SafeAreaView>
         </View>
     );
 };
 
 const styles = StyleSheet.create({
+    mainSafeArea: {
+        flex: 1,
+        backgroundColor: "#141414",
+    },
     body: {
         flex: 1,
         justifyContent: 'center',

src/FLAD/screens/Register.tsx

@@ -1,10 +1,9 @@
 import React, { useEffect, useState } from 'react';
-import { View, Image, StyleSheet, Text, ImageBackground, Button, TextInput, TouchableWithoutFeedback, Keyboard, TouchableOpacity, Platform } from 'react-native';
+import { View, Image, StyleSheet, Text, ImageBackground, TextInput, TouchableWithoutFeedback, Keyboard, TouchableOpacity, Platform } from 'react-native';
 import {useNavigation} from "@react-navigation/native";
 import normalize from '../components/Normalize';
 import * as SecureStore from 'expo-secure-store';
 import * as AuthSession from 'expo-auth-session';
-import axios from 'axios';
 import * as WebBrowser from 'expo-web-browser';
 import { makeRedirectUri, useAuthRequest } from 'expo-auth-session';
 import { registerUser } from '../redux/thunk/authThunk';

src/FLAD/screens/Setting.tsx

@@ -1,5 +1,5 @@
 import React, { useRef, useState } from 'react';
-import { View, StyleSheet, Text, Image, TouchableWithoutFeedback, Keyboard, TouchableOpacity, TouchableHighlight } from 'react-native';
+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";
 
@@ -43,6 +43,7 @@ export default function Setting() {
         () => setIsCheckedLocalisation(value => !value);
     return (
         <DismissKeyboard>
+            <SafeAreaView style={styles.mainSafeArea}>
                 <ScrollView>
                     <View style={styles.container}>
                         <Text style={styles.title}>Réglages</Text>
@@ -138,11 +139,16 @@ export default function Setting() {
                         </View>
                     </View>
                 </ScrollView>
+            </SafeAreaView>
         </DismissKeyboard>
     );
 };
 
 const styles = StyleSheet.create({
+    mainSafeArea: {
+        flex: 1,
+        backgroundColor: "#141414",
+    },
     container: {
         marginTop: 30,
         marginHorizontal: normalize(25),

src/FLAD/screens/SettingProfil.tsx

@@ -7,6 +7,7 @@ import {useNavigation} from "@react-navigation/native";
 
 import normalize from '../components/Normalize';
 import * as ImagePicker from 'expo-image-picker';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 // @ts-ignore
 const DismissKeyboard = ({ children }) => (
@@ -46,6 +47,7 @@ export default function SettingProfil() {
 
     return (
         <DismissKeyboard>
+            <SafeAreaView style={styles.mainSafeArea}>
                 <ScrollView>
                     <View style={styles.container}>
                         <TouchableOpacity onPress={() => navigation.navigate('Setting')}>
@@ -142,11 +144,16 @@ export default function SettingProfil() {
                         </Modal>
                     </View>
                 </ScrollView>
+            </SafeAreaView>
         </DismissKeyboard>
     );
 };
 
 const styles = StyleSheet.create({
+    mainSafeArea: {
+        flex: 1,
+        backgroundColor: "#141414",
+    },
     container: {
         marginTop: 20,
         marginHorizontal: normalize(25),

src/FLAD/screens/SpotDetailsPage.tsx

@@ -1,6 +1,6 @@
 import { SharedElement } from "react-navigation-shared-element";
 import { NavigationProp, RouteProp } from "@react-navigation/native";
-import { View,Text,Image,StyleSheet, Dimensions, useWindowDimensions, Button, TouchableOpacity } from "react-native";
+import { View,Text,Image,StyleSheet, Dimensions, useWindowDimensions, Button, TouchableOpacity, SafeAreaView } from "react-native";
 import Animated, { interpolate, SensorType, useAnimatedSensor, useAnimatedStyle, useDerivedValue, useSharedValue, Value, withSpring, withTiming } from "react-native-reanimated";
 import { BlurView } from 'expo-blur';
 import qs from "qs";
@@ -217,6 +217,7 @@ const SpotDetailsPage = ({ route }) => {
 
     
     return (
+      <SafeAreaView style={styles.mainSafeArea}>
 <View style={{ flex: 1, justifyContent : 'flex-start', alignItems : 'center' }}>
         {/* <SharedElement  id={spot.name} style={{ flex: 1 }}>                 */}
         <View style={{borderWidth : 1, borderColor : 'red'}}>
@@ -287,8 +288,16 @@ const SpotDetailsPage = ({ route }) => {
         </View> */}
         {/* </SharedElement> */}
         </View>
+      </SafeAreaView>
 
     );
 };
 
 export default SpotDetailsPage;
+
+const styles = StyleSheet.create ({
+  mainSafeArea: {
+    flex: 1,
+    backgroundColor: "#141414",
+  }
+})

src/FLAD/screens/spot.tsx

@@ -204,35 +204,32 @@ export default function Spot() {
                                  height: "100%",
                                  justifyContent: "center",
                                  alignItems: "center",
-                                 opacity: 0.48
                              }}
                              source={{
                                  uri:currentCard.sourceUrl ,
                              }}
       ></ImageBackground>
-
+        <SafeAreaView style={styles.mainSafeArea}>
-      <View style={{flex : 1.65}}>
+            <LinearGradient colors={['rgba(2, 2, 2, 0.58) 0%','rgba(0, 0, 0, 0) 100.56%']}style={styles.gradient}>
-      <LinearGradient colors={['rgba(2, 2, 2, 0.58) 0%','rgba(0, 0, 0, 0) 90.56%']}style={styles.gradient}>
               <Text
               style={{
                 fontStyle : 'normal',
                 left: wWidht/9 ,
-        top: 65,
+                top: 75,
                 color: "#FFFFFF",
-        fontSize: 20,
+                fontSize: 30,
                 fontWeight: "800",
-      }}>LOST FOREST</Text>
+              }}>{currentCard.musicName}</Text>
               <Text
               style={{
                 fontStyle : 'normal',
                 left: wWidht/9 ,
-        top: 65,
+                top: 75,
                 color: "#FFFFFF",
                 fontSize: 18,
-        fontWeight: "800",
+              }}>{currentCard.name}</Text>
-      }}>Laylow</Text>
             </LinearGradient>
-      </View>
+        </SafeAreaView>
       <View style={{flex : 8.35}}>
       
       <View style={{flex : 1.83, justifyContent: 'center', alignItems: 'center' }}>
@@ -272,16 +269,12 @@ export default function Spot() {
       </View>
       </>
       )
-      : (<View style={{justifyContent : 'center', alignItems : 'center', flex : 1}}>
+      : (<View style={{justifyContent : 'center', alignItems : 'center', flex : 1, backgroundColor: "#141414"}}>
-        <View style={{flex:7}}>
+          <View style={{position: "absolute"}}>
-
+            <FladLoading/>
-                        <FladLoading></FladLoading>
           </View>               
-        <View style={{flex : 3 , justifyContent: 'flex-start'}}>
+            <Text style={{color: "grey", fontWeight: "400", textAlign: "center", top: 100}}>Vous avez explorer toutes les spot autour de vous.
-        <Text style={{color: "grey", fontWeight: "400", textAlign: "center"}}>Vous avez explorer toutes les spot autour de vous.
                               {"\n"}Continuer dans discoverie pour découvrir de nouvelles music basées dur vos gouts musicaux.</Text>               
-        </View>
-                                            
         </View>)
     }
     </View>
@@ -289,6 +282,9 @@ export default function Spot() {
   );
 };
   const styles = StyleSheet.create({
+    mainSafeArea: {
+      flex: 1,
+    },
     spot : {
       flex: 1,
       alignItems: 'center',
@@ -320,9 +316,5 @@ export default function Spot() {
       right : 0,
       height : 209,
     },
-
-      mainSafeArea: {
-        flex: 1,
-      }
   })