Moved reading the checklists from the ChecklistProvider to the index.…

…tsx of the aircraft EFB class to make sure it is loaded before any component of the EFB is loaded.
flybywiresim · Apr 2, 2024 · e8cf6e9 · e8cf6e9
1 parent 9adfed3
commit e8cf6e9
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 34 deletions.
diff --git a/fbw-a32nx/src/systems/instruments/src/EFB/index.tsx b/fbw-a32nx/src/systems/instruments/src/EFB/index.tsx
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: GPL-3.0
 
 import React from 'react';
-import { NXDataStore } from '@flybywiresim/fbw-sdk';
+import { ChecklistProvider, NXDataStore } from '@flybywiresim/fbw-sdk';
 
 import { customAlphabet } from 'nanoid';
 import { render } from '@instruments/common/index';
@@ -37,8 +37,15 @@ if (process.env.VITE_BUILD) {
     setup();
 }
 
-render(
-    <EfbInstrument failures={A320FailureDefinitions} />,
-    true,
-    true,
-);
+ChecklistProvider.getInstance().readChecklist()
+    .then((aircraftChecklistsFromJson) => {
+        console.log('Checklists loaded');
+        render(
+            <EfbInstrument failures={A320FailureDefinitions} aircraftChecklists={aircraftChecklistsFromJson} />,
+            true,
+            true,
+        );
+    })
+    .catch((error) => {
+        console.error('Failed to load checklists', error);
+    });
diff --git a/fbw-a380x/src/systems/instruments/src/EFB/index.tsx b/fbw-a380x/src/systems/instruments/src/EFB/index.tsx
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: GPL-3.0
 
 import React from 'react';
-import { NXDataStore } from '@flybywiresim/fbw-sdk';
+import {ChecklistProvider, NXDataStore} from '@flybywiresim/fbw-sdk';
 
 import { customAlphabet } from 'nanoid';
 import { render } from '@instruments/common/index';
@@ -37,6 +37,11 @@ if (process.env.VITE_BUILD) {
     setup();
 }
 
-render(
-    <EfbInstrument failures={A380FailureDefinitions} />,
-);
+ChecklistProvider.getInstance().readChecklist()
+    .then((aircraftChecklistsFromJson) => {
+        console.log('Checklists loaded');
+        render(<EfbInstrument failures={A380FailureDefinitions} aircraftChecklists={aircraftChecklistsFromJson} />,);
+    })
+    .catch((error) => {
+        console.error('Failed to load checklists', error);
+    });
diff --git a/fbw-common/src/systems/instruments/src/EFB/Checklists/Checklists.tsx b/fbw-common/src/systems/instruments/src/EFB/Checklists/Checklists.tsx
@@ -207,14 +207,6 @@ export const Checklists = () => {
         dispatch(setChecklistCompletion({ checklistIndex: selectedChecklistIndex, completion: false }));
     };
 
