Draw commit boundaries in the new map.

https://github.com/dcs-liberation/dcs_liberation/issues/2039

client/src/api/api.ts

@@ -0,0 +1,16 @@
+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 }),
+  endpoints: (builder) => ({
+    getCommitBoundaryForFlight: builder.query<LatLng[], string>({
+      query: (flightId) => `flights/${flightId}/commit-boundary`,
+    }),
+  }),
+});
+
+export const { useGetCommitBoundaryForFlightQuery } = apiSlice;

client/src/api/backend.ts

@@ -1,7 +1,9 @@
 import axios from "axios";
 
+export const HTTP_URL = "http://[::1]:5000/";
+
 export const backend = axios.create({
-  baseURL: "http://[::1]:5000/",
+  baseURL: HTTP_URL,
 });
 
 export const WEBSOCKET_URL = "ws://[::1]:5000/eventstream";

client/src/app/store.ts

@@ -1,3 +1,4 @@
+import { apiSlice } from "../api/api";
 import combatReducer from "../api/combatSlice";
 import controlPointsReducer from "../api/controlPointsSlice";
 import flightsReducer from "../api/flightsSlice";
@@ -14,7 +15,10 @@ export const store = configureStore({
     frontLines: frontLinesReducer,
     supplyRoutes: supplyRoutesReducer,
     tgos: tgosReducer,
+    [apiSlice.reducerPath]: apiSlice.reducer,
   },
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware().concat(apiSlice.middleware),
 });
 
 export type AppDispatch = typeof store.dispatch;

client/src/components/flightplan/FlightPlan.tsx

@@ -1,3 +1,4 @@
+import { useGetCommitBoundaryForFlightQuery } from "../../api/api";
 import { Flight } from "../../api/flight";
 import WaypointMarker from "../waypointmarker";
 import { ReactElement } from "react";
@@ -59,11 +60,39 @@ const WaypointMarkers = (props: FlightPlanProps) => {
   return <>{markers}</>;
 };
 
+interface CommitBoundaryProps {
+  flightId: string;
+  selected: boolean;
+}
+
+function CommitBoundary(props: CommitBoundaryProps) {
+  const { data, error, isLoading } = useGetCommitBoundaryForFlightQuery(
+    props.flightId
+  );
+  if (isLoading || error || !data) {
+    return <></>;
+  }
+  return (
+    <Polyline positions={data} color="#ffff00" weight={1} interactive={false} />
+  );
+}
+
+function CommitBoundaryIfSelected(props: CommitBoundaryProps) {
+  if (!props.selected) {
+    return <></>;
+  }
+  return <CommitBoundary {...props} />;
+}
+
 export default function FlightPlan(props: FlightPlanProps) {
   return (
     <>
       <FlightPlanPath {...props} />
       <WaypointMarkers {...props} />
+      <CommitBoundaryIfSelected
+        flightId={props.flight.id}
+        selected={props.selected}
+      />
     </>
   );
 }