Taevas/taevas.xyz
Taevas/taevas.xyz
1
0
Fork 0
Code Issues Pull requests Projects Activity

Introduce DataHandler to remove duplicate code

Browse source 
It allows every `Website` (from any `Info`) to get data

It tries to get updated data periodically
If there's an error getting data, it tries to get data more often

If `error -> success`, the website displays the data, not the error
If `success -> error`, the website displays the old data, not the error

I find this system to be pretty elegant
This commit is contained in:
Taevas 2025-02-18 16:12:28 +01:00
parent 1e71c12f60
commit 48051690a3
10 changed files with 127 additions and 189 deletions
Download patch file Download diff file Expand all files Collapse all files

28
src/Infos/Coding/GitHub.tsx
View file

@ -1,6 +1,7 @@
import React, {useState, useEffect} from "react";
import Website from "../Website.js";
import ButtonLink from "#parts/ButtonLink.js";
import DataHandler from "#Infos/DataHandler.js";
export interface GithubInfo {
public?: {
@ -13,37 +14,26 @@ export interface GithubInfo {
}
export default function GitHub() {
const [github, setGithub]: [GithubInfo, React.Dispatch<React.SetStateAction<GithubInfo>>] = useState({});
const {data, error, setError} = DataHandler<GithubInfo>("/.netlify/functions/github", 60 * 20);
const [elements, setElements] = useState([] as React.JSX.Element[]);
const [error, setError] = useState(false);
const getGithub = async () => {
setGithub(await fetch("/.netlify/functions/github").then(async r => r.json()));
};
useEffect(() => {
getGithub().catch(() => {
setError(true);
});
}, []);
useEffect(() => {
if (github.private ?? github.public) {
if (data && (data.private ?? data.public)) {
try {
const elms: React.JSX.Element[] = [];
if (github.private) {
if (data.private) {
elms.push(
<p key={"github-date-private"} className={github.public ? "mb-2" : ""}>Latest <strong>private</strong> push: <strong>{github.private.date}</strong></p>,
<p key={"github-date-private"} className={data.public ? "mb-2" : ""}>Latest <strong>private</strong> push: <strong>{data.private.date}</strong></p>,
);
}
if (github.public) {
if (data.public) {
elms.push(
<p key={"github-date-public"}>Latest <strong>public</strong> push: <strong>{github.public.date} on {github.public.repo}</strong></p>,
<p key={"github-date-public"}>Latest <strong>public</strong> push: <strong>{data.public.date} on {data.public.repo}</strong></p>,
);
elms.push(
<ButtonLink key={"more"} link={`https://github.com/${github.public.repo}`} text="Repo Link" />,
<ButtonLink key={"more"} link={`https://github.com/${data.public.repo}`} text="Repo Link" />,
);
}
@ -52,7 +42,7 @@ export default function GitHub() {
setError(true);
}
}
}, [github]);
}, [data]);
return (
<Website