Regle error merge

flad/src/FLAD/components/Onboarding.tsx

@@ -0,0 +1,199 @@
+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
+        <View style={styles.container}>
+            <View style={styles.balise}>
+                <FlatList 
+                    data={slides} 
+                    renderItem={({item}) => <OnboardingItem item={item} />} 
+                    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}
+                />    
+                <Paginator data={slides} scrollX={scrollX}/>
+                <NextButton scrollTo={scrollTo} percentage={(currentIndex + 1) * (100 / slides.length)} />    
+            </View>
+            <Modal animationType="slide" visible={isModalVisible} transparent={true} presentationStyle={'pageSheet'}>
+                <View style={styles.modalContent}>
+                    <ImageBackground source={require("../assets/images/Background_Start_Page.png")} style={styles.backgroundImage}>
+                        <View style={styles.modalView}>
+                            <Text style={styles.versionText}>
+                                v2.0
+                            </Text>
+                            <TouchableOpacity onPress={handleModal} style={styles.closeButtonCircle}>
+                                <View>
+                                    <Image source={require("../assets/icons/icons/croix.png")} style={styles.imageButton}/>
+                                </View>
+                            </TouchableOpacity>
+                            <Image source={require("../assets/icons/Logo_White_Flad.png")} style={styles.imageLogo}/>
+                            <TouchableOpacity 
+                                style={styles.buttonConnection} 
+                                onPress={() => {handleModal(); 
+                                // @ts-ignore
+                                navigation.navigate('Login');         
+                            }}>
+                                <Text style={styles.text}>CONTINUER AVEC SPOTIFY</Text>
+                            </TouchableOpacity>
+                            <TouchableOpacity style={styles.buttonInscription} onPress={() => {handleModal(); navigation.navigate('Register');}}>
+                                <Text style={styles.text}>S’INSCRIRE MAINTENANT</Text>
+                            </TouchableOpacity>
+                            <Image source={require("../assets/images/Flady.gif")} style={styles.mascot}/>
+                            <TouchableOpacity style={styles.button2Connection} onPress={() => {handleModal(); navigation.navigate('Login');}}>
+                                <Text style={styles.text}>SE CONNECTER</Text>
+                            </TouchableOpacity>
+                        </View>
+                    </ImageBackground>
+                </View>
+            </Modal>
+        </View>
+    );
+}
+
+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)
+    }
+})

src/FLAD/components/Card.tsx

@@ -5,6 +5,8 @@ import Animated,{ Extrapolate, interpolate, runOnJS, useAnimatedGestureHandler,
 import { PanGestureHandler, PanGestureHandlerGestureEvent } from 'react-native-gesture-handler';
 
 const SCREEN_WIDTH = Dimensions.get('window').width
+const SCREEN_HEIGHT = Dimensions.get('window').height
+
 // const width = wWidht *0.75;
 // const height = wWidht * (465/264);
 // const borderRadius = 24;
@@ -86,11 +88,23 @@ const Card = ({ title, image, onSwipe } : CardProps) => {
         ( translateX.value,
           [-SCREEN_WIDTH / 4, 0, SCREEN_WIDTH / 4],
           [0.35, 0, 0.35]);
+          
 
           return {
             opacity : opacityl,
           };
         });
+        const opacCStyle2 = useAnimatedStyle(() => {
+          const opacityl = interpolate
+          ( translateY.value,
+            [0,SCREEN_HEIGHT/4],
+            [0,0.35]);
+            
+  
+            return {
+              opacity : opacityl,
+            };
+          });
        
         const opacDStyle = useAnimatedStyle(() => {
           const opacityl = interpolate
@@ -99,7 +113,6 @@ const Card = ({ title, image, onSwipe } : CardProps) => {
             [ 0, 1]);
             
             return {
-              backgroundColor : 'red',
               opacity : opacityl,
             };
           });
@@ -161,9 +174,13 @@ const  horizontalThreshold = SCREEN_WIDTH * 0.65;
         
         <Animated.View style={[ styleCardsNew, styles.container]}>
         <Animated.View style={[  styles.image,{backgroundColor: 'black',elevation: 100,
-                    position: "absolute",borderWidth : 8, borderColor : '#DA1D1D',
+                    position: "absolute",borderWidth : 8, borderColor : '#FFF',
                     zIndex: 1000,}, opacCStyle]}>
         </Animated.View>
+        <Animated.View style={[  styles.image,{backgroundColor: 'black',elevation: 100,
+                    position: "absolute",borderWidth : 8, borderColor : '#FFF',
+                    zIndex: 1000,}, opacCStyle2]}>
+        </Animated.View>
         <Image source={{uri : image}} style={[styles.image]} />
         <>
         <Animated.View

src/FLAD/components/Onboarding.tsx

