From c6cfe46e7bd7685828b03ec31e4f1ff6cf902e86 Mon Sep 17 00:00:00 2001 From: Louison PARANT Date: Sun, 26 Feb 2023 11:15:16 +0100 Subject: [PATCH] Favourite Movies --- redux/actions/actionGetTrendingID.tsx | 28 ++++ redux/constants.tsx | 4 +- redux/reducers/appReducer.tsx | 18 ++- screens/FavoriteScreen.tsx | 178 ++++++++++++++++++-------- screens/HomeScreen.tsx | 11 +- screens/WatchLaterScreen.tsx | 10 +- 6 files changed, 184 insertions(+), 65 deletions(-) diff --git a/redux/actions/actionGetTrendingID.tsx b/redux/actions/actionGetTrendingID.tsx index 01d23a1..3c092bc 100644 --- a/redux/actions/actionGetTrendingID.tsx +++ b/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, @@ -99,4 +120,11 @@ export const addMovieToWatchLater = (movie : Movie) => { type: ADD_WATCHLATER, payload: movie } +} + +export const addMovieToFavourite = (movie : Movie) => { + return{ + type: ADD_FAVOURITE, + payload: movie + } } \ No newline at end of file diff --git a/redux/constants.tsx b/redux/constants.tsx index f57c3d9..f491306 100644 --- a/redux/constants.tsx +++ b/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 FETCH_WATCHLATER : string = "FETCH_WATCHLATER"; \ No newline at end of file +export const ADD_FAVOURITE : string = "ADD_FAVOURITE"; +export const FETCH_FAVOURITE : string = "FETCH_FAVOURITE"; \ No newline at end of file diff --git a/redux/reducers/appReducer.tsx b/redux/reducers/appReducer.tsx index 6dcaadb..cb767ab 100644 --- a/redux/reducers/appReducer.tsx +++ b/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; } diff --git a/screens/FavoriteScreen.tsx b/screens/FavoriteScreen.tsx index 7911410..535a826 100644 --- a/screens/FavoriteScreen.tsx +++ b/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 { FontAwesomeIcon} from "@fortawesome/react-native-fontawesome"; -import { faHeart} from "@fortawesome/free-solid-svg-icons"; +import {BadgeFilm, Stars} from "./HomeScreen"; +import {FontAwesomeIcon} from "@fortawesome/react-native-fontawesome"; +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([]); + 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 ( @@ -17,73 +81,79 @@ export default function FavoriteScreen({ navigation }: RootTabScreenProps<'Favor source={require('../assets/images/delimiter.png')} style={{height: 2, width: 400, resizeMode: "stretch"}} /> - + searchFilterFunction(text)} + value={search} + > } + data={search.length !== 0 ? filteredDataSource : favouriteMovies} + keyExtractor={item => item.original_title} + renderItem={({item}) => } /> ); } -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 ( - + - - {props.name} - {props.name} - - + + {props.movie.original_title} + + + + {props.movie.vote_average.toFixed(1)} + + {formatTime(props.movie.runtime)} + {props.movie.overview} - - ); - - -} - +} \ No newline at end of file diff --git a/screens/HomeScreen.tsx b/screens/HomeScreen.tsx index f5f1e26..4b676db 100644 --- a/screens/HomeScreen.tsx +++ b/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)); diff --git a/screens/WatchLaterScreen.tsx b/screens/WatchLaterScreen.tsx index 3241c22..ce1ac6f 100644 --- a/screens/WatchLaterScreen.tsx +++ b/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 ); } + type ListWidgetProps = { movie: Movie @@ -162,10 +161,5 @@ export function ListWidget(props: ListWidgetProps) { - - ); - - -} - +} \ No newline at end of file