Add websocket handling for selected flights.

client/src/hooks/useEventSteam.ts

@@ -0,0 +1,26 @@
+import { useCallback, useEffect } from "react";
+
+import { handleStreamedEvents } from "../api/eventstream";
+import { useAppDispatch } from "../app/hooks";
+import { useSocket } from "./useSocket";
+
+export const useEventStream = () => {
+  const ws = useSocket();
+  const dispatch = useAppDispatch();
+
+  const onMessage = useCallback(
+    (message) => {
+      handleStreamedEvents(dispatch, JSON.parse(message.data));
+    },
+    [dispatch]
+  );
+
+  useEffect(() => {
+    ws.addEventListener("message", onMessage);
+    return () => {
+      ws.removeEventListener("message", onMessage);
+    };
+  });
+};
+
+export default useEventStream;

client/src/hooks/useInitialGameState.tsx

@@ -0,0 +1,37 @@
+import { ControlPoint } from "../api/controlpoint";
+import { Flight } from "../api/flight";
+import backend from "../api/backend";
+import { registerFlight } from "../api/flightsSlice";
+import { setControlPoints } from "../api/controlPointsSlice";
+import { useAppDispatch } from "../app/hooks";
+import { useEffect } from "react";
+
+// TODO: This should probably be distinct useControlPoints, useFlights, etc that
+// are smart enough to only initialize once which get called in the components
+// that use them rather than forcibly loading the whole game in the root
+// component.
+export const useInitialGameState = () => {
+  const dispatch = useAppDispatch();
+  useEffect(() => {
+    backend
+      .get("/control-points")
+      .catch((error) => console.log(`Error fetching control points: ${error}`))
+      .then((response) => {
+        if (response != null) {
+          dispatch(setControlPoints(response.data as ControlPoint[]));
+        }
+      });
+    backend
+      .get("/flights?with_waypoints=true")
+      .catch((error) => console.log(`Error fetching flights: ${error}`))
+      .then((response) => {
+        if (response != null) {
+          for (const flight of response.data) {
+            dispatch(registerFlight(flight as Flight));
+          }
+        }
+      });
+  });
+};
+
+export default useInitialGameState;

client/src/hooks/useSocket.ts

@@ -0,0 +1,8 @@
+import { SocketContext } from "../components/socketprovider/socketprovider";
+import { useContext } from "react";
+
+export const useSocket = () => {
+  const socket = useContext(SocketContext);
+
+  return socket;
+};