refactor: Modularized Effects from Routes

app/Routes.tsx

@@ -1,10 +1,8 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 /* eslint react/jsx-props-no-spreading: off */
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Switch, Route } from 'react-router-dom';
-import { ipcRenderer, remote } from 'electron';
 import { useDispatch, useSelector } from 'react-redux';
-import { UpdateInfo } from 'electron-updater';
-import * as Path from 'path';
 import routes from './constants/routes.json';
 import App from './containers/App';
 import SchemeGeneratorPage from './containers/SchemeGeneratorPage';
@@ -13,29 +11,20 @@ import CorrectionViewPage from './containers/CorrectionViewPage';
 import SheetOverviewPage from './containers/SheetOverviewPage';
 import NewHomePage from './containers/NewHomePage';
 import FramelessTitleBar from './containers/FramelessTitleBar';
-import { reloadState, save } from './utils/FileAccess';
 import { selectUnsavedChanges } from './model/SaveSlice';
 import UpdaterDialog from './components/UpdaterDialog';
-import {
-  CHECK_FOR_UPDATE_PENDING,
-  CHECK_FOR_UPDATE_SUCCESS,
-  RECEIVE_FILE_PATH,
-  REQUEST_FILE_PATH,
-} from './constants/ipc';
-import { version as currentAppVersion } from '../package.json';
-import {
-  selectWorkspacePath,
-  workspaceSetPath,
-} from './features/workspace/workspaceSlice';
+import { selectWorkspacePath } from './features/workspace/workspaceSlice';
 import { selectSettingsBackup } from './model/SettingsSlice';
-import { BACKUP_START, BACKUP_STOP } from './constants/BackupIPC';
 import { useModal } from './dialogs/ModalProvider';
