From f243584049fbf6052db5e1575b0687d4255705ff Mon Sep 17 00:00:00 2001
From: Lucas Delanier <delanierlucas@gmail.com>
Date: Wed, 22 Feb 2023 11:58:47 +0100
Subject: [PATCH] fix display homepage

---
 navigation/index.tsx         |   2 +-
 screens/HomeScreen.tsx       | 159 ++++++++++++++++++-----------------
 screens/WatchLaterScreen.tsx |  10 +--
 3 files changed, 86 insertions(+), 85 deletions(-)

diff --git a/navigation/index.tsx b/navigation/index.tsx
index 1f31fe0..143056d 100644
--- a/navigation/index.tsx
+++ b/navigation/index.tsx
@@ -61,7 +61,7 @@ function BottomTabNavigator() {
 
   return (
     <BottomTab.Navigator
-      initialRouteName="WatchLater"
+      initialRouteName="Home"
       screenOptions={{
         tabBarActiveTintColor: "purple",
 
diff --git a/screens/HomeScreen.tsx b/screens/HomeScreen.tsx
index 0fbd63a..042fb1b 100644
--- a/screens/HomeScreen.tsx
+++ b/screens/HomeScreen.tsx
@@ -73,10 +73,16 @@ export default function HomeScreen({ navigation }: RootStackScreenProps<'Home'>)
     });
 
 
-
     const dispatch = useDispatch();
 
-
+    useEffect(() => {
+        const loadTrendingID = async () => {
+            // @ts-ignore
+            await dispatch(getTrendingID());
+        };
+        console.log("test1:", trendingMovies);
+        loadTrendingID();
+    }, [dispatch]);
 
     type ItemProps = {
         movie : Movie
@@ -88,80 +94,83 @@ export default function HomeScreen({ navigation }: RootStackScreenProps<'Home'>)
        dispatch(removeMovieTrending(props));
     }
 
-return(
-    <SafeAreaView style={styles.background}>
-            <ImageBackground blurRadius={20}
-                             style={{
-                                 position: 'absolute',
-                                 width: "120%",
-                                 height: "120%",
-                                 justifyContent: "center",
-                                 alignItems: "center",
-                                 opacity: 0.28
-                             }}
-                             source={{
-                                 uri: trendingMovies[0].poster_path,
-                             }}
-            ></ImageBackground>
-            <View style={styles.image}>
-                <Image
-                    style={styles.filmCard}
-                    source={{
-                        uri: trendingMovies[0].poster_path,
-                    }}
-                />
-            </View>
-            <View style={{height:35, marginTop: 10, marginBottom: 15}}>
-                <ScrollView
-                    horizontal={true}
-                    showsHorizontalScrollIndicator={false}>
-                    <BadgeGenre name={"cc"} isSelected={false}></BadgeGenre>
-                    <BadgeGenre name={"cc"} isSelected={false}></BadgeGenre>
-                    <BadgeGenre name={"cc"} isSelected={false}></BadgeGenre>
-                    <BadgeGenre name={"cc"} isSelected={true}></BadgeGenre>
-                    <BadgeGenre name={"cc"} isSelected={false}></BadgeGenre>
-                    <BadgeGenre name={"cc"} isSelected={false}></BadgeGenre>
-                    <BadgeGenre name={"cc"} isSelected={false}></BadgeGenre>
-                    <BadgeGenre name={"cc"} isSelected={false}></BadgeGenre>
-                    <BadgeGenre name={"cc"} isSelected={false}></BadgeGenre>
-
-
-
-                </ScrollView>
-            </View>
-            <View style={{ flexDirection: 'column', alignSelf: 'flex-start', alignItems: 'flex-start', paddingHorizontal: 30, flex: 1 }}>
-
-                <View style={{ flexDirection: 'row', alignSelf: 'flex-start', justifyContent: 'flex-start', width: "100%"}}>
-                    <BadgeFilm name={"Science-fiction"}></BadgeFilm>
-                    <BadgeFilm name={"Science-fiction"}></BadgeFilm>
-                    <BadgeFilm name={"9:11"}></BadgeFilm>
-                </View>
-                <View>
-                    <Text numberOfLines={1} style={{color: "white", fontSize: 28, fontWeight: "bold", paddingTop: 5}}>{trendingMovies[0].original_title}</Text>
-                </View>
-                <Text style={{color: "grey", fontSize: 20, fontWeight: "bold"}}>{trendingMovies[0].release_date}</Text>
-            </View>
-            <View style={{ flexDirection: 'row' ,alignItems: 'center', justifyContent: "space-evenly", paddingHorizontal: 30, height: '15%', width:'100%'}}>
-                <TouchableOpacity onPress={() => addWatchLater(trendingMovies[0])}>
-                    <Image
-                        source={require('../assets/images/WatchLater.png')} style={{ resizeMode:"stretch",  height:'65%', aspectRatio: 1,}}
-                    />
-                </TouchableOpacity>
-                <TouchableOpacity>
+    return(
+        <>
+        {trendingMovies.length !== 0 && (
+        <SafeAreaView style={styles.background}>
+                <ImageBackground blurRadius={20}
+                                 style={{
+                                     position: 'absolute',
+                                     width: "120%",
+                                     height: "120%",
+                                     justifyContent: "center",
+                                     alignItems: "center",
+                                     opacity: 0.28
+                                 }}
+                                 source={{
+                                     uri: trendingMovies[0].poster_path,
+                                 }}
+                ></ImageBackground>
+                <View style={styles.image}>
                     <Image
-                        source={require('../assets/images/Generate.png')} style={{resizeMode:"stretch", height:'85%',aspectRatio: 1,}}
+                        style={styles.filmCard}
+                        source={{
+                            uri: trendingMovies[0].poster_path,
+                        }}
                     />
-
-                </TouchableOpacity>
-                <TouchableOpacity>
-                    <Image
-                        source={require('../assets/images/Favorite.png')} style={{ resizeMode:"stretch", height:'65%', aspectRatio: 1,}}
-                    />
-
-                </TouchableOpacity>
-            </View>
-        </SafeAreaView>);
-    
+                </View>
+                <View style={{height:35, marginTop: 10, marginBottom: 15}}>
+                    <ScrollView
+                        horizontal={true}
+                        showsHorizontalScrollIndicator={false}>
+                        <BadgeGenre name={"cc"} isSelected={false}></BadgeGenre>
+                        <BadgeGenre name={"cc"} isSelected={false}></BadgeGenre>
+                        <BadgeGenre name={"cc"} isSelected={false}></BadgeGenre>
+                        <BadgeGenre name={"cc"} isSelected={true}></BadgeGenre>
+                        <BadgeGenre name={"cc"} isSelected={false}></BadgeGenre>
+                        <BadgeGenre name={"cc"} isSelected={false}></BadgeGenre>
+                        <BadgeGenre name={"cc"} isSelected={false}></BadgeGenre>
+                        <BadgeGenre name={"cc"} isSelected={false}></BadgeGenre>
+                        <BadgeGenre name={"cc"} isSelected={false}></BadgeGenre>
+
+
+
+                    </ScrollView>
+                </View>
+                <View style={{ flexDirection: 'column', alignSelf: 'flex-start', alignItems: 'flex-start', paddingHorizontal: 30, flex: 1 }}>
+
+                    <View style={{ flexDirection: 'row', alignSelf: 'flex-start', justifyContent: 'flex-start', width: "100%"}}>
+                        <BadgeFilm name={"Science-fiction"}></BadgeFilm>
+                        <BadgeFilm name={"Science-fiction"}></BadgeFilm>
+                        <BadgeFilm name={"9:11"}></BadgeFilm>
+                    </View>
+                    <View>
+                        <Text numberOfLines={1} style={{color: "white", fontSize: 28, fontWeight: "bold", paddingTop: 5}}>{trendingMovies[0].original_title}</Text>
+                    </View>
+                    <Text style={{color: "grey", fontSize: 20, fontWeight: "bold"}}>{trendingMovies[0].release_date}</Text>
+                </View>
+                <View style={{ flexDirection: 'row' ,alignItems: 'center', justifyContent: "space-evenly", paddingHorizontal: 30, height: '15%', width:'100%'}}>
+                    <TouchableOpacity onPress={() => addWatchLater(trendingMovies[0])}>
+                        <Image
+                            source={require('../assets/images/WatchLater.png')} style={{ resizeMode:"stretch",  height:'65%', aspectRatio: 1,}}
+                        />
+                    </TouchableOpacity>
+                    <TouchableOpacity>
+                        <Image
+                            source={require('../assets/images/Generate.png')} style={{resizeMode:"stretch", height:'85%',aspectRatio: 1,}}
+                        />
+
+                    </TouchableOpacity>
+                    <TouchableOpacity>
+                        <Image
+                            source={require('../assets/images/Favorite.png')} style={{ resizeMode:"stretch", height:'65%', aspectRatio: 1,}}
+                        />
+
+                    </TouchableOpacity>
+                </View>
+            </SafeAreaView>)}
+        </>
+)
 }
 type BadgeGenreProps = {
     name : String
@@ -170,7 +179,7 @@ type BadgeGenreProps = {
 }
 
 export function BadgeGenre(props: BadgeGenreProps) {
-    if(props.isSelected==false){
+    if(props.isSelected===false){
         return (
             <View style={{paddingHorizontal: 20,  marginHorizontal: 5,height: 35, backgroundColor: '#2E2E2E', borderRadius: 20, justifyContent: "center"}} >
                 <Text style={{color: "white"}}>{props.name}</Text>
diff --git a/screens/WatchLaterScreen.tsx b/screens/WatchLaterScreen.tsx
index d98010f..dc28830 100644
--- a/screens/WatchLaterScreen.tsx
+++ b/screens/WatchLaterScreen.tsx
@@ -42,15 +42,7 @@ export default function WatchLaterScreen({ navigation }: RootTabScreenProps<'Wat
     const [isLoading, setLoading] = useState(true);
     // @ts-ignore
     const trendingMovies = useSelector(state => state.appReducer.watchLaterMovies);
-    const dispatch = useDispatch();
-    useEffect(() => {
-        const loadTrendingID = async () => {
-            // @ts-ignore
-            await dispatch(getTrendingID());
-        };
-        loadTrendingID();
-        console.log("test2:", trendingMovies);
-    }, [dispatch]);
+
   return (
       <SafeAreaView style={styles.container}>
           <View style={{height: 50, justifyContent: "flex-start",flexDirection: 'row', paddingHorizontal:20,  marginBottom: 15,marginVertical:5, alignItems:"flex-end"}} >