From 30aebf25460b5a2a7556296548f94e2739c246aa Mon Sep 17 00:00:00 2001
From: Dan Albert <dan@gingerhq.net>
Date: Sun, 6 Mar 2022 17:40:28 -0800
Subject: [PATCH] Replace api.ts with auto-generated API.

All the slices will come later.
---
 client/src/api/api.ts                         | 40 -------------------
 client/src/app/store.ts                       |  6 +--
 .../components/controlpoints/ControlPoint.tsx | 16 ++++----
 .../src/components/flightplan/FlightPlan.tsx  | 30 +++++++++++---
 4 files changed, 35 insertions(+), 57 deletions(-)
 delete mode 100644 client/src/api/api.ts

diff --git a/client/src/api/api.ts b/client/src/api/api.ts
deleted file mode 100644
index b4e0b717..00000000
--- a/client/src/api/api.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { HTTP_URL } from "./backend";
-import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
-import { LatLng } from "leaflet";
-
-// TODO: We should be auto-generating this from FastAPI's openapi.json.
-export const apiSlice = createApi({
-  reducerPath: "api",
-  baseQuery: fetchBaseQuery({ baseUrl: HTTP_URL }),
-  tagTypes: ["ControlPoint"],
-  endpoints: (builder) => ({
-    getCommitBoundaryForFlight: builder.query<LatLng[], string>({
-      query: (flightId) => `flights/${flightId}/commit-boundary`,
-      providesTags: ["ControlPoint"],
-    }),
-    setControlPointDestination: builder.mutation<
-      void,
-      { id: number; destination: LatLng }
-    >({
-      query: ({ id, destination }) => ({
-        url: `control-points/${id}/destination`,
-        method: "PUT",
-        body: { lat: destination.lat, lng: destination.lng },
-        invalidatesTags: ["ControlPoint"],
-      }),
-    }),
-    controlPointCancelTravel: builder.mutation<void, number>({
-      query: (id) => ({
-        url: `control-points/${id}/cancel-travel`,
-        method: "PUT",
-        invalidatesTags: ["ControlPoint"],
-      }),
-    }),
-  }),
-});
-
-export const {
-  useGetCommitBoundaryForFlightQuery,
-  useSetControlPointDestinationMutation,
-  useControlPointCancelTravelMutation,
-} = apiSlice;
diff --git a/client/src/app/store.ts b/client/src/app/store.ts
index 203c427b..0d3d0239 100644
--- a/client/src/app/store.ts
+++ b/client/src/app/store.ts
@@ -1,4 +1,4 @@
-import { apiSlice } from "../api/api";
+import { baseApi } from "../api/baseApi";
 import combatReducer from "../api/combatSlice";
 import controlPointsReducer from "../api/controlPointsSlice";
 import flightsReducer from "../api/flightsSlice";
@@ -17,10 +17,10 @@ export const store = configureStore({
     map: mapReducer,
     supplyRoutes: supplyRoutesReducer,
     tgos: tgosReducer,
-    [apiSlice.reducerPath]: apiSlice.reducer,
+    [baseApi.reducerPath]: baseApi.reducer,
   },
   middleware: (getDefaultMiddleware) =>
-    getDefaultMiddleware().concat(apiSlice.middleware),
+    getDefaultMiddleware().concat(baseApi.middleware),
 });
 
 export type AppDispatch = typeof store.dispatch;
diff --git a/client/src/components/controlpoints/ControlPoint.tsx b/client/src/components/controlpoints/ControlPoint.tsx
index f84a7000..7630a8ca 100644
--- a/client/src/components/controlpoints/ControlPoint.tsx
+++ b/client/src/components/controlpoints/ControlPoint.tsx
@@ -1,9 +1,9 @@
-import {
-  useControlPointCancelTravelMutation,
-  useSetControlPointDestinationMutation,
-} from "../../api/api";
 import backend from "../../api/backend";
 import { ControlPoint as ControlPointModel } from "../../api/controlpoint";
+import {
+  useClearControlPointDestinationMutation,
+  useSetControlPointDestinationMutation,
+} from "../../api/liberationApi";
 import {
   Icon,
   LatLng,
@@ -118,7 +118,7 @@ function PrimaryMarker(props: ControlPointProps) {
 
   const [putDestination, { isLoading }] =
     useSetControlPointDestinationMutation();
-  const [cancelTravel] = useControlPointCancelTravelMutation();
+  const [cancelTravel] = useClearControlPointDestinationMutation();
 
   useEffect(() => {
     marker.current?.setTooltipContent(
@@ -159,7 +159,7 @@ function PrimaryMarker(props: ControlPointProps) {
           },
           contextmenu: () => {
             if (props.controlPoint.destination) {
-              cancelTravel(props.controlPoint.id).then(() => {
+              cancelTravel({ cpId: props.controlPoint.id }).then(() => {
                 resetDestination();
               });
             } else {
@@ -196,8 +196,8 @@ function PrimaryMarker(props: ControlPointProps) {
             setDestination(destination);
             try {
               await putDestination({
-                id: props.controlPoint.id,
-                destination: destination,
+                cpId: props.controlPoint.id,
+                body: { lat: destination.lat, lng: destination.lng },
               }).unwrap();
             } catch (error) {
               console.error("setDestination failed", error);
diff --git a/client/src/components/flightplan/FlightPlan.tsx b/client/src/components/flightplan/FlightPlan.tsx
index 6a631b43..51911dc5 100644
--- a/client/src/components/flightplan/FlightPlan.tsx
+++ b/client/src/components/flightplan/FlightPlan.tsx
@@ -1,6 +1,7 @@
-import { useGetCommitBoundaryForFlightQuery } from "../../api/api";
 import { Flight } from "../../api/flight";
+import { useGetCommitBoundaryForFlightQuery } from "../../api/liberationApi";
 import WaypointMarker from "../waypointmarker";
+import { LatLng } from "leaflet";
 import { ReactElement } from "react";
 import { Polyline } from "react-leaflet";
 
@@ -66,14 +67,31 @@ interface CommitBoundaryProps {
 }
 
 function CommitBoundary(props: CommitBoundaryProps) {
-  const { data, error, isLoading } = useGetCommitBoundaryForFlightQuery(
-    props.flightId
-  );
-  if (isLoading || error || !data) {
+  const { data, error, isLoading } = useGetCommitBoundaryForFlightQuery({
+    flightId: props.flightId,
+  });
+  if (isLoading) {
     return <></>;
   }
+  if (error) {
+    console.error(`Error loading commit boundary for ${props.flightId}`, error);
+    return <></>;
+  }
+  if (!data) {
+    console.log(
+      `Null response data when loading commit boundary for ${props.flightId}`
+    );
+    return <></>;
+  }
+  // TODO: Fix the response model and clean up.
+  const positions = data.map(([lat, lng]) => new LatLng(lat, lng));
   return (
-    <Polyline positions={data} color="#ffff00" weight={1} interactive={false} />
+    <Polyline
+      positions={positions}
+      color="#ffff00"
+      weight={1}
+      interactive={false}
+    />
   );
 }