Un-split the flight data by coalition.

This made one callsite cleaner at the expense of the others and the
state management.

client/src/api/flightsSlice.ts

@@ -4,14 +4,12 @@ import { PayloadAction, createSlice } from "@reduxjs/toolkit";
 import { LatLng } from "leaflet";
 
 interface FlightsState {
-  blue: { [id: string]: Flight };
-  red: { [id: string]: Flight };
+  flights: { [id: string]: Flight };
   selected: Flight | null;
 }
 
 const initialState: FlightsState = {
-  blue: {},
-  red: {},
+  flights: {},
   selected: null,
 };
 
@@ -20,46 +18,33 @@ export const flightsSlice = createSlice({
   initialState,
   reducers: {
     clearFlights: (state) => {
-      state.blue = {};
-      state.red = {};
+      state.flights = {};
     },
     registerFlight: (state, action: PayloadAction<Flight>) => {
       const flight = action.payload;
-      const coalitionFlights = flight.blue ? state.blue : state.red;
-      if (flight.id in coalitionFlights) {
+      if (flight.id in state.flights) {
         console.log(`Overriding flight with ID: ${flight.id}`);
       }
-      coalitionFlights[flight.id] = flight;
+      state.flights[flight.id] = flight;
     },
     unregisterFlight: (state, action: PayloadAction<string>) => {
       const id = action.payload;
-      if (id in state.blue) {
-        delete state.blue[id];
-      } else if (id in state.red) {
-        delete state.red[id];
-      } else {
-        console.log(
-          `Could not delete flight with ID ${id} because no flight with that ` +
-            `ID exists`
-        );
-      }
+      delete state.flights[id];
     },
     updateFlight: (state, action: PayloadAction<Flight>) => {
       const flight = action.payload;
-      const ato = flight.blue ? state.blue : state.red;
-      ato[flight.id] = flight;
+      state.flights[flight.id] = flight;
     },
     deselectFlight: (state) => {
       state.selected = null;
     },
     selectFlight: (state, action: PayloadAction<string>) => {
       const id = action.payload;
-      state.selected = state.blue[id];
+      state.selected = state.flights[id];
     },
     updateFlightPosition: (state, action: PayloadAction<[string, LatLng]>) => {
       const [id, position] = action.payload;
-      const ato = id in state.blue ? state.blue : state.red;
-      ato[id].position = position;
+      state.flights[id].position = position;
     },
   },
 });

client/src/components/aircraftlayer/AircraftLayer.tsx

@@ -4,13 +4,10 @@ import Aircraft from "../aircraft";
 import { LayerGroup } from "react-leaflet";
 
 export default function AircraftLayer() {
-  const atos = useAppSelector(selectFlights);
+  const flights = useAppSelector(selectFlights).flights;
   return (
     <LayerGroup>
-      {Object.values(atos.blue).map((flight) => {
-        return <Aircraft key={flight.id} flight={flight} />;
-      })}
-      {Object.values(atos.red).map((flight) => {
+      {Object.values(flights).map((flight) => {
         return <Aircraft key={flight.id} flight={flight} />;
       })}
     </LayerGroup>

client/src/components/flightplanslayer/FlightPlansLayer.tsx

@@ -9,25 +9,30 @@ interface FlightPlansLayerProps {
 }
 
 export default function FlightPlansLayer(props: FlightPlansLayerProps) {
-  const atos = useAppSelector(selectFlights);
-  const flights = props.blue ? atos.blue : atos.red;
+  const flightData = useAppSelector(selectFlights);
   const isNotSelected = (flight: Flight) => {
-    if (atos.selected == null) {
+    if (flightData.selected == null) {
       return true;
     }
-    return atos.selected.id !== flight.id;
+    return flightData.selected.id !== flight.id;
   };
 
-  const selectedFlight = atos.selected ? (
-    <FlightPlan key={atos.selected.id} flight={atos.selected} selected={true} />
-  ) : (
-    <></>
-  );
+  const selectedFlight =
+    flightData.selected && flightData.selected.blue === props.blue ? (
+      <FlightPlan
+        key={flightData.selected.id}
+        flight={flightData.selected}
+        selected={true}
+      />
+    ) : (
+      <></>
+    );
 
   return (
     <LayerGroup>
-      {Object.values(flights)
+      {Object.values(flightData.flights)
         .filter(isNotSelected)
+        .filter((flight) => props.blue === flight.blue)
         .map((flight) => {
           return (
             <FlightPlan key={flight.id} flight={flight} selected={false} />