From 9c21de819bbacbbd08198ecfd5400481300249e9 Mon Sep 17 00:00:00 2001 From: Lucas Delanier Date: Wed, 8 Mar 2023 12:08:14 +0100 Subject: [PATCH] add persistencea --- navigation/index.tsx | 9 ++++- package-lock.json | 54 +++++++++++++++++++++++++ package.json | 1 + redux/actions/actionGetTrendingID.tsx | 57 ++++++++++++++++----------- redux/constants.tsx | 5 ++- redux/reducers/appReducer.tsx | 9 ++++- screens/FavoriteScreen.tsx | 2 +- screens/HomeScreen.tsx | 52 ++++++++++++++++++------ storage/storageFavourite.ts | 9 +++-- 9 files changed, 155 insertions(+), 43 deletions(-) diff --git a/navigation/index.tsx b/navigation/index.tsx index 59f82d8..b0c1e24 100644 --- a/navigation/index.tsx +++ b/navigation/index.tsx @@ -24,13 +24,15 @@ import {RootStackParamList, RootTabParamList, RootTabScreenProps} from '../types import LinkingConfiguration from './LinkingConfiguration'; import {useCallback, useEffect, useState} from "react"; import {useDispatch} from "react-redux"; -import {getTrendingID} from "../redux/actions/actionGetTrendingID"; +import {getTrendingID, loadWatchLater} from "../redux/actions/actionGetTrendingID"; import * as SplashScreen from 'expo-splash-screen'; +import {getWatchLaterList} from "../storage/storageFavourite"; export default function Navigation({colorScheme}: { colorScheme: ColorSchemeName }) { const [appIsReady, setAppIsReady] = useState(false); const dispatch = useDispatch(); useEffect(() => { + async function prepare() { try { const loadTrendingID = async () => { @@ -39,6 +41,10 @@ export default function Navigation({colorScheme}: { colorScheme: ColorSchemeName }; //console.log("test1:", trendingMovies); loadTrendingID(); + + const list = dispatch(loadWatchLater()); + console.log("test1:", list); + loadWatchLater(list); } catch (e) { //console.warn(e); } finally { @@ -47,6 +53,7 @@ export default function Navigation({colorScheme}: { colorScheme: ColorSchemeName } } + prepare(); }, []); diff --git a/package-lock.json b/package-lock.json index a795e26..2c1ac12 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,6 +14,7 @@ "@fortawesome/free-regular-svg-icons": "^6.2.1", "@fortawesome/free-solid-svg-icons": "^6.2.1", "@fortawesome/react-native-fontawesome": "^0.3.0", + "@react-native-async-storage/async-storage": "^1.17.11", "@react-navigation/bottom-tabs": "^6.0.5", "@react-navigation/native": "^6.0.2", "@react-navigation/native-stack": "^6.1.0", @@ -4274,6 +4275,17 @@ "url": "https://github.com/sponsors/isaacs" } }, + "node_modules/@react-native-async-storage/async-storage": { + "version": "1.17.11", + "resolved": "https://registry.npmjs.org/@react-native-async-storage/async-storage/-/async-storage-1.17.11.tgz", + "integrity": "sha512-bzs45n5HNcDq6mxXnSsOHysZWn1SbbebNxldBXCQs8dSvF8Aor9KCdpm+TpnnGweK3R6diqsT8lFhX77VX0NFw==", + "dependencies": { + "merge-options": "^3.0.4" + }, + "peerDependencies": { + "react-native": "^0.0.0-0 || 0.60 - 0.71 || 1000.0.0" + } + }, "node_modules/@react-native-community/cli": { "version": "9.2.1", "resolved": "https://registry.npmjs.org/@react-native-community/cli/-/cli-9.2.1.tgz", @@ -12693,6 +12705,25 @@ "resolved": "https://registry.npmjs.org/memory-cache/-/memory-cache-0.2.0.tgz", "integrity": "sha512-OcjA+jzjOYzKmKS6IQVALHLVz+rNTMPoJvCztFaZxwG14wtAW7VRZjwTQu06vKCYOxh4jVnik7ya0SXTB0W+xA==" }, + "node_modules/merge-options": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/merge-options/-/merge-options-3.0.4.tgz", + "integrity": "sha512-2Sug1+knBjkaMsMgf1ctR1Ujx+Ayku4EdJN4Z+C2+JzoeF7A3OZ9KM2GY0CpQS51NR61LTurMJrRKPhSs3ZRTQ==", + "dependencies": { + "is-plain-obj": "^2.1.0" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/merge-options/node_modules/is-plain-obj": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-2.1.0.tgz", + "integrity": "sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==", + "engines": { + "node": ">=8" + } + }, "node_modules/merge-stream": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz", @@ -21192,6 +21223,14 @@ } } }, + "@react-native-async-storage/async-storage": { + "version": "1.17.11", + "resolved": "https://registry.npmjs.org/@react-native-async-storage/async-storage/-/async-storage-1.17.11.tgz", + "integrity": "sha512-bzs45n5HNcDq6mxXnSsOHysZWn1SbbebNxldBXCQs8dSvF8Aor9KCdpm+TpnnGweK3R6diqsT8lFhX77VX0NFw==", + "requires": { + "merge-options": "^3.0.4" + } + }, "@react-native-community/cli": { "version": "9.2.1", "resolved": "https://registry.npmjs.org/@react-native-community/cli/-/cli-9.2.1.tgz", @@ -27636,6 +27675,21 @@ "resolved": "https://registry.npmjs.org/memory-cache/-/memory-cache-0.2.0.tgz", "integrity": "sha512-OcjA+jzjOYzKmKS6IQVALHLVz+rNTMPoJvCztFaZxwG14wtAW7VRZjwTQu06vKCYOxh4jVnik7ya0SXTB0W+xA==" }, + "merge-options": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/merge-options/-/merge-options-3.0.4.tgz", + "integrity": "sha512-2Sug1+knBjkaMsMgf1ctR1Ujx+Ayku4EdJN4Z+C2+JzoeF7A3OZ9KM2GY0CpQS51NR61LTurMJrRKPhSs3ZRTQ==", + "requires": { + "is-plain-obj": "^2.1.0" + }, + "dependencies": { + "is-plain-obj": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-2.1.0.tgz", + "integrity": "sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==" + } + } + }, "merge-stream": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz", diff --git a/package.json b/package.json index c0fe4a3..5bea38f 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "@fortawesome/free-regular-svg-icons": "^6.2.1", "@fortawesome/free-solid-svg-icons": "^6.2.1", "@fortawesome/react-native-fontawesome": "^0.3.0", + "@react-native-async-storage/async-storage": "^1.17.11", "@react-navigation/bottom-tabs": "^6.0.5", "@react-navigation/native": "^6.0.2", "@react-navigation/native-stack": "^6.1.0", diff --git a/redux/actions/actionGetTrendingID.tsx b/redux/actions/actionGetTrendingID.tsx index aba1695..c0d377e 100644 --- a/redux/actions/actionGetTrendingID.tsx +++ b/redux/actions/actionGetTrendingID.tsx @@ -1,46 +1,55 @@ -import {ADD_FAVOURITE, ADD_WATCHLATER, FETCH_FAVOURITE, FETCH_TRENDING_MOVIE, FETCH_WATCHLATER, POP_FIRST_TRENDING} from '../constants'; +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"; -/*export const getWatchLaterMovies = (WatchLaterList: Movie[]) => { - return { - type: FETCH_WATCHLATER, - payload: WatchLaterList, - }; -} -export const getFavouriteMovies = (FavouriteList: Movie[]) => { - return { - type: FETCH_FAVOURITE, - payload: FavouriteList, - }; -}*/ -export const fetchWatchLater = (WatchLaterList: Movie[]) => { +export const setWatchLater = (TrendingMovieList: null | Movie[]) => { return { - type: FETCH_WATCHLATER, - payload: WatchLaterList, + type: LOAD_WATCHLATER, + payload: TrendingMovieList, }; } -export const fetchFavourite = (FavouriteList: Movie[]) => { +export const setFavourite = (FavouriteList: null | Movie[]) => { return { - type: FETCH_FAVOURITE, + type: LOAD_FAVOURITE, payload: FavouriteList, }; } + export const getWatchLater = () => { - const MovieList: Movie[] = []; - fetchWatchLater(MovieList); + // @ts-ignore + return async dispatch => { + try { + let MovieList = await getWatchLaterList(); + dispatch(setWatchLater(MovieList)); + + + } catch (error) { + console.log('Error', error); + } + } } + + export const getFavourite = () => { - const MovieList: Movie[] = []; - fetchFavourite(MovieList); -} + // @ts-ignore + return async dispatch => { + try { + let MovieList = await getFavouriteList(); + dispatch(setFavourite(MovieList)); + -export const setinfoMovie = (TrendingMovieList: Movie[]) => { + } catch (error) { + console.log('Error', error); + } + } +} +export const setinfoMovie = (TrendingMovieList: null | Movie[]) => { return { type: FETCH_TRENDING_MOVIE, payload: TrendingMovieList, diff --git a/redux/constants.tsx b/redux/constants.tsx index cd11d2d..fcb0a9a 100644 --- a/redux/constants.tsx +++ b/redux/constants.tsx @@ -6,4 +6,7 @@ export const ADD_WATCHLATER : string = "ADD_WATCHLATER"; export const FETCH_WATCHLATER : string = "FETCH_WATCHLATER"; export const ADD_FAVOURITE : string = "ADD_FAVOURITE"; -export const FETCH_FAVOURITE : string = "FETCH_FAVOURITE"; \ No newline at end of file +export const FETCH_FAVOURITE : string = "FETCH_FAVOURITE"; + +export const LOAD_WATCHLATER : string = "LOAD_WATCHLATER"; +export const LOAD_FAVOURITE : string = "LOAD_FAVOURITE"; \ No newline at end of file diff --git a/redux/reducers/appReducer.tsx b/redux/reducers/appReducer.tsx index 6d10faa..7698e39 100644 --- a/redux/reducers/appReducer.tsx +++ b/redux/reducers/appReducer.tsx @@ -1,5 +1,6 @@ -import {POP_FIRST_TRENDING, FETCH_TRENDING_MOVIE, FETCH_TRENDING_ID, ADD_WATCHLATER, FETCH_WATCHLATER, ADD_FAVOURITE, FETCH_FAVOURITE} from "../constants"; +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: [], @@ -10,6 +11,12 @@ const initialState = { // @ts-ignore export default appReducer = (state = initialState, action) => { switch (action.type) { + case LOAD_WATCHLATER: + // @ts-ignore + return {...state, watchLaterMovies: action.payload}; + case LOAD_FAVOURITE: + // @ts-ignore + return {...state, favouriteMovies: action.payload}; case FETCH_TRENDING_ID: // @ts-ignore return {...state, trendingIDs: action.payload}; diff --git a/screens/FavoriteScreen.tsx b/screens/FavoriteScreen.tsx index 5bb0eff..be991c1 100644 --- a/screens/FavoriteScreen.tsx +++ b/screens/FavoriteScreen.tsx @@ -129,7 +129,7 @@ export default function FavoriteScreen({navigation}: RootTabScreenProps<'Favorit - Watch Later + Favourite ) { // @ts-ignore const trendingMovies = useSelector(state => state.appReducer.trendingMovies); + // @ts-ignore + const watchLaterMovies = useSelector(state => state.appReducer.watchLaterMovies); + // @ts-ignore + const favouriteMovies = useSelector(state => state.appReducer.favouriteMovies); const dispatch = useDispatch(); const [hours, setHours] = useState(0); @@ -132,6 +138,14 @@ 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(); @@ -173,22 +187,38 @@ export default function HomeScreen({navigation}: RootStackScreenProps<'Home'>) { } function addWatchLater(props: Movie) { - dispatch(addMovieToWatchLater(props)); - dispatch(removeMovieTrending(props)); - 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(); + + if(watchLaterMovies.filter((movie : Movie) => movie.original_title === props.original_title).length > 0){ + return null } + else{ + setWatchLaterList(watchLaterMovies); + dispatch(addMovieToWatchLater(props)); + dispatch(removeMovieTrending(props)); + 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(); + } + } + } function addFavourite(props: Movie) { - dispatch(addMovieToFavourite(props)); - dispatch(removeMovieTrending(props)); - if (displayIndex == trendingMovies.length - 1) { - setdisplayIndex(0); - swiper.swipeLeft(); + if(favouriteMovies.filter((movie : Movie) => movie.original_title === props.original_title).length > 0){ + return null + } + else{ + setFavouriteList(favouriteMovies); + dispatch(addMovieToFavourite(props)); + dispatch(removeMovieTrending(props)); + 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(); + } } + } diff --git a/storage/storageFavourite.ts b/storage/storageFavourite.ts index f154d43..657ffb3 100644 --- a/storage/storageFavourite.ts +++ b/storage/storageFavourite.ts @@ -1,17 +1,18 @@ import AsyncStorage from '@react-native-async-storage/async-storage'; import Movie from "../model/Movie"; +import {useDispatch, useSelector} from "react-redux"; export const getFavouriteList = async () => { try { const value = await AsyncStorage.getItem('favourite'); if (value === null) { - return null; + return []; } const favouriteList: Movie[] = await JSON.parse(value!) return favouriteList; } catch (error) { console.log(error) - return null; + return []; } }; @@ -27,13 +28,13 @@ export const getWatchLaterList = async () => { try { const value = await AsyncStorage.getItem('watchLater'); if (value === null) { - return null; + return []; } const watchLaterList: Movie[] = await JSON.parse(value!) return watchLaterList; } catch (error) { console.log(error) - return null; + return []; } };