diff --git a/App.tsx b/App.tsx index 849ec62..765cdb1 100644 --- a/App.tsx +++ b/App.tsx @@ -1,21 +1,18 @@ -import {StatusBar} from 'expo-status-bar'; -import {SafeAreaProvider} from 'react-native-safe-area-context'; -import useCachedResources from './hooks/useCachedResources'; -import useColorScheme from './hooks/useColorScheme'; -import Navigation from './navigation'; -import {View} from "react-native"; -import store from "./redux/store"; -import {Provider, useDispatch} from "react-redux"; -import {useEffect, useState} from "react"; -import {getTrendingID} from "./redux/actions/actionGetTrendingID"; +import {StatusBar} from 'expo-status-bar' +import {SafeAreaProvider} from 'react-native-safe-area-context' +import useCachedResources from './hooks/useCachedResources' +import useColorScheme from './hooks/useColorScheme' +import Navigation from './navigation' +import store from "./redux/store" +import {Provider} from "react-redux" +import {useState} from "react" export default function App() { - const isLoadingComplete = useCachedResources(); - const colorScheme = useColorScheme(); - + const isLoadingComplete = useCachedResources() + const colorScheme = useColorScheme() if (!isLoadingComplete) { - return null; + return null } else { return ( diff --git a/navigation/index.tsx b/navigation/index.tsx index b0c1e24..86a8cfa 100644 --- a/navigation/index.tsx +++ b/navigation/index.tsx @@ -1,55 +1,42 @@ -/** - * If you are not familiar with React Navigation, refer to the "Fundamentals" guide: - * https://reactnavigation.org/docs/getting-started - * - */ -import {FontAwesome} from '@expo/vector-icons'; -import {FontAwesomeIcon} from "@fortawesome/react-native-fontawesome"; -import {faClock, faFilm, faHeart} from "@fortawesome/free-solid-svg-icons"; -import Ionicons from '@expo/vector-icons/Ionicons'; -import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'; -import {NavigationContainer, DefaultTheme, DarkTheme} from '@react-navigation/native'; -import {createNativeStackNavigator} from '@react-navigation/native-stack'; -import * as React from 'react'; -import {Appearance, ColorSchemeName, Pressable} from 'react-native'; - -import Colors from '../constants/Colors'; -import useColorScheme from '../hooks/useColorScheme'; -import NotFoundScreen from '../screens/NotFoundScreen'; -import WatchLaterScreen from '../screens/WatchLaterScreen'; -import FavoriteScreen from '../screens/FavoriteScreen'; -import HomeScreen from '../screens/HomeScreen'; -import InfoScreen from '../screens/InfoScreen'; -import {RootStackParamList, RootTabParamList, RootTabScreenProps} from '../types'; -import LinkingConfiguration from './LinkingConfiguration'; -import {useCallback, useEffect, useState} from "react"; -import {useDispatch} from "react-redux"; -import {getTrendingID, loadWatchLater} from "../redux/actions/actionGetTrendingID"; -import * as SplashScreen from 'expo-splash-screen'; -import {getWatchLaterList} from "../storage/storageFavourite"; +import {FontAwesomeIcon} from "@fortawesome/react-native-fontawesome" +import {faClock, faFilm, faHeart} from "@fortawesome/free-solid-svg-icons" +import {createBottomTabNavigator} from '@react-navigation/bottom-tabs' +import {NavigationContainer, DefaultTheme, DarkTheme} from '@react-navigation/native' +import {createNativeStackNavigator} from '@react-navigation/native-stack' +import * as React from 'react' +import {ColorSchemeName} from 'react-native' +import useColorScheme from '../hooks/useColorScheme' +import NotFoundScreen from '../screens/NotFoundScreen' +import WatchLaterScreen from '../screens/WatchLaterScreen' +import FavoriteScreen from '../screens/FavoriteScreen' +import HomeScreen from '../screens/HomeScreen' +import InfoScreen from '../screens/InfoScreen' +import {RootStackParamList, RootTabParamList, RootTabScreenProps} from '../types' +import LinkingConfiguration from './LinkingConfiguration' +import {useCallback, useEffect, useState} from "react" +import {useDispatch} from "react-redux" +import {getTrendingID, loadWatchLater} from "../redux/actions/actions" +import * as SplashScreen from 'expo-splash-screen' export default function Navigation({colorScheme}: { colorScheme: ColorSchemeName }) { - const [appIsReady, setAppIsReady] = useState(false); - const dispatch = useDispatch(); + const [appIsReady, setAppIsReady] = useState(false) + const dispatch = useDispatch() useEffect(() => { async function prepare() { try { const loadTrendingID = async () => { // @ts-ignore - await dispatch(getTrendingID()); + dispatch(getTrendingID()) }; - //console.log("test1:", trendingMovies); - loadTrendingID(); + loadTrendingID() - const list = dispatch(loadWatchLater()); - console.log("test1:", list); - loadWatchLater(list); + const list = dispatch(loadWatchLater()) + loadWatchLater(list) } catch (e) { - //console.warn(e); } finally { // Tell the application to render - setAppIsReady(true); + setAppIsReady(true) } } @@ -57,14 +44,14 @@ export default function Navigation({colorScheme}: { colorScheme: ColorSchemeName prepare(); }, []); - const onLayoutRootView = useCallback(async () => { + useCallback(async () => { if (appIsReady) { // This tells the splash screen to hide immediately! If we call this after // `setAppIsReady`, then we may see a blank screen while the app is // loading its initial state and rendering its first pixels. So instead, // we hide the splash screen once we know the root view has already // performed layout. - await SplashScreen.hideAsync(); + await SplashScreen.hideAsync() } }, [appIsReady]); if (!appIsReady) { @@ -83,7 +70,7 @@ export default function Navigation({colorScheme}: { colorScheme: ColorSchemeName * A root stack navigator is often used for displaying modals on top of all other content. * https://reactnavigation.org/docs/modal */ -const Stack = createNativeStackNavigator(); +const Stack = createNativeStackNavigator() function RootNavigator() { return ( @@ -102,10 +89,10 @@ function RootNavigator() { * A bottom tab navigator displays tab buttons on the bottom of the display to switch screens. * https://reactnavigation.org/docs/bottom-tab-navigator */ -const BottomTab = createBottomTabNavigator(); +const BottomTab = createBottomTabNavigator() function BottomTabNavigator() { - let colorScheme = useColorScheme(); + let colorScheme = useColorScheme() const isLightTheme = colorScheme === "light" return ( diff --git a/redux/actions/actionGetTrendingID.tsx b/redux/actions/actions.tsx similarity index 92% rename from redux/actions/actionGetTrendingID.tsx rename to redux/actions/actions.tsx index c0d377e..7b4ab68 100644 --- a/redux/actions/actionGetTrendingID.tsx +++ b/redux/actions/actions.tsx @@ -1,7 +1,7 @@ -import {ADD_FAVOURITE, ADD_WATCHLATER, FETCH_FAVOURITE, FETCH_TRENDING_MOVIE, FETCH_WATCHLATER, LOAD_FAVOURITE, LOAD_WATCHLATER, POP_FIRST_TRENDING} from '../constants'; -import config from "../../constants/config"; -import Movie from "../../model/Movie"; -import {getFavouriteList, getWatchLaterList} from "../../storage/storageFavourite"; +import {ADD_FAVOURITE, ADD_WATCHLATER, FETCH_TRENDING_MOVIE, LOAD_FAVOURITE, LOAD_WATCHLATER, POP_FIRST_TRENDING} from '../constants' +import config from "../../constants/config" +import Movie from "../../model/Movie" +import {getFavouriteList, getWatchLaterList} from "../../storage/storage" @@ -9,14 +9,14 @@ export const setWatchLater = (TrendingMovieList: null | Movie[]) => { return { type: LOAD_WATCHLATER, payload: TrendingMovieList, - }; + } } export const setFavourite = (FavouriteList: null | Movie[]) => { return { type: LOAD_FAVOURITE, payload: FavouriteList, - }; + } } diff --git a/redux/reducers/appReducer.tsx b/redux/reducers/appReducer.tsx index 7698e39..05c6de9 100644 --- a/redux/reducers/appReducer.tsx +++ b/redux/reducers/appReducer.tsx @@ -1,6 +1,5 @@ import {POP_FIRST_TRENDING, FETCH_TRENDING_MOVIE, FETCH_TRENDING_ID, ADD_WATCHLATER, FETCH_WATCHLATER, ADD_FAVOURITE, FETCH_FAVOURITE, LOAD_WATCHLATER, LOAD_FAVOURITE} from "../constants"; import Movie from "../../model/Movie"; -import {getFavouriteList, getWatchLaterList} from "../../storage/storageFavourite"; const initialState = { trendingIDs: [], diff --git a/screens/FavoriteScreen.tsx b/screens/FavoriteScreen.tsx index be991c1..8e35b4d 100644 --- a/screens/FavoriteScreen.tsx +++ b/screens/FavoriteScreen.tsx @@ -6,7 +6,7 @@ import {RootTabScreenProps} from "../types"; import {useSafeAreaInsets} from "react-native-safe-area-context"; import {useDispatch, useSelector} from 'react-redux'; import {useEffect, useState} from 'react'; -import {getFavourite} from "../redux/actions/actionGetTrendingID"; +import {getFavourite} from "../redux/actions/actions"; import Movie from "../model/Movie"; import {MovieListComponent} from "../components/MovieListComponent"; diff --git a/screens/HomeScreen.tsx b/screens/HomeScreen.tsx index 089eec5..912e1fc 100644 --- a/screens/HomeScreen.tsx +++ b/screens/HomeScreen.tsx @@ -3,7 +3,7 @@ import {TouchableOpacity, View, Text, StyleSheet, Image, ImageBackground, SafeAr import {RootStackScreenProps} from "../types"; import {useEffect, useRef, useState} from "react"; import {useSafeAreaInsets} from "react-native-safe-area-context"; -import {addMovieToWatchLater, addMovieToFavourite, removeMovieTrending,} from "../redux/actions/actionGetTrendingID"; +import {addMovieToWatchLater, addMovieToFavourite, removeMovieTrending,} from "../redux/actions/actions"; import {useDispatch, useSelector} from 'react-redux'; import Movie from "../model/Movie"; import moment from 'moment'; @@ -12,27 +12,27 @@ import AnimatedLottieView from "lottie-react-native"; import {Timer, Timer2} from "../components/TimerComponent"; import {HeaderMovie} from "../components/HeaderMovieComponent"; import {NewCard, SuggestedCard} from "../components/cards"; -import {setFavouriteList,setWatchLaterList} from "../storage/storageFavourite" +import {setFavouriteList,setWatchLaterList} from "../storage/storage" export default function HomeScreen({navigation}: RootStackScreenProps<'Home'>) { // @ts-ignore - const trendingMovies = useSelector(state => state.appReducer.trendingMovies); + const trendingMovies = useSelector(state => state.appReducer.trendingMovies) // @ts-ignore - const watchLaterMovies = useSelector(state => state.appReducer.watchLaterMovies); + const watchLaterMovies = useSelector(state => state.appReducer.watchLaterMovies) // @ts-ignore - const favouriteMovies = useSelector(state => state.appReducer.favouriteMovies); - const dispatch = useDispatch(); + const favouriteMovies = useSelector(state => state.appReducer.favouriteMovies) + const dispatch = useDispatch() - const [hours, setHours] = useState(0); - const [minutes, setMinutes] = useState(0); - const [seconds, setSeconds] = useState(0); + const [hours, setHours] = useState(0) + const [minutes, setMinutes] = useState(0) + const [seconds, setSeconds] = useState(0) const [displayIndex, setdisplayIndex] = useState(0); - const [suggestedMovies, setSuggestedMovies] = useState([]); + const [suggestedMovies, setSuggestedMovies] = useState([]) - var swiper: any = null; + var swiper: any = null - const insets = useSafeAreaInsets(); + const insets = useSafeAreaInsets() const styles = StyleSheet.create({ background1: { @@ -132,71 +132,63 @@ export default function HomeScreen({navigation}: RootStackScreenProps<'Home'>) { } - }); + }) useEffect(() => { - /*const clearAllStorage = async () => { - try { - await AsyncStorage.clear() - } catch (e) { - console.log("An error occurred", e); - } - } - clearAllStorage()*/ const interval = setInterval(() => { - const today = moment(); + const today = moment() - today.set({hour: 0, minute: 0, second: 0, millisecond: 0}); + today.set({hour: 0, minute: 0, second: 0, millisecond: 0}) - const tonight = today.add(1, 'days'); + const tonight = today.add(1, 'days') - const timestamp = tonight.valueOf(); - const now = new Date(); - const difference = timestamp - now.getTime(); + const timestamp = tonight.valueOf() + const now = new Date() + const difference = timestamp - now.getTime() const h = Math.floor( (difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60) - ); + ) - setHours(h); + setHours(h) - const m = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60)); - setMinutes(m); + const m = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60)) + setMinutes(m) - const s = Math.floor((difference % (1000 * 60)) / 1000); + const s = Math.floor((difference % (1000 * 60)) / 1000) - setSeconds(s); + setSeconds(s) }); - getSuggested(); + getSuggested() }, []); const getSuggested = async () => { - const suggestedResponse = (await fetch("https://codefirst.iut.uca.fr/containers/lucasdelanier-containermoviefinder/api/Suggested")); - const suggestedJson = await suggestedResponse.json(); + const suggestedResponse = (await fetch("https://codefirst.iut.uca.fr/containers/lucasdelanier-containermoviefinder/api/Suggested")) + const suggestedJson = await suggestedResponse.json() //console.log("trailer", trailerJson) // @ts-ignore const suggestedMovies = suggestedJson.map((element) => { - return element; + return element }) console.log("suggested", suggestedMovies) - setSuggestedMovies(suggestedMovies); + setSuggestedMovies(suggestedMovies) } function addWatchLater(props: Movie) { - const newwatchLaterMovies = [props, ...watchLaterMovies] + const newWatchLaterMovies = [props, ...watchLaterMovies] if(watchLaterMovies.filter((movie : Movie) => movie.original_title === props.original_title).length > 0){ return null } else{ - dispatch(addMovieToWatchLater(props)); - dispatch(removeMovieTrending(props)); - setWatchLaterList(newwatchLaterMovies); - console.log("movie: ", props.id, props.full_date, new Date(props.full_date).getTime()), new Date(trendingMovies[displayIndex].full_date).getTime(); + dispatch(addMovieToWatchLater(props)) + dispatch(removeMovieTrending(props)) + setWatchLaterList(newWatchLaterMovies) + console.log("movie: ", props.id, props.full_date, new Date(props.full_date).getTime()), new Date(trendingMovies[displayIndex].full_date).getTime() if (displayIndex == trendingMovies.length - 1) { - setdisplayIndex(0); - swiper.swipeLeft(); + setdisplayIndex(0) + swiper.swipeLeft() } } @@ -208,26 +200,24 @@ export default function HomeScreen({navigation}: RootStackScreenProps<'Home'>) { return null } else{ - - dispatch(addMovieToFavourite(props)); - dispatch(removeMovieTrending(props)); + dispatch(addMovieToFavourite(props)) + dispatch(removeMovieTrending(props)) console.log(favouriteMovies) - setFavouriteList(newFavouriteMovies); - console.log("movie: ", props.id, props.full_date, new Date(props.full_date).getTime()), new Date(trendingMovies[displayIndex].full_date).getTime(); + setFavouriteList(newFavouriteMovies) + console.log("movie: ", props.id, props.full_date, new Date(props.full_date).getTime()), new Date(trendingMovies[displayIndex].full_date).getTime() if (displayIndex == trendingMovies.length - 1) { - setdisplayIndex(0); - swiper.swipeLeft(); + setdisplayIndex(0) + swiper.swipeLeft() } } - } function popFirstTrending(props: Movie) { - dispatch(removeMovieTrending(props)); + dispatch(removeMovieTrending(props)) if (displayIndex == trendingMovies.length - 1) { - setdisplayIndex(0); - swiper.swipeLeft(); + setdisplayIndex(0) + swiper.swipeLeft() } } diff --git a/screens/WatchLaterScreen.tsx b/screens/WatchLaterScreen.tsx index 39a87cc..f4f228d 100644 --- a/screens/WatchLaterScreen.tsx +++ b/screens/WatchLaterScreen.tsx @@ -6,7 +6,7 @@ import {RootTabScreenProps} from "../types"; import {useSafeAreaInsets} from "react-native-safe-area-context"; import {useDispatch, useSelector} from 'react-redux'; import {useEffect, useState} from 'react'; -import {getWatchLater} from "../redux/actions/actionGetTrendingID"; +import {getWatchLater} from "../redux/actions/actions"; import Movie from "../model/Movie"; import {MovieListComponent} from "../components/MovieListComponent"; diff --git a/storage/storageFavourite.ts b/storage/storage.ts similarity index 53% rename from storage/storageFavourite.ts rename to storage/storage.ts index 657ffb3..03e4900 100644 --- a/storage/storageFavourite.ts +++ b/storage/storage.ts @@ -1,47 +1,68 @@ -import AsyncStorage from '@react-native-async-storage/async-storage'; -import Movie from "../model/Movie"; -import {useDispatch, useSelector} from "react-redux"; +import AsyncStorage from '@react-native-async-storage/async-storage' +import Movie from "../model/Movie" export const getFavouriteList = async () => { try { const value = await AsyncStorage.getItem('favourite'); if (value === null) { - return []; + return null } const favouriteList: Movie[] = await JSON.parse(value!) - return favouriteList; + return favouriteList } catch (error) { console.log(error) - return []; + return null } -}; +} export const setFavouriteList = async (favouriteList: Movie[]) => { try { - await AsyncStorage.setItem('favourite', JSON.stringify(favouriteList)); + await AsyncStorage.setItem('favourite', JSON.stringify(favouriteList)) } catch (error) { console.log(error) } -}; +} export const getWatchLaterList = async () => { try { - const value = await AsyncStorage.getItem('watchLater'); + const value = await AsyncStorage.getItem('watchLater') if (value === null) { - return []; + return null } const watchLaterList: Movie[] = await JSON.parse(value!) - return watchLaterList; + return watchLaterList } catch (error) { console.log(error) - return []; + return null } }; export const setWatchLaterList = async (watchLaterList: Movie[]) => { try { - await AsyncStorage.setItem('watchLater', JSON.stringify(watchLaterList)); + await AsyncStorage.setItem('watchLater', JSON.stringify(watchLaterList)) + } catch (error) { + console.log(error) + } +} + +export const getMovieList = async () => { + try { + const value = await AsyncStorage.getItem('movie') + if (value === null) { + return null + } + const movieList: Movie[] = await JSON.parse(value!) + return movieList + } catch (error) { + console.log(error) + return null + } +} + +export const setMovieList = async (movieList: Movie[]) => { + try { + await AsyncStorage.setItem('movie', JSON.stringify(movieList)) } catch (error) { console.log(error) } -}; \ No newline at end of file +} \ No newline at end of file