implemented basic UI with hardcoded urls and credentials

compose.yaml

@@ -47,7 +47,7 @@ services:
     develop:
       watch:
         - action: rebuild
-          path: src/
+          path: .
           ignore:
             - node_modules/
 

init-mongo.js

@@ -2,7 +2,7 @@ db = new Mongo().getDB("bot");
 
 db.createCollection('authorizations');
 
-db.authorization.insert([
+db.authorizations.insert([
     {
         app: "tester",
         secret: "test"

src/App.tsx

@@ -1,17 +1,12 @@
-import './App.css'
+import "./App.css";
-import ImageModerator, { ImageModeratorProps } from './components/ImageModerator/ImageModerator'
+import ImageModerator from "./components/ImageModerator/ImageModerator";
-
-const imageModeratorProps: ImageModeratorProps = {
-  acceptLabel: "Accept",
-  discardLabel: "Discard"
-}
 
 function App() {
   return (
     <>
-      <ImageModerator {...imageModeratorProps} />
+      <ImageModerator />
     </>
-  )
+  );
 }
 
-export default App
+export default App;

src/components/ImageModerator/ImageModerator.tsx

@@ -1,50 +1,121 @@
 import Button from "../Button/Button";
 import { useEffect, useState } from "react";
 
-export interface ImageModeratorProps {
+// Let the user input the middleware URL, API url and app + secret
-    acceptLabel: string;
+const MWURL = "http://localhost:8081";
-    discardLabel: string;
+const APIURL = "http://localhost:8080";
-}
+const app = "tester";
+const secret = "test";
 
-export default function ImageModerator({ acceptLabel, discardLabel }: ImageModeratorProps) {
+export default function ImageModerator() {
-    const endpoint = "http://fe-middleware:8081/image";
+  const acceptLabel = "Accept";
+  const discardLabel = "Discard";
 
-    const [isLoading, setIsLoading] = useState(true);
+  const endpoint = `${MWURL}/image`;
-    const [imageSrc, setImageSrc] = useState("");
-    const [imageAlt, setImageAlt] = useState("No image");
 
-    const getNewImage = () => {
+  const [isLoading, setIsLoading] = useState(true);
-        setImageSrc("");
+  const [imageSrc, setImageSrc] = useState("");
-        setIsLoading(true);
+  const [imageAlt, setImageAlt] = useState("No image");
-        fetch(endpoint, {
+  const [token, setToken] = useState("");
-            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, []);
+  useEffect(() => {
+    fetch(`${APIURL}/login`, {
+      method: "POST",
+      body: JSON.stringify({ app, secret }),
+      headers: { "Content-type": "application/json" },
+    })
+      .then((response) => {
+        return response.json();
+      })
+      .then((body) => {
+        setToken(body.token);
+      });
+  }, []);
 
-    return <div style={{
+  console.log(token);
-        display: "grid", gridTemplateColumns: "1fr 1fr",
+
-        gridTemplateRows: "1fr 50px", gridTemplateAreas: "'. .' '. .'", width: "100vw", height: "100vh"
+  function acceptAction() {
-    }}>
+    fetch(`${APIURL}/images`, {
-        {isLoading ? <span>Loading...</span> :
+      method: "POST",
-            <img src={imageSrc} alt={imageAlt} style={{ width: "100%", height: "100%", gridColumnStart: 1, gridColumnEnd: 3, display: "block", objectFit: "contain" }} />}
+      body: `{ "url": "${imageSrc}", "status": "available", "tags": [] }`,
-        <Button label={acceptLabel} />
+      headers: {
-        <Button label={discardLabel} />
+        "Content-type": "application/json",
+        Authorization: `Bearer ${token}`,
+      },
+    });
+    setIsLoading(true);
+  }
+
+  function discardAction() {
+    fetch(`${APIURL}/images`, {
+      method: "POST",
+      body: `{ "url": "${imageSrc}", "status": "unavailable", "tags": [] }`,
+      headers: {
+        "Content-type": "application/json",
+        Authorization: `Bearer ${token}`,
+      },
+    });
+    setIsLoading(true);
+  }
+
+  const getNewImage = () => {
+    setImageSrc("");
+    fetch(endpoint, {
+      method: "GET",
+    })
+      .then((response) => {
+        if (!response.ok) throw new Error("Response was not ok");
+        return response.json();
+      })
+      .then((data) => {
+        const imageUrl = data.url;
+        setImageSrc(imageUrl);
+      })
+      .catch((error) => {
+        setImageAlt("Error");
+        console.error(error);
+      })
+      .finally(() => {
+        setIsLoading(false);
+      });
+  };
+
+  useEffect(getNewImage, [isLoading]);
+
+  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}
+        action={acceptAction}
+      />
+      <Button
+        label={discardLabel}
+        action={discardAction}
+      />
     </div>
-}
+  );
+}

src/main.tsx

@@ -1,10 +1,7 @@
-import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.tsx'
 import './index.css'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
     <App />
-  </React.StrictMode>,
 )