From 339cab776aedad6bbd471b4715c0aeb1f899ea25 Mon Sep 17 00:00:00 2001
From: Alie <alieneon22@gmail.com>
Date: Wed, 12 Feb 2025 13:13:18 +0100
Subject: [PATCH] feat: consolidate alt text in same useState

---
 src/components/ImageModerator/ImageModerator.tsx | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/components/ImageModerator/ImageModerator.tsx b/src/components/ImageModerator/ImageModerator.tsx
index 0466561..0e02cab 100644
--- a/src/components/ImageModerator/ImageModerator.tsx
+++ b/src/components/ImageModerator/ImageModerator.tsx
@@ -10,8 +10,11 @@ export default function ImageModerator({ backendUrl }: ImageModeratorProps) {
   const discardLabel = "Discard";
 
   const [isLoading, setIsLoading] = useState(true);
-  const [imageData, setImageData] = useState({ url: "", token: "" });
-  const [imageAlt, setImageAlt] = useState("No image");
+  const [imageData, setImageData] = useState({
+    url: "",
+    token: "",
+    alt: "No image",
+  });
 
   function acceptAction() {
     fetch(`${backendUrl}/image/review`, {
@@ -45,7 +48,7 @@ export default function ImageModerator({ backendUrl }: ImageModeratorProps) {
 
   const getNewImage = () => {
     if (isLoading) {
-      setImageData({ url: "", token: "" });
+      setImageData({ url: "", token: "", alt: "Loading..." });
       fetch(`${backendUrl}/image`, {
         method: "GET",
       })
@@ -54,11 +57,10 @@ export default function ImageModerator({ backendUrl }: ImageModeratorProps) {
           return response.json();
         })
         .then((data) => {
-          setImageData({ url: data.url, token: data.token });
-          setImageAlt(data.url);
+          setImageData({ url: data.url, token: data.token, alt: data.url });
         })
         .catch((error) => {
-          setImageAlt("Error");
+          setImageData({ url: "", token: "", alt: "Error" });
           console.error(error);
         })
         .finally(() => {
@@ -84,7 +86,7 @@ export default function ImageModerator({ backendUrl }: ImageModeratorProps) {
       ) : (
         <img
           src={imageData.url}
-          alt={imageAlt}
+          alt={imageData.alt}
           style={{
             width: "100%",
             height: "100%",