Add basic API caching

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",

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",

src/CONSTANTS.ts

@@ -0,0 +1 @@
+export const ALBUM_CACHE_AMOUNT_OF_DAYS = 7;

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<StackParams, 'Album'>;
 
@@ -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 (
         <ScrollView

src/screens/Albums/components/Albums.tsx

@@ -5,10 +5,12 @@ import { Text, SafeAreaView, FlatList, Dimensions } from 'react-native';
 import styled from 'styled-components/native';
 import { TouchableOpacity } from 'react-native-gesture-handler';
 import { useDispatch } from 'react-redux';
-import { useTypedSelector } from '../../../store';
-import { fetchAllAlbums } from '../../../store/music/actions';
 import { useNavigation } from '@react-navigation/native';
 import FastImage from 'react-native-fast-image';
+import { differenceInDays } from 'date-fns';
+import { useTypedSelector } from '../../../store';
+import { fetchAllAlbums } from '../../../store/music/actions';
+import { ALBUM_CACHE_AMOUNT_OF_DAYS } from '../../../CONSTANTS';
 
 const Screen = Dimensions.get('screen');
 
@@ -56,6 +58,7 @@ const Albums: React.FC = () => {
     // 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 (
         <SafeAreaView>

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<Album>;
+        ids: EntityId[];
+    },
+    tracks: {
+        isLoading: boolean;
+        entities: Dictionary<AlbumTrack>;
+        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;
         });

src/store/music/types.ts

@@ -41,6 +41,7 @@ export interface Album {
     BackdropImageTags: any[];
     LocationType: string;
     Tracks?: string[];
+    lastRefreshed?: Date;
 }
 
 export interface AlbumTrack {