refactor: navigate in electron

apps/client/src/common/hooks/useElectronEvent.ts

@@ -1,11 +1,31 @@
-export default function useElectronEvent() {
+import { useCallback, useEffect } from 'react';
-  const isElectron = window?.process?.type === 'renderer';
+import { useNavigate } from 'react-router-dom';
 
-  const sendToElectron = (channel: string, args?: string | Record<string, unknown>) => {
+const isElectron = window.process?.type === 'renderer';
-    if (isElectron) {
+const ipcRenderer = isElectron ? window.require('electron').ipcRenderer : null;
-      window?.ipcRenderer.send(channel, args);
+
+export default function useElectronEvent() {
+  const navigate = useNavigate();
+
+  const sendToElectron = useCallback((channel: string, args?: string | Record<string, unknown>) => {
+    if (isElectron && ipcRenderer) {
+      ipcRenderer.send(channel, args);
     }
-  };
+  }, []);
+
+  // listen to requests to change the editor location
+  useEffect(() => {
+    if (isElectron) {
+      ipcRenderer.on('request-editor-location', (_event: unknown, location: string) => {
+        navigate(location, { relative: 'route' });
+      });
+    }
+
+    // Clean the listener after the component is dismounted
+    return () => {
+      ipcRenderer?.removeAllListeners();
+    };
+  }, [navigate]);
 
   return { isElectron, sendToElectron };
 }

apps/electron/src/main.js

@@ -113,6 +113,14 @@ function escalateError(error) {
   dialog.showErrorBox('An unrecoverable error occurred', error);
 }
 
+/**
+ * Allows electron to ask react app redirect
+ * @param string location
+ */
+function redirectWindow(location) {
+  win.webContents.send('request-editor-location', location);
+}
+
 // Ensure there isn't another instance of the app running already
 const lock = app.requestSingleInstanceLock();
 if (!lock) {
@@ -182,14 +190,8 @@ app.whenReady().then(() => {
     .then((port) => {
       const clientUrl = getClientUrl(port);
       const serverUrl = getServerUrl(port);
-      const menu = getApplicationMenu(
+      const menu = getApplicationMenu(askToQuit, clientUrl, serverUrl, redirectWindow, (url) =>
-        askToQuit,
+        win.webContents.downloadURL(url),
-        clientUrl,
-        serverUrl,
-        (path) => {
-          win.loadURL(`${clientUrl}/${path}`);
-        },
-        (url) => win.webContents.downloadURL(url),
       );
       Menu.setApplicationMenu(menu);
 

apps/electron/src/menu/applicationMenu.js

@@ -79,15 +79,15 @@ function makeFileMenu(serverUrl, redirectWindow, download) {
     submenu: [
       {
         label: 'New project...',
-        click: () => redirectWindow('editor?settings=project__manage&create=true'),
+        click: () => redirectWindow('/editor?settings=project__manage&create=true'),
       },
       {
         label: 'Edit project info',
-        click: () => redirectWindow('editor?settings=project__data'),
+        click: () => redirectWindow('/editor?settings=project__data'),
       },
       {
         label: 'Manage projects...',
-        click: () => redirectWindow('editor?settings=project__manage'),
+        click: () => redirectWindow('/editor?settings=project__manage'),
       },
       {
         label: 'Download project',
@@ -158,18 +158,18 @@ function makeSettingsMenu(redirectWindow) {
       {
         label: 'Open Settings',
         accelerator: 'CommandOrControl+,',
-        click: () => redirectWindow('editor?settings=project'),
+        click: () => redirectWindow('/editor?settings=project'),
       },
       {
         label: 'Project',
         submenu: [
           {
             label: 'Project data',
-            click: () => redirectWindow('editor?settings=project__data'),
+            click: () => redirectWindow('/editor?settings=project__data'),
           },
           {
             label: 'Manage projects',
-            click: () => redirectWindow('editor?settings=project__manage'),
+            click: () => redirectWindow('/editor?settings=project__manage'),
           },
         ],
       },
@@ -178,15 +178,15 @@ function makeSettingsMenu(redirectWindow) {
         submenu: [
           {
             label: 'General settings',
-            click: () => redirectWindow('editor?settings=general__settings'),
+            click: () => redirectWindow('/editor?settings=general__settings'),
           },
           {
             label: 'Editor settings',
-            click: () => redirectWindow('editor?settings=general__editor'),
+            click: () => redirectWindow('/editor?settings=general__editor'),
           },
           {
             label: 'View settings',
-            click: () => redirectWindow('editor?settings=general__view'),
+            click: () => redirectWindow('/editor?settings=general__view'),
           },
         ],
       },
@@ -195,11 +195,11 @@ function makeSettingsMenu(redirectWindow) {
         submenu: [
           {
             label: 'Custom fields',
-            click: () => redirectWindow('editor?settings=feature_settings__custom'),
+            click: () => redirectWindow('/editor?settings=feature_settings__custom'),
           },
           {
             label: 'URL presets',
-            click: () => redirectWindow('editor?settings=feature_settings__urlpresets'),
+            click: () => redirectWindow('/editor?settings=feature_settings__urlpresets'),
           },
         ],
       },
@@ -208,11 +208,11 @@ function makeSettingsMenu(redirectWindow) {
         submenu: [
           {
             label: 'Import spreadsheet',
-            click: () => redirectWindow('editor?settings=sources__xlsx'),
+            click: () => redirectWindow('/editor?settings=sources__xlsx'),
           },
           {
             label: 'Sync with Google Sheet',
-            click: () => redirectWindow('editor?settings=sources__gsheet'),
+            click: () => redirectWindow('/editor?settings=sources__gsheet'),
           },
         ],
       },
@@ -221,11 +221,11 @@ function makeSettingsMenu(redirectWindow) {
         submenu: [
           {
             label: 'OSC settings',
-            click: () => redirectWindow('editor?settings=integrations__osc'),
+            click: () => redirectWindow('/editor?settings=integrations__osc'),
           },
           {
             label: 'HTTP settings',
-            click: () => redirectWindow('editor?settings=integrations__http'),
+            click: () => redirectWindow('/editor?settings=integrations__http'),
           },
         ],
       },
@@ -234,11 +234,11 @@ function makeSettingsMenu(redirectWindow) {
         submenu: [
           {
             label: 'Event log',
-            click: () => redirectWindow('editor?settings=network__log'),
+            click: () => redirectWindow('/editor?settings=network__log'),
           },
           {
             label: 'Manage cleints',
-            click: () => redirectWindow('editor?settings=network__clients'),
+            click: () => redirectWindow('/editor?settings=network__clients'),
           },
         ],
       },
@@ -257,7 +257,7 @@ function makeHelpMenu(redirectWindow) {
     submenu: [
       {
         label: `Ontime ${releaseTag}`,
-        click: () => redirectWindow('editor?settings=about'),
+        click: () => redirectWindow('/editor?settings=about'),
       },
       {
         type: 'separator',