lucas.delanier
/
MovieFinder
2
2
Fork 1
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 vote_average : number
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.poster_path = 'https://image.tmdb.org/t/p/w500'+poster_path;
this.runtime = runtime;
this.vote_average = vote_average;
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-stack": "^6.1.0",
"@reacticons/ionicons": "^6.0.4",
"@reduxjs/toolkit": "^1.9.3",
"deprecated-react-native-prop-types": "^4.0.0",
"expo": "~47.0.12",
"expo-asset": "~8.7.0",
"expo-constants": "~14.0.2",
@ -36,12 +38,16 @@
"react": "18.1.0",
"react-dom": "18.1.0",
"react-native": "0.70.5",
"react-native-gesture-handler": "^2.9.0",
"react-native-ionicons": "^4.6.5",
"react-native-linear-gradient": "^2.6.2",
"react-native-safe-area-context": "4.4.1",
"react-native-screens": "~3.18.0",
"react-native-svg": "^13.7.0",
"react-native-swipeable": "^0.6.0",
"react-native-web": "~0.18.9",
"react-redux": "^8.0.5",
"redux": "^4.2.1",
"rive-react-native": "^3.0.41"
},
"devDependencies": {

31
redux/actions/actionGetTrendingID.tsx
Unescape View File

@ -8,10 +8,10 @@ import {
import config from "../../constants/config";
import Movie from "../../model/Movie";
export const setTrendingID = (TrendingIDList: Movie[]) => {
export const getWatchLaterMovies = (WatchLaterList: Movie[]) => {
return {
type: FETCH_TRENDING_ID,
payload: TrendingIDList,
type: FETCH_WATCHLATER,
payload: WatchLaterList,
};
}
@ -22,6 +22,11 @@ export const fetchWatchLater = (WatchLaterList: Movie[]) => {
};
}
export const getWatchLater = () => {
const MovieList: Movie[] = [];
fetchWatchLater(MovieList);
}
export const setinfoMovie = (TrendingMovieList: Movie[]) => {
return {
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"]))
return infoPromise;
}catch (err){
console.log('ErrorGet---------', err);
//console.log('ErrorGet---------', err);
}
})).then(function (responses){
Promise.all(responses.map(result=>result.json()))
.then(function (elements){
elements.map(elt=> {
const infoJson = elt;
const genreRow : String[]= [];
// @ts-ignore
elt["genres"].map(genre => {
genreRow.push(genre.name);
});
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));
}
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{
type: ADD_WATCHLATER,
payload: movie

5
redux/reducers/appReducer.tsx
Unescape View File

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

9
redux/store.tsx
Unescape View File

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

42
screens/HomeScreen.tsx
Unescape View File

@ -9,22 +9,22 @@ import {
Image,
ImageBackground,
SafeAreaView,
ActivityIndicator
ActivityIndicator, FlatList
} from 'react-native';
import {RootStackScreenProps} from "../types";
import Rive from 'rive-react-native';
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 {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
const trendingMovies = useSelector(state => state.appReducer.trendingMovies);
console.log("liste [0]: ", trendingMovies[0]);
//console.log("liste [0]: ", trendingMovies[0]);
const insets = useSafeAreaInsets();
@ -80,7 +80,7 @@ export default function HomeScreen({ navigation }: RootStackScreenProps<'Home'>)
// @ts-ignore
await dispatch(getTrendingID());
};
console.log("test1:", trendingMovies);
//console.log("test1:", trendingMovies);
loadTrendingID();
}, [dispatch]);
@ -89,23 +89,34 @@ export default function HomeScreen({ navigation }: RootStackScreenProps<'Home'>)
}
function addWatchLater(props: Movie){
dispatch(addMovieToWatchLater(props));
dispatch(removeMovieTrending(props));
}
//dispatch(addMovieToWatchLater(props));
function popFirstTrending(props: Movie){
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(
<>
{trendingMovies.length !== 0 && (
<SafeAreaView style={styles.background}>
<ImageBackground blurRadius={20}
<ImageBackground blurRadius={8}
style={{
position: 'absolute',
width: "120%",
height: "120%",
width: "200%",
height: "200%",
justifyContent: "center",
alignItems: "center",
opacity: 0.28
opacity: 0.48
}}
source={{
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: 'row', alignSelf: 'flex-start', justifyContent: 'flex-start', width: "100%"}}>
<BadgeFilm name={"Science-fiction"}></BadgeFilm>
<BadgeFilm name={"Science-fiction"}></BadgeFilm>
<BadgeFilm name={"9:11"}></BadgeFilm>
<FlatList horizontal
data={trendingMovies[0].genres}
renderItem={({item}) => <BadgeFilm name={item}></BadgeFilm>}
/>
</View>
<View>
<Text numberOfLines={1} style={{color: "white", fontSize: 28, fontWeight: "bold", paddingTop: 5}}>{trendingMovies[0].original_title}</Text>
</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 style={{ flexDirection: 'row' ,alignItems: 'center', justifyContent: "space-evenly", paddingHorizontal: 30, height: '15%', width:'100%'}}>
<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,}}
/>
</TouchableOpacity>
<TouchableOpacity>
<TouchableOpacity onPress={() => popFirstTrending(trendingMovies[0])}>
<Image
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 {BadgeFilm} from "./HomeScreen";
import { FontAwesomeIcon} from "@fortawesome/react-native-fontawesome";
@ -8,11 +8,11 @@ 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} from "../redux/actions/actionGetTrendingID";
import {getTrendingID, getWatchLater, getWatchLaterMovies} from "../redux/actions/actionGetTrendingID";
import Movie from "../model/Movie";
import Swipeable from "react-native-gesture-handler/Swipeable";
export default function WatchLaterScreen({ navigation }: RootTabScreenProps<'WatchLater'>) {
const insets = useSafeAreaInsets();
const styles = StyleSheet.create({
container: {
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
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 (
<SafeAreaView style={styles.container}>
<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" />
<Text style={{color: "white", fontSize:30}}>Watch Later</Text>
</View>
<Image
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>
</View>
<FlatList
data={trendingMovies}
data={watchLaterMovies}
keyExtractor={item => item.original_title}
renderItem={({item}) => <ListWidget movie={item} ></ListWidget>}
/>
@ -70,6 +85,7 @@ type ListWidgetProps = {
}
export function ListWidget(props: ListWidgetProps) {
const insets = useSafeAreaInsets();
const styles = StyleSheet.create({
@ -90,6 +106,7 @@ export function ListWidget(props: ListWidgetProps) {
}
return (
<Swipeable>
<View style={{
height: 100,
borderRadius: 20,
@ -123,6 +140,7 @@ return (
</View>
</View>
</View>
</Swipeable>
);

Write Preview
Loading…
Cancel
Save