diff --git a/package.json b/package.json index 05412ce..7a7de25 100644 --- a/package.json +++ b/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", diff --git a/public/meta.json b/public/meta.json index 1a310be..feab023 100644 --- a/public/meta.json +++ b/public/meta.json @@ -1 +1 @@ -{ "version": "2.6.0" } +{ "version": "2.6.1" } diff --git a/src/components/SearchView/CardsByPage.js b/src/components/SearchView/CardsByPage.js index d9f6802..6c20eb3 100644 --- a/src/components/SearchView/CardsByPage.js +++ b/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) => { diff --git a/src/utils/cacheUtils.js b/src/utils/cacheUtils.js new file mode 100644 index 0000000..917b34a --- /dev/null +++ b/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() }), + ); +}; diff --git a/src/utils/config.js b/src/utils/config.js index 917ef06..4089cd7 100644 --- a/src/utils/config.js +++ b/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;