Un-split the flight data by coalition.

This made one callsite cleaner at the expense of the others and the
state management.
This commit is contained in:
Dan Albert 2022-03-04 19:48:42 -08:00
parent 59f734dd07
commit b6457ae434
3 changed files with 26 additions and 39 deletions

View File

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

View File

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

View File

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