Skip to content

Commit b058ddd

Browse files
AnandChowdharyAnandChowdhary
committed
♻️ Remove local storage caching
1 parent 4254a67 commit b058ddd

File tree

1 file changed

+32
-95
lines changed

1 file changed

+32
-95
lines changed

‎index.tsx‎

Lines changed: 32 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,7 @@ import { Line, Bar } from "react-chartjs-2";
77
import dayjs from "dayjs";
88
import "./styles.scss";
99

10-
const subDirectories = [
11-
"rescuetime-time-tracking",
12-
"oura-activity",
13-
"oura-sleep",
14-
];
10+
const subDirectories = ["rescuetime-time-tracking", "oura-activity", "oura-sleep"];
1511

1612
const categoryColors: { [index: string]: string } = {
1713
"Software Development": "#00429d",
@@ -35,8 +31,7 @@ const itemNames: { [index: string]: string } = {
3531

3632
const getItemName = (name: string) => itemNames[name] ?? name;
3733

38-
export const zero = (num: string) =>
39-
parseInt(num) > 9 ? parseInt(num) : `0${num}`;
34+
export const zero = (num: string) => (parseInt(num) > 9 ? parseInt(num) : `0${num}`);
4035

4136
const changeLastPart = (path: string, last: string) => {
4237
const key = path.split("/");
@@ -46,29 +41,20 @@ const changeLastPart = (path: string, last: string) => {
4641

4742
const cleanValues = (items: number[], api: string, path: string) => {
4843
// if (path.includes("/months/") || path.includes("/days/") || path.includes("/weeks/"))
49-
if (path.includes("/months/"))
50-
return items.map((val) =>
51-
parseFloat((val / (3600 * 30.4368499)).toFixed(2))
52-
);
44+
if (path.includes("/months/")) return items.map((val) => parseFloat((val / (3600 * 30.4368499)).toFixed(2)));
5345
return items.map((val) => parseFloat((val / 3600).toFixed(2)));
5446
// return items.map((val) => parseInt(String(val)));
5547
};
5648
const cleanKeys = (items: string[], api: string, path: string) => {
57-
if (path.includes("/months/"))
58-
return items.map((val) => dayjs(`2020-${zero(val)}-15`).format("MMMM"));
59-
if (path.includes("/weeks/"))
60-
return items.map((val) => dayjs(val).format("dddd, MMM D"));
49+
if (path.includes("/months/")) return items.map((val) => dayjs(`2020-${zero(val)}-15`).format("MMMM"));
50+
if (path.includes("/weeks/")) return items.map((val) => dayjs(val).format("dddd, MMM D"));
6151
return items;
6252
};
6353
const cleanTitle = (text?: string, path?: string) => {
6454
if (!text) return "";
6555
text = text.replace(".json", "");
66-
if (path?.includes("/days/"))
67-
text = dayjs(`${path.split("/days/")[1].split("/")[0]}-${text}-10`).format(
68-
"MMMM YYYY"
69-
);
70-
if (path?.includes("/weeks/"))
71-
return `Week ${text}, ${path.split("/weeks/")[1].split("/")[0]}`;
56+
if (path?.includes("/days/")) text = dayjs(`${path.split("/days/")[1].split("/")[0]}-${text}-10`).format("MMMM YYYY");
57+
if (path?.includes("/weeks/")) return `Week ${text}, ${path.split("/weeks/")[1].split("/")[0]}`;
7258
return text;
7359
};
7460

@@ -92,16 +78,10 @@ const getDatasets = (
9278
});
9379
}
9480
});
95-
Object.keys(total).forEach(
96-
(key) => (total[key] = cleanValues(total[key], api, path))
97-
);
81+
Object.keys(total).forEach((key) => (total[key] = cleanValues(total[key], api, path)));
9882
if (!allValuesAreNumbers)
9983
return Object.keys(total)
100-
.sort(
101-
(a, b) =>
102-
Object.keys(categoryColors).indexOf(a) -
103-
Object.keys(categoryColors).indexOf(b)
104-
)
84+
.sort((a, b) => Object.keys(categoryColors).indexOf(a) - Object.keys(categoryColors).indexOf(b))
10585
.map((key) => ({
10686
label: key,
10787
data: total[key],
@@ -135,21 +115,9 @@ const App: FunctionComponent<{}> = () => {
135115

136116
const getApiData = async (repo: string, api: string, path: string) => {
137117
const key = `${repo}${api}${path}`;
138-
const cachedValue = window.localStorage.getItem(key);
139-
if (cachedValue) {
140-
const val = JSON.parse(cachedValue);
141-
if (dayjs(val.expiry * 1000).isBefore(dayjs())) return val.value;
142-
else window.localStorage.removeItem(key);
143-
}
144-
const response = await fetch(
145-
`https://raw.githubusercontent.com/${repo}/master/data/${api}/${path}`
146-
);
118+
const response = await fetch(`https://raw.githubusercontent.com/${repo}/master/data/${api}/${path}`);
147119
if (!response.ok) throw new Error();
148120
const json = await response.json();
149-
window.localStorage.setItem(
150-
key,
151-
JSON.stringify({ value: json, expiry: dayjs().add(1, "hour").unix() })
152-
);
153121
return json;
154122
};
155123
const useMemoApiData = createMemo(getApiData);
@@ -162,26 +130,20 @@ const App: FunctionComponent<{}> = () => {
162130
.then((json) => {
163131
const items = pick(latest, json);
164132
if (Array.isArray(items)) {
165-
window.location.href = `./?repo=${encodeURIComponent(
166-
repo
167-
)}&api=${encodeURIComponent(api)}&path=${encodeURIComponent(
133+
window.location.href = `./?repo=${encodeURIComponent(repo)}&api=${encodeURIComponent(
134+
api
135+
)}&path=${encodeURIComponent(
168136
`summary/${latest.replace(/\./g, "/")}/${items[items.length - 1]}`
169-
)}&color=${encodeURIComponent(color)}&chart=${encodeURIComponent(
170-
chart
171-
)}`;
137+
)}&color=${encodeURIComponent(color)}&chart=${encodeURIComponent(chart)}`;
172138
} else if (typeof items === "object") {
173139
const dotted = dot(items);
174140
const lastKey = Object.keys(dotted).pop();
175141
if (lastKey) {
176-
window.location.href = `./?repo=${encodeURIComponent(
177-
repo
178-
)}&api=${encodeURIComponent(api)}&path=${encodeURIComponent(
179-
`summary/${latest.replace(/\./g, "/")}/${lastKey
180-
.split("[")[0]
181-
.replace(/\./g, "/")}/${dotted[lastKey]}`
182-
)}&color=${encodeURIComponent(color)}&chart=${encodeURIComponent(
183-
chart
184-
)}`;
142+
window.location.href = `./?repo=${encodeURIComponent(repo)}&api=${encodeURIComponent(
143+
api
144+
)}&path=${encodeURIComponent(
145+
`summary/${latest.replace(/\./g, "/")}/${lastKey.split("[")[0].replace(/\./g, "/")}/${dotted[lastKey]}`
146+
)}&color=${encodeURIComponent(color)}&chart=${encodeURIComponent(chart)}`;
185147
}
186148
}
187149
})
@@ -202,17 +164,10 @@ const App: FunctionComponent<{}> = () => {
202164
});
203165
if (subDirectories.includes(api)) {
204166
if (
205-
JSON.stringify(latestOptions) !==
206-
JSON.stringify(
207-
Object.keys(data[path.split("summary/")[1].split("/")[0]])
208-
)
167+
JSON.stringify(latestOptions) !== JSON.stringify(Object.keys(data[path.split("summary/")[1].split("/")[0]]))
209168
)
210-
setLastestOptions(
211-
Object.keys(data[path.split("summary/")[1].split("/")[0]])
212-
);
213-
} else if (
214-
JSON.stringify(latestOptions) !== JSON.stringify(Object.keys(data))
215-
)
169+
setLastestOptions(Object.keys(data[path.split("summary/")[1].split("/")[0]]));
170+
} else if (JSON.stringify(latestOptions) !== JSON.stringify(Object.keys(data)))
216171
setLastestOptions(Object.keys(data));
217172
})
218173
.catch(() => setError(true));
@@ -271,13 +226,9 @@ const App: FunctionComponent<{}> = () => {
271226
<div>
272227
{previous ? (
273228
<Link
274-
to={`./?repo=${encodeURIComponent(repo)}&api=${encodeURIComponent(
275-
api
276-
)}&path=${encodeURIComponent(
229+
to={`./?repo=${encodeURIComponent(repo)}&api=${encodeURIComponent(api)}&path=${encodeURIComponent(
277230
changeLastPart(path, previous)
278-
)}&color=${encodeURIComponent(color)}&chart=${encodeURIComponent(
279-
chart
280-
)}`}
231+
)}&color=${encodeURIComponent(color)}&chart=${encodeURIComponent(chart)}`}
281232
>
282233
&larr; {cleanTitle(previous.replace(".json", ""), path)}
283234
</Link>
@@ -287,13 +238,9 @@ const App: FunctionComponent<{}> = () => {
287238
<div>
288239
{next ? (
289240
<Link
290-
to={`./?repo=${encodeURIComponent(repo)}&api=${encodeURIComponent(
291-
api
292-
)}&path=${encodeURIComponent(
241+
to={`./?repo=${encodeURIComponent(repo)}&api=${encodeURIComponent(api)}&path=${encodeURIComponent(
293242
changeLastPart(path, next)
294-
)}&color=${encodeURIComponent(color)}&chart=${encodeURIComponent(
295-
chart
296-
)}`}
243+
)}&color=${encodeURIComponent(color)}&chart=${encodeURIComponent(chart)}`}
297244
>
298245
{cleanTitle(next, path)} &rarr;
299246
</Link>
@@ -320,7 +267,7 @@ const App: FunctionComponent<{}> = () => {
320267
{
321268
stacked: true,
322269
ticks: {
323-
callback: (label) => `${label} hours`,
270+
callback: (label: string) => `${label} hours`,
324271
},
325272
},
326273
],
@@ -346,7 +293,7 @@ const App: FunctionComponent<{}> = () => {
346293
{
347294
stacked: true,
348295
ticks: {
349-
callback: (label) => `${label} hours`,
296+
callback: (label: string) => `${label} hours`,
350297
},
351298
},
352299
],
@@ -358,11 +305,7 @@ const App: FunctionComponent<{}> = () => {
358305
<nav>
359306
{latestOptions
360307
.filter((item) => !item.endsWith("years"))
361-
.sort(
362-
(a, b) =>
363-
Object.keys(itemNames).indexOf(a) -
364-
Object.keys(itemNames).indexOf(b)
365-
)
308+
.sort((a, b) => Object.keys(itemNames).indexOf(a) - Object.keys(itemNames).indexOf(b))
366309
.map((item) => (
367310
<Link
368311
className={
@@ -375,15 +318,9 @@ const App: FunctionComponent<{}> = () => {
375318
: ""
376319
}
377320
key={item}
378-
to={`./?repo=${encodeURIComponent(repo)}&api=${encodeURIComponent(
379-
api
380-
)}&latest=${encodeURIComponent(
381-
subDirectories.includes(api)
382-
? `${path.split("summary/")[1].split("/")[0]}.${item}`
383-
: item
384-
)}&color=${encodeURIComponent(color)}&chart=${encodeURIComponent(
385-
chart
386-
)}`}
321+
to={`./?repo=${encodeURIComponent(repo)}&api=${encodeURIComponent(api)}&latest=${encodeURIComponent(
322+
subDirectories.includes(api) ? `${path.split("summary/")[1].split("/")[0]}.${item}` : item
323+
)}&color=${encodeURIComponent(color)}&chart=${encodeURIComponent(chart)}`}
387324
>
388325
{getItemName(item)}
389326
</Link>

0 commit comments

Comments
 (0)