Kai/switch to react query

gs/backend/api/backend_setup.py

@@ -5,11 +5,15 @@
 from gs.backend.api.middleware.logger_middleware import LoggerMiddleware
 from gs.backend.api.v1.aro.endpoints.picture_requests import picture_requests_router
 from gs.backend.api.v1.aro.endpoints.user import aro_user_router
-from gs.backend.api.v1.mcc.endpoints.aro_requests import aro_requests_router
 from gs.backend.api.v1.mcc.endpoints.commands import commands_router
-from gs.backend.api.v1.mcc.endpoints.main_commands import main_commands_router
+from gs.backend.api.v1.mcc.endpoints.mission_commands import mission_commands_router
 from gs.backend.api.v1.mcc.endpoints.telemetry import telemetry_router
 
+# Imports for test endpoints for MCC
+# from gs.backend.api.v1.mcc.endpoints.main_commands import main_commands_router
+# from gs.backend.api.v1.mcc.endpoints.mcc_logs import logs_router
+# from gs.backend.api.v1.mcc.endpoints.aro_requests import aro_requests_router
+
 
 def setup_routes(app: FastAPI) -> None:
     """Adds the routes to the app"""
@@ -24,8 +28,12 @@ def setup_routes(app: FastAPI) -> None:
     mcc_prefix = f"{version_1}/mcc"
     app.include_router(commands_router, prefix=f"{mcc_prefix}/commands")
     app.include_router(telemetry_router, prefix=f"{mcc_prefix}/telemetry")
-    app.include_router(aro_requests_router, prefix=f"{mcc_prefix}/requests")
-    app.include_router(main_commands_router, prefix=f"{mcc_prefix}/main-commands")
+    app.include_router(mission_commands_router, prefix=f"{mcc_prefix}/mission-commands")
+
+    # Routes for MCC test endpoints
+    # app.include_router(aro_requests_router, prefix=f"{mcc_prefix}/requests")
+    # app.include_router(main_commands_router, prefix=f"{mcc_prefix}/main-commands")
+    # app.include_router(logs_router, prefix=f"{mcc_prefix}/logs")
 
 
 def setup_middlewares(app: FastAPI) -> None:

gs/backend/api/middleware/cors_middleware.py

