Favourite Movies

redux/actions/actionGetTrendingID.tsx

@@ -4,6 +4,8 @@ import {
     POP_FIRST_TRENDING,
     ADD_WATCHLATER,
     FETCH_WATCHLATER,
+    ADD_FAVOURITE,
+    FETCH_FAVOURITE
 } from '../constants';
 import config from "../../constants/config";
 import Movie from "../../model/Movie";
@@ -15,6 +17,13 @@ export const getWatchLaterMovies = (WatchLaterList: Movie[]) => {
     };
 }
 
+export const getFavouriteMovies = (FavouriteList: Movie[]) => {
+    return {
+        type: FETCH_FAVOURITE,
+        payload: FavouriteList,
+    };
+}
+
 export const fetchWatchLater = (WatchLaterList: Movie[]) => {
     return {
         type: FETCH_WATCHLATER,
@@ -22,11 +31,23 @@ export const fetchWatchLater = (WatchLaterList: Movie[]) => {
     };
 }
 
+export const fetchFavourite = (FavouriteList: Movie[]) => {
+    return {
+        type: FETCH_FAVOURITE,
+        payload: FavouriteList,
+    };
+}
+
 export const getWatchLater = () => {
     const MovieList: Movie[] = [];
     fetchWatchLater(MovieList);
 }
 
+export const getFavourite = () => {
+    const MovieList: Movie[] = [];
+    fetchFavourite(MovieList);
+}
+
 export const setinfoMovie = (TrendingMovieList: Movie[]) => {
     return {
         type: FETCH_TRENDING_MOVIE,
@@ -100,3 +121,10 @@ export const addMovieToWatchLater = (movie : Movie) => {
         payload: movie
     }
 }
+
+export const addMovieToFavourite = (movie : Movie) => {
+    return{
+        type: ADD_FAVOURITE,
+        payload: movie
+    }
+}

redux/constants.tsx

@@ -4,5 +4,7 @@ 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";
+
+export const ADD_FAVOURITE : string = "ADD_FAVOURITE";
+export const FETCH_FAVOURITE : string = "FETCH_FAVOURITE";

redux/reducers/appReducer.tsx

@@ -1,9 +1,19 @@
-import {POP_FIRST_TRENDING, FETCH_TRENDING_MOVIE, FETCH_TRENDING_ID, ADD_WATCHLATER, FETCH_WATCHLATER} from "../constants";
+import {
+    POP_FIRST_TRENDING,
+    FETCH_TRENDING_MOVIE,
+    FETCH_TRENDING_ID,
+    ADD_WATCHLATER,
+    FETCH_WATCHLATER,
+    ADD_FAVOURITE,
+    FETCH_FAVOURITE
+} from "../constants";
 import Movie from "../../model/Movie";
+
 const initialState = {
     trendingIDs: [],
     trendingMovies: [],
     watchLaterMovies: [] as Movie[],
+    favouriteMovies: [] as Movie[],
 }
 
 // @ts-ignore
@@ -16,6 +26,9 @@ export default appReducer = (state = initialState, action) => {
         case FETCH_WATCHLATER:
             // @ts-ignore
             return {...state, watchLaterMovies: action.payload};
+        case FETCH_FAVOURITE:
+            // @ts-ignore
+            return {...state, favouriteMovies: action.payload};
         case FETCH_TRENDING_MOVIE:
             return {...state, trendingMovies: action.payload};
         case POP_FIRST_TRENDING:
@@ -23,6 +36,9 @@ export default appReducer = (state = initialState, action) => {
         case ADD_WATCHLATER:
             // @ts-ignore
             return {...state,watchLaterMovies: [action.payload,...state.watchLaterMovies]};
+        case ADD_FAVOURITE:
+            // @ts-ignore
+            return {...state, favouriteMovies: [action.payload,...state.favouriteMovies]};
         default:
             return state;
     }

screens/FavoriteScreen.tsx

@@ -1,12 +1,76 @@
-import {FlatList, StyleSheet, SafeAreaView, Text, View, Image, TextInput} from 'react-native';
+import {FlatList, StyleSheet, SafeAreaView, Text, View, Image, TextInput, TouchableHighlight} from 'react-native';
 import * as React from "react";
-import {BadgeFilm} from "./HomeScreen";
+import {BadgeFilm, Stars} from "./HomeScreen";
-import { FontAwesomeIcon} from "@fortawesome/react-native-fontawesome";
+import {FontAwesomeIcon} from "@fortawesome/react-native-fontawesome";
-import { faHeart} from "@fortawesome/free-solid-svg-icons";
+import {faHeart} from "@fortawesome/free-solid-svg-icons";
+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, useState} from 'react';
+import {getTrendingID, getFavourite, getFavouriteMovies} from "../redux/actions/actionGetTrendingID";
+import Movie from "../model/Movie";
+import Swipeable from "react-native-gesture-handler/Swipeable";
 
 export default function FavoriteScreen({ navigation }: RootTabScreenProps<'Favorite'>) {
+    const [search, setSearch] = useState('');
+    const [filteredDataSource, setFilteredDataSource] = useState<Movie[]>([]);
+    const [masterDataSource, setMasterDataSource] = useState([]);
+    const insets = useSafeAreaInsets();
+    const styles = StyleSheet.create({
+        container: {
+            flex: 1,
+            paddingTop: 22,
+            backgroundColor: "#232323"
+        },
+        linearGradient: {
+            flex: 1,
+            paddingLeft: 15,
+            paddingRight: 15,
+            borderRadius: 5
+        },
+        item: {
+            padding: 10,
+            fontSize: 18,
+            height: 44,
+            color: "white"
+        },
+        filmCard: {
+            width: 70,
+            height: 100,
+            borderRadius: 8,
+        },
+    });
+
+    const dispatch = useDispatch();
+    // @ts-ignore
+    const favouriteMovies = useSelector(state => state.appReducer.favouriteMovies);
+    useEffect(() => {
+        const loadFavourite = async () => {
+            // @ts-ignore
+            await dispatch(getFavourite());
+        };
+        console.log("test11111:", favouriteMovies);
+        loadFavourite();
+    }, [dispatch]);
+
+    const searchFilterFunction = (text: string) => {
+        if (text) {
+            const newData = favouriteMovies.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}>
             <View style={{height: 50, justifyContent: "flex-start",flexDirection: 'row', paddingHorizontal:20,  marginBottom: 15,marginVertical:5, alignItems:"flex-end"}} >
@@ -17,73 +81,79 @@ export default function FavoriteScreen({ navigation }: RootTabScreenProps<'Favor
                 source={require('../assets/images/delimiter.png')} style={{height: 2, width: 400, resizeMode: "stretch"}}
             />
             <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={[
+                data={search.length !== 0 ? filteredDataSource : favouriteMovies}
-                    {key: 'Devin'},
+                keyExtractor={item => item.original_title}
-                    {key: 'Dan'},
+                renderItem={({item}) => <ListWidget movie={item}></ListWidget>}
-                    {key: 'Dominic'},
-                    {key: 'Jackson'},
-                    {key: 'James'},
-                    {key: 'Joel'},
-                    {key: 'John'},
-                    {key: 'Jillian'},
-                    {key: 'Jimmy'},
-                    {key: 'Julie'},
-                ]}
-                renderItem={({item}) => <ListWidget name={item.key} ></ListWidget>}
             />
         </SafeAreaView>
     );
 }
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        paddingTop: 22,
-        backgroundColor: "#232323"
-    },
-    item: {
-        padding: 10,
-        fontSize: 18,
-        height: 44,
-        color: "white"
-    },
-    filmCard: {
-        width: 70,
-        height: 100,
-        borderRadius: 8,
-
-
-    },
-});
 
 type ListWidgetProps = {
-    name : String
+    movie: Movie
-
 }
 
 export function ListWidget(props: ListWidgetProps) {
+    const insets = useSafeAreaInsets();
+
+    const styles = StyleSheet.create({
+        filmCard: {
+            width: 90,
+            height: 130,
+            borderRadius: 8,
+        },
+    });
+
+    function formatTime(time: number) {
+        console.log(time);
+        const hours = Math.floor(time / 60);
+        const minutes = time % 60;
+        return `${hours}h ${minutes < 10 ? `0${minutes}` : minutes}m`;
+    }
+
     return (
-        <View style={{height: 100, borderRadius: 20, justifyContent: "flex-start", flexDirection: 'row', paddingHorizontal:20, marginVertical:5}} >
+        <View style={{
+            height: 130,
+            width: "100%",
+            borderRadius: 20,
+            justifyContent: "flex-start",
+            flexDirection: 'row',
+            marginHorizontal: 20,
+            marginBottom: 15
+        }}>
             <Image
                 style={styles.filmCard}
                 source={{
-                    uri: 'https://fr.web.img4.acsta.net/pictures/21/11/16/10/01/4860598.jpg',
+                    uri: props.movie.poster_path,
                 }}
             />
-            <View style={{height: 100, borderRadius: 20, justifyContent: "flex-start", flexDirection: 'column', paddingLeft:10}} >
+            <View style={{
-                <Text style={{color: "white", fontWeight:"bold", fontSize:25}}>{props.name}</Text>
+                height: 130,
-                <Text style={{color: "grey", fontWeight:"bold", fontSize:17}}>{props.name}</Text>
+                width: "70%",
-                <View style={{marginVertical:10}}>
+                justifyContent: "center",
-                    <BadgeFilm name={"Science-Ficton"}/>
+                flexDirection: 'column',
+                paddingRight: 20,
+                paddingLeft: 20,
+            }}>
+                <Text numberOfLines={1} style={{
+                    color: "white",
+                    fontWeight: "700",
+                    fontSize: 21,
+                }}>{props.movie.original_title}</Text>
+                <View style={{flexDirection: "row", alignItems: "center", justifyContent: "space-between", width: "100%"}}>
+                    <View style={{flexDirection: "row", alignItems: "center",}}>
+                        <Stars note={props.movie.vote_average} size={70}></Stars>
+                        <Text style={{paddingLeft: 10, color: "white", fontWeight: "bold"}}>{props.movie.vote_average.toFixed(1)}</Text>
+                    </View>
+                    <Text style={{color: "grey", fontWeight: "600"}}>{formatTime(props.movie.runtime)}</Text>
                 </View>
+                <Text numberOfLines={3} style={{color: "grey", fontWeight: "600",}}>{props.movie.overview}</Text>
             </View>
         </View>
-
-
     );
-
-
 }
