First version of MCC, needs debugging

Author: Scr4tch587

gs/frontend/mcc/package-lock.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@tailwindcss/vite": "^4.1.13",
+    "@tanstack/react-query": "^5.90.2",
     "bootstrap": "^5.3.8",
     "react": "^19.1.1",
     "react-bootstrap": "^2.10.10",

gs/frontend/mcc/package.json

@@ -1,12 +1,13 @@
 import Table from "react-bootstrap/Table";
-import { useEffect, useState } from "react";
+import { useQuery } from '@tanstack/react-query';
 
 type AROItemProps = {
   id: number;
   latitude: number;
   longitude: number;
   status: string;
 };
+
 function AROItem({ id, latitude, longitude, status }: AROItemProps) {
   return (
     <>
@@ -21,17 +22,14 @@ function AROItem({ id, latitude, longitude, status }: AROItemProps) {
 }
 
 function ARORequests() {
-  const [loading, setLoading] = useState(true);
-  const [aroRequests, setARORequests] = useState<AROItemProps[]>([]);
-
-  useEffect(() => {
-    fetch("http://localhost:5000/aro-request")
-      .then((response) => response.json())
-      .then((data) => {
-        setARORequests(data);
-        setLoading(false);
-      });
-  }, []);
+  const { data, isLoading} = useQuery<AROItemProps[]>({
+  queryKey: ["aro-requests"],
+  queryFn: async () => {
+    const response = await fetch("http://localhost:5000/aro-request");
+    if(!response.ok) throw new Error("Network response was not ok");
+    return response.json();
+  },
+  });
 
   return (
     <div className="arorequests layout">
@@ -45,14 +43,14 @@ function ARORequests() {
           </tr>
         </thead>
         <tbody>
-          {loading
+          {isLoading || !data
             ? (
               <tr>
                 <td colSpan={4}>Loading...</td>
               </tr>
             )
-            : (
-              aroRequests.map((item) => {
+            :(
+              data.map((item) => {
                 return (
                   <AROItem
                     key={item.id}

gs/frontend/mcc/src/aro-requests/aro-requests.tsx

@@ -3,9 +3,14 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App.tsx";
 import "./index.css";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+const queryClient = new QueryClient();
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
+    <QueryClientProvider client={queryClient}>
     <App />
+    </QueryClientProvider>
   </React.StrictMode>
 );

gs/frontend/mcc/src/main.tsx

@@ -1,52 +1,55 @@
 import InputGroup from "react-bootstrap/InputGroup";
 import Form from "react-bootstrap/Form";
 import Table from "react-bootstrap/Table";
-import { useEffect, useRef, useState } from "react";
+import { useRef, useState } from "react";
+import { useQuery, useMutation } from '@tanstack/react-query';
 
 const MISSON_COMMAND_PREFIX = "MCC_";
 
 function MissionCommands() {
-  const [commands, setCommands] = useState("");
-  const [commandResponse, setCommandResponse] = useState("");
   const inputRef = useRef(null);
 
-  useEffect(() => {
-    try {
-      const command = localStorage.getItem(MISSON_COMMAND_PREFIX + "command");
-      const response = localStorage.getItem(MISSON_COMMAND_PREFIX + "response");
-      if (!command) return;
-      if (!response) return;
-      setCommands(command);
-      setCommandResponse(response);
-    } catch (error) {
-      console.error(error);
-    }
-  }, []);
+  const { data: savedData } = useQuery({
+    queryKey: ["missionCommand"],
+    queryFn: () => {
+      const command = localStorage.getItem(MISSON_COMMAND_PREFIX + "command") || "";
+      const response = localStorage.getItem(MISSON_COMMAND_PREFIX + "response") || "";
+      return { command, response };
+    },
+    initialData: {
+      command: localStorage.getItem(MISSON_COMMAND_PREFIX + "command") || "",
+      response: localStorage.getItem(MISSON_COMMAND_PREFIX + "response") || "",
+    },
+});
+
+  const [commands, setCommands] = useState(savedData.command);
 
   // const handleChange = (event) => {
   //   setCommands(event.target.value);
   //   localStorage.setItem(MISSON_COMMAND_PREFIX + "command", event.target.value);
   // }
-
-  const handleCommand = () => {
-    try {
-      const requestOptions = {
+  const mutation = useMutation({
+    mutationFn: async (command: string) => {
+      const response = await fetch("http://localhost:5000/mission-control", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ command: commands }),
-      };
-      fetch("http://localhost:5000/mission-control", requestOptions)
-        .then((response) => response.json())
-        .then((data) => {
-          setCommandResponse(data.response);
-          localStorage.setItem(
-            MISSON_COMMAND_PREFIX + "response",
-            data.response,
-          );
-        });
-    } catch (error) {
-      console.error(error);
-    }
+        body: JSON.stringify({ command }),
+      });
+      if (!response.ok) {
+        throw new Error(`Server error: ${response.status}`);
+      }
+      return response.json();
+    },
+    onSuccess: (data) => {
+      localStorage.setItem(
+        MISSON_COMMAND_PREFIX + "response",
+        data.response
+      );
+    },
+  });
+
+   const handleCommand = () => {
+    mutation.mutate(commands);
   };
 
   const clear = () => {
@@ -56,8 +59,7 @@ function MissionCommands() {
       console.error(error);
     }
     setCommands("");
-    setCommandResponse("");
-    // inputRef.current.value = ''
+    mutation.reset();
   };
 
   return (
@@ -80,7 +82,13 @@ function MissionCommands() {
           </tr>
         </thead>
         <tbody>
-          <tr>{commandResponse && <td>{commandResponse}</td>}</tr>
+          <tr>
+            <td>
+              {mutation.status === "pending" && "Loading..."}
+              {mutation.status === "error" && `Error: ${(mutation.error as Error).message}`}
+              {mutation.status === "success" && mutation.data.response}
+            </td>
+          </tr>
         </tbody>
       </Table>
       <button onClick={clear}>Clear</button>