From b4edd5d841d8c1e69519258b43bd451914d15d80 Mon Sep 17 00:00:00 2001
From: Dan Albert <dan@gingerhq.net>
Date: Sat, 5 Mar 2022 02:23:14 -0800
Subject: [PATCH] Draw commit boundaries in the new map.

https://github.com/dcs-liberation/dcs_liberation/issues/2039
---
 client/src/api/api.ts                         | 16 ++++++++++
 client/src/api/backend.ts                     |  4 ++-
 client/src/app/store.ts                       |  4 +++
 .../src/components/flightplan/FlightPlan.tsx  | 29 +++++++++++++++++++
 4 files changed, 52 insertions(+), 1 deletion(-)
 create mode 100644 client/src/api/api.ts

diff --git a/client/src/api/api.ts b/client/src/api/api.ts
new file mode 100644
index 00000000..1785a61d
--- /dev/null
+++ b/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;
diff --git a/client/src/api/backend.ts b/client/src/api/backend.ts
index ca2e6133..8bc501b8 100644
--- a/client/src/api/backend.ts
+++ b/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";
diff --git a/client/src/app/store.ts b/client/src/app/store.ts
index 052146c8..48492b87 100644
--- a/client/src/app/store.ts
+++ b/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;
diff --git a/client/src/components/flightplan/FlightPlan.tsx b/client/src/components/flightplan/FlightPlan.tsx
index 2110b46b..6a631b43 100644
--- a/client/src/components/flightplan/FlightPlan.tsx
+++ b/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}
+      />
     </>
   );
 }