-

screens/HomeScreen.tsx

@@ -14,7 +14,7 @@ import {
 import {RootStackScreenProps} from "../types";
 import {useEffect, useRef, useState} from "react";
 import {useSafeAreaInsets} from "react-native-safe-area-context";
-import {addMovieToWatchLater, getTrendingID, removeMovieTrending,} from "../redux/actions/actionGetTrendingID";
+import {addMovieToWatchLater, addMovieToFavourite, getTrendingID, removeMovieTrending,} from "../redux/actions/actionGetTrendingID";
 import {useDispatch, useSelector} from 'react-redux';
 import Movie from "../model/Movie";
 import * as url from "url";
@@ -146,6 +146,15 @@ export default function HomeScreen({navigation}: RootStackScreenProps<'Home'>) {
         }
     }
 
+    function addFavourite(props: Movie) {
+        dispatch(addMovieToFavourite(props));
+        dispatch(removeMovieTrending(props));
+        if (displayIndex == trendingMovies.length - 1) {
+            setdisplayIndex(0);
+            swiper.swipeLeft();
+        }
+    }
+
 
     function popFirstTrending(props: Movie) {
         dispatch(removeMovieTrending(props));

screens/WatchLaterScreen.tsx

@@ -39,8 +39,6 @@ export default function WatchLaterScreen({navigation}: RootTabScreenProps<'Watch
             width: 70,
             height: 100,
             borderRadius: 8,
-
-
         },
     });
     const dispatch = useDispatch();
@@ -95,6 +93,7 @@ export default function WatchLaterScreen({navigation}: RootTabScreenProps<'Watch
         </SafeAreaView>
     );
 }
+
 type ListWidgetProps = {
     movie: Movie
 
@@ -162,10 +161,5 @@ export function ListWidget(props: ListWidgetProps) {
 
             </View>
         </View>
-
-
     );
-
-
 }
-