Reorganize React project structure.

Whatever I was doing was getting out of control :)

client/src/App.tsx

@@ -1,12 +1,12 @@
 import "./App.css";
 
-import { ControlPoint } from "./game/controlpoint";
+import { ControlPoint } from "./api/controlpoint";
-import { Flight } from "./game/flight";
+import { Flight } from "./api/flight";
 import { LatLng } from "leaflet";
-import { LiberationMap } from "./map/liberationmap/LiberationMap";
+import LiberationMap from "./components/liberationmap";
 import axios from "axios";
-import { registerFlight } from "./game/ato/atoSlice";
+import { registerFlight } from "./api/flightsSlice";
-import { setControlPoints } from "./game/theater/theaterSlice";
+import { setControlPoints } from "./api/controlPointsSlice";
 import { useAppDispatch } from "./app/hooks";
 import { useEffect } from "react";
 

client/src/api/controlPointsSlice.ts

@@ -0,0 +1,22 @@
+import { PayloadAction, createSlice } from "@reduxjs/toolkit";
+
+import { ControlPoint } from "./controlpoint";
+import { RootState } from "../app/store";
+
+const initialState: ControlPoint[] = [];
+
+export const controlPointsSlice = createSlice({
+  name: "controlPoints",
+  initialState,
+  reducers: {
+    setControlPoints: (state, action: PayloadAction<ControlPoint[]>) => {
+      state = action.payload;
+    },
+  },
+});
+
+export const { setControlPoints } = controlPointsSlice.actions;
+
+export const selectControlPoints = (state: RootState) => state.controlPoints;
+
+export default controlPointsSlice.reducer;

client/src/api/flightsSlice.ts

@@ -1,20 +1,20 @@
 import { PayloadAction, createSlice } from "@reduxjs/toolkit";
 
-import { Flight } from "../flight";
+import { Flight } from "./flight";
-import { RootState } from "../../app/store";
+import { RootState } from "../app/store";
 