-    // aircraftChecklists are retrieved asynchronous there it is possible for aircraftChecklists to be empty.
-    // No point in rendering in this case.
-    if (aircraftChecklists.length === 0) {
-        return (
-            <></>
-        );
-    }
-
     return (
         <>
             <h1 className="mb-4 font-bold">{t('Checklists.Title')}</h1>

diff --git a/fbw-common/src/systems/instruments/src/EFB/Efb.tsx b/fbw-common/src/systems/instruments/src/EFB/Efb.tsx
@@ -3,6 +3,7 @@
 
 import React, { useEffect, useState } from 'react';
 import {
+    ChecklistJsonDefinition,
     FailureDefinition,
     NavigraphClient,
     SENTRY_CONSENT_KEY,
@@ -20,7 +21,6 @@ import { distanceTo } from 'msfs-geo';
 import { ErrorBoundary } from 'react-error-boundary';
 import { MemoryRouter as Router } from 'react-router';
 import { Provider } from 'react-redux';
-import { ChecklistProvider } from '@flybywiresim/checklists';
 import { Error as ErrorIcon } from './Assets/Error';
 import { FailuresOrchestratorProvider } from './failures-orchestrator-provider';
 import { AlertModal, ModalContainer, ModalProvider, useModals } from './UtilComponents/Modals/Modals';
@@ -96,7 +96,11 @@ export function getAirframeType() {
         .searchParams.get('Airframe');
 }
 
-export const Efb = () => {
+interface EfbProps {
+    aircraftChecklistsProp: ChecklistJsonDefinition[],
+}
+
+export const Efb: React.FC<EfbProps> = ({ aircraftChecklistsProp }) => {
     const [powerState, setPowerState] = useState<PowerStates>(PowerStates.SHUTOFF);
     const [absoluteTime] = useSimVar('E:ABSOLUTE TIME', 'seconds', 5000);
     const [, setBrightness] = useSimVar('L:A32NX_EFB_BRIGHTNESS', 'number');
@@ -108,6 +112,9 @@ export const Efb = () => {
 
     const dispatch = useAppDispatch();
 
+    // Set the aircraft checklists in the redux store, so they can be accessed by the checklist components
+    dispatch(setAircraftChecklists(aircraftChecklistsProp));
+
     const [dc2BusIsPowered] = useSimVar('L:A32NX_ELEC_DC_2_BUS_IS_POWERED', 'bool');
     const [batteryLevel, setBatteryLevel] = useState<BatteryStatus>({
         level: 100,
@@ -237,18 +244,10 @@ export const Efb = () => {
     // As ChecklistProvider.readChecklist() uses fetch to read a json from the VFS, it is asynchronous,
     // and therefore a result cannot be provided right away.
     // The effect is used to read the checklists once and store them in the redux store.
-    const { checklists, aircraftChecklists } = useAppSelector((state) => state.trackingChecklists);
-    useEffect(() => {
-        ChecklistProvider.getInstance().readChecklist().then((result) => {
-            console.log('Aircraft checklists loaded:', result);
-            dispatch(setAircraftChecklists(result));
-        });
-    }, []);
 
     // initialize the reducer store for the checklists' state
+    const { checklists } = useAppSelector((state) => state.trackingChecklists);
     useEffect(() => {
-        if (aircraftChecklists.length === 0) return; // wait for the aircraft checklists to be loaded
-
         if (powerState === PowerStates.SHUTOFF) {
             dispatch(clearEfbState());
         } else if (powerState === PowerStates.LOADED) {
@@ -257,7 +256,7 @@ export const Efb = () => {
                 console.log('Initializing aircraft checklists');
                 // for each aircraft checklist, create a tracking checklist,
                 // add it to the store and create its tracking items
-                aircraftChecklists.forEach((checklist, index) => {
+                aircraftChecklistsProp.forEach((checklist, index) => {
                     dispatch(addTrackingChecklists({
                         checklistName: checklist.name,
                         checklistIndex: index,
@@ -272,8 +271,7 @@ export const Efb = () => {
     // where appropriate and set checklists items to "completed" automatically
     const [autoFillChecklists] = usePersistentNumberProperty('EFB_AUTOFILL_CHECKLISTS', 0);
     useInterval(() => {
-        if (!autoFillChecklists && aircraftChecklists.length === 0) return;
-        setAutomaticItemStates(aircraftChecklists);
+        setAutomaticItemStates(aircraftChecklistsProp);
     }, 1000);
 
     // ===================================
@@ -432,9 +430,10 @@ export const ErrorFallback = ({ resetErrorBoundary }: ErrorFallbackProps) => {
 
 export interface EfbInstrumentProps {
     failures: FailureDefinition[],
+    aircraftChecklists: ChecklistJsonDefinition[],
 }
 
-export const EfbInstrument: React.FC<EfbInstrumentProps> = ({ failures }) => {
+export const EfbInstrument: React.FC<EfbInstrumentProps> = ({ failures, aircraftChecklists }) => {
     const [, setSessionId] = usePersistentProperty('A32NX_SENTRY_SESSION_ID');
 
     useEffect(
@@ -449,7 +448,7 @@ export const EfbInstrument: React.FC<EfbInstrumentProps> = ({ failures }) => {
                 <Router>
                     <ModalProvider>
                         <Provider store={store}>
-                            <Efb />
+                            <Efb aircraftChecklistsProp={aircraftChecklists} />
                         </Provider>
                     </ModalProvider>
                 </Router>