@@ -167,9 +167,9 @@ const styles = StyleSheet.create({
         height: 57,
         justifyContent: 'center',
         alignItems: 'center',
-        backgroundColor: '#951DDE',
+        backgroundColor: '#DA1D1D',
         borderRadius: 11,
-        borderColor: '#C656ED',
+        borderColor: '#F40C1C',
         borderWidth: 1,
         marginBottom: 220
     },

src/FLAD/navigation/FavoriteNavigation.tsx

@@ -18,7 +18,7 @@ export default function MusicNavigation() {
         />
         <Stack.Screen 
           name="MusicDetail" 
-          component={InfoScreen} 
+          component={MusicDetail} 
           sharedElements ={(route)=> {return [route.params.music.id]}}
         />
         <Stack.Screen 

src/FLAD/navigation/SpotNavigation.tsx

@@ -1,9 +1,10 @@
 import React, {Component} from 'react';
 import FavoritePage from '../screens/favorite';
 import { createStackNavigator } from '@react-navigation/stack';
-import Spot from '../screens/spot'
+import SpotPage from '../screens/spot'
 import { createSharedElementStackNavigator } from "react-navigation-shared-element";
 import SpotDetailsPage from '../screens/SpotDetailsPage';
+import MusicDetail from '../screens/MusicDetail';
 
 
 export default function SpotNavigation() {
@@ -20,12 +21,12 @@ export default function SpotNavigation() {
       >
         <Stack.Screen 
           name="Spots" 
-          component={Spot} 
+          component={SpotPage} 
         />
-        {/* <Stack.Screen 
+        <Stack.Screen 
           name="DetailsSpot" 
-          component={SpotDetailsPage} 
-        /> */}
+          component={MusicDetail} 
+        />
         {/* <Stack.Screen 
           name="DetailsSpot" 
           component={SpotDetailsPage} 

src/FLAD/screens/Favorite.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState} from 'react';
-import { Image,StyleSheet, Text, View, FlatList, ScrollView, TouchableOpacity, TouchableHighlight } from 'react-native';
+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'
@@ -58,18 +58,6 @@ export default function favoritePage() {
                         keyExtractor={(item: Music) => item.title }
                     />
                 </View>
-                <ScrollView>
-                    <View>
-                        <FlatList style={{marginBottom: 80}}
-                            data={MUSIC_LIST}
-                            renderItem={({ item }) => (
-                                //<TouchableHighlight onPress={() => navigation.navigate("")}>
-                                <CardMusic image={item.image} title={item.title} description={item.bio}/>
-                                //</TouchableHighlight>
-                                )}
-                                keyExtractor={(item: Music) => item.title }
-                                />
-                    </View>
                     <TouchableOpacity style={[styles.button, styles.shadow]} 
                         // @ts-ignore
                         onPress={() => navigation.navigate('Genre')}>

src/FLAD/screens/MusicDetail.tsx

@@ -13,6 +13,7 @@ import { FetchRequest } from "expo-auth-session/build/Fetch";
 import Music from "../Model/Music";
 import SpotifyService from "../services/spotify/spotify.service";
 import { SharedElement } from "react-navigation-shared-element";
+import { SafeAreaView } from "react-native-safe-area-context";
 
 const halfPi = Math.PI/2;
 
@@ -219,9 +220,11 @@ const MusicDetail = ({ 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'}}>
+        <View>
 
             <Animated.Image
                     source={{
@@ -229,7 +232,7 @@ const MusicDetail = ({ route }) => {
                     }}
                     style={[
                         {
-                        
+                            
                         width: 370,
                         height: 370,
                         borderRadius : 24,
@@ -276,8 +279,16 @@ const MusicDetail = ({ route }) => {
                 {/* Button */}
         {/* </SharedElement> */}
         </View>
+    </SafeAreaView>
 
     );
 };
 
-export default MusicDetail;
+export default MusicDetail;
+
+const styles = StyleSheet.create ({
+    mainSafeArea: {
+        flex: 1,
+        backgroundColor: "#141414",
+    }
+})

src/FLAD/screens/Register.tsx

@@ -99,7 +99,11 @@ const scopes = scopesArr.join(' ');
             '&redirect_uri=' +
             encodeURIComponent(redirectUrl),
         })
+        console.log("=================grant code ==============<");
+
         console.log(result);
+        console.log("=================grant code ==============<");
+
         return result.params.code;
       } catch (err) {
         console.error(err)

src/FLAD/screens/spot.tsx

@@ -24,9 +24,8 @@ import { useNavigation } from '@react-navigation/native';
 import Music from '../Model/Music';
 import { addFavoritesMusic } from '../redux/actions/appActions';
 import { useDispatch } from 'react-redux';
-interface SpotProps {
+import { Spot } from '../Model/Spot';
 
-}
 type LocationData = {
   latitude: number;
   longitude: number;
@@ -92,7 +91,7 @@ async function getValueFor(key:string) :Promise<string | null> {
   return result;
 }
 
-export default function Spot() {
+export default function SpotPage() {
   const [cards, setCards] = useState(spotArray2);
   const [currentCard, setcurrentCard] = useState(cards[cards.length - 1]);
   const onSwipe = (index: number, direction: 'left' | 'right' | 'down') => {
@@ -198,9 +197,9 @@ export default function Spot() {
   const navigator = useNavigation();
 
   const {width : wWidht} = Dimensions.get("window");
-  const hapti = (card : any) => {
+  const hapti = (card : Spot) => {
     Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy)
-    navigator.navigate("DetailsSpot", {"spot": card})
+    navigator.navigate("DetailsSpot", {"music": card.music})
     // Haptics.NotificationFeedbackType.Success
       };
   return (
@@ -231,7 +230,7 @@ export default function Spot() {
                 color: "#FFFFFF",
                 fontSize: 30,
                 fontWeight: "800",
-              }}>{currentCard.musicName}</Text>
+              }}>{currentCard.music.title}</Text>
               <Text
               style={{
                 fontStyle : 'normal',
@@ -239,7 +238,7 @@ export default function Spot() {
                 top: 75,
                 color: "#FFFFFF",
                 fontSize: 18,
-              }}>{currentCard.name}</Text>
+              }}>{currentCard.music.bio}</Text>
             </LinearGradient>
         </SafeAreaView>
       <View style={{flex : 8.35}}>