-import ConfirmationDialog from './dialogs/ConfirmationDialog';
-import UnsavedChangesDialog from './dialogs/UnsavedChangesDialog';
+import SaveBeforeQuittingEffect from './effects/SaveBeforeQuittingEffect';
+import LoadNewFileEffect from './effects/LoadNewFileEffect';
+import BackupEffect from './effects/BackupEffect';
+import CheckForUpdatesEffect from './effects/CheckForUpdatesEffect';
+import RequestFilePathEffect from './effects/RequestFilePathEffect';
 
 export default function Routes() {
   const dispatch = useDispatch();
-  const showModal = useRef(useModal());
+  const showModal = useModal();
   const unsavedChanges = useSelector(selectUnsavedChanges);
   const saveBackups = useSelector(selectSettingsBackup);
   const workspacePath = useSelector(selectWorkspacePath);
@@ -49,87 +38,28 @@ export default function Routes() {
     setOpenUpdaterDialog(true);
   }
 
-  useEffect(() => {
-    ipcRenderer.on(RECEIVE_FILE_PATH, (_event, path: string) => {
-      if (Path.extname(path) === '.cor') {
-        if (unsavedChanges) {
-          showModal.current(ConfirmationDialog, UnsavedChangesDialog(path));
-        } else {
-          dispatch(workspaceSetPath(path));
-          dispatch(reloadState());
-        }
-      }
-    });
-
-    return () => {
-      ipcRenderer.removeAllListeners(RECEIVE_FILE_PATH);
-    };
-  }, [dispatch, showModal, unsavedChanges]);
-
-  useEffect(() => {
-    ipcRenderer.on(
-      CHECK_FOR_UPDATE_SUCCESS,
-      (_event, info: UpdateInfo | undefined) => {
-        const version = info && info.version;
-        if (version && version !== currentAppVersion) {
-          // Show updater dialog
-          updaterDialog(false);
-        }
-      }
-    );
-
-    // Check for updates at start
-    ipcRenderer.send(CHECK_FOR_UPDATE_PENDING);
-    // Get file path
-    ipcRenderer.send(REQUEST_FILE_PATH);
-
-    return () => {
-      ipcRenderer.removeAllListeners(CHECK_FOR_UPDATE_SUCCESS);
-    };
-  }, []);
-
-  useEffect(() => {
-    // Start Backup
-    if (workspacePath.length > 0 && saveBackups) {
-      ipcRenderer.send(BACKUP_START, workspacePath);
-    }
-
-    return () => {
-      // Stop Backup
-      ipcRenderer.send(BACKUP_STOP);
-    };
-  }, [saveBackups, workspacePath]);
-
-  useEffect(() => {
-    const beforeQuit = (e: BeforeUnloadEvent) => {
-      if (reload) {
-        setReload(false);
-      } else if (unsavedChanges && !quitAnyways) {
-        e.returnValue = false;
-        e.preventDefault();
-        showModal.current(ConfirmationDialog, {
-          title: 'Save before quitting?',
-          text: 'Do you want to save your changes before quitting?',
-          onConfirm: () => {
-            dispatch(save());
-            setQuitAnyways(false);
-            remote.getCurrentWindow().close();
-          },
-          onReject: () => {
-            setQuitAnyways(true);
-            remote.getCurrentWindow().close();
-          },
-          onCancel: () => {
-            setQuitAnyways(false);
-          },
-        });
-      }
-    };
-    window.addEventListener('beforeunload', beforeQuit, true);
-    return () => {
-      window.removeEventListener('beforeunload', beforeQuit, true);
-    };
-  }, [dispatch, quitAnyways, reload, showModal, unsavedChanges]);
+  useEffect(CheckForUpdatesEffect(updaterDialog), []);
+  useEffect(RequestFilePathEffect(), []);
+  useEffect(LoadNewFileEffect(dispatch, showModal, unsavedChanges), [
+    dispatch,
+    showModal,
+    unsavedChanges,
+  ]);
+  useEffect(BackupEffect(workspacePath, saveBackups), [
+    saveBackups,
+    workspacePath,
+  ]);
+  useEffect(
+    SaveBeforeQuittingEffect(
+      quitAnyways,
+      setQuitAnyways,
+      reload,
+      setReload,
+      showModal,
+      unsavedChanges
+    ),
+    [quitAnyways, setQuitAnyways, reload, setReload, showModal, unsavedChanges]
+  );
 
   return (
     <App>

app/dialogs/SaveBeforeQuittingDialog.tsx

@@ -0,0 +1,23 @@
+import { remote } from 'electron';
+import { save } from '../utils/FileAccess';
+
+const SaveBeforeQuittingDialog = (setQuitAnyways) => {
+  return {
+    title: 'Save before quitting?',
+    text: 'Do you want to save your changes before quitting?',
+    onConfirm: (dispatch) => {
+      dispatch(save());
+      setQuitAnyways(false);
+      remote.getCurrentWindow().close();
+    },
+    onReject: () => {
+      setQuitAnyways(true);
+      remote.getCurrentWindow().close();
+    },
+    onCancel: () => {
+      setQuitAnyways(false);
+    },
+  };
+};
+
+export default SaveBeforeQuittingDialog;

app/effects/BackupEffect.tsx

@@ -0,0 +1,21 @@
+import { ipcRenderer } from 'electron';
+import { EffectCallback } from 'react';
+import { BACKUP_START, BACKUP_STOP } from '../constants/BackupIPC';
+
+const BackupEffect = (
+  workspacePath: string,
+  saveBackups: boolean
+): EffectCallback => {
+  return () => {
+    // Start Backup
+    if (workspacePath.length > 0 && saveBackups) {
+      ipcRenderer.send(BACKUP_START, workspacePath);
+    }
+    return () => {
+      // Stop Backup
+      ipcRenderer.send(BACKUP_STOP);
+    };
+  };
+};
+
+export default BackupEffect;

app/effects/CheckForUpdatesEffect.tsx

@@ -0,0 +1,34 @@
+import { ipcRenderer } from 'electron';
+import { UpdateInfo } from 'electron-updater';
+import {
+  CHECK_FOR_UPDATE_PENDING,
+  CHECK_FOR_UPDATE_SUCCESS,
+  REQUEST_FILE_PATH,
+} from '../constants/ipc';
+import { version as currentAppVersion } from '../package.json';
+
+const CheckForUpdatesEffect = (updaterDialog) => {
+  return () => {
+    ipcRenderer.on(
+      CHECK_FOR_UPDATE_SUCCESS,
+      (_event, info: UpdateInfo | undefined) => {
+        const version = info && info.version;
+        if (version && version !== currentAppVersion) {
+          // Show updater dialog
+          updaterDialog(false);
+        }
+      }
+    );
+
+    // Check for updates at start
+    ipcRenderer.send(CHECK_FOR_UPDATE_PENDING);
+    // Get file path
+    ipcRenderer.send(REQUEST_FILE_PATH);
+
+    return () => {
+      ipcRenderer.removeAllListeners(CHECK_FOR_UPDATE_SUCCESS);
+    };
+  };
+};
+
+export default CheckForUpdatesEffect;

app/effects/LoadNewFileEffect.tsx

@@ -0,0 +1,29 @@
+import { ipcRenderer } from 'electron';
+import * as Path from 'path';
+import { RECEIVE_FILE_PATH } from '../constants/ipc';
+import ConfirmationDialog from '../dialogs/ConfirmationDialog';
+import UnsavedChangesDialog from '../dialogs/UnsavedChangesDialog';
+import { workspaceSetPath } from '../features/workspace/workspaceSlice';
+import { reloadState } from '../utils/FileAccess';
+
+const LoadNewFileEffect = (dispatch, showModal, unsavedChanges) => {
+  return () => {
+    const loadNewFile = (_event, path) => {
+      if (Path.extname(path) === '.cor') {
+        if (unsavedChanges) {
+          showModal(ConfirmationDialog, UnsavedChangesDialog(path));
+        } else {
+          dispatch(workspaceSetPath(path));
+          dispatch(reloadState());
+        }
+      }
+    };
+
+    ipcRenderer.on(RECEIVE_FILE_PATH, loadNewFile);
+    return () => {
+      ipcRenderer.removeListener(RECEIVE_FILE_PATH, loadNewFile);
+    };
+  };
+};
+
+export default LoadNewFileEffect;

app/effects/RequestFilePathEffect.tsx

@@ -0,0 +1,11 @@
+import { ipcRenderer } from 'electron';
+import { REQUEST_FILE_PATH } from '../constants/ipc';
+
+const RequestFilePathEffect = () => {
+  return () => {
+    // Get file path
+    ipcRenderer.send(REQUEST_FILE_PATH);
+  };
+};
+
+export default RequestFilePathEffect;

app/effects/SaveBeforeQuittingEffect.tsx

@@ -0,0 +1,30 @@
+import { EffectCallback } from 'react';
+import ConfirmationDialog from '../dialogs/ConfirmationDialog';
+import SaveBeforeQuittingDialog from '../dialogs/SaveBeforeQuittingDialog';
+
+const SaveBeforeQuittingEffect = (
+  quitAnyways,
+  setQuitAnyways,
+  reload,
+  setReload,
+  showModal,
+  unsavedChanges
+): EffectCallback => {
+  return () => {
+    const beforeQuit = (e: BeforeUnloadEvent) => {
+      if (reload) {
+        setReload(false);
+      } else if (unsavedChanges && !quitAnyways) {
+        e.returnValue = false;
+        e.preventDefault();
+        showModal(ConfirmationDialog, SaveBeforeQuittingDialog(setQuitAnyways));
+      }
+    };
+    window.addEventListener('beforeunload', beforeQuit, true);
+    return () => {
+      window.removeEventListener('beforeunload', beforeQuit, true);
+    };
+  };
+};
+
+export default SaveBeforeQuittingEffect;