-interface AtoState {
+interface FlightsState {
   blue: { [id: string]: Flight };
   red: { [id: string]: Flight };
 }
 
-const initialState: AtoState = {
+const initialState: FlightsState = {
   blue: {},
   red: {},
 };
 
-export const atoSlice = createSlice({
+export const flightsSlice = createSlice({
-  name: "ato",
+  name: "flights",
   initialState,
   reducers: {
     clearFlights: (state) => {
@@ -23,11 +23,11 @@ export const atoSlice = createSlice({
     },
     registerFlight: (state, action: PayloadAction<Flight>) => {
       const flight = action.payload;
-      const ato = flight.blue ? state.blue : state.red;
+      const coalitionFlights = flight.blue ? state.blue : state.red;
-      if (flight.id in ato) {
+      if (flight.id in coalitionFlights) {
         console.log(`Overriding flight with ID: ${flight.id}`);
       }
-      ato[flight.id] = flight;
+      coalitionFlights[flight.id] = flight;
     },
     unregisterFlight: (state, action: PayloadAction<string>) => {
       const id = action.payload;
@@ -46,8 +46,8 @@ export const atoSlice = createSlice({
 });
 
 export const { clearFlights, registerFlight, unregisterFlight } =
-  atoSlice.actions;
+  flightsSlice.actions;
 
-export const selectAtos = (state: RootState) => state.atos;
+export const selectFlights = (state: RootState) => state.flights;
 
-export default atoSlice.reducer;
+export default flightsSlice.reducer;

client/src/app/store.ts

@@ -1,12 +1,12 @@
 import { Action, ThunkAction, configureStore } from "@reduxjs/toolkit";
 
-import atoReducer from "../game/ato/atoSlice";
+import controlPointsReducer from "../api/controlPointsSlice";
-import theaterReducer from "../game/theater/theaterSlice";
+import flightsReducer from "../api/flightsSlice";
 
 export const store = configureStore({
   reducer: {
-    atos: atoReducer,
+    flights: flightsReducer,
-    theater: theaterReducer,
+    controlPoints: controlPointsReducer,
   },
 });
 

client/src/components/controlpoints/ControlPoint.tsx

@@ -1,6 +1,7 @@
 import { Icon, Point } from "leaflet";
 import { Marker, Popup } from "react-leaflet";
-import { ControlPoint as ControlPointModel } from "../../game/controlpoint";
+
+import { ControlPoint as ControlPointModel } from "../../api/controlpoint";
 import { Symbol as MilSymbol } from "milsymbol";
 
 function iconForControlPoint(cp: ControlPointModel) {
@@ -19,7 +20,7 @@ interface ControlPointProps {
   controlPoint: ControlPointModel;
 }
 
-export function ControlPoint(props: ControlPointProps) {
+export default function ControlPoint(props: ControlPointProps) {
   return (
     <Marker
       position={props.controlPoint.position}

client/src/components/controlpoints/index.ts

@@ -0,0 +1 @@
+export { default } from "./ControlPoint";

client/src/components/controlpointslayer/ControlPointsLayer.tsx

@@ -1,9 +1,9 @@
+import ControlPoint from "../controlpoints";
 import { LayerGroup } from "react-leaflet";
+import { selectControlPoints } from "../../api/controlPointsSlice";
 import { useAppSelector } from "../../app/hooks";
-import { selectControlPoints } from "../../game/theater/theaterSlice";
-import { ControlPoint } from "../controlpoint/ControlPoint";
 
-export function ControlPointsLayer() {
+export default function ControlPointsLayer() {
   const controlPoints = useAppSelector(selectControlPoints);
   return (
     <LayerGroup>

client/src/components/controlpointslayer/index.ts

@@ -0,0 +1 @@
+export { default } from "./ControlPointsLayer";

client/src/components/flightplan/FlightPlan.tsx

@@ -1,4 +1,4 @@
-import { Flight } from "../../game/flight";
+import { Flight } from "../../api/flight";
 import { Polyline } from "react-leaflet";
 
 const BLUE_PATH = "#0084ff";
@@ -9,7 +9,7 @@ interface FlightPlanProps {
   selected: boolean;
 }
 
-export function FlightPlanPath(props: FlightPlanProps) {
+function FlightPlanPath(props: FlightPlanProps) {
   const color = props.flight.blue ? BLUE_PATH : RED_PATH;
   const waypoints = props.flight.waypoints;
   if (waypoints == null) {
@@ -24,7 +24,7 @@ export function FlightPlanPath(props: FlightPlanProps) {
   );
 }
 
-export function FlightPlan(props: FlightPlanProps) {
+export default function FlightPlan(props: FlightPlanProps) {
   return (
     <>
       <FlightPlanPath {...props} />

client/src/components/flightplan/index.ts

@@ -0,0 +1 @@
+export { default } from "./FlightPlan";

client/src/components/flightplanslayer/FlightPlansLayer.tsx

@@ -1,14 +1,14 @@
-import { FlightPlan } from "../flightplan/FlightPlan";
+import FlightPlan from "../flightplan";
 import { LayerGroup } from "react-leaflet";
-import { selectAtos } from "../../game/ato/atoSlice";
+import { selectFlights } from "../../api/flightsSlice";
 import { useAppSelector } from "../../app/hooks";
 
 interface FlightPlansLayerProps {
   blue: boolean;
 }
 
-export function FlightPlansLayer(props: FlightPlansLayerProps) {
+export default function FlightPlansLayer(props: FlightPlansLayerProps) {
-  const atos = useAppSelector(selectAtos);
+  const atos = useAppSelector(selectFlights);
   const flights = props.blue ? atos.blue : atos.red;
   return (
     <LayerGroup>

client/src/components/flightplanslayer/index.ts

@@ -0,0 +1 @@
+export { default } from "./FlightPlansLayer";

client/src/components/liberationmap/LiberationMap.tsx

@@ -1,15 +1,16 @@
-import { MapContainer } from "react-leaflet";
-import { BasemapLayer } from "react-esri-leaflet";
-import { ControlPointsLayer } from "../controlpointslayer/ControlPointsLayer";
 import "./LiberationMap.css";
+
+import { BasemapLayer } from "react-esri-leaflet";
+import ControlPointsLayer from "../controlpointslayer";
+import FlightPlansLayer from "../flightplanslayer";
 import { LatLng } from "leaflet";
-import { FlightPlansLayer } from "../flightplanslayer/FlightPlansLayer";
+import { MapContainer } from "react-leaflet";
 
 interface GameProps {
   mapCenter: LatLng;
 }
 
-export function LiberationMap(props: GameProps) {
+export default function LiberationMap(props: GameProps) {
   return (
     <MapContainer zoom={8} center={props.mapCenter}>
       <BasemapLayer name="ImageryClarity" />

client/src/components/liberationmap/index.ts

@@ -0,0 +1 @@
+export { default } from "./LiberationMap";

client/src/game/theater/theaterSlice.ts

@@ -1,28 +0,0 @@
-import { createSlice, PayloadAction } from "@reduxjs/toolkit";
-import { RootState } from "../../app/store";
-import { ControlPoint } from "../controlpoint";
-
-interface TheaterState {
-  controlPoints: ControlPoint[];
-}
-
-const initialState: TheaterState = {
-  controlPoints: [],
-};
-
-export const theaterSlice = createSlice({
-  name: "theater",
-  initialState,
-  reducers: {
-    setControlPoints: (state, action: PayloadAction<ControlPoint[]>) => {
-      state.controlPoints = action.payload;
-    },
-  },
-});
-
-export const { setControlPoints } = theaterSlice.actions;
-
-export const selectControlPoints = (state: RootState) =>
-  state.theater.controlPoints;
-
-export default theaterSlice.reducer;