diff --git a/App.tsx b/App.tsx index 84d9eba..b5d8073 100644 --- a/App.tsx +++ b/App.tsx @@ -11,6 +11,7 @@ export default function App() { const isLoadingComplete = useCachedResources(); const colorScheme = useColorScheme(); + if (!isLoadingComplete) { return null; } else { diff --git a/model/Movie.tsx b/model/Movie.tsx index 3a55b61..7f4c608 100644 --- a/model/Movie.tsx +++ b/model/Movie.tsx @@ -1,10 +1,10 @@ class Movie { - original_title: string + public original_title: string - poster_path: string - runtime: number - vote_average : number - release_date: string + public poster_path: string + public runtime: number + public vote_average : number + 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; \ No newline at end of file diff --git a/redux/actions/actionGetTrendingID.tsx b/redux/actions/actionGetTrendingID.tsx index fc3cc71..5537201 100644 --- a/redux/actions/actionGetTrendingID.tsx +++ b/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,16 +40,46 @@ export const getTrendingID = () => { // @ts-ignore const idList: String[] = IDListJson.results.map(elt => elt["id"]); const MovieList: Movie[] = []; - idList.map(async elt => { - const infoPromise = await fetch(config.base_url + "movie/"+elt+"?api_key=" + config.api_key); - 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"])) - dispatch(setinfoMovie(MovieList)); + 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(); + //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) { console.log('Error---------', error); } } +} + +export const removeMovieTrending = (movie: Movie) => { + return{ + type: POP_FIRST_TRENDING, + payload: movie + } +} + +export const addMovieToWatchLater = (movie : any) => { + return{ + type: ADD_WATCHLATER, + payload: movie + } } \ No newline at end of file diff --git a/redux/constants.tsx b/redux/constants.tsx index 883050e..f57c3d9 100644 --- a/redux/constants.tsx +++ b/redux/constants.tsx @@ -1,4 +1,8 @@ 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"; \ No newline at end of file +export const POP_FIRST_TRENDING: string = "POP_FIRST_TRENDING"; + +export const ADD_WATCHLATER : string = "ADD_WATCHLATER"; + +export const FETCH_WATCHLATER : string = "FETCH_WATCHLATER"; \ No newline at end of file diff --git a/redux/reducers/appReducer.tsx b/redux/reducers/appReducer.tsx index 553d6a5..b4864fa 100644 --- a/redux/reducers/appReducer.tsx +++ b/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,12 +12,18 @@ 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; } -} \ No newline at end of file +} diff --git a/screens/HomeScreen.tsx b/screens/HomeScreen.tsx index 24d29a0..0fbd63a 100644 --- a/screens/HomeScreen.tsx +++ b/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,26 +72,24 @@ 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 - const onPress = () => this.setState({trendingMovies: trendingMovies.shift()}) ; - return ( - + type ItemProps = { + movie : Movie + + } + function addWatchLater(props: Movie){ + + //dispatch(addMovieToWatchLater(props)); + dispatch(removeMovieTrending(props)); + } + +return( + ) { opacity: 0.28 }} source={{ - uri: firstelement.poster_path, + uri: trendingMovies[0].poster_path, }} > @@ -124,35 +136,33 @@ export default function App({ navigation }: RootStackScreenProps<'Home'>) { - - {firstelement.original_title} - - {firstelement.release_date} + + {trendingMovies[0].original_title} + + {trendingMovies[0].release_date} - - - - - - - - - - - - + addWatchLater(trendingMovies[0])}> + + + + + + + + + + - - ); + ); + } - type BadgeGenreProps = { name : String isSelected: Boolean diff --git a/screens/WatchLaterScreen.tsx b/screens/WatchLaterScreen.tsx index 20a6ee6..d98010f 100644 --- a/screens/WatchLaterScreen.tsx +++ b/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 ( @@ -73,10 +71,7 @@ export default function WatchLaterScreen({ navigation }: RootTabScreenProps<'Wat /> ); - } - - type ListWidgetProps = { movie : Movie