From b04026b84686ae01c2e7013e11cef505bc621418 Mon Sep 17 00:00:00 2001 From: Lei Nelissen Date: Sat, 20 Jun 2020 23:10:19 +0200 Subject: [PATCH] Add basic API caching --- package-lock.json | 5 +++++ package.json | 1 + src/CONSTANTS.ts | 1 + src/screens/Albums/components/Album.tsx | 8 +++++++- src/screens/Albums/components/Albums.tsx | 13 ++++++++++--- src/store/music/index.ts | 21 +++++++++++++++++++-- src/store/music/types.ts | 1 + 7 files changed, 44 insertions(+), 6 deletions(-) create mode 100644 src/CONSTANTS.ts diff --git a/package-lock.json b/package-lock.json index 4c022a6..7d56010 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3168,6 +3168,11 @@ } } }, + "date-fns": { + "version": "2.14.0", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.14.0.tgz", + "integrity": "sha512-1zD+68jhFgDIM0rF05rcwYO8cExdNqxjq4xP1QKM60Q45mnO6zaMWB4tOzrIr4M4GSLntsKeE4c9Bdl2jhL/yw==" + }, "dayjs": { "version": "1.8.28", "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.8.28.tgz", diff --git a/package.json b/package.json index 794c3e7..dd5c155 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ "@types/lodash": "^4.14.155", "@types/redux-logger": "^3.0.8", "@types/styled-components": "^5.1.0", + "date-fns": "^2.14.0", "lodash": "^4.17.15", "react": "16.11.0", "react-native": "0.62.2", diff --git a/src/CONSTANTS.ts b/src/CONSTANTS.ts new file mode 100644 index 0000000..a4f2ec2 --- /dev/null +++ b/src/CONSTANTS.ts @@ -0,0 +1 @@ +export const ALBUM_CACHE_AMOUNT_OF_DAYS = 7; \ No newline at end of file diff --git a/src/screens/Albums/components/Album.tsx b/src/screens/Albums/components/Album.tsx index 1121258..40ed2fa 100644 --- a/src/screens/Albums/components/Album.tsx +++ b/src/screens/Albums/components/Album.tsx @@ -7,8 +7,10 @@ import styled from 'styled-components/native'; import { useRoute, RouteProp } from '@react-navigation/native'; import FastImage from 'react-native-fast-image'; import { useDispatch } from 'react-redux'; +import { differenceInDays } from 'date-fns'; import { useTypedSelector } from '../../../store'; import { fetchTracksByAlbum } from '../../../store/music/actions'; +import { ALBUM_CACHE_AMOUNT_OF_DAYS } from '../../../CONSTANTS'; type Route = RouteProp; @@ -77,7 +79,11 @@ const Album: React.FC = () => { const refresh = useCallback(() => { dispatch(fetchTracksByAlbum(id)); }, [id]); // Retrieve album tracks on load - useEffect(refresh, []); + useEffect(() => { + if (!album?.lastRefreshed || differenceInDays(album.lastRefreshed, new Date()) > ALBUM_CACHE_AMOUNT_OF_DAYS) { + refresh(); + } + }, []); return ( { // Retrieve data from store const { ids, entities: albums } = useTypedSelector((state) => state.music.albums); const isLoading = useTypedSelector((state) => state.music.albums.isLoading); + const lastRefreshed = useTypedSelector((state) => state.music.lastRefreshed); // Initialise helpers const dispatch = useDispatch(); @@ -67,7 +70,11 @@ const Albums: React.FC = () => { const selectAlbum = useCallback((id: string) => navigation.navigate('Album', { id, album: albums[id] as Album }), [navigation, albums]); // Retrieve data on mount - useEffect(() => { retrieveData(); }, []); + useEffect(() => { + if (!lastRefreshed || differenceInDays(lastRefreshed, new Date()) > ALBUM_CACHE_AMOUNT_OF_DAYS) { + retrieveData(); + } + }, []); return ( diff --git a/src/store/music/index.ts b/src/store/music/index.ts index 5f1b917..bc0fea6 100644 --- a/src/store/music/index.ts +++ b/src/store/music/index.ts @@ -1,7 +1,22 @@ import { fetchAllAlbums, albumAdapter, fetchTracksByAlbum, trackAdapter } from './actions'; -import { createSlice } from '@reduxjs/toolkit'; +import { createSlice, Dictionary, EntityId } from '@reduxjs/toolkit'; +import { Album, AlbumTrack } from './types'; -const initialState = { +export interface State { + albums: { + isLoading: boolean; + entities: Dictionary; + ids: EntityId[]; + }, + tracks: { + isLoading: boolean; + entities: Dictionary; + ids: EntityId[]; + }, + lastRefreshed?: Date, +} + +const initialState: State = { albums: { ...albumAdapter.getInitialState(), isLoading: false, @@ -20,6 +35,7 @@ const music = createSlice({ builder.addCase(fetchAllAlbums.fulfilled, (state, { payload }) => { albumAdapter.setAll(state.albums, payload); state.albums.isLoading = false; + state.lastRefreshed = new Date(); }); builder.addCase(fetchAllAlbums.pending, (state) => { state.albums.isLoading = true; }); builder.addCase(fetchAllAlbums.rejected, (state) => { state.albums.isLoading = false; }); @@ -30,6 +46,7 @@ const music = createSlice({ const album = state.albums.entities[payload[0].AlbumId]; if (album) { album.Tracks = payload.map(d => d.Id); + album.lastRefreshed = new Date(); } state.tracks.isLoading = false; }); diff --git a/src/store/music/types.ts b/src/store/music/types.ts index 0591cf4..32a3e09 100644 --- a/src/store/music/types.ts +++ b/src/store/music/types.ts @@ -41,6 +41,7 @@ export interface Album { BackdropImageTags: any[]; LocationType: string; Tracks?: string[]; + lastRefreshed?: Date; } export interface AlbumTrack {