@@ -10,7 +10,10 @@ def add_cors_middleware(app: FastAPI) -> None:
     """
     app.add_middleware(
         CORSMiddleware,
-        allow_origins=["http://localhost:5173"],
+        allow_origins=[
+            "http://localhost:5173",
+            "http://localhost:5174",
+        ],
         allow_credentials=True,
         allow_methods=["*"],
         allow_headers=["*"],

gs/backend/api/v1/mcc/endpoints/mission_commands.py

@@ -0,0 +1,36 @@
+from fastapi import APIRouter
+from pydantic import BaseModel
+
+mission_commands_router = APIRouter(tags=["Mission Control"])
+
+
+class MissionCommandRequest(BaseModel):
+    """
+    Represents a body for a mission command request
+
+    Attributes:
+        command (str): Title of the command request.
+    """
+
+    command: str
+
+
+class MissionCommandResponse(BaseModel):
+    """
+    Represents a body for a mission command response
+
+    Attributes:
+        response (str): Response message.
+    """
+
+    response: str
+
+
+@mission_commands_router.post("/", response_model=MissionCommandResponse)
+async def execute_mission_command(cmd: MissionCommandRequest) -> MissionCommandResponse:
+    """
+    Gets the hardcoded mission command response for MCC frontend testing
+
+    :return: mission command respone
+    """
+    return MissionCommandResponse(response=f"Executed command: {cmd.command}")

gs/backend/config/config.py

@@ -6,7 +6,6 @@
 
 load_dotenv()
 
-
 # TODO: Make these throw an exception if they are None
 GS_DATABASE_USER = environ.get("GS_DATABASE_USER")
 GS_DATABASE_PASSWORD = environ.get("GS_DATABASE_PASSWORD")

gs/frontend/archive/aro/src/requests/requests.tsx

@@ -1,31 +1,46 @@
-import { type MouseEvent, useEffect, useState } from "react";
+import { type MouseEvent} from "react";
 import type { RequestItemData } from "./request-item-data.ts";
 import RequestItem from "./request-item.tsx";
 import { getRequestItems } from "./requests-api.ts";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 
 const Requests = () => {
-  // TODO: Switch to using react-query
-  const [data, setData] = useState<RequestItemData[]>([]);
-  useEffect(() => {
-    const getRequestItemsRegular = async () => {
-      const response = await getRequestItems();
-      setData(response);
-    };
-    getRequestItemsRegular();
-  }, []);
+
+  const {
+    data = [],
+    isLoading,
+  } = useQuery<RequestItemData[]>({
+    queryKey: ["requests"],
+    queryFn: getRequestItems,
+  });
+
+  const queryClient = useQueryClient();
 
   // Removes the request with the given id from the list of data
   // TODO: Cancel request on the backend
+  const cancelRequestMutation = useMutation({
+    mutationFn: async (id: number) => {
+      return id;
+    },
+    onSuccess: (id: number) => {
+      queryClient.setQueryData<RequestItemData[]>(["requests"], (old) =>
+        old ? old.filter((item) => item.id !== id) : []
+      );
+    },
+  });
+
   const cancelRequest = (id: number) => {
     return async (a: MouseEvent) => {
       a.preventDefault();
-      setData((prev: RequestItemData[]) =>
-        prev.filter((item) => item.id != id)
-      );
+      await cancelRequestMutation.mutateAsync(id);
     };
   };
 
-  if (data.length === 0) {
+  if (isLoading) {
+    return <div>Loading requests...</div>;
+  }
+
+  if (!data || data.length === 0) {
     return <div>You do not have any request created.</div>;
   }
 
@@ -46,13 +61,12 @@ const Requests = () => {
         </tr>
       </thead>
       <tbody>
-        {data.map((item: RequestItemData, key: number) => {
+        {data.map((item: RequestItemData) => {
           console.log(item);
           return (
-            <tr key={key}>
-              {" "}
-              <RequestItem {...item} cancelRequest={cancelRequest(item.id)} />
-            </tr>
+          <tr key={item.id}>
+            <RequestItem {...item} cancelRequest={cancelRequest(item.id)} />
+          </tr>
           );
         })}
       </tbody>

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

@@ -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:8000/api/v1/mcc/requests/");
+    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/archive/mcc/src/common/logs.tsx

@@ -1,40 +1,27 @@
 import Table from "react-bootstrap/Table";
-import { useEffect, useState } from "react";
-
-function LogItem() {
-  const [date, setDate] = useState(Date.now());
-  const [log, setLog] = useState("");
-  const [loading, setLoading] = useState(true);
-
-  const fetchLogData = async () => {
-    const response = await fetch(`http://localhost:5000/recent-logs/`);
-    const data = await response.json();
-    setDate(data.date);
-    setLog(data.log);
-    setLoading(false);
-  };
-
-  useEffect(() => {
-    fetchLogData();
-    const interval = setInterval(fetchLogData, 10000);
-    return () => clearInterval(interval);
-  }, []);
+import { useQuery } from '@tanstack/react-query';
 
+function LogItem({ log }: { log: any }) {
   return (
     <tr>
-      {loading ? <td>Loading...</td> : (
-        <>
-          <td>{date}</td>
-          <td>{log}</td>
-          {" "}
-        </>
-      )}
+      <td>{log.date}</td>
+      <td>{log.log}</td>
     </tr>
   );
 }
 
 function Logs() {
-  const count = 5;
+  const { data, isLoading} = useQuery({
+    queryKey: ["logData"],
+    queryFn: async () => {
+      const response = await fetch("http://localhost:8000/api/v1/mcc/logs/");
+      if (!response.ok) {
+        throw new Error("Network response was not ok");
+      }
+      return response.json();
+    },
+  });
+
   return (
     <div className="logs layout">
       <Table responsive="sm">
@@ -45,7 +32,11 @@ function Logs() {
           </tr>
         </thead>
         <tbody>
-          {[...Array(count).keys()].map((key) => <LogItem key={key} />)}
+          {isLoading ? (
+            <tr><td colSpan={2}>Loading...</td></tr>
+          ) : (
+            data?.map((log: any, idx: number) => <LogItem key={idx} log={log} />)
+          )}
         </tbody>
       </Table>
     </div>