From 72dec224092ff819eafa0919c3618144ac8b6ec6 Mon Sep 17 00:00:00 2001
From: Emre KARTAL <Emre.KARTAL@etu.uca.fr>
Date: Wed, 1 Feb 2023 11:50:05 +0100
Subject: [PATCH] Add Navigation and FlatList for Favorite Page

---
 src/FLAD/App.tsx                              |   7 +++-
 src/FLAD/app.json                             |   8 ++--
 src/FLAD/assets/{ => icons}/adaptive-icon.png | Bin
 src/FLAD/assets/{ => icons}/favicon.png       | Bin
 src/FLAD/assets/{ => icons}/icon.png          | Bin
 src/FLAD/assets/{ => icons}/splash.png        | Bin
 src/FLAD/assets/{ => images}/jul.png          | Bin
 src/FLAD/assets/{ => images}/pnl.png          | Bin
 src/FLAD/{FakeData => data}/data.ts           |   0
 src/FLAD/model/Music.ts                       |  35 ++++++++++++++++++
 src/FLAD/navigation/Navigation.tsx            |  29 +++++++++++++++
 src/FLAD/{pages => screens}/favoritePage.tsx  |  22 ++++++++---
 src/FLAD/{pages => screens}/spot.tsx          |   0
 13 files changed, 89 insertions(+), 12 deletions(-)
 rename src/FLAD/assets/{ => icons}/adaptive-icon.png (100%)
 rename src/FLAD/assets/{ => icons}/favicon.png (100%)
 rename src/FLAD/assets/{ => icons}/icon.png (100%)
 rename src/FLAD/assets/{ => icons}/splash.png (100%)
 rename src/FLAD/assets/{ => images}/jul.png (100%)
 rename src/FLAD/assets/{ => images}/pnl.png (100%)
 rename src/FLAD/{FakeData => data}/data.ts (100%)
 create mode 100644 src/FLAD/model/Music.ts
 create mode 100644 src/FLAD/navigation/Navigation.tsx
 rename src/FLAD/{pages => screens}/favoritePage.tsx (52%)
 rename src/FLAD/{pages => screens}/spot.tsx (100%)

diff --git a/src/FLAD/App.tsx b/src/FLAD/App.tsx
index 3ce817b..c7e5d6f 100644
--- a/src/FLAD/App.tsx
+++ b/src/FLAD/App.tsx
@@ -1,7 +1,7 @@
 import { StatusBar } from 'expo-status-bar';
 import { useState, useTransition } from 'react';
 import { Animated, StyleSheet, Text, View } from 'react-native';
-import FavoritePage from './pages/favoritePage';
+import FavoritePage from './screens/favoritePage';
 import { cards as cardArray } from './FakeData/data'
 
  
@@ -40,7 +40,10 @@ const onSwipe = (index: number, direction: 'left' | 'right') => {
     </View>*/
 
     <View style={{backgroundColor: '#141414'}}>
-      <FavoritePage/>
+      <SafeAreaProvider>
+        <Navigation>
+        </Navigation>
+      </SafeAreaProvider>
     </View>
 
 
diff --git a/src/FLAD/app.json b/src/FLAD/app.json
index 7d22ae5..3474fa8 100644
--- a/src/FLAD/app.json
+++ b/src/FLAD/app.json
@@ -4,10 +4,10 @@
     "slug": "FLAD",
     "version": "1.0.0",
     "orientation": "portrait",
-    "icon": "./assets/icon.png",
+    "icon": "./assets/icons/icon.png",
     "userInterfaceStyle": "light",
     "splash": {
-      "image": "./assets/splash.png",
+      "image": "./assets/icons/splash.png",
       "resizeMode": "contain",
       "backgroundColor": "#141414"
     },
@@ -22,12 +22,12 @@
     },
     "android": {
       "adaptiveIcon": {
-        "foregroundImage": "./assets/adaptive-icon.png",
+        "foregroundImage": "./assets/icons/adaptive-icon.png",
         "backgroundColor": "#FFFFFF"
       }
     },
     "web": {
-      "favicon": "./assets/favicon.png"
+      "favicon": "./assets/icons/favicon.png"
     }
   }
 }
