david.d_almeida
/
MovieFinder
forked from lucas.delanier/MovieFinder
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

display genres and create movie with their genres

Browse Source
redux_test
Lucas Delanier 2 years ago
parent 0202f27b80
commit a5fcfbca85
8 changed files with 99 additions and 31171 deletions
Show Stats Download Patch File Download Diff File

4
model/Movie.tsx
Unescape View File

@ -5,13 +5,15 @@ class Movie {
public runtime: number public runtime: number
public vote_average : number public vote_average : number
public release_date: string public release_date: string
public genres: string[] = []
constructor(original_title: string, poster_path: string,runtime: number, vote_average: number, release_date : string) { constructor(original_title: string, poster_path: string,runtime: number, vote_average: number, release_date : string, genres : string[]) {
this.original_title = original_title; 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/w500'+poster_path;
this.runtime = runtime; this.runtime = runtime;
this.vote_average = vote_average; this.vote_average = vote_average;
this.release_date = release_date; this.release_date = release_date;
this.genres = genres;
} }

31131
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

6
package.json
Unescape View File

@ -23,6 +23,8 @@
"@react-navigation/native": "^6.0.2", "@react-navigation/native": "^6.0.2",
"@react-navigation/native-stack": "^6.1.0", "@react-navigation/native-stack": "^6.1.0",
"@reacticons/ionicons": "^6.0.4", "@reacticons/ionicons": "^6.0.4",
"@reduxjs/toolkit": "^1.9.3",
"deprecated-react-native-prop-types": "^4.0.0",
"expo": "~47.0.12", "expo": "~47.0.12",
"expo-asset": "~8.7.0", "expo-asset": "~8.7.0",
"expo-constants": "~14.0.2", "expo-constants": "~14.0.2",
@ -36,12 +38,16 @@
"react": "18.1.0", "react": "18.1.0",
"react-dom": "18.1.0", "react-dom": "18.1.0",
"react-native": "0.70.5", "react-native": "0.70.5",
"react-native-gesture-handler": "^2.9.0",
"react-native-ionicons": "^4.6.5", "react-native-ionicons": "^4.6.5",
"react-native-linear-gradient": "^2.6.2", "react-native-linear-gradient": "^2.6.2",
"react-native-safe-area-context": "4.4.1", "react-native-safe-area-context": "4.4.1",
"react-native-screens": "~3.18.0", "react-native-screens": "~3.18.0",
"react-native-svg": "^13.7.0", "react-native-svg": "^13.7.0",
"react-native-swipeable": "^0.6.0",
"react-native-web": "~0.18.9", "react-native-web": "~0.18.9",
"react-redux": "^8.0.5",
"redux": "^4.2.1",
"rive-react-native": "^3.0.41" "rive-react-native": "^3.0.41"
}, },
"devDependencies": { "devDependencies": {

31
redux/actions/actionGetTrendingID.tsx
Unescape View File

@ -8,10 +8,10 @@ import {
import config from "../../constants/config"; import config from "../../constants/config";
import Movie from "../../model/Movie"; import Movie from "../../model/Movie";
export const setTrendingID = (TrendingIDList: Movie[]) => { export const getWatchLaterMovies = (WatchLaterList: Movie[]) => {
return { return {
type: FETCH_TRENDING_ID, type: FETCH_WATCHLATER,
payload: TrendingIDList, payload: WatchLaterList,
}; };
} }
@ -22,6 +22,11 @@ export const fetchWatchLater = (WatchLaterList: Movie[]) => {
}; };
} }
export const getWatchLater = () => {
const MovieList: Movie[] = [];
fetchWatchLater(MovieList);
}
export const setinfoMovie = (TrendingMovieList: Movie[]) => { export const setinfoMovie = (TrendingMovieList: Movie[]) => {
return { return {
type: FETCH_TRENDING_MOVIE, type: FETCH_TRENDING_MOVIE,
@ -48,18 +53,29 @@ export const getTrendingID = () => {
//MovieList.push(new Movie(infoJson["original_title"], infoJson["poster_path"],infoJson["runtime"], infoJson["vote_average"], infoJson["release_date"])) //MovieList.push(new Movie(infoJson["original_title"], infoJson["poster_path"],infoJson["runtime"], infoJson["vote_average"], infoJson["release_date"]))
return infoPromise; return infoPromise;
}catch (err){ }catch (err){
console.log('ErrorGet---------', err); //console.log('ErrorGet---------', err);
} }
})).then(function (responses){ })).then(function (responses){
Promise.all(responses.map(result=>result.json())) Promise.all(responses.map(result=>result.json()))
.then(function (elements){ .then(function (elements){
elements.map(elt=> { elements.map(elt=> {
const infoJson = elt; const infoJson = elt;
const genreRow : String[]= [];
// @ts-ignore
elt["genres"].map(genre => {
genreRow.push(genre.name);
});
console.log('infos---------', elt); console.log('infos---------', elt);
MovieList.push(new Movie(infoJson["original_title"], infoJson["poster_path"],infoJson["runtime"], infoJson["vote_average"], infoJson["release_date"])) // @ts-ignore
MovieList.push(new Movie(infoJson["original_title"], infoJson["poster_path"],infoJson["runtime"], infoJson["vote_average"], infoJson["release_date"], genreRow))
}) })
console.log("tortue", MovieList) try {
//console.log("tortue", MovieList)
dispatch(setinfoMovie(MovieList)); dispatch(setinfoMovie(MovieList));
}
catch (err){
//console.log('ErrorGet---------', err);
}
}) })
}); });
@ -77,7 +93,8 @@ export const removeMovieTrending = (movie: Movie) => {
} }
} }
export const addMovieToWatchLater = (movie : any) => {
export const addMovieToWatchLater = (movie : Movie) => {
return{ return{
type: ADD_WATCHLATER, type: ADD_WATCHLATER,
payload: movie payload: movie

5
redux/reducers/appReducer.tsx
Unescape View File

@ -3,11 +3,12 @@ import Movie from "../../model/Movie";
const initialState = { const initialState = {
trendingIDs: [], trendingIDs: [],
trendingMovies: [], trendingMovies: [],
watchLaterMovies: [], watchLaterMovies: [] as Movie[],
} }
// @ts-ignore // @ts-ignore
export default appReducer = (state = initialState, action) => { export default appReducer = (state = initialState, action) => {
console.log(action.payload)
switch (action.type) { switch (action.type) {
case FETCH_TRENDING_ID: case FETCH_TRENDING_ID:
// @ts-ignore // @ts-ignore
@ -21,7 +22,7 @@ export default appReducer = (state = initialState, action) => {
return {...state, trendingMovies: [...state.trendingMovies.filter((item : Movie) => item !== action.payload)]}; return {...state, trendingMovies: [...state.trendingMovies.filter((item : Movie) => item !== action.payload)]};
case ADD_WATCHLATER: case ADD_WATCHLATER:
// @ts-ignore // @ts-ignore
return {...state,trendingMovies:action.payload}; return {...state,watchLaterMovies: [action.payload,...state.watchLaterMovies]};
default: default:
return state; return state;
} }

9
redux/store.tsx
Unescape View File

@ -1,14 +1,17 @@
import { configureStore } from '@reduxjs/toolkit' import { configureStore } from '@reduxjs/toolkit'
import appReducer from "./reducers/appReducer"; import appReducer from "./reducers/appReducer";
import { getDefaultMiddleware } from '@reduxjs/toolkit';
const reducer = { const reducer = {
appReducer: appReducer, appReducer: appReducer,
} }
const store= configureStore({ const store= configureStore({
// @ts-ignore // @ts-ignore
reducer, reducer: reducer,
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware({
serializableCheck: false,
}),
},); },);
export default store; export default store;

42
screens/HomeScreen.tsx
Unescape View File

@ -9,22 +9,22 @@ import {
Image, Image,
ImageBackground, ImageBackground,
SafeAreaView, SafeAreaView,
ActivityIndicator ActivityIndicator, FlatList
} from 'react-native'; } from 'react-native';
import {RootStackScreenProps} from "../types"; import {RootStackScreenProps} from "../types";
import Rive from 'rive-react-native';
import {useEffect, useRef, useState} 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 {useSafeAreaInsets} from "react-native-safe-area-context";
import {addMovieToWatchLater, getTrendingID, removeMovieTrending,} from "../redux/actions/actionGetTrendingID"; import {addMovieToWatchLater, getTrendingID, removeMovieTrending,} from "../redux/actions/actionGetTrendingID";
import {useDispatch, useSelector} from 'react-redux'; import {useDispatch, useSelector} from 'react-redux';
import Movie from "../model/Movie"; 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'>) { export default function HomeScreen({ navigation }: RootStackScreenProps<'Home'>) {
// @ts-ignore // @ts-ignore
const trendingMovies = useSelector(state => state.appReducer.trendingMovies); const trendingMovies = useSelector(state => state.appReducer.trendingMovies);
console.log("liste [0]: ", trendingMovies[0]); //console.log("liste [0]: ", trendingMovies[0]);
const insets = useSafeAreaInsets(); const insets = useSafeAreaInsets();
@ -80,7 +80,7 @@ export default function HomeScreen({ navigation }: RootStackScreenProps<'Home'>)
// @ts-ignore // @ts-ignore
await dispatch(getTrendingID()); await dispatch(getTrendingID());
}; };
console.log("test1:", trendingMovies); //console.log("test1:", trendingMovies);
loadTrendingID(); loadTrendingID();
}, [dispatch]); }, [dispatch]);
@ -89,23 +89,34 @@ export default function HomeScreen({ navigation }: RootStackScreenProps<'Home'>)
} }
function addWatchLater(props: Movie){ function addWatchLater(props: Movie){
dispatch(addMovieToWatchLater(props));
dispatch(removeMovieTrending(props));
}
//dispatch(addMovieToWatchLater(props)); function popFirstTrending(props: Movie){
dispatch(removeMovieTrending(props));
dispatch(removeMovieTrending(props)); dispatch(removeMovieTrending(props));
} }
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( return(
<> <>
{trendingMovies.length !== 0 && ( {trendingMovies.length !== 0 && (
<SafeAreaView style={styles.background}> <SafeAreaView style={styles.background}>
<ImageBackground blurRadius={20} <ImageBackground blurRadius={8}
style={{ style={{
position: 'absolute', position: 'absolute',
width: "120%", width: "200%",
height: "120%", height: "200%",
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "center",
opacity: 0.28 opacity: 0.48
}} }}
source={{ source={{
uri: trendingMovies[0].poster_path, uri: trendingMovies[0].poster_path,
@ -140,14 +151,15 @@ export default function HomeScreen({ navigation }: RootStackScreenProps<'Home'>)
<View style={{ flexDirection: 'column', alignSelf: 'flex-start', alignItems: 'flex-start', paddingHorizontal: 30, flex: 1 }}> <View style={{ flexDirection: 'column', alignSelf: 'flex-start', alignItems: 'flex-start', paddingHorizontal: 30, flex: 1 }}>
<View style={{ flexDirection: 'row', alignSelf: 'flex-start', justifyContent: 'flex-start', width: "100%"}}> <View style={{ flexDirection: 'row', alignSelf: 'flex-start', justifyContent: 'flex-start', width: "100%"}}>
<BadgeFilm name={"Science-fiction"}></BadgeFilm> <FlatList horizontal
<BadgeFilm name={"Science-fiction"}></BadgeFilm> data={trendingMovies[0].genres}
<BadgeFilm name={"9:11"}></BadgeFilm> renderItem={({item}) => <BadgeFilm name={item}></BadgeFilm>}
/>
</View> </View>
<View> <View>
<Text numberOfLines={1} style={{color: "white", fontSize: 28, fontWeight: "bold", paddingTop: 5}}>{trendingMovies[0].original_title}</Text> <Text numberOfLines={1} style={{color: "white", fontSize: 28, fontWeight: "bold", paddingTop: 5}}>{trendingMovies[0].original_title}</Text>
</View> </View>
<Text style={{color: "grey", fontSize: 20, fontWeight: "bold"}}>{trendingMovies[0].release_date}</Text> <Text style={{color: "lightgray", fontSize: 20, fontWeight: "bold"}}>{trendingMovies[0].release_date}</Text>
</View> </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: '15%', width:'100%'}}>
<TouchableOpacity onPress={() => addWatchLater(trendingMovies[0])}> <TouchableOpacity onPress={() => addWatchLater(trendingMovies[0])}>
@ -155,7 +167,7 @@ export default function HomeScreen({ navigation }: RootStackScreenProps<'Home'>)
source={require('../assets/images/WatchLater.png')} style={{ resizeMode:"stretch", height:'65%', aspectRatio: 1,}} source={require('../assets/images/WatchLater.png')} style={{ resizeMode:"stretch", height:'65%', aspectRatio: 1,}}
/> />
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity> <TouchableOpacity onPress={() => popFirstTrending(trendingMovies[0])}>
<Image <Image
source={require('../assets/images/Generate.png')} style={{resizeMode:"stretch", height:'85%',aspectRatio: 1,}} source={require('../assets/images/Generate.png')} style={{resizeMode:"stretch", height:'85%',aspectRatio: 1,}}
/> />

32
screens/WatchLaterScreen.tsx
Unescape View File

@ -1,4 +1,4 @@
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 * as React from "react";
import {BadgeFilm} from "./HomeScreen"; import {BadgeFilm} from "./HomeScreen";
import { FontAwesomeIcon} from "@fortawesome/react-native-fontawesome"; import { FontAwesomeIcon} from "@fortawesome/react-native-fontawesome";
@ -8,11 +8,11 @@ import {RootTabScreenProps} from "../types";
import {useSafeAreaInsets} from "react-native-safe-area-context"; import {useSafeAreaInsets} from "react-native-safe-area-context";
import {useDispatch,useSelector} from 'react-redux'; import {useDispatch,useSelector} from 'react-redux';
import {useEffect, useState} from 'react'; import {useEffect, useState} from 'react';
import {getTrendingID} from "../redux/actions/actionGetTrendingID"; import {getTrendingID, getWatchLater, getWatchLaterMovies} from "../redux/actions/actionGetTrendingID";
import Movie from "../model/Movie"; import Movie from "../model/Movie";
import Swipeable from "react-native-gesture-handler/Swipeable";
export default function WatchLaterScreen({ navigation }: RootTabScreenProps<'WatchLater'>) { export default function WatchLaterScreen({ navigation }: RootTabScreenProps<'WatchLater'>) {
const insets = useSafeAreaInsets(); const insets = useSafeAreaInsets();
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
flex: 1, flex: 1,
@ -39,25 +39,40 @@ export default function WatchLaterScreen({ navigation }: RootTabScreenProps<'Wat
}, },
}); });
const [isLoading, setLoading] = useState(true); const dispatch = useDispatch();
// @ts-ignore
const watchLaterMovies = useSelector(state => state.appReducer.watchLaterMovies);
useEffect(() => {
const loadWatchLater = async () => {
// @ts-ignore // @ts-ignore
const trendingMovies = useSelector(state => state.appReducer.watchLaterMovies); await dispatch(getWatchLater());
};
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>
];
return ( return (
<SafeAreaView style={styles.container}> <SafeAreaView style={styles.container}>
<View style={{height: 50, justifyContent: "flex-start",flexDirection: 'row', paddingHorizontal:20, marginBottom: 15,marginVertical:5, alignItems:"flex-end"}} > <View style={{height: 50, justifyContent: "flex-start",flexDirection: 'row', paddingHorizontal:20, marginBottom: 15,marginVertical:5, alignItems:"flex-end"}} >
<FontAwesomeIcon icon={faClock} style={{marginBottom: -5, marginRight: 20}} size={50} color="white" /> <FontAwesomeIcon icon={faClock} style={{marginBottom: -5, marginRight: 20}} size={50} color="white" />
<Text style={{color: "white", fontSize:30}}>Watch Later</Text> <Text style={{color: "white", fontSize:30}}>Watch Later</Text>
</View> </View>
<Image <Image
source={require('../assets/images/delimiter.png')} style={{height: 2, width: 400, resizeMode:"stretch"}} 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"}}> <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}} ></TextInput>
</View> </View>
<FlatList <FlatList
data={trendingMovies} data={watchLaterMovies}
keyExtractor={item => item.original_title} keyExtractor={item => item.original_title}
renderItem={({item}) => <ListWidget movie={item} ></ListWidget>} renderItem={({item}) => <ListWidget movie={item} ></ListWidget>}
/> />
@ -70,6 +85,7 @@ type ListWidgetProps = {
} }
export function ListWidget(props: ListWidgetProps) { export function ListWidget(props: ListWidgetProps) {
const insets = useSafeAreaInsets(); const insets = useSafeAreaInsets();
const styles = StyleSheet.create({ const styles = StyleSheet.create({
@ -90,6 +106,7 @@ export function ListWidget(props: ListWidgetProps) {
} }
return ( return (
<Swipeable>
<View style={{ <View style={{
height: 100, height: 100,
borderRadius: 20, borderRadius: 20,
@ -123,6 +140,7 @@ return (
</View> </View>
</View> </View>
</View> </View>
</Swipeable>
); );

Write Preview
Loading…
Cancel
Save