Change a firmware blob loading timing.

src/actions/firmware.action.ts

@@ -48,6 +48,7 @@ export const FLASH_FIRMWARE_DIALOG_CLEAR = `${FLASH_FIRMWARE_DIALOG_ACTIONS}/Cle
 export const FLASH_FIRMWARE_DIALOG_UPDATE_KEYBOARD_NAME = `${FLASH_FIRMWARE_DIALOG_ACTIONS}/UpdateKeyboardName`;
 export const FLASH_FIRMWARE_DIALOG_UPDATE_FLASH_MODE = `${FLASH_FIRMWARE_DIALOG_ACTIONS}/UpdateFlashMode`;
 export const FLASH_FIRMWARE_DIALOG_UPDATE_BUILDING_FIRMWARE_TASK = `${FLASH_FIRMWARE_DIALOG_ACTIONS}/UpdateBuildingFirmwareTask`;
+export const FLASH_FIRMWARE_DIALOG_UPDATE_FIRMWARE_BLOB = `${FLASH_FIRMWARE_DIALOG_ACTIONS}/UpdateFirmwareBlob`;
 export const FlashFirmwareDialogActions = {
   updateFirmware: (firmware: IFirmware | null) => {
     return {
@@ -117,6 +118,12 @@ export const FlashFirmwareDialogActions = {
       value: task,
     };
   },
+  updateFirmwareBlob: (blob: Buffer | undefined) => {
+    return {
+      type: FLASH_FIRMWARE_DIALOG_UPDATE_FIRMWARE_BLOB,
+      value: blob,
+    };
+  },
 };
 
 type ActionTypes = ReturnType<
@@ -171,9 +178,9 @@ export const firmwareActionsThunk = {
           created_at: new Date(),
         })
       );
+      await dispatch(firmwareActionsThunk.loadFirmwareBlob());
     },
-  // eslint-disable-next-line no-undef
-  flashFirmware:
+  loadFirmwareBlob:
     (): ThunkPromiseAction<void> =>
     async (
       dispatch: ThunkDispatch<RootState, undefined, ActionTypes>,
@@ -182,21 +189,17 @@ export const firmwareActionsThunk = {
       const handleError = (error: string, cause?: any) => {
         console.error(error);
         dispatch(NotificationActions.addError(error, cause));
-        dispatch(FlashFirmwareDialogActions.appendLog(`Error: ${error}`));
-        dispatch(FlashFirmwareDialogActions.updateFlashing(false));
+        dispatch(FlashFirmwareDialogActions.clear());
       };
 
-      dispatch(FlashFirmwareDialogActions.updateLogs([]));
-      dispatch(FlashFirmwareDialogActions.updateProgressRate(0));
-      dispatch(FlashFirmwareDialogActions.updateMode('flashing'));
-      dispatch(FlashFirmwareDialogActions.updateFlashing(true));
-      const { entities, storage, serial, common } = getState();
-      const firmwareWriter = serial.writer;
+      dispatch(FlashFirmwareDialogActions.updateMode('loading'));
+      dispatch(FlashFirmwareDialogActions.updateFlashing(false));
+
+      const { common, entities, storage } = getState();
       const firmware = common.firmware.flashFirmwareDialog.firmware!;
       const bootloaderType =
         common.firmware.flashFirmwareDialog.bootloaderType!;
       const flashMode = common.firmware.flashFirmwareDialog.flashMode;
-
       let flashBytes: Buffer | undefined;
       if (flashMode === 'fetch_and_flash') {
         const definitionDocument = entities.keyboardDefinitionDocument!;
@@ -268,11 +271,48 @@ export const firmwareActionsThunk = {
           return;
         }
       }
+      dispatch(FlashFirmwareDialogActions.updateFirmwareBlob(flashBytes));
+      dispatch(FlashFirmwareDialogActions.updateMode('instruction'));
+    },
+  // eslint-disable-next-line no-undef
+  flashFirmware:
+    (): ThunkPromiseAction<void> =>
+    async (
+      dispatch: ThunkDispatch<RootState, undefined, ActionTypes>,
+      getState: () => RootState
+    ) => {
+      const handleError = (error: string, cause?: any) => {
+        console.error(error);
+        dispatch(NotificationActions.addError(error, cause));
+        dispatch(FlashFirmwareDialogActions.appendLog(`Error: ${error}`));
+        dispatch(FlashFirmwareDialogActions.updateFlashing(false));
+      };
+
+      dispatch(FlashFirmwareDialogActions.updateLogs([]));
+      dispatch(FlashFirmwareDialogActions.updateProgressRate(0));
+      dispatch(FlashFirmwareDialogActions.updateMode('flashing'));
+      dispatch(FlashFirmwareDialogActions.updateFlashing(true));
+      const { serial, common } = getState();
+      const firmwareWriter = serial.writer;
+      const bootloaderType =
+        common.firmware.flashFirmwareDialog.bootloaderType!;
+
+      let flashBytes: Buffer | undefined =
+        common.firmware.flashFirmwareDialog.firmwareBlob;
+      if (flashBytes === undefined) {
+        dispatch(
+          NotificationActions.addError('Firmware binary is not loaded.')
+        );
+        dispatch(FlashFirmwareDialogActions.clear());
+        return;
+      }
+
       dispatch(
         FlashFirmwareDialogActions.appendLog(
-          'Reading the firmware binary done.'
+          'Firmware binary has already been loaded. Start writing the firmware.'
         )
       );
+
       dispatch(FlashFirmwareDialogActions.updateProgressRate(15));
 
       const writeResult = await firmwareWriter.write(
@@ -341,15 +381,14 @@ const createFlashBytes = (
         return buffer;
     }
   } catch (error) {
-    console.error(error);
+    console.error('Creating a flashed bytes failed.', error);
     dispatch(
       NotificationActions.addError(
         'Creating the firmware binary failed.',
         error
       )
     );
-    dispatch(FlashFirmwareDialogActions.appendLog(`Error: ${error}`));
-    dispatch(FlashFirmwareDialogActions.updateFlashing(false));
+    dispatch(FlashFirmwareDialogActions.clear());
     return undefined;
   }
 };

src/components/catalog/keyboard/build/CatalogBuild.container.ts

@@ -14,7 +14,10 @@ import {
   IFirmwareBuildingTask,
   IKeyboardDefinitionDocument,
 } from '../../../../services/storage/Storage';
-import { FlashFirmwareDialogActions } from '../../../../actions/firmware.action';
+import {
+  firmwareActionsThunk,
+  FlashFirmwareDialogActions,
+} from '../../../../actions/firmware.action';
 
 // eslint-disable-next-line no-unused-vars
 const mapStateToProps = (state: RootState) => {
@@ -92,6 +95,7 @@ const mapDispatchToProps = (dispatch: any) => {
           created_at: new Date(),
         })
       );
+      dispatch(firmwareActionsThunk.loadFirmwareBlob());
     },
     updateBuildableFirmwareCodeParameterValues: (
       values: IBuildableFirmwareCodeParameterValues

src/components/catalog/keyboard/firmware/CatalogFirmware.container.ts

@@ -7,7 +7,10 @@ import {
   IFirmware,
   IKeyboardDefinitionDocument,
 } from '../../../../services/storage/Storage';
-import { FlashFirmwareDialogActions } from '../../../../actions/firmware.action';
+import {
+  firmwareActionsThunk,
+  FlashFirmwareDialogActions,
+} from '../../../../actions/firmware.action';
 
 // eslint-disable-next-line no-unused-vars
 const mapStateToProps = (state: RootState) => {
@@ -56,6 +59,7 @@ const mapDispatchToProps = (_dispatch: any) => {
           FlashFirmwareDialogActions.updateFlashMode('fetch_and_flash')
         );
         _dispatch(FlashFirmwareDialogActions.updateFirmware(firmware));
+        _dispatch(firmwareActionsThunk.loadFirmwareBlob());
       },
     },
   };

src/components/common/firmware/FlashFirmwareDialog.tsx

@@ -116,10 +116,10 @@ export default function FlashFirmwareDialog(
               value={props.logs!.join('\n')}
             />
           </div>
-        ) : (
+        ) : props.mode === 'instruction' ? (
           <React.Fragment>
             <div className="flash-firmware-dialog-instruction">
-              <Typography variant="body1">3 Steps to Flash</Typography>
+              <Typography variant="body1">Three Steps to Flash</Typography>
               <div className="flash-firmware-dialog-instruction-items">
                 <div className="flash-firmware-dialog-instruction-item">
                   <img src={instructionImage1} alt="instructionImage1" />
@@ -158,17 +158,23 @@ export default function FlashFirmwareDialog(
               .
             </Typography>
           </React.Fragment>
+        ) : (
+          <Typography variant="body1">Now loading the firmware...</Typography>
         )}
       </DialogContent>
       <DialogActions>
         <Button
           color="primary"
           onClick={onClickFlash}
-          disabled={props.flashing}
+          disabled={props.mode === 'loading' || props.flashing}
         >
           Flash
         </Button>
-        <Button autoFocus onClick={onClickClose} disabled={props.flashing}>
+        <Button
+          autoFocus
+          onClick={onClickClose}
+          disabled={props.mode === 'loading' || props.flashing}
+        >
           Close
         </Button>
       </DialogActions>

src/store/reducers.ts

@@ -201,6 +201,7 @@ import {
   FLASH_FIRMWARE_DIALOG_UPDATE_BOOTLOADER_TYPE,
   FLASH_FIRMWARE_DIALOG_UPDATE_BUILDING_FIRMWARE_TASK,
   FLASH_FIRMWARE_DIALOG_UPDATE_FIRMWARE,
+  FLASH_FIRMWARE_DIALOG_UPDATE_FIRMWARE_BLOB,
   FLASH_FIRMWARE_DIALOG_UPDATE_FLASH_MODE,
   FLASH_FIRMWARE_DIALOG_UPDATE_FLASHING,
   FLASH_FIRMWARE_DIALOG_UPDATE_KEYBOARD_NAME,
@@ -1196,7 +1197,8 @@ const flashFirmwareDialogReducer = (
       draft.common.firmware.flashFirmwareDialog.flashing = false;
       draft.common.firmware.flashFirmwareDialog.progressRate = 0;
       draft.common.firmware.flashFirmwareDialog.logs = [''];
-      draft.common.firmware.flashFirmwareDialog.mode = 'instruction';
+      draft.common.firmware.flashFirmwareDialog.firmware = null;
+      draft.common.firmware.flashFirmwareDialog.mode = 'loading';
       break;
     case FLASH_FIRMWARE_DIALOG_UPDATE_LOGS:
       draft.common.firmware.flashFirmwareDialog.logs = [''];
@@ -1214,6 +1216,9 @@ const flashFirmwareDialogReducer = (
       draft.common.firmware.flashFirmwareDialog.buildingFirmwareTask =
         action.value;
       break;
+    case FLASH_FIRMWARE_DIALOG_UPDATE_FIRMWARE_BLOB:
+      draft.common.firmware.flashFirmwareDialog.firmwareBlob = action.value;
+      break;
   }
 };
 

src/store/state.ts

@@ -168,6 +168,7 @@ export const CONDITION_NOT_SELECTED: IConditionNotSelected = '---';
 export const ALL_FLASH_FIRMWARE_DIALOG_MODE = [
   'instruction',
   'flashing',
+  'loading',
 ] as const;
 type flashFirmwareDialogModeTuple = typeof ALL_FLASH_FIRMWARE_DIALOG_MODE;
 export type IFlashFirmwareDialogMode = flashFirmwareDialogModeTuple[number];
@@ -463,6 +464,7 @@ export type RootState = {
         bootloaderType: IBootloaderType;
         flashMode: IFlashFirmwareDialogFlashMode;
         buildingFirmwareTask: IFirmwareBuildingTask | null;
+        firmwareBlob: Buffer | undefined;
       };
       uploadFirmwareDialog: {
         open: boolean;
@@ -725,6 +727,7 @@ export const INIT_STATE: RootState = {
         bootloaderType: 'caterina',
         flashMode: 'fetch_and_flash',
         buildingFirmwareTask: null,
+        firmwareBlob: undefined,
       },
       uploadFirmwareDialog: {
         open: false,