diff --git a/src/FLAD/assets/adaptive-icon.png b/src/FLAD/assets/icons/adaptive-icon.png
similarity index 100%
rename from src/FLAD/assets/adaptive-icon.png
rename to src/FLAD/assets/icons/adaptive-icon.png
diff --git a/src/FLAD/assets/favicon.png b/src/FLAD/assets/icons/favicon.png
similarity index 100%
rename from src/FLAD/assets/favicon.png
rename to src/FLAD/assets/icons/favicon.png
diff --git a/src/FLAD/assets/icon.png b/src/FLAD/assets/icons/icon.png
similarity index 100%
rename from src/FLAD/assets/icon.png
rename to src/FLAD/assets/icons/icon.png
diff --git a/src/FLAD/assets/splash.png b/src/FLAD/assets/icons/splash.png
similarity index 100%
rename from src/FLAD/assets/splash.png
rename to src/FLAD/assets/icons/splash.png
diff --git a/src/FLAD/assets/jul.png b/src/FLAD/assets/images/jul.png
similarity index 100%
rename from src/FLAD/assets/jul.png
rename to src/FLAD/assets/images/jul.png
diff --git a/src/FLAD/assets/pnl.png b/src/FLAD/assets/images/pnl.png
similarity index 100%
rename from src/FLAD/assets/pnl.png
rename to src/FLAD/assets/images/pnl.png
diff --git a/src/FLAD/FakeData/data.ts b/src/FLAD/data/data.ts
similarity index 100%
rename from src/FLAD/FakeData/data.ts
rename to src/FLAD/data/data.ts
diff --git a/src/FLAD/model/Music.ts b/src/FLAD/model/Music.ts
new file mode 100644
index 0000000..3bb59d6
--- /dev/null
+++ b/src/FLAD/model/Music.ts
@@ -0,0 +1,35 @@
+export class Music {
+  private _name: string;
+  private _bio: string;
+  private _image: ImageSource;
+
+  constructor(title: string, bio: string, image: any) {
+    this._title = name;
+    this._bio = bio;
+    this._image = image;
+  }
+
+  get title(): string {
+    return this._title;
+  }
+
+  set title(value: string) {
+    this._title = value;
+  }
+
+  get bio(): string {
+    return this._latitude;
+  }
+
+  set bio(value: string) {
+    this._latitude = value;
+  }
+
+  get image(): any {
+    return this._image;
+  }
+
+  set image(value: any) {
+    this._image = value;
+  }
+}
diff --git a/src/FLAD/navigation/Navigation.tsx b/src/FLAD/navigation/Navigation.tsx
new file mode 100644
index 0000000..27c7179
--- /dev/null
+++ b/src/FLAD/navigation/Navigation.tsx
@@ -0,0 +1,29 @@
+import React, {Component} from 'react';
+import { NavigationContainer } from 'react-native';
+
+export default function Navigation() {
+    const BottomTabNavigator = createBottomTabNavigator();
+    return (
+        <NavigationContainer>
+            <BottomTabNavigator.Navigator initialRouteName="Favorite">
+                <BottomTabNavigator.Screen name="Home" component={Home}
+                                           options={{
+                                               title: 'Home',
+                                               tabBarIcon: ({color}) => <TabBarIcon name="hear" color={color}/>,
+                                           }}/>
+                <BottomTabNavigator.Screen name="Favoris" component={Favorite}
+                                           options={{
+                                               title: 'Favoris',
+                                               tabBarIcon: ({color}) => <TabBarIcon name="hear" color={color}/>,
+                                           }}/>
+            </BottomTabNavigator.Navigator>
+        </NavigationContainer>
+    )
+}
+
+function TabBarIcon(props: {
+    name: React.ComponentProps<typeof FontAwesome>['name'];
+    color: string;
+}) {
+    return <FontAwesome size={30} {...props} />;
+}
\ No newline at end of file
diff --git a/src/FLAD/pages/favoritePage.tsx b/src/FLAD/screens/favoritePage.tsx
similarity index 52%
rename from src/FLAD/pages/favoritePage.tsx
rename to src/FLAD/screens/favoritePage.tsx
index 2ab49db..2027e11 100644
--- a/src/FLAD/pages/favoritePage.tsx
+++ b/src/FLAD/screens/favoritePage.tsx
@@ -5,6 +5,11 @@ import CardMusic from '../components/CardMusic';
 
 
 export default function favoritePage() {
+    export const MUSIC_LIST : Music[] = [
+        new Music("La pharmacie", "Jul",require("../assets/Images/jul.png")),
+        new Music("Deux frères", "PNL", require("../assets/images/pnl.png")),
+        new Music("Blanka", "PNL", require("../assets/images/pnl.png")),
+      ]
     return (
         <View>
             <View style={styles.titleContainer}>
@@ -12,12 +17,17 @@ export default function favoritePage() {
                 <Text style={styles.description}>Retrouvez ici vos musiques favorites</Text>
             </View>
             <ScrollView>
-                <CardMusic image="../assets/jul.png" title="La pharmacie" description="Jul"/>
-                <CardMusic image="../assets/pnl.png" title="deux frères" description="PNL"/> 
-                <CardMusic image="../assets/jul.png" title="La pharmacie" description="Jul"/>
-                <CardMusic image="../assets/pnl.png" title="deux frères" description="PNL"/> 
-                <CardMusic image="../assets/jul.png" title="La pharmacie" description="Jul"/>
-                <CardMusic image="../assets/pnl.png" title="deux frères" description="PNL"/> 
+                <View>
+                    <FlatList
+                        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>
             </ScrollView>
         </View>
     );
diff --git a/src/FLAD/pages/spot.tsx b/src/FLAD/screens/spot.tsx
similarity index 100%
rename from src/FLAD/pages/spot.tsx
rename to src/FLAD/screens/spot.tsx