Revert "refactor: use custom hook instead of breaking rules of hooks"

This reverts commit 68e6377.

src/instruments/src/Common/simVars.tsx

@@ -1,10 +1,10 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useInteractionEvents, useUpdate } from './hooks';
 
-export type SimVarSetter = <T extends SimVarValue>(oldValue: T) => T;
+type SimVarSetter = <T extends SimVarValue>(oldValue: T) => T;
 
 type UnitName = SimVar.SimVarUnit;
-export type SimVarValue = number | any;
+type SimVarValue = number | any;
 
 /**
  * The useSimVar hook provides an easy way to read and write SimVars from React.

src/instruments/src/EFB/Ground/Pages/Payload/Payload.tsx

@@ -5,8 +5,8 @@ import { useSimVar } from '@instruments/common/simVars';
 import { Units } from '@shared/units';
 import { usePersistentProperty } from '@instruments/common/persistence';
 import { BitFlags } from '@shared/bitFlags';
+import { useBitFlags } from '@instruments/common/bitFlags';
 import { round } from 'lodash';
-import { useCargo, useSeats } from '@instruments/common/seatMap';
 import { CargoWidget } from './Seating/CargoWidget';
 import { ChartWidget } from './Chart/ChartWidget';
 import { PaxStationInfo, CargoStationInfo } from './Seating/Constants';
@@ -23,8 +23,39 @@ import { useAppSelector } from '../../../Store/store';
 export const Payload = () => {
     const { usingMetric } = Units;
 
-    const [pax, paxDesired, setPaxDesired, activeFlags, desiredFlags, setActiveFlags, setDesiredFlags] = useSeats(Loadsheet.seatMap);
-    const [cargo, cargoDesired, setCargoDesired] = useCargo(Loadsheet.cargoMap);
+    const pax: number[] = [];
+    const paxDesired: number[] = [];
+    const setPaxDesired: ((newValueOrSetter: any) => void)[] = [];
+    const activeFlags: BitFlags[] = [];
+    const setActiveFlags: ((newValueOrSetter: any) => void)[] = [];
+    const desiredFlags: BitFlags[] = [];
+    const setDesiredFlags: ((newValueOrSetter: any) => void)[] = [];
+
+    const cargo: number[] = [];
+    const cargoDesired: number[] = [];
+    const setCargoDesired: ((newValueOrSetter: any) => void)[] = [];
+
+    Loadsheet.seatMap.forEach((station) => {
+        const [stationPax] = useSimVar(`L:${station.simVar}`, 'Number', 300);
+        pax.push(stationPax);
+        const [stationPaxDesired, setStationPaxDesired] = useSimVar(`L:${station.simVar}_DESIRED`, 'Number', 300);
+        paxDesired.push(stationPaxDesired);
+        setPaxDesired.push(setStationPaxDesired);
+        const [pFlg, setPFlg] = useBitFlags(station.bitFlags);
+        activeFlags.push(pFlg);
+        setActiveFlags.push(setPFlg);
+        const [pFlgDesired, setPFlgDesired] = useBitFlags(`${station.bitFlags}_DESIRED`);
+        desiredFlags.push(pFlgDesired);
+        setDesiredFlags.push(setPFlgDesired);
+    });
+
+    Loadsheet.cargoMap.forEach((station) => {
+        const [stationWeight] = useSimVar(`L:${station.simVar}`, 'Number', 300);
+        cargo.push(stationWeight);
+        const [stationWeightDesired, setStationWeightDesired] = useSimVar(`L:${station.simVar}_DESIRED`, 'Number', 300);
+        cargoDesired.push(stationWeightDesired);
+        setCargoDesired.push(setStationWeightDesired);
+    });
 
     const massUnitForDisplay = usingMetric ? 'KGS' : 'LBS';
 
@@ -55,11 +86,11 @@ export const Payload = () => {
     }, [...paxDesired]);
     const [clicked, setClicked] = useState(false);
 
-    const totalCargoDesired = useMemo(() => ((cargoDesired && cargoDesired.length > 0) ? cargoDesired.reduce((a, b) => a + b) : -1), [...cargoDesired, ...paxDesired]);
+    const totalCargoDesired = useMemo(() => ((cargoDesired && cargoDesired.length > 0) ? cargoDesired.reduce((a, b) => parseInt(a) + parseInt(b)) : -1), [...cargoDesired, ...paxDesired]);
 
     const [cargoStationSize, setCargoStationLen] = useState<number[]>([]);
 
-    const totalCargo = useMemo(() => ((cargo && cargo.length > 0) ? cargo.reduce((a, b) => a + b) : -1), [...cargo, ...pax]);
+    const totalCargo = useMemo(() => ((cargo && cargo.length > 0) ? cargo.reduce((a, b) => parseInt(a) + parseInt(b)) : -1), [...cargo, ...pax]);
     const maxCargo = useMemo(() => ((cargoStationSize && cargoStationSize.length > 0) ? cargoStationSize.reduce((a, b) => a + b) : -1), [cargoStationSize]);
 
     const [centerCurrent] = useSimVar('FUEL TANK CENTER QUANTITY', 'Gallons', 2_000);
@@ -157,7 +188,7 @@ export const Payload = () => {
                 choices.splice(chosen, 1);
             }
         }
-        setActiveFlags(bitFlags, stationIndex);
+        setActiveFlags[stationIndex](bitFlags);
     }, [...pax, ...activeFlags]);
 
     const chooseDesiredSeats = useCallback((stationIndex: number, choices: number[], numChoose: number) => {
@@ -169,7 +200,7 @@ export const Payload = () => {
                 choices.splice(chosen, 1);
             }
         }
-        setDesiredFlags(bitFlags, stationIndex);
+        setDesiredFlags[stationIndex](bitFlags);
     }, [...paxDesired, ...desiredFlags]);
 
     const calculateSeatOptions = useCallback((stationIndex: number, increase: boolean): number[] => {
@@ -187,7 +218,7 @@ export const Payload = () => {
 
         const fillStation = (stationIndex: number, percent: number, paxToFill: number) => {
             const pax = Math.min(Math.trunc(percent * paxToFill), stationSize[stationIndex]);
-            setPaxDesired(pax, stationIndex);
+            setPaxDesired[stationIndex](pax);
             paxRemaining -= pax;
 
             const paxCount = returnNumSeats(stationIndex, false, activeFlags);
@@ -207,10 +238,10 @@ export const Payload = () => {
 
         let remainingWeight = loadableCargoWeight;
 
-        async function fillCargo(cargoStation: number, percent: number, loadableCargoWeight: number) {
-            const cargoWeight = Math.round(percent * loadableCargoWeight);
-            remainingWeight -= cargoWeight;
-            setCargoDesired(cargoWeight, cargoStation);
+        async function fillCargo(station: number, percent: number, loadableCargoWeight: number) {
+            const c = Math.round(percent * loadableCargoWeight);
+            remainingWeight -= c;
+            setCargoDesired[station](c);
         }
 
         for (let i = cargoDesired.length - 1; i > 0; i--) {
@@ -269,7 +300,7 @@ export const Payload = () => {
 
     const onClickCargo = useCallback((cargoStation, e) => {
         const cargoPercent = Math.min(Math.max(0, e.nativeEvent.offsetX / cargoMap[cargoStation].progressBarWidth), 1);
-        setCargoDesired(Math.round(Units.kilogramToUser(cargoMap[cargoStation].weight) * cargoPercent), cargoStation);
+        setCargoDesired[cargoStation](Math.round(Units.kilogramToUser(cargoMap[cargoStation].weight) * cargoPercent));
     }, [cargoMap]);
 
     const onClickSeat = useCallback((station: number, seatId: number) => {
@@ -281,15 +312,15 @@ export const Payload = () => {
 
         if (bitFlags.getBitIndex(seatId)) {
             newPax -= 1;
-            setPaxDesired(Math.max(paxDesired[station] - 1, 0), station);
+            setPaxDesired[station](Math.max(paxDesired[station] - 1, 0));
         } else {
             newPax += 1;
-            setPaxDesired(Math.min(paxDesired[station] + 1, stationSize[station]), station);
+            setPaxDesired[station](Math.min(paxDesired[station] + 1, stationSize[station]));
         }
 
         setTargetCargo(newPax, freight);
         bitFlags.toggleBitIndex(seatId);
-        setDesiredFlags(bitFlags, station);
+        setDesiredFlags[station](bitFlags);
         setTimeout(() => setClicked(false), 500);
     }, [
         totalPaxDesired, paxBagWeight,
@@ -365,14 +396,14 @@ export const Payload = () => {
         pax.forEach((stationPaxNum: number, stationIndex: number) => {
             const paxCount = returnNumSeats(stationIndex, false, activeFlags);
             if (stationPaxNum === 0 && paxCount !== stationPaxNum) {
-                setActiveFlags(new BitFlags(0), stationIndex);
+                setActiveFlags[stationIndex](new BitFlags(0));
             }
         });
 
         paxDesired.forEach((stationPaxNum, stationIndex) => {
             const paxCount = returnNumSeats(stationIndex, false, desiredFlags);
             if (stationPaxNum === 0 && paxCount !== stationPaxNum) {
-                setDesiredFlags(new BitFlags(0), stationIndex);
+                setDesiredFlags[stationIndex](new BitFlags(0));
             }
         });
         if (!boardingStarted) {
@@ -434,7 +465,7 @@ export const Payload = () => {
         pax.forEach((stationNumPax: number, stationIndex: number) => {
             // Sync active to desired layout if pax is equal to desired
             if (stationNumPax === paxDesired[stationIndex]) {
-                setActiveFlags(desiredFlags[stationIndex], stationIndex);
+                setActiveFlags[stationIndex](desiredFlags[stationIndex]);
             }
         });
     }, [boardingStarted]);

src/instruments/src/EFB/Ground/Pages/Payload/Seating/Constants.ts

@@ -25,7 +25,6 @@ export interface PaxStationInfo {
     name: string,
     rows: RowInfo[],
     simVar: string,
-    bitFlags: string,
     index: number,
     fill: number,
     stationIndex: number,