add resume to movies

model/Movie.tsx

@@ -5,15 +5,18 @@ class Movie {
     public runtime: number
     public vote_average : number
     public release_date: string
-    public genres: string[] = []
+    public overview: string
+    public genres: string[]
 
-    constructor(original_title: string, poster_path: string,runtime: number, vote_average: number, release_date : string, genres : string[]) {
+
+    constructor(original_title: string, poster_path: string,runtime: number, vote_average: number, release_date : string, genres : string[], overview : string) {
         this.original_title = original_title;
-        this.poster_path = 'https://image.tmdb.org/t/p/w500'+poster_path;
+        this.poster_path = 'https://image.tmdb.org/t/p/w780'+poster_path;
         this.runtime = runtime;
         this.vote_average = vote_average;
         this.release_date = release_date;
         this.genres = genres;
+        this.overview = overview;
     }
 
 

redux/actions/actionGetTrendingID.tsx

@@ -47,7 +47,7 @@ export const getTrendingID = () => {
             const MovieList: Movie[] = [];
             Promise.all(idList.map(async elt => {
                 try{
-                    const infoPromise = await fetch(config.base_url + "movie/"+elt+"?api_key=" + config.api_key);
+                    const infoPromise = await fetch(config.base_url + "movie/"+elt+"?api_key=" + config.api_key + "&language=fr-FR");
                     //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"]))
@@ -67,7 +67,7 @@ export const getTrendingID = () => {
                             });
                             console.log('infos---------', elt);
                             // @ts-ignore
-                            MovieList.push(new Movie(infoJson["original_title"], infoJson["poster_path"],infoJson["runtime"], infoJson["vote_average"], infoJson["release_date"], genreRow))
+                            MovieList.push(new Movie(infoJson["title"], infoJson["poster_path"],infoJson["runtime"], infoJson["vote_average"], infoJson["release_date"], genreRow, infoJson["overview"]))
                         })
                         try {
                             //console.log("tortue", MovieList)

screens/HomeScreen.tsx

@@ -9,7 +9,7 @@ import {
     Image,
     ImageBackground,
     SafeAreaView,
-    ActivityIndicator, FlatList
+    ActivityIndicator, FlatList, Animated, Easing
 } from 'react-native';
 import {RootStackScreenProps} from "../types";
 import {useEffect, useRef, useState} from "react";
@@ -17,8 +17,6 @@ import {useSafeAreaInsets} from "react-native-safe-area-context";
 import {addMovieToWatchLater, getTrendingID, removeMovieTrending,} from "../redux/actions/actionGetTrendingID";
 import {useDispatch, useSelector} from 'react-redux';
 import Movie from "../model/Movie";
-import Swipeable from 'react-native-gesture-handler/Swipeable';
-import {ListWidget} from "./WatchLaterScreen.js";
 
 export default function HomeScreen({ navigation }: RootStackScreenProps<'Home'>) {
     // @ts-ignore
@@ -95,7 +93,6 @@ export default function HomeScreen({ navigation }: RootStackScreenProps<'Home'>)
 
     function popFirstTrending(props: Movie){
         dispatch(removeMovieTrending(props));
-        dispatch(removeMovieTrending(props));
     }
 
     function formatTime(time: number) {
@@ -104,6 +101,21 @@ export default function HomeScreen({ navigation }: RootStackScreenProps<'Home'>)
         const minutes = time % 60;
         return `${hours}h ${minutes < 10 ? `0${minutes}` : minutes}m`;
     }
+    let rotateValueHolder = new Animated.Value(0);
+
+     function startImageRotateFunction(){
+        rotateValueHolder.setValue(0);
+        Animated.timing(rotateValueHolder, {
+            toValue: 0.5,
+            duration: 800,
+            easing: Easing.linear,
+            useNativeDriver: true,
+        }).start();}
+
+    const RotateData = rotateValueHolder.interpolate({
+        inputRange: [0, 1],
+        outputRange: ['0deg', '360deg'],
+    });
 
     return(
         <>
@@ -161,21 +173,23 @@ export default function HomeScreen({ navigation }: RootStackScreenProps<'Home'>)
                     </View>
                     <Text style={{color: "lightgray", 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%'}}>
+                <View style={{ flexDirection: 'row' ,alignItems: 'center', justifyContent: "space-evenly", paddingHorizontal: 30, height: '20%', width:'100%'}}>
                     <TouchableOpacity onPress={() => addWatchLater(trendingMovies[0])}>
                         <Image
-                            source={require('../assets/images/WatchLater.png')} style={{ resizeMode:"stretch",  height:'65%', aspectRatio: 1,}}
+                            source={require('../assets/images/WatchLater.png')} style={{ resizeMode:"stretch",  height:'45%', aspectRatio: 1,}}
                         />
                     </TouchableOpacity>
-                    <TouchableOpacity onPress={() => popFirstTrending(trendingMovies[0])}>
+                    <TouchableOpacity onPress={
-                        <Image
+                        () => popFirstTrending(trendingMovies[0]) }>
-                            source={require('../assets/images/Generate.png')} style={{resizeMode:"stretch", height:'85%',aspectRatio: 1,}}
+                        <Animated.Image
+                            source={require('../assets/images/Generate.png')} style={{resizeMode:"stretch", height:'45%',aspectRatio: 1,transform: [{ rotate: RotateData }],
+                        }}
                         />
 
                     </TouchableOpacity>
                     <TouchableOpacity>
                         <Image
-                            source={require('../assets/images/Favorite.png')} style={{ resizeMode:"stretch", height:'65%', aspectRatio: 1,}}
+                            source={require('../assets/images/Favorite.png')} style={{ resizeMode:"stretch", height:'45%', aspectRatio: 1,}}
                         />
 
                     </TouchableOpacity>

screens/WatchLaterScreen.tsx

@@ -12,6 +12,9 @@ import {getTrendingID, getWatchLater, getWatchLaterMovies} from "../redux/action
 import Movie from "../model/Movie";
 import Swipeable from "react-native-gesture-handler/Swipeable";
 export default function WatchLaterScreen({ navigation }: RootTabScreenProps<'WatchLater'>) {
+    const [search, setSearch] = useState('');
+    const [filteredDataSource, setFilteredDataSource] = useState<Movie[]>([]);
+    const [masterDataSource, setMasterDataSource] = useState([]);
     const insets = useSafeAreaInsets();
     const styles = StyleSheet.create({
         container: {
@@ -50,13 +53,23 @@ export default function WatchLaterScreen({ navigation }: RootTabScreenProps<'Wat
         console.log("test11111:", watchLaterMovies);
         loadWatchLater();
     }, [dispatch]);
-    const leftContent = <Text>Pull to activate</Text>;
-
-    const rightButtons = [
-        <TouchableHighlight><Text>Button 1</Text></TouchableHighlight>,
-        <TouchableHighlight><Text>Button 2</Text></TouchableHighlight>
-    ];
 
+    const searchFilterFunction = (text : string) => {
+        if (text) {
+            const newData = watchLaterMovies.filter(function (item : Movie) {
+                const itemData = item.original_title
+                    ? item.original_title.toUpperCase()
+                    : ''.toUpperCase();
+                const textData = text.toUpperCase();
+                return itemData.indexOf(textData) > -1;
+            });
+            setFilteredDataSource(newData);
+            setSearch(text);
+        } else {
+            setFilteredDataSource(masterDataSource);
+            setSearch(text);
+        }
+    };
 
     return (
       <SafeAreaView style={styles.container}>
@@ -69,10 +82,12 @@ export default function WatchLaterScreen({ navigation }: RootTabScreenProps<'Wat
           />
 
           <View style={{height:40, width:400, backgroundColor:"grey", borderRadius:20, marginVertical:10, alignSelf:"center"}}>
-              <TextInput style={{width:'100%', height:40, marginHorizontal:20}} ></TextInput>
+              <TextInput style={{width:'100%', height:40, marginHorizontal:20}}onChangeText={(text) => searchFilterFunction(text)}
+                         value={search}
+              ></TextInput>
           </View>
           <FlatList
-              data={watchLaterMovies}
+              data={search.length !== 0? filteredDataSource: watchLaterMovies}
               keyExtractor={item => item.original_title}
               renderItem={({item}) => <ListWidget movie={item} ></ListWidget>}
           />
@@ -136,7 +151,10 @@ return (
             }}>{props.movie.original_title}</Text>
             <Text style={{color: "grey", fontWeight: "bold", fontSize: 17}}>{formatTime(props.movie.runtime)}</Text>
             <View style={{marginVertical: 10}}>
-                <BadgeFilm name={"Science-Ficton"}/>
+                <FlatList horizontal
+                          data={props.movie.genres}
+                          renderItem={({item}) => <BadgeFilm name={item}></BadgeFilm>}
+                />
             </View>
         </View>
     </View>