feat: add cache strategy

package.json

@@ -1,7 +1,7 @@
 {
   "name": "whatson",
   "description": "What's on?",
-  "version": "2.6.0",
+  "version": "2.6.1",
   "private": false,
   "dependencies": {
     "@reach/router": "^1.3.4",

public/meta.json

@@ -1 +1 @@
-{ "version": "2.6.0" }
+{ "version": "2.6.1" }

src/components/SearchView/CardsByPage.js

@@ -1,5 +1,4 @@
 import React, { Fragment, useEffect, useState } from "react";
-import { useFetch } from "react-hooks-fetch";
 import { useInView } from "react-intersection-observer";
 import { Cell } from "griding";
 import { getKindByURL } from "utils/kind";
@@ -9,9 +8,13 @@ import queryString from "query-string";
 import { useStorageString } from "utils/useStorageString";
 import { getParameters } from "utils/getParameters";
 import config from "utils/config";
+import { retrieveFromCache, saveToCache } from "utils/cacheUtils";
 
 const queryStringParsed = queryString.parse(window.location.search);
-const item_type_query = queryStringParsed.item_type;
+const item_type_query =
+  queryStringParsed.item_type === undefined
+    ? "movie"
+    : queryStringParsed.item_type;
 const minimum_ratings_query = queryStringParsed.minimum_ratings;
 const platforms_query = queryStringParsed.platforms;
 const popularity_filters_query = queryStringParsed.popularity_filters;
@@ -58,9 +61,7 @@ const getDataURL = (
     kindURL === "search" ||
     kindURL === "tvshows"
   )
-    return `${config.base}/search/${getKindByURL(kindURL)}?api_key=${
-      config.api
-    }&query=${search}&page=${page}`;
+    return `${config.base}/search/${getKindByURL(kindURL)}?api_key=${config.api}&query=${search}&page=${page}`;
   return `${config.cors_url}/${config.base_render_api}/${parameters}&page=${page}`;
 };
 
@@ -130,22 +131,44 @@ const CardsByPage = ({ search, page, setPage, isLastPage, kindURL }) => {
     setStatusValue,
   ]);
 
-  let { loading, data, error } = useFetch(
-    getDataURL(
-      item_type,
-      kindURL,
-      minimum_ratings_value,
-      page,
-      platforms_value,
-      popularity_filters,
-      ratings_filters,
-      release_date,
-      search,
-      seasons_number,
-      status_value,
-    ),
+  const dataUrl = getDataURL(
+    item_type || "movie",
+    kindURL,
+    minimum_ratings_value,
+    page,
+    platforms_value,
+    popularity_filters,
+    ratings_filters,
+    release_date,
+    search,
+    seasons_number,
+    status_value,
   );
 
+  const initialData = retrieveFromCache(dataUrl);
+  const [data, setData] = useState(initialData);
+  const [loading, setLoading] = useState(!initialData);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      if (!data) {
+        setLoading(true);
+        try {
+          const response = await fetch(dataUrl);
+          const result = await response.json();
+          saveToCache(dataUrl, result);
+          setData(result);
+          setLoading(false);
+        } catch (error) {
+          setError(error);
+          setLoading(false);
+        }
+      }
+    };
+    fetchData();
+  }, [dataUrl, data]);
+
   const [ref, inView] = useInView();
 
   const getDefaultItemType = (item_type_query) => {

src/utils/cacheUtils.js

@@ -0,0 +1,23 @@
+import config from "./config";
+
+export const retrieveFromCache = (dataUrl) => {
+  const cacheEntry = JSON.parse(localStorage.getItem(dataUrl));
+  if (cacheEntry) {
+    const isExpired =
+      Date.now() - cacheEntry.timestamp >
+      config.cache_expiration_duration_milliseconds;
+    if (!isExpired) {
+      return cacheEntry.data;
+    } else {
+      localStorage.removeItem(dataUrl);
+    }
+  }
+  return null;
+};
+
+export const saveToCache = (dataUrl, data) => {
+  localStorage.setItem(
+    dataUrl,
+    JSON.stringify({ data, timestamp: Date.now() }),
+  );
+};

src/utils/config.js

@@ -8,6 +8,8 @@ const config = {
 
   base_beamanalytics: "https://beamanalytics.b-cdn.net/beam.min.js",
   beamanalytics_token: "b94aa7d4-c64e-4086-b7e3-d7d5ad700bab",
+
+  cache_expiration_duration_milliseconds: 21600000,
 };
 
 export default config;