Run prettier across the react source.

client/src/App.test.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import App from "./App";
-import { render, screen } from '@testing-library/react';
+import { render, screen } from "@testing-library/react";
-import App from './App';
+import React from "react";
 
-test('renders learn react link', () => {
+test("renders learn react link", () => {
   render(<App />);
   const linkElement = screen.getByText(/learn react/i);
   expect(linkElement).toBeInTheDocument();

client/src/App.tsx

@@ -1,7 +1,7 @@
-import { LatLng } from "leaflet";
 import LiberationMap from "./components/liberationmap";
 import useEventStream from "./hooks/useEventSteam";
 import useInitialGameState from "./hooks/useInitialGameState";
+import { LatLng } from "leaflet";
 
 function App() {
   const mapCenter: LatLng = new LatLng(25.58, 54.9);

client/src/api/controlPointsSlice.ts

@@ -1,7 +1,6 @@
-import { PayloadAction, createSlice } from "@reduxjs/toolkit";
-
-import { ControlPoint } from "./controlpoint";
 import { RootState } from "../app/store";
+import { ControlPoint } from "./controlpoint";
+import { PayloadAction, createSlice } from "@reduxjs/toolkit";
 
 interface ControlPointsState {
   controlPoints: { [key: number]: ControlPoint };

client/src/api/eventstream.tsx

@@ -1,14 +1,13 @@
-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 { ControlPoint } from "./controlpoint";
+import { Flight } from "./flight";
+import { deselectFlight, selectFlight } from "./flightsSlice";
+import FrontLine from "./frontline";
+import Tgo from "./tgo";
 import { updateTgo } from "./tgosSlice";
+import { LatLng } from "leaflet";
 
 // Placeholder. We don't use this yet. This is just here so we can flesh out the
 // update events model.

client/src/api/flight.ts

@@ -1,5 +1,5 @@
-import { LatLng } from "leaflet";
 import { Waypoint } from "./waypoint";
+import { LatLng } from "leaflet";
 
 export interface Flight {
   id: string;

client/src/api/flightsSlice.ts

@@ -1,7 +1,6 @@
-import { PayloadAction, createSlice } from "@reduxjs/toolkit";
-
-import { Flight } from "./flight";
 import { RootState } from "../app/store";
+import { Flight } from "./flight";
+import { PayloadAction, createSlice } from "@reduxjs/toolkit";
 
 interface FlightsState {
   blue: { [id: string]: Flight };

client/src/api/frontLinesSlice.ts

@@ -1,7 +1,6 @@
-import { PayloadAction, createSlice } from "@reduxjs/toolkit";
-
-import FrontLine from "./frontline";
 import { RootState } from "../app/store";
+import FrontLine from "./frontline";
+import { PayloadAction, createSlice } from "@reduxjs/toolkit";
 
 interface FrontLinesState {
   fronts: FrontLine[];

client/src/api/supplyRoutesSlice.ts

@@ -1,7 +1,6 @@
-import { PayloadAction, createSlice } from "@reduxjs/toolkit";
-
 import { RootState } from "../app/store";
 import SupplyRoute from "./supplyroute";
+import { PayloadAction, createSlice } from "@reduxjs/toolkit";
 
 interface SupplyRoutesState {
   routes: SupplyRoute[];

client/src/api/tgosSlice.ts

@@ -1,7 +1,6 @@
-import { PayloadAction, createSlice } from "@reduxjs/toolkit";
-
 import { RootState } from "../app/store";
 import { Tgo } from "./tgo";
+import { PayloadAction, createSlice } from "@reduxjs/toolkit";
 
 interface TgosState {
   tgos: { [key: string]: Tgo };

client/src/app/hooks.ts

@@ -1,5 +1,5 @@
-import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
 import type { RootState, AppDispatch } from "./store";
+import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
 
 // Use throughout your app instead of plain `useDispatch` and `useSelector`
 export const useAppDispatch = () => useDispatch<AppDispatch>();

client/src/app/store.ts

@@ -1,10 +1,9 @@
-import { Action, ThunkAction, configureStore } from "@reduxjs/toolkit";
-
 import controlPointsReducer from "../api/controlPointsSlice";
 import flightsReducer from "../api/flightsSlice";
 import frontLinesReducer from "../api/frontLinesSlice";
 import supplyRoutesReducer from "../api/supplyRoutesSlice";
 import tgosReducer from "../api/tgosSlice";
+import { Action, ThunkAction, configureStore } from "@reduxjs/toolkit";
 
 export const store = configureStore({
   reducer: {

client/src/components/airdefenserangelayer/AirDefenseRangeLayer.tsx

@@ -1,8 +1,7 @@
-import { Circle, LayerGroup } from "react-leaflet";
-
 import Tgo from "../../api/tgo";
 import { selectTgos } from "../../api/tgosSlice";
 import { useAppSelector } from "../../app/hooks";
+import { Circle, LayerGroup } from "react-leaflet";
 
 interface TgoRangeCirclesProps {
   tgo: Tgo;

client/src/components/controlpoints/ControlPoint.tsx

@@ -1,9 +1,8 @@
-import { Icon, Point } from "leaflet";
-import { Marker, Tooltip } from "react-leaflet";
-
-import { ControlPoint as ControlPointModel } from "../../api/controlpoint";
-import { Symbol as MilSymbol } from "milsymbol";
 import backend from "../../api/backend";
+import { ControlPoint as ControlPointModel } from "../../api/controlpoint";
+import { Icon, Point } from "leaflet";
+import { Symbol as MilSymbol } from "milsymbol";
+import { Marker, Tooltip } from "react-leaflet";
 
 function iconForControlPoint(cp: ControlPointModel) {
   const symbol = new MilSymbol(cp.sidc, {

client/src/components/controlpointslayer/ControlPointsLayer.tsx

@@ -1,7 +1,7 @@
-import ControlPoint from "../controlpoints";
-import { LayerGroup } from "react-leaflet";
 import { selectControlPoints } from "../../api/controlPointsSlice";
 import { useAppSelector } from "../../app/hooks";
+import ControlPoint from "../controlpoints";
+import { LayerGroup } from "react-leaflet";
 
 export default function ControlPointsLayer() {
   const controlPoints = useAppSelector(selectControlPoints);

client/src/components/flightplan/FlightPlan.tsx

@@ -1,6 +1,6 @@
 import { Flight } from "../../api/flight";
-import { Polyline } from "react-leaflet";
 import WaypointMarker from "../waypointmarker";
+import { Polyline } from "react-leaflet";
 
 const BLUE_PATH = "#0084ff";
 const RED_PATH = "#c85050";

client/src/components/flightplanslayer/FlightPlansLayer.tsx

@@ -1,8 +1,8 @@
 import { Flight } from "../../api/flight";
-import FlightPlan from "../flightplan";
-import { LayerGroup } from "react-leaflet";
 import { selectFlights } from "../../api/flightsSlice";
 import { useAppSelector } from "../../app/hooks";
+import FlightPlan from "../flightplan";
+import { LayerGroup } from "react-leaflet";
 
 interface FlightPlansLayerProps {
   blue: boolean;

client/src/components/frontlineslayer/FrontLinesLayer.tsx

@@ -1,7 +1,7 @@
-import FrontLine from "../frontline";
-import { LayerGroup } from "react-leaflet";
 import { selectFrontLines } from "../../api/frontLinesSlice";
 import { useAppSelector } from "../../app/hooks";
+import FrontLine from "../frontline";
+import { LayerGroup } from "react-leaflet";
 
 export default function SupplyRoutesLayer() {
   const fronts = useAppSelector(selectFrontLines).fronts;

client/src/components/liberationmap/LiberationMap.tsx

@@ -1,15 +1,13 @@
-import "./LiberationMap.css";
-
-import { LayersControl, MapContainer, ScaleControl } from "react-leaflet";
-
 import AirDefenseRangeLayer from "../airdefenserangelayer";
-import { BasemapLayer } from "react-esri-leaflet";
 import ControlPointsLayer from "../controlpointslayer";
 import FlightPlansLayer from "../flightplanslayer";
 import FrontLinesLayer from "../frontlineslayer";
-import { LatLng } from "leaflet";
 import SupplyRoutesLayer from "../supplyrouteslayer";
 import TgosLayer from "../tgoslayer/TgosLayer";
+import "./LiberationMap.css";
+import { LatLng } from "leaflet";
+import { BasemapLayer } from "react-esri-leaflet";
+import { LayersControl, MapContainer, ScaleControl } from "react-leaflet";
 
 interface GameProps {
   mapCenter: LatLng;

client/src/components/socketprovider/socketprovider.tsx

@@ -1,8 +1,6 @@
 // Based on https://thenable.io/building-a-use-socket-hook-in-react.
-
-import { ReactChild, createContext, useEffect, useState } from "react";
-
 import { WEBSOCKET_URL } from "../../api/backend";
+import { ReactChild, createContext, useEffect, useState } from "react";
 
 const socket = new WebSocket(WEBSOCKET_URL);
 

client/src/components/supplyroute/SupplyRoute.tsx

@@ -1,9 +1,8 @@
-import { Polyline, Tooltip } from "react-leaflet";
-import { useEffect, useRef } from "react";
-
-import { Polyline as LPolyline } from "leaflet";
-import SplitLines from "../splitlines/SplitLines";
 import { SupplyRoute as SupplyRouteModel } from "../../api/supplyroute";
+import SplitLines from "../splitlines/SplitLines";
+import { Polyline as LPolyline } from "leaflet";
+import { useEffect, useRef } from "react";
+import { Polyline, Tooltip } from "react-leaflet";
 
 interface SupplyRouteProps {
   route: SupplyRouteModel;

client/src/components/supplyrouteslayer/SupplyRoutesLayer.tsx

@@ -1,7 +1,7 @@
-import { LayerGroup } from "react-leaflet";
-import SupplyRoute from "../supplyroute/SupplyRoute";
 import { selectSupplyRoutes } from "../../api/supplyRoutesSlice";
 import { useAppSelector } from "../../app/hooks";
+import SupplyRoute from "../supplyroute/SupplyRoute";
+import { LayerGroup } from "react-leaflet";
 
 export default function SupplyRoutesLayer() {
   const routes = useAppSelector(selectSupplyRoutes).routes;

client/src/components/tgos/Tgo.tsx

@@ -1,9 +1,8 @@
-import { Icon, Point } from "leaflet";
-import { Marker, Tooltip } from "react-leaflet";
-
-import { Symbol as MilSymbol } from "milsymbol";
-import SplitLines from "../splitlines/SplitLines";
 import { Tgo as TgoModel } from "../../api/tgo";
+import SplitLines from "../splitlines/SplitLines";
+import { Icon, Point } from "leaflet";
+import { Symbol as MilSymbol } from "milsymbol";
+import { Marker, Tooltip } from "react-leaflet";
 
 function iconForTgo(cp: TgoModel) {
   const symbol = new MilSymbol(cp.sidc, {

client/src/components/tgoslayer/TgosLayer.tsx

@@ -1,7 +1,7 @@
-import { LayerGroup } from "react-leaflet";
-import Tgo from "../tgos/Tgo";
 import { selectTgos } from "../../api/tgosSlice";
 import { useAppSelector } from "../../app/hooks";
+import Tgo from "../tgos/Tgo";
+import { LayerGroup } from "react-leaflet";
 
 interface TgosLayerProps {
   categories?: string[];

client/src/components/waypointmarker/WaypointMarker.tsx

@@ -1,11 +1,10 @@
-import { Marker, Tooltip, useMap, useMapEvent } from "react-leaflet";
+import { Waypoint } from "../../api/waypoint";
-import { MutableRefObject, useCallback, useRef } from "react";
-
 import { Icon } from "leaflet";
 import { Marker as LMarker } from "leaflet";
-import { Waypoint } from "../../api/waypoint";
 import icon from "leaflet/dist/images/marker-icon.png";
 import iconShadow from "leaflet/dist/images/marker-shadow.png";
+import { MutableRefObject, useCallback, useRef } from "react";
+import { Marker, Tooltip, useMap, useMapEvent } from "react-leaflet";
 
 const WAYPOINT_ICON = new Icon({
   iconUrl: icon,

client/src/hooks/useEventSteam.ts

@@ -1,8 +1,7 @@
-import { useCallback, useEffect } from "react";
-
 import { handleStreamedEvents } from "../api/eventstream";
 import { useAppDispatch } from "../app/hooks";
 import { useSocket } from "./useSocket";
+import { useCallback, useEffect } from "react";
 
 export const useEventStream = () => {
   const ws = useSocket();

client/src/hooks/useInitialGameState.tsx

@@ -1,13 +1,13 @@
+import backend from "../api/backend";
+import { setControlPoints } from "../api/controlPointsSlice";
 import { ControlPoint } from "../api/controlpoint";
 import { Flight } from "../api/flight";
+import { registerFlight } from "../api/flightsSlice";
+import { setFrontLines } from "../api/frontLinesSlice";
 import FrontLine from "../api/frontline";
+import { setSupplyRoutes } from "../api/supplyRoutesSlice";
 import SupplyRoute from "../api/supplyroute";
 import Tgo from "../api/tgo";
-import backend from "../api/backend";
-import { registerFlight } from "../api/flightsSlice";
-import { setControlPoints } from "../api/controlPointsSlice";
-import { setFrontLines } from "../api/frontLinesSlice";
-import { setSupplyRoutes } from "../api/supplyRoutesSlice";
 import { setTgos } from "../api/tgosSlice";
 import { useAppDispatch } from "../app/hooks";
 import { useEffect } from "react";

client/src/index.css

@@ -1,13 +1,13 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }

client/src/index.tsx

@@ -1,13 +1,11 @@
-import "./index.css";
-
-import * as serviceWorker from "./serviceWorker";
-
 import App from "./App";
-import { Provider } from "react-redux";
+import { store } from "./app/store";
+import { SocketProvider } from "./components/socketprovider/socketprovider";
+import "./index.css";
+import * as serviceWorker from "./serviceWorker";
 import React from "react";
 import ReactDOM from "react-dom";
-import { SocketProvider } from "./components/socketprovider/socketprovider";
+import { Provider } from "react-redux";
-import { store } from "./app/store";
 
 ReactDOM.render(
   <React.StrictMode>

client/src/serviceWorker.ts

@@ -11,9 +11,9 @@
 // opt-in, read https://bit.ly/CRA-PWA
 
 const isLocalhost = Boolean(
-  window.location.hostname === 'localhost' ||
+  window.location.hostname === "localhost" ||
     // [::1] is the IPv6 localhost address.
-    window.location.hostname === '[::1]' ||
+    window.location.hostname === "[::1]" ||
     // 127.0.0.0/8 are considered localhost for IPv4.
     window.location.hostname.match(
       /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
@@ -26,7 +26,7 @@ type Config = {
 };
 
 export function register(config?: Config) {
-  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+  if (process.env.NODE_ENV === "production" && "serviceWorker" in navigator) {
     // The URL constructor is available in all browsers that support SW.
     const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
     if (publicUrl.origin !== window.location.origin) {
@@ -36,7 +36,7 @@ export function register(config?: Config) {
       return;
     }
 
-    window.addEventListener('load', () => {
+    window.addEventListener("load", () => {
       const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
 
       if (isLocalhost) {
@@ -47,8 +47,8 @@ export function register(config?: Config) {
         // service worker/PWA documentation.
         navigator.serviceWorker.ready.then(() => {
           console.log(
-            'This web app is being served cache-first by a service ' +
+            "This web app is being served cache-first by a service " +
-              'worker. To learn more, visit https://bit.ly/CRA-PWA'
+              "worker. To learn more, visit https://bit.ly/CRA-PWA"
           );
         });
       } else {
@@ -69,14 +69,14 @@ function registerValidSW(swUrl: string, config?: Config) {
           return;
         }
         installingWorker.onstatechange = () => {
-          if (installingWorker.state === 'installed') {
+          if (installingWorker.state === "installed") {
             if (navigator.serviceWorker.controller) {
               // At this point, the updated precached content has been fetched,
               // but the previous service worker will still serve the older
               // content until all client tabs are closed.
               console.log(
-                'New content is available and will be used when all ' +
+                "New content is available and will be used when all " +
-                  'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
+                  "tabs for this page are closed. See https://bit.ly/CRA-PWA."
               );
 
               // Execute callback
@@ -87,7 +87,7 @@ function registerValidSW(swUrl: string, config?: Config) {
               // At this point, everything has been precached.
               // It's the perfect time to display a
               // "Content is cached for offline use." message.
-              console.log('Content is cached for offline use.');
+              console.log("Content is cached for offline use.");
 
               // Execute callback
               if (config && config.onSuccess) {
@@ -99,21 +99,21 @@ function registerValidSW(swUrl: string, config?: Config) {
       };
     })
     .catch((error) => {
-      console.error('Error during service worker registration:', error);
+      console.error("Error during service worker registration:", error);
     });
 }
 
 function checkValidServiceWorker(swUrl: string, config?: Config) {
   // Check if the service worker can be found. If it can't reload the page.
   fetch(swUrl, {
-    headers: { 'Service-Worker': 'script' },
+    headers: { "Service-Worker": "script" },
   })
     .then((response) => {
       // Ensure service worker exists, and that we really are getting a JS file.
-      const contentType = response.headers.get('content-type');
+      const contentType = response.headers.get("content-type");
       if (
         response.status === 404 ||
-        (contentType != null && contentType.indexOf('javascript') === -1)
+        (contentType != null && contentType.indexOf("javascript") === -1)
       ) {
         // No service worker found. Probably a different app. Reload the page.
         navigator.serviceWorker.ready.then((registration) => {
@@ -128,13 +128,13 @@ function checkValidServiceWorker(swUrl: string, config?: Config) {
     })
     .catch(() => {
       console.log(
-        'No internet connection found. App is running in offline mode.'
+        "No internet connection found. App is running in offline mode."
       );
     });
 }
 
 export function unregister() {
-  if ('serviceWorker' in navigator) {
+  if ("serviceWorker" in navigator) {
     navigator.serviceWorker.ready
       .then((registration) => {
         registration.unregister();

client/src/setupTests.ts

@@ -2,4 +2,4 @@
 // allows you to do things like:
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom/extend-expect';
+import "@testing-library/jest-dom/extend-expect";