Update the react map for some new events.

client/src/api/controlPointsSlice.ts

@@ -4,11 +4,11 @@ import { ControlPoint } from "./controlpoint";
 import { RootState } from "../app/store";
 
 interface ControlPointsState {
-  controlPoints: ControlPoint[];
+  controlPoints: { [key: number]: ControlPoint };
 }
 
 const initialState: ControlPointsState = {
-  controlPoints: [],
+  controlPoints: {},
 };
 
 export const controlPointsSlice = createSlice({
@@ -16,12 +16,20 @@ export const controlPointsSlice = createSlice({
   initialState,
   reducers: {
     setControlPoints: (state, action: PayloadAction<ControlPoint[]>) => {
-      state.controlPoints = action.payload;
+      state.controlPoints = {};
+      for (const cp of action.payload) {
+        state.controlPoints[cp.id] = cp;
+      }
+    },
+    updateControlPoint: (state, action: PayloadAction<ControlPoint>) => {
+      const cp = action.payload;
+      state.controlPoints[cp.id] = cp;
     },
   },
 });
 
-export const { setControlPoints } = controlPointsSlice.actions;
+export const { setControlPoints, updateControlPoint } =
+  controlPointsSlice.actions;
 
 export const selectControlPoints = (state: RootState) => state.controlPoints;
 

client/src/api/eventstream.tsx

@@ -1,8 +1,14 @@
 import { deselectFlight, selectFlight } from "./flightsSlice";
 
 import { AppDispatch } from "../app/store";
+import { ControlPoint } from "./controlpoint";
 import { Flight } from "./flight";
+import FrontLine from "./frontline";
 import { LatLng } from "leaflet";
+import Tgo from "./tgo";
+import backend from "./backend";
+import { updateControlPoint } from "./controlPointsSlice";
+import { updateTgo } from "./tgosSlice";
 
 // Placeholder. We don't use this yet. This is just here so we can flesh out the
 // update events model.
@@ -21,6 +27,11 @@ interface GameUpdateEvents {
   deleted_flights: string[];
   selected_flight: string | null;
   deselected_flight: boolean;
+  new_front_lines: FrontLine[];
+  updated_front_lines: string[];
+  deleted_front_lines: string[];
+  updated_tgos: string[];
+  updated_control_points: number[];
 }
 
 export const handleStreamedEvents = (
@@ -33,4 +44,16 @@ export const handleStreamedEvents = (
   if (events.selected_flight != null) {
     dispatch(selectFlight(events.selected_flight));
   }
+  for (const id of events.updated_tgos) {
+    backend.get(`/tgos/${id}`).then((response) => {
+      const tgo = response.data as Tgo;
+      dispatch(updateTgo(tgo));
+    });
+  }
+  for (const id of events.updated_control_points) {
+    backend.get(`/control-points/${id}`).then((response) => {
+      const cp = response.data as ControlPoint;
+      dispatch(updateControlPoint(cp));
+    });
+  }
 };

client/src/api/tgo.ts

@@ -1,12 +1,5 @@
 import { LatLng } from "leaflet";
 
-export enum TgoType {
-  AIR_DEFENSE = "Air defenses",
-  FACTORY = "Factories",
-  SHIP = "Ships",
-  OTHER = "Other ground objects",
-}
-
 export interface Tgo {
   id: string;
   name: string;

client/src/api/tgosSlice.ts

@@ -1,16 +1,14 @@
 import { PayloadAction, createSlice } from "@reduxjs/toolkit";
-import { Tgo, TgoType } from "./tgo";
 
 import { RootState } from "../app/store";
+import { Tgo } from "./tgo";
 
 interface TgosState {
-  tgosByType: { [key: string]: Tgo[] };
+  tgos: { [key: string]: Tgo };
 }
 
 const initialState: TgosState = {
-  tgosByType: Object.fromEntries(
-    Object.values(TgoType).map((key) => [key, []])
-  ),
+  tgos: {},
 };
 
 export const tgosSlice = createSlice({
@@ -18,33 +16,19 @@ export const tgosSlice = createSlice({
   initialState,
   reducers: {
     setTgos: (state, action: PayloadAction<Tgo[]>) => {
-      state.tgosByType = initialState.tgosByType;
-      for (const key of Object.values(TgoType)) {
-        state.tgosByType[key] = [];
-      }
+      state.tgos = {};
       for (const tgo of action.payload) {
-        var type;
-        switch (tgo.category) {
-          case "aa":
-            type = TgoType.AIR_DEFENSE;
-            break;
-          case "factory":
-            type = TgoType.FACTORY;
-            break;
-          case "ship":
-            type = TgoType.SHIP;
-            break;
-          default:
-            type = TgoType.OTHER;
-            break;
-        }
-        state.tgosByType[type].push(tgo);
+        state.tgos[tgo.id] = tgo;
       }
     },
+    updateTgo: (state, action: PayloadAction<Tgo>) => {
+      const tgo = action.payload;
+      state.tgos[tgo.id] = tgo;
+    },
   },
 });
 
-export const { setTgos } = tgosSlice.actions;
+export const { setTgos, updateTgo } = tgosSlice.actions;
 
 export const selectTgos = (state: RootState) => state.tgos;