50 lines
1.7 KiB
TypeScript
50 lines
1.7 KiB
TypeScript
import Button from "../Button/Button";
|
|
import { useEffect, useState } from "react";
|
|
|
|
export interface ImageModeratorProps {
|
|
acceptLabel: string;
|
|
discardLabel: string;
|
|
}
|
|
|
|
export default function ImageModerator({ acceptLabel, discardLabel }: ImageModeratorProps) {
|
|
const endpoint = "http://fe-middleware:8081/image";
|
|
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const [imageSrc, setImageSrc] = useState("");
|
|
const [imageAlt, setImageAlt] = useState("No image");
|
|
|
|
const getNewImage = () => {
|
|
setImageSrc("");
|
|
setIsLoading(true);
|
|
fetch(endpoint, {
|
|
method: "GET",
|
|
})
|
|
.then(response => {
|
|
if (!response.ok) throw new Error("Response was not ok");
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
const imageUrl = data.post[0].file_url;
|
|
setImageSrc(imageUrl);
|
|
setImageAlt(imageUrl);
|
|
})
|
|
.catch(error => {
|
|
setImageAlt("Error");
|
|
console.error(error);
|
|
}).finally(() => {
|
|
setIsLoading(false);
|
|
});
|
|
}
|
|
|
|
useEffect(getNewImage, []);
|
|
|
|
return <div style={{
|
|
display: "grid", gridTemplateColumns: "1fr 1fr",
|
|
gridTemplateRows: "1fr 50px", gridTemplateAreas: "'. .' '. .'", width: "100vw", height: "100vh"
|
|
}}>
|
|
{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} />
|
|
</div>
|
|
} |