Replace api.ts with auto-generated API.

All the slices will come later.

client/src/api/api.ts

@@ -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;

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;

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);

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}
+    />
   );
 }