fedi-image-bot
/
bot-image-moderation-fe
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactored ImageModerator

This commit is contained in:
Sugui 2024-03-05 17:00:09 +01:00
parent fb961e19f0
commit 7ca7e249a2
2 changed files with 10 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
bun.lockb
View File

Binary file not shown.

16
src/components/ImageModerator/ImageModerator.tsx
View File

@ -9,14 +9,17 @@ export interface ImageModeratorProps {
export default function ImageModerator({ acceptLabel, discardLabel }: ImageModeratorProps) { export default function ImageModerator({ acceptLabel, discardLabel }: ImageModeratorProps) {
const endpoint = "https://gelbooru.com/index.php?page=dapi&s=post&q=index&limit=1&json=1"; const endpoint = "https://gelbooru.com/index.php?page=dapi&s=post&q=index&limit=1&json=1";
const [loading, setLoading] = useState(true); const [isLoading, setIsLoading] = useState(true);
const [imageSrc, setImageSrc] = useState(""); const [imageSrc, setImageSrc] = useState("");
const [imageAlt, setImageAlt] = useState("No image"); const [imageAlt, setImageAlt] = useState("No image");
const getNewImage = () => { const getNewImage = () => {
setImageSrc(""); setImageSrc("");
setLoading(true); setIsLoading(true);
fetch(endpoint) fetch(endpoint, {
method: "GET",
mode: "no-cors",
})
.then(response => { .then(response => {
if (!response.ok) throw new Error("Response was not ok"); if (!response.ok) throw new Error("Response was not ok");
return response.json(); return response.json();
@ -26,10 +29,11 @@ export default function ImageModerator({ acceptLabel, discardLabel }: ImageModer
setImageSrc(imageUrl); setImageSrc(imageUrl);
setImageAlt(imageUrl); setImageAlt(imageUrl);
}) })
.catch(_ => { .catch(error => {
setImageAlt("Error"); setImageAlt("Error");
console.error(error);
}).finally(() => { }).finally(() => {
setLoading(false); setIsLoading(false);
}); });
} }
@ -39,7 +43,7 @@ export default function ImageModerator({ acceptLabel, discardLabel }: ImageModer
display: "grid", gridTemplateColumns: "1fr 1fr", display: "grid", gridTemplateColumns: "1fr 1fr",
gridTemplateRows: "1fr 50px", gridTemplateAreas: "'. .' '. .'", width: "100vw", height: "100vh" gridTemplateRows: "1fr 50px", gridTemplateAreas: "'. .' '. .'", width: "100vw", height: "100vh"
}}> }}>
{loading ? <span>Loading...</span> : {isLoading ? <span>Loading...</span> :
<img src={imageSrc} alt={imageAlt} style={{ width: "100%", height: "100%", gridColumnStart: 1, gridColumnEnd: 3, display: "block", objectFit: "contain" }} />} <img src={imageSrc} alt={imageAlt} style={{ width: "100%", height: "100%", gridColumnStart: 1, gridColumnEnd: 3, display: "block", objectFit: "contain" }} />}
<Button label={acceptLabel} /> <Button label={acceptLabel} />
<Button label={discardLabel} /> <Button label={discardLabel} />