Refactored ImageModerator
This commit is contained in:
parent
fb961e19f0
commit
7ca7e249a2
|
@ -9,14 +9,17 @@ export interface 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 [loading, setLoading] = useState(true);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [imageSrc, setImageSrc] = useState("");
|
||||
const [imageAlt, setImageAlt] = useState("No image");
|
||||
|
||||
const getNewImage = () => {
|
||||
setImageSrc("");
|
||||
setLoading(true);
|
||||
fetch(endpoint)
|
||||
setIsLoading(true);
|
||||
fetch(endpoint, {
|
||||
method: "GET",
|
||||
mode: "no-cors",
|
||||
})
|
||||
.then(response => {
|
||||
if (!response.ok) throw new Error("Response was not ok");
|
||||
return response.json();
|
||||
|
@ -26,10 +29,11 @@ export default function ImageModerator({ acceptLabel, discardLabel }: ImageModer
|
|||
setImageSrc(imageUrl);
|
||||
setImageAlt(imageUrl);
|
||||
})
|
||||
.catch(_ => {
|
||||
.catch(error => {
|
||||
setImageAlt("Error");
|
||||
console.error(error);
|
||||
}).finally(() => {
|
||||
setLoading(false);
|
||||
setIsLoading(false);
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -39,7 +43,7 @@ export default function ImageModerator({ acceptLabel, discardLabel }: ImageModer
|
|||
display: "grid", gridTemplateColumns: "1fr 1fr",
|
||||
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" }} />}
|
||||
<Button label={acceptLabel} />
|
||||
<Button label={discardLabel} />
|
||||
|
|
Loading…
Reference in New Issue