Fix flight plan updates when waypoints are moved.

The store serializes everything; we can't store references.

Fixes https://github.com/dcs-liberation/dcs_liberation/issues/2055

client/src/api/flightsSlice.ts

@@ -6,7 +6,7 @@ import { LatLng } from "leaflet";
 
 interface FlightsState {
   flights: { [id: string]: Flight };
-  selected: Flight | null;
+  selected: string | null;
 }
 
 const initialState: FlightsState = {
@@ -37,8 +37,7 @@ export const flightsSlice = createSlice({
       state.selected = null;
     },
     selectFlight: (state, action: PayloadAction<string>) => {
-      const id = action.payload;
-      state.selected = state.flights[id];
+      state.selected = action.payload;
     },
     updateFlightPositions: (
       state,
@@ -77,5 +76,9 @@ export const {
 } = flightsSlice.actions;
 
 export const selectFlights = (state: RootState) => state.flights;
+export const selectSelectedFlight = (state: RootState) => {
+  const id = state.flights.selected;
+  return id ? state.flights.flights[id] : null;
+};
 
 export default flightsSlice.reducer;

client/src/components/flightplanslayer/FlightPlansLayer.tsx

@@ -1,5 +1,5 @@
 import { Flight } from "../../api/flight";
-import { selectFlights } from "../../api/flightsSlice";
+import { selectFlights, selectSelectedFlight } from "../../api/flightsSlice";
 import { useAppSelector } from "../../app/hooks";
 import FlightPlan from "../flightplan";
 import { LayerGroup } from "react-leaflet";
@@ -8,26 +8,29 @@ interface FlightPlansLayerProps {
   blue: boolean;
 }
 
+function SelectedFlightPlan(props: FlightPlansLayerProps) {
+  const flight = useAppSelector(selectSelectedFlight);
+  if (!flight) {
+    return <></>;
+  }
+
+  if (!props.blue) {
+    // We don't currently support playing as red, so nothing to draw.
+    return <></>;
+  }
+
+  return <FlightPlan key={flight.id} flight={flight} selected={true} />;
+}
+
 export default function FlightPlansLayer(props: FlightPlansLayerProps) {
   const flightData = useAppSelector(selectFlights);
   const isNotSelected = (flight: Flight) => {
     if (flightData.selected == null) {
       return true;
     }
-    return flightData.selected.id !== flight.id;
+    return flightData.selected !== flight.id;
   };
 
-  const selectedFlight =
-    flightData.selected && flightData.selected.blue === props.blue ? (
-      <FlightPlan
-        key={flightData.selected.id}
-        flight={flightData.selected}
-        selected={true}
-      />
-    ) : (
-      <></>
-    );
-
   return (
     <LayerGroup>
       {Object.values(flightData.flights)
@@ -38,7 +41,7 @@ export default function FlightPlansLayer(props: FlightPlansLayerProps) {
             <FlightPlan key={flight.id} flight={flight} selected={false} />
           );
         })}
-      {selectedFlight}
+      <SelectedFlightPlan {...props} />
     </LayerGroup>
   );
 }