feat: Move Updates to background via toast

Author: colin969

src/back/index.ts

@@ -99,6 +99,7 @@ export const state: BackState = {
   isExit: false,
   isDev: false,
   verbose: false,
+  updateInProgress: false,
   logFile: createErrorProxy('logFile'),
   socketServer: new SocketServer(),
   curationsReady: false,

src/back/responses.ts

@@ -414,6 +414,15 @@ export function registerRequestCallbacks(state: BackState, init: () => Promise<v
   });
 
   state.socketServer.register(BackIn.SYNC_ALL, async (event, source) => {
+    if (state.updateInProgress) {
+      const openDialog = state.socketServer.showMessageBoxBack(state, event.client);
+      openDialog({
+        largeMessage: true,
+        message: 'Update already in progress.',
+        buttons: ['Ok']
+      });
+      return false;
+    }
     if (!state.isDev) {
       // Make sure we meet minimum verison requirements
       const updatesReady = state.componentStatuses.filter(c => c.id === 'core-launcher' && c.state === ComponentState.NEEDS_UPDATE).length > 0;
@@ -424,7 +433,7 @@ export function registerRequestCallbacks(state: BackState, init: () => Promise<v
         if (!updatesReady) {
           // No software update ready but metadata server requires it
           const openDialog = state.socketServer.showMessageBoxBack(state, event.client);
-          await openDialog({
+          openDialog({
             largeMessage: true,
             message: state.languageContainer.app.noLauncherUpdateReady,
             buttons: [state.languageContainer.misc.ok]
@@ -433,7 +442,7 @@ export function registerRequestCallbacks(state: BackState, init: () => Promise<v
         }
         // Too old to sync metadata, prompt a software update
         const openDialog = state.socketServer.showMessageBoxBack(state, event.client);
-        const dialogId = await openDialog({
+        const dialogId = openDialog({
           largeMessage: true,
           message: state.languageContainer.app.softwareUpdateRequired,
           buttons: [state.languageContainer.misc.yes, state.languageContainer.misc.no],
@@ -450,6 +459,8 @@ export function registerRequestCallbacks(state: BackState, init: () => Promise<v
       }
     }
 
+    state.updateInProgress = true;
+
     let totalGames = 0;
     try {
       totalGames = await fpDatabase.countGames();
@@ -468,31 +479,27 @@ export function registerRequestCallbacks(state: BackState, init: () => Promise<v
       };
     }
 
-    // Fetch pre-update info to estimate progress bar size
-    const total = await getMetaUpdateInfo(source, true, totalGames === 0);
-    const chunks = Math.ceil(total / 2500);
-
-    const openDialog = state.socketServer.showMessageBoxBack(state, event.client);
-    const dialogId = await openDialog({
-      largeMessage: true,
-      message: `Syncing metadata from ${source.name}...`,
-      buttons: [],
-      fields: [
-        {
-          type: 'progress',
-          name: 'progress',
-          message: `${total} Updates...`,
-          value: 0
-        }
-      ]
-    });
+    const updateToast = (content: string) => {
+      state.socketServer.broadcast(BackOut.TOAST, 'sync', content, {
+        autoClose: false,
+        closeButton: false,
+      });
+    };
 
+    // Fetch pre-update info to estimate progress bar size
     try {
+      updateToast('Getting Update Info...');
+      const totalUpdateGames = await getMetaUpdateInfo(source, true, totalGames === 0);
+      const chunks = Math.ceil(totalUpdateGames / 2500);
+
       // Tags and platforms
       const newDate = new Date();
       let lastDate = new Date();
+      updateToast('Updating Platforms...');
       const lastDatePlats = await syncPlatforms(source);
+      updateToast('Updating Tags...');
       const lastDateTags = await syncTags(source);
+
       if (lastDatePlats > lastDateTags) {
         lastDate = lastDatePlats;
       } else {
@@ -510,11 +517,12 @@ export function registerRequestCallbacks(state: BackState, init: () => Promise<v
       console.log('games');
       const dataPacksFolder = path.join(state.config.flashpointPath, state.preferences.dataPacksFolderPath);
       let chunk = 0;
+      updateToast('Updating Games...');
       lastDate = await syncGames(source, dataPacksFolder, () => {
         chunk = chunk + 1;
-        const progress = chunk / chunks;
-        state.socketServer.broadcast(BackOut.UPDATE_DIALOG_FIELD_VALUE, dialogId, 'progress', progress * 100);
+        updateToast(`Updating Games... (Batch ${chunk} of ${chunks})`);
       });
+      updateToast('Updating Game Redirects...');
       await syncRedirects(source);
       if (sourceIdx !== -1) {
         state.preferences.gameMetadataSources[sourceIdx].games.latestUpdateTime = lastDate.toISOString();
@@ -525,6 +533,7 @@ export function registerRequestCallbacks(state: BackState, init: () => Promise<v
         state.socketServer.broadcast(BackOut.UPDATE_PREFERENCES_RESPONSE, state.preferences);
       }
 
+      updateToast('Updating Search Suggestions...');
       // Send out new suggestions and library lists
       state.suggestions = {
         tags: [],
@@ -538,9 +547,21 @@ export function registerRequestCallbacks(state: BackState, init: () => Promise<v
       const total = await fpDatabase.countGames();
       const cats = await fpDatabase.findAllTagCategories();
       state.socketServer.broadcast(BackOut.POST_SYNC_CHANGES, state.suggestions.library, state.suggestions, state.platformAppPaths, cats, total);
+      state.socketServer.broadcast(BackOut.TOAST, 'sync', 'Update Complete', {
+        type: 'success',
+        autoClose: false,
+        closeButton: true,
+      });
       return true;
+    } catch (err: any) {
+      state.socketServer.broadcast(BackOut.TOAST, 'sync', `Update Failure - ${err.message}`, {
+        type: 'error',
+        autoClose: false,
+        closeButton: true,
+      });
+      return false;
     } finally {
-      state.socketServer.broadcast(BackOut.CANCEL_DIALOG, dialogId);
+      state.updateInProgress = false;
     }
   });
 

src/back/types.ts

@@ -30,6 +30,7 @@ export type BackState = {
   runInit: boolean;
   isExit: boolean;
   isDev: boolean;
+  updateInProgress: boolean;
   verbose: boolean;
   socketServer: SocketServer;
   curationsReady: boolean;

src/renderer/components/app.tsx

@@ -30,7 +30,7 @@ import * as path from 'node:path';
 import * as React from 'react';
 import { Activity, useState } from 'react';
 import { Route, Routes, useLocation, useNavigate } from 'react-router-dom';
-import { ToastContainer } from 'react-toastify';
+import { toast, ToastContainer } from 'react-toastify';
 import { axios, getGameImagePath, getGameImageURL, getGamePath, openUrlInWindow } from '../Util';
 import { LangContext } from '../util/lang';
 import { ActivityRoutes } from './ActivityRoutes';
@@ -751,6 +751,29 @@ function registerWebsocketListeners(dispatch: AppDispatch) {
     });
   };
 
+  window.Shared.back.register(BackOut.TOAST, (event, toastId, content, data) => {
+    if (!toastId) {
+      throw 'Toast ID required.';
+    }
+    if (toast.isActive(toastId)) {
+      toast.update(toastId, {
+        ...data,
+        render: <div>{content}</div>
+      });
+    } else {
+      toast(content, {
+        ...data,
+        toastId,
+      } as any);
+    }
+  });
+
+  window.Shared.back.register(BackOut.CANCEL_TOAST, (event, toastId) => {
+    if (toast.isActive(toastId)) {
+      toast.dismiss(toastId);
+    }
+  });
+
   window.Shared.back.register(BackOut.INIT_EVENT, (event, data) => {
     for (const index of data.done) {
       switch (+index) { // DO NOT REMOVE - Fails to convert to enum without explicitint conversion

src/renderer/components/pages/HomePage.tsx

@@ -1,18 +1,17 @@
 import { FancyAnimation } from '@renderer/components/FancyAnimation';
 import { useAppDispatch, useAppSelector } from '@renderer/hooks/useAppSelector';
-import { createDialog, setUpdateInfo } from '@renderer/store/main/slice';
+import { setUpdateInfo } from '@renderer/store/main/slice';
 import { setHomePageBoxOpen } from '@renderer/store/preferences/slice';
 import { launchGame } from '@renderer/Util';
 import { BackIn } from '@shared/back/types';
 import { formatString } from '@shared/utils/StringFormatter';
-import { uuid } from '@shared/utils/uuid';
-import { DialogState, GameLaunchOverride, GameMetadataSource } from 'flashpoint-launcher';
+import { GameLaunchOverride, GameMetadataSource } from 'flashpoint-launcher';
 import { HomePageComponentProps } from 'flashpoint-launcher-renderer';
 import * as React from 'react';
+import { useContext, useEffect, useRef, useState } from 'react';
 import { LangContext } from '../../util/lang';
 import { DynamicComponent } from '../DynamicComponent';
 import { SimpleButton } from '../SimpleButton';
-import { useContext, useEffect, useRef, useState } from 'react';
 
 export type HomePageProps = {
   /** Generator for game context menu */
@@ -132,30 +131,8 @@ function UpdateComponent() {
     } else {
       // Do update
       return window.Shared.back.request(BackIn.SYNC_ALL, source)
-      .then((success) => {
-        if (success) {
-          const dialog: DialogState = {
-            largeMessage: true,
-            message: strings.updateComplete,
-            buttons: [allStrings.misc.ok],
-            id: uuid()
-          };
-          dispatch(createDialog(dialog));
-          dispatch(setUpdateInfo({
-            id: source.id,
-            total: 0
-          }));
-        }
-      })
       .catch((err) => {
         log.error('Launcher', `Error updating metadata: ${err}`);
-        const dialog: DialogState = {
-          largeMessage: true,
-          message: `ERROR: ${err}`,
-          buttons: [allStrings.misc.ok],
-          id: uuid()
-        };
-        dispatch(createDialog(dialog));
       })
       .finally(() => {
         setUpdating(false);

src/shared/back/types.ts

@@ -46,6 +46,7 @@ import { Theme } from '../ThemeFile';
 import { AppConfigData, AppExtConfigData } from '../config/interfaces';
 import { ExecMapping, GamePropSuggestions, IService, ProcessAction, Task } from '../interfaces';
 import { LangFile } from '../lang';
+import { UpdateOptions } from 'react-toastify';
 
 export enum BackIn {
   UNKNOWN = 1000,
@@ -305,6 +306,8 @@ export enum BackOut {
   CANCEL_DIALOG,
   UPDATE_DIALOG_MESSAGE,
   UPDATE_DIALOG_FIELD_VALUE,
+  TOAST,
+  CANCEL_TOAST,
 
   OPEN_DYNAMIC_PAGE,
 
@@ -567,6 +570,8 @@ export type BackOutTemplate = SocketTemplate<BackOut, {
   [BackOut.CANCEL_DIALOG]: (dialogId: string) => void;
   [BackOut.UPDATE_DIALOG_MESSAGE]: (message: string, dialogId: string) => void;
   [BackOut.UPDATE_DIALOG_FIELD_VALUE]: (dialogId: string, name: string, value: any) => void;
+  [BackOut.TOAST]: (toastId: string, content: string, opts?: UpdateOptions<unknown>) => void;
+  [BackOut.CANCEL_TOAST]: (toastId: string) => void;
 
   [BackOut.OPEN_DYNAMIC_PAGE]: (componentName: string, props: any) => void;