push homescreen and watch later display

App.tsx

@@ -11,6 +11,7 @@ export default function App() {
   const isLoadingComplete = useCachedResources();
   const colorScheme = useColorScheme();
 
+
   if (!isLoadingComplete) {
     return null;
   } else {

model/Movie.tsx

@@ -1,10 +1,10 @@
 class Movie {
-    original_title: string
+    public original_title: string
 
-    poster_path: string
+    public poster_path: string
-    runtime: number
+    public runtime: number
-    vote_average : number
+    public vote_average : number
-    release_date: string
+    public release_date: string
 
     constructor(original_title: string, poster_path: string,runtime: number, vote_average: number, release_date : string) {
         this.original_title = original_title;
@@ -16,6 +16,7 @@ class Movie {
 
 
 
+
 }
 
 export default Movie;

redux/actions/actionGetTrendingID.tsx

@@ -1,4 +1,10 @@
-import {FETCH_TRENDING_MOVIE, FETCH_TRENDING_ID, POP_FIRST_TRENDING} from '../constants';
+import {
+    FETCH_TRENDING_MOVIE,
+    FETCH_TRENDING_ID,
+    POP_FIRST_TRENDING,
+    ADD_WATCHLATER,
+    FETCH_WATCHLATER,
+} from '../constants';
 import config from "../../constants/config";
 import Movie from "../../model/Movie";
 
@@ -9,12 +15,22 @@ export const setTrendingID = (TrendingIDList: Movie[]) => {
     };
 }
 
+export const fetchWatchLater = (WatchLaterList: Movie[]) => {
+    return {
+        type: FETCH_WATCHLATER,
+        payload: WatchLaterList,
+    };
+}
+
 export const setinfoMovie = (TrendingMovieList: Movie[]) => {
     return {
         type: FETCH_TRENDING_MOVIE,
         payload: TrendingMovieList,
     };
 }
+
+
+
 export const getTrendingID = () => {
     // @ts-ignore
     return async dispatch => {
@@ -24,12 +40,28 @@ export const getTrendingID = () => {
             // @ts-ignore
             const idList: String[] = IDListJson.results.map(elt => elt["id"]);
             const MovieList: Movie[] = [];
-            idList.map(async elt => {
+            Promise.all(idList.map(async elt => {
+                try{
                     const infoPromise = await fetch(config.base_url + "movie/"+elt+"?api_key=" + config.api_key);
-                const infoJson = await infoPromise.json();
+                    //const infoJson = await infoPromise.json();
                     //console.log('infos---------', infoJson);
+                    //MovieList.push(new Movie(infoJson["original_title"], infoJson["poster_path"],infoJson["runtime"], infoJson["vote_average"], infoJson["release_date"]))
+                    return infoPromise;
+                }catch (err){
+                    console.log('ErrorGet---------', err);
+                }
+            })).then(function (responses){
+                Promise.all(responses.map(result=>result.json()))
+                    .then(function (elements){
+                        elements.map(elt=> {
+                            const infoJson = elt;
+                            console.log('infos---------', elt);
                             MovieList.push(new Movie(infoJson["original_title"], infoJson["poster_path"],infoJson["runtime"], infoJson["vote_average"], infoJson["release_date"]))
+                        })
+                        console.log("tortue", MovieList)
                         dispatch(setinfoMovie(MovieList));
+                    })
+
             });
 
         } catch (error) {
@@ -37,3 +69,17 @@ export const getTrendingID = () => {
         }
     }
 }
+
+export const removeMovieTrending = (movie: Movie) => {
+    return{
+        type: POP_FIRST_TRENDING,
+        payload: movie
+    }
+}
+
+export const addMovieToWatchLater = (movie : any) => {
+    return{
+        type: ADD_WATCHLATER,
+        payload: movie
+    }
+}

redux/constants.tsx

@@ -2,3 +2,7 @@
 export const FETCH_TRENDING_ID : string = "FETCH_TRENDING_ID";
 export const FETCH_TRENDING_MOVIE: string = "FETCH_TRENDING_MOVIE";
 export const POP_FIRST_TRENDING: string = "POP_FIRST_TRENDING";
+
+export const ADD_WATCHLATER : string = "ADD_WATCHLATER";
+
+export const FETCH_WATCHLATER : string = "FETCH_WATCHLATER";

redux/reducers/appReducer.tsx

@@ -1,8 +1,9 @@
-import {POP_FIRST_TRENDING, FETCH_TRENDING_MOVIE,FETCH_TRENDING_ID} from "../constants";
+import {POP_FIRST_TRENDING, FETCH_TRENDING_MOVIE, FETCH_TRENDING_ID, ADD_WATCHLATER, FETCH_WATCHLATER} from "../constants";
-
+import Movie from "../../model/Movie";
 const initialState = {
     trendingIDs: [],
     trendingMovies: [],
+    watchLaterMovies: [],
 }
 
 // @ts-ignore
@@ -11,10 +12,16 @@ export default appReducer = (state = initialState, action) => {
         case FETCH_TRENDING_ID:
             // @ts-ignore
             return {...state, trendingIDs: action.payload};
+        case FETCH_WATCHLATER:
+            // @ts-ignore
+            return {...state, watchLaterMovies: action.payload};
         case FETCH_TRENDING_MOVIE:
             return {...state, trendingMovies: action.payload};
         case POP_FIRST_TRENDING:
-            return {...state, trendingMovies: state.trendingMovies.pop()};
+            return {...state, trendingMovies: [...state.trendingMovies.filter((item : Movie) => item !== action.payload)]};
+        case ADD_WATCHLATER:
+            // @ts-ignore
+            return {...state,trendingMovies:action.payload};
         default:
             return state;
     }

screens/HomeScreen.tsx

@@ -1,16 +1,31 @@
 import * as React from 'react';
-import {Button,TouchableOpacity,ScrollView,View, Text, StyleSheet, Image, ImageBackground, SafeAreaView} from 'react-native';
+import {
+    Button,
+    TouchableOpacity,
+    ScrollView,
+    View,
+    Text,
+    StyleSheet,
+    Image,
+    ImageBackground,
+    SafeAreaView,
+    ActivityIndicator
+} from 'react-native';
 import {RootStackScreenProps} from "../types";
 import Rive from 'rive-react-native';
-import {useEffect, useRef} from "react";
+import {useEffect, useRef, useState} from "react";
 import {RiveViewManager} from "rive-react-native/lib/typescript/Rive.js";
 import {useSafeAreaInsets} from "react-native-safe-area-context";
-import {getTrendingID, } from "../redux/actions/actionGetTrendingID";
+import {addMovieToWatchLater, getTrendingID, removeMovieTrending,} from "../redux/actions/actionGetTrendingID";
 import {useDispatch, useSelector} from 'react-redux';
-import Movie from "../model/Movie.js";
+import Movie from "../model/Movie";
+
+export default function HomeScreen({ navigation }: RootStackScreenProps<'Home'>) {
+    // @ts-ignore
+    const trendingMovies = useSelector(state => state.appReducer.trendingMovies);
+
+    console.log("liste [0]: ", trendingMovies[0]);
 
-export default function App({ navigation }: RootStackScreenProps<'Home'>) {
-    const riveRef = useRef();
     const insets = useSafeAreaInsets();
 
     const styles = StyleSheet.create({
@@ -31,7 +46,6 @@ export default function App({ navigation }: RootStackScreenProps<'Home'>) {
             marginRight:'auto',
             borderRadius: 15,
 
-
         },
         image: {
             position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, justifyContent: 'center', alignItems: 'center',
@@ -58,25 +72,23 @@ export default function App({ navigation }: RootStackScreenProps<'Home'>) {
 
     });
 
-    // @ts-ignore
+
-    const trendingMovies = useSelector(state => state.appReducer.trendingMovies);
 
     const dispatch = useDispatch();
 
-    let firstelement: Movie = trendingMovies[0];
 
-    useEffect(() => {
-        const loadTrendingID = async () => {
-            // @ts-ignore
-            await dispatch(getTrendingID());
-        };
-        loadTrendingID();
-        firstelement = trendingMovies[0];
-    }, [dispatch]);
 
-    // @ts-ignore
+    type ItemProps = {
-    const onPress = () =>   this.setState({trendingMovies: trendingMovies.shift()}) ;
+        movie : Movie
-    return (
+
+    }
+    function addWatchLater(props: Movie){
+
+       //dispatch(addMovieToWatchLater(props));
+       dispatch(removeMovieTrending(props));
+    }
+
+return(
     <SafeAreaView style={styles.background}>
             <ImageBackground blurRadius={20}
                              style={{
@@ -88,14 +100,14 @@ export default function App({ navigation }: RootStackScreenProps<'Home'>) {
                                  opacity: 0.28
                              }}
                              source={{
-                                 uri: firstelement.poster_path,
+                                 uri: trendingMovies[0].poster_path,
                              }}
             ></ImageBackground>
             <View style={styles.image}>
                 <Image
                     style={styles.filmCard}
                     source={{
-                        uri: firstelement.poster_path,
+                        uri: trendingMovies[0].poster_path,
                     }}
                 />
             </View>
@@ -125,16 +137,15 @@ export default function App({ navigation }: RootStackScreenProps<'Home'>) {
                     <BadgeFilm name={"9:11"}></BadgeFilm>
                 </View>
                 <View>
-                        <Text numberOfLines={1} style={{color: "white", fontSize: 28, fontWeight: "bold", paddingTop: 5}}>{firstelement.original_title}</Text>
+                    <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"}}>{firstelement.release_date}</Text>
+                <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={onPress}>
+                <TouchableOpacity onPress={() => addWatchLater(trendingMovies[0])}>
                     <Image
                         source={require('../assets/images/WatchLater.png')} style={{ resizeMode:"stretch",  height:'65%', aspectRatio: 1,}}
                     />
-
                 </TouchableOpacity>
                 <TouchableOpacity>
                     <Image
@@ -149,10 +160,9 @@ export default function App({ navigation }: RootStackScreenProps<'Home'>) {
 
                 </TouchableOpacity>
             </View>
-        </SafeAreaView>
+        </SafeAreaView>);
-    );
-}
     
+}
 type BadgeGenreProps = {
     name : String
     isSelected: Boolean

screens/WatchLaterScreen.tsx

@@ -7,13 +7,12 @@ import LinearGradient from 'react-native-linear-gradient';
 import {RootTabScreenProps} from "../types";
 import {useSafeAreaInsets} from "react-native-safe-area-context";
 import {useDispatch,useSelector} from 'react-redux';
-import {useEffect} from 'react';
+import {useEffect, useState} from 'react';
 import {getTrendingID} from "../redux/actions/actionGetTrendingID";
 import Movie from "../model/Movie";
 export default function WatchLaterScreen({ navigation }: RootTabScreenProps<'WatchLater'>) {
     const insets = useSafeAreaInsets();
 
-
     const styles = StyleSheet.create({
         container: {
             flex: 1,
@@ -40,18 +39,17 @@ export default function WatchLaterScreen({ navigation }: RootTabScreenProps<'Wat
 
         },
     });
-
+    const [isLoading, setLoading] = useState(true);
     // @ts-ignore
-    const trendingMovies = useSelector(state => state.appReducer.trendingMovies);
+    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}>
@@ -73,10 +71,7 @@ export default function WatchLaterScreen({ navigation }: RootTabScreenProps<'Wat
           />
       </SafeAreaView>
   );
-
 }
-
-
 type ListWidgetProps = {
     movie : Movie