Removed unnecesary variables since now we are dependent of booru, and improved code a bit

src/App.tsx

@@ -1,10 +1,15 @@
 import './App.css'
-import ImageModerator from './components/ImageModerator/ImageModerator'
+import ImageModerator, { ImageModeratorProps } from './components/ImageModerator/ImageModerator'
+
+const imageModeratorProps: ImageModeratorProps = {
+  acceptLabel: "Accept",
+  discardLabel: "Discard"
+}
 
 function App() {
   return (
     <>
-      <ImageModerator apiEndpoint='"https://gelbooru.com/index.php?page=dapi&s=post&q=index&limit=1&json=1"' imageUrlProperty='post[0]' />
+      <ImageModerator {...imageModeratorProps} />
     </>
   )
 }

src/components/ImageModerator/ImageModerator.tsx

@@ -1,15 +1,49 @@
 import Button from "../Button/Button";
+import { GelbooruAPIResponse } from "../../types/GelbooruAPIResponse";
+import { useEffect, useState } from "react";
 
 export interface ImageModeratorProps {
-    apiEndpoint: string;
+    acceptLabel: string;
-    imageUrlProperty: string;
+    discardLabel: string;
 }
 
-export default function ImageModerator({apiEndpoint, imageUrlProperty}: ImageModeratorProps) {
+export default function ImageModerator({ acceptLabel, discardLabel }: ImageModeratorProps) {
-    return <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr",
+    const endpoint = "https://gelbooru.com/index.php?page=dapi&s=post&q=index&limit=1&json=1";
-    gridTemplateRows: "1fr 50px", gridTemplateAreas: "'. .' '. .'", width: "100vw", height: "100vh" }}>
+
-        <img src={imageUrlProperty} style={{ width: "100%", height: "100%", gridColumnStart: 1, gridColumnEnd: 3, display: "block", objectFit: "contain" }} />
+    const [loading, setLoading] = useState(true);
-        <Button label="Discard" />
+    const [imageSrc, setImageSrc] = useState("");
-        <Button label="Accept" />
+    const [imageAlt, setImageAlt] = useState("No image");
+
+    const getNewImage = () => {
+        setImageSrc("");
+        setLoading(true);
+        fetch(endpoint)
+            .then(response => {
+                if (!response.ok) throw new Error("Response was not ok");
+                return response.json();
+            })
+            .then(data => {
+                const gelbooruData: GelbooruAPIResponse = data as GelbooruAPIResponse;
+                const imageUrl = gelbooruData.post[0].file_url;
+                setImageSrc(imageUrl);
+                setImageAlt(imageUrl);
+            })
+            .catch(_ => {
+                setImageAlt("Error");
+            }).finally(() => {
+                setLoading(false);
+            });
+    }
+
+    useEffect(getNewImage, []);
+
+    return <div style={{
+        display: "grid", gridTemplateColumns: "1fr 1fr",
+        gridTemplateRows: "1fr 50px", gridTemplateAreas: "'. .' '. .'", width: "100vw", height: "100vh"
+    }}>
+        {loading ? <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>
 }

test/unit/ImageModerator.test.tsx

@@ -1,24 +1,29 @@
 import React from "react";
 import { render, screen } from "@testing-library/react";
 import { describe, expect, it } from "bun:test";
-import ImageModerator from '../../src/components/ImageModerator/ImageModerator';
+import ImageModerator, { ImageModeratorProps } from '../../src/components/ImageModerator/ImageModerator';
+
+const properties: ImageModeratorProps = {
+    acceptLabel: "Accept",
+    discardLabel: "Discard"
+}
 
 it("should render into the document", () => {
-    render(<ImageModerator apiEndpoint='"https://gelbooru.com/index.php?page=dapi&s=post&q=index&limit=1&json=1"' imageUrlProperty='post[0]' />);
+    render(<ImageModerator {...properties} />);
 });
 
 it("should show a new image when accept button is clicked", () => {
-    const acceptButton = screen.getByText("Accept");
+    const acceptButton = screen.getByText(properties.acceptLabel);
     const imgElement = screen.getByRole("img");
     const imgElementSrcBefore = imgElement.getAttribute("src");
-    acceptButton.click()
+    acceptButton.click();
     expect(imgElement.getAttribute("src")).not.toEqual(imgElementSrcBefore);
 });
 
 it("should show a new image when discard button is clicked", () => {
-    const discardButton = screen.getByText("Discard");
+    const discardButton = screen.getByText(properties.discardLabel);
     const imgElement = screen.getByRole("img");
     const imgElementSrcBefore = imgElement.getAttribute("src");
-    discardButton.click()
+    discardButton.click();
     expect(imgElement.getAttribute("src")).not.toEqual(imgElementSrcBefore);
 });