From 9177df41953e231b20bb4fc89143fdcf4b2c14fa Mon Sep 17 00:00:00 2001 From: Anand Chowdhary Date: Sun, 6 Dec 2020 16:48:14 +0530 Subject: [PATCH] :recycle: Cache API response for 10 min --- src/components/ActiveIncidents.svelte | 22 +++++++++++--------- src/components/Graph.svelte | 16 +++++++------- src/components/History.svelte | 22 +++++++++++--------- src/components/Incident.svelte | 30 +++++++++++++++------------ src/components/Incidents.svelte | 22 +++++++++++--------- src/components/LiveStatus.svelte | 13 ++---------- src/components/Summary.svelte | 13 ++---------- src/utils/createOctokit.js | 28 +++++++++++++++++++++++++ 8 files changed, 94 insertions(+), 72 deletions(-) diff --git a/src/components/ActiveIncidents.svelte b/src/components/ActiveIncidents.svelte index 4823ce3..011cc0e 100644 --- a/src/components/ActiveIncidents.svelte +++ b/src/components/ActiveIncidents.svelte @@ -2,7 +2,7 @@ import Loading from "../components/Loading.svelte"; import { onMount } from "svelte"; import config from "../data/config.json"; - import { createOctokit, handleError } from "../utils/createOctokit"; + import { cachedResponse, createOctokit, handleError } from "../utils/createOctokit"; let loading = true; const octokit = createOctokit(); @@ -13,15 +13,17 @@ onMount(async () => { try { incidents = ( - await octokit.issues.listForRepo({ - owner, - repo, - state: "open", - filter: "all", - sort: "created", - direction: "desc", - labels: "status", - }) + await cachedResponse(`issues-${owner}-${repo}`, () => + octokit.issues.listForRepo({ + owner, + repo, + state: "open", + filter: "all", + sort: "created", + direction: "desc", + labels: "status", + }) + ) ).data; incidents = incidents.map((incident, index) => { incident.showHeading = diff --git a/src/components/Graph.svelte b/src/components/Graph.svelte index 09cf440..0d513db 100644 --- a/src/components/Graph.svelte +++ b/src/components/Graph.svelte @@ -3,7 +3,7 @@ import { onMount } from "svelte"; import config from "../data/config.json"; import Line from "svelte-chartjs/src/Line.svelte"; - import { createOctokit, handleError } from "../utils/createOctokit"; + import { cachedResponse, createOctokit, handleError } from "../utils/createOctokit"; export let slug; let loading = true; @@ -18,12 +18,14 @@ onMount(async () => { try { commits = ( - await octokit.repos.listCommits({ - owner, - repo, - path: `history/${slug}.yml`, - per_page: 28, - }) + await cachedResponse(`commits-${owner}-${repo}-${slug}`, () => + octokit.repos.listCommits({ + owner, + repo, + path: `history/${slug}.yml`, + per_page: 28, + }) + ) ).data.reverse(); } catch (error) { handleError(error); diff --git a/src/components/History.svelte b/src/components/History.svelte index 33f50df..a93e2ff 100644 --- a/src/components/History.svelte +++ b/src/components/History.svelte @@ -2,7 +2,7 @@ import Loading from "../components/Loading.svelte"; import { onMount } from "svelte"; import config from "../data/config.json"; - import { createOctokit, handleError } from "../utils/createOctokit"; + import { cachedResponse, createOctokit, handleError } from "../utils/createOctokit"; export let slug; let loading = true; @@ -14,15 +14,17 @@ onMount(async () => { try { incidents = ( - await octokit.issues.listForRepo({ - owner, - repo, - state: "closed", - filter: "all", - sort: "created", - direction: "desc", - labels: `status,${slug}`, - }) + await cachedResponse(`closed-issues-${owner}-${repo}-${slug}`, () => + octokit.issues.listForRepo({ + owner, + repo, + state: "closed", + filter: "all", + sort: "created", + direction: "desc", + labels: `status,${slug}`, + }) + ) ).data; } catch (error) { handleError(error); diff --git a/src/components/Incident.svelte b/src/components/Incident.svelte index 029ed9b..60cbcb1 100644 --- a/src/components/Incident.svelte +++ b/src/components/Incident.svelte @@ -3,7 +3,7 @@ import { onMount } from "svelte"; import snarkdown from "snarkdown"; import config from "../data/config.json"; - import { createOctokit, handleError } from "../utils/createOctokit"; + import { cachedResponse, createOctokit, handleError } from "../utils/createOctokit"; export let number; @@ -20,13 +20,15 @@ onMount(async () => { try { incident = ( - await octokit.issues.get({ - owner, - repo, - issue_number: number, - sort: "created", - direction: "desc", - }) + await cachedResponse(`issue-${owner}-${repo}-${number}`, () => + octokit.issues.get({ + owner, + repo, + issue_number: number, + sort: "created", + direction: "desc", + }) + ) ).data; } catch (error) { handleError(error); @@ -34,11 +36,13 @@ loadingIncident = false; try { comments = ( - await octokit.issues.listComments({ - owner, - repo, - issue_number: number, - }) + await cachedResponse(`issue-comments-${owner}-${repo}-${number}`, () => + octokit.issues.listComments({ + owner, + repo, + issue_number: number, + }) + ) ).data.reverse(); } catch (error) { handleError(error); diff --git a/src/components/Incidents.svelte b/src/components/Incidents.svelte index 10397d7..c82c4cf 100644 --- a/src/components/Incidents.svelte +++ b/src/components/Incidents.svelte @@ -2,7 +2,7 @@ import Loading from "../components/Loading.svelte"; import { onMount } from "svelte"; import config from "../data/config.json"; - import { createOctokit, handleError } from "../utils/createOctokit"; + import { cachedResponse, createOctokit, handleError } from "../utils/createOctokit"; let loading = true; const octokit = createOctokit(); @@ -13,15 +13,17 @@ onMount(async () => { try { incidents = ( - await octokit.issues.listForRepo({ - owner, - repo, - state: "closed", - filter: "all", - sort: "created", - direction: "desc", - labels: "status", - }) + await cachedResponse(`closed-issues-${owner}-${repo}`, () => + octokit.issues.listForRepo({ + owner, + repo, + state: "closed", + filter: "all", + sort: "created", + direction: "desc", + labels: "status", + }) + ) ).data; } catch (error) { handleError(error); diff --git a/src/components/LiveStatus.svelte b/src/components/LiveStatus.svelte index 0e7e712..8fa6e94 100644 --- a/src/components/LiveStatus.svelte +++ b/src/components/LiveStatus.svelte @@ -21,17 +21,8 @@ onMount(async () => { try { - sites = JSON.parse( - atob( - ( - await octokit.repos.getContent({ - owner, - repo, - path: "history/summary.json", - }) - ).data.content.replace(/\n/g, "") - ) - ); + const res = await fetch(`${userContentBaseUrl}/${owner}/${repo}/master/history/summary.json`); + sites = await res.json(); } catch (error) { handleError(error); } diff --git a/src/components/Summary.svelte b/src/components/Summary.svelte index f3556b5..ac65642 100644 --- a/src/components/Summary.svelte +++ b/src/components/Summary.svelte @@ -13,17 +13,8 @@ onMount(async () => { try { - summary = JSON.parse( - atob( - ( - await octokit.repos.getContent({ - owner, - repo, - path: "history/summary.json", - }) - ).data.content - ) - ).find((item) => item.slug === slug); + const res = await fetch(`${userContentBaseUrl}/${owner}/${repo}/master/history/summary.json`); + summary = (await res.json()).find((item) => item.slug === slug); } catch (error) { handleError(error); } diff --git a/src/utils/createOctokit.js b/src/utils/createOctokit.js index 69506e0..7e68faa 100644 --- a/src/utils/createOctokit.js +++ b/src/utils/createOctokit.js @@ -29,3 +29,31 @@ export const handleError = (error) => { console.log(error.message); } }; + +/** + * Memoize a GitHub API response in local storage + * @param {string} key - Local storage cache key + * @param {Function} fn - Function that returns the result + */ +export const cachedResponse = async (key, fn) => { + try { + if (typeof window !== "undefined") { + if ("localStorage" in window) { + const data = localStorage.getItem(key); + if (data) { + const item = JSON.parse(data); + if (new Date().getTime() - new Date(item.createdAt || "").getTime() > 600000) { + localStorage.removeItem(key); + } else { + console.log("Got cached item"); + return item.data; + } + } + } + } + } catch (error) {} + console.log("Got here"); + const i = await fn(); + localStorage.setItem(key, JSON.stringify({ data: i, createdAt: new Date() })); + return i; +};