refactor: with redux

package.json

@@ -33,6 +33,7 @@
     "@electron-forge/plugin-auto-unpack-natives": "^7.2.0",
     "@electron-forge/plugin-vite": "^7.2.0",
     "@electron-forge/publisher-github": "^7.2.0",
+    "@reduxjs/toolkit": "^2.1.0",
     "@types/eslint": "^8",
     "@types/ini": "^4.1.0",
     "@types/lodash-es": "^4.17.12",
@@ -59,6 +60,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.3",
+    "react-redux": "^9.1.0",
     "typescript": "^5.3.3",
     "universal-analytics": "^0.5.3"
   },

src/main.ts

@@ -15,10 +15,11 @@ import { WinAdapter } from "./main/win";
 import { MacosAdapter } from "./main/macos";
 import { LinuxAdapter } from "./main/linux";
 import { setUpdater, setReporter } from "./main/utils";
-import { AppInfo } from "./renderer/app-context";
-import { PageInfo, SessionDispatch } from "./renderer/session-context";
+import { AppInfo } from "./reducers/app";
+import { PageInfo, sessionSlice } from "./reducers/session";
 import getPort from "get-port";
 import { v4 } from "uuid";
+import { Dispatch } from "./reducers";
 
 // Handle creating/removing shortcuts on Windows when installing/uninstalling.
 if (require("electron-squirrel-startup")) {
@@ -64,12 +65,9 @@ if (!gotTheLock) {
   app.quit();
 } else {
   // send action to renderer
-  // const appDispatch: AppDispatch = (action) => {
-  //   mainWindow?.webContents.send("app-dispatch", action);
-  // };
-  const sessionDispatch: SessionDispatch = (action) => {
-    mainWindow?.webContents.send("session-dispatch", action);
-  };
+  const dispatch = ((action: unknown) => {
+    mainWindow?.webContents.send("dispatch", action);
+  }) as Dispatch;
 
   app.on("second-instance", () => {
     if (mainWindow) {
@@ -160,20 +158,21 @@ if (!gotTheLock) {
     );
 
     const sessionId = v4();
-    sessionDispatch({
-      type: "add",
-      sessionId,
-      appId: app.id,
-      nodePort,
-      windowPort,
-    });
+    dispatch(
+      sessionSlice.actions.add({
+        sessionId,
+        appId: app.id,
+        nodePort,
+        windowPort,
+      }),
+    );
 
     sp.on("error", (err) => {
       dialog.showErrorBox(`Error: ${app.name}`, err.message);
     });
     sp.on("close", () => {
       // console.log(`child process exited with code ${code}`)
-      sessionDispatch({ type: "remove", sessionId });
+      dispatch(sessionSlice.actions.remove(sessionId));
       // TODO: Remove temp app
     });
 
@@ -182,7 +181,12 @@ if (!gotTheLock) {
       (chunk: Buffer) => {
         // TODO: stderr colors
         console.log(isError);
-        sessionDispatch({ type: "log", sessionId, text: chunk.toString() });
+        dispatch(
+          sessionSlice.actions.updateLog({
+            sessionId,
+            text: chunk.toString(),
+          }),
+        );
       };
 
     if (sp.stdout) {
@@ -201,6 +205,7 @@ if (!gotTheLock) {
     const pages = payloads.flatMap((p) =>
       p.status === "fulfilled" ? p.value : [],
     );
+    console.log(ports, pages);
     return pages;
   });
   ipcMain.handle("read-apps", () => {

src/main/adapter.ts

@@ -1,4 +1,4 @@
-import { AppInfo } from "../renderer/app-context";
+import { AppInfo } from "../reducers/app";
 
 export abstract class Adapter {
   abstract readApps(): Promise<(AppInfo | undefined)[]>;

src/main/linux.ts

@@ -3,7 +3,7 @@ import ini from "ini";
 import fs from "fs";
 import { Adapter } from "./adapter";
 import { readdirSafe, readFileSafe } from "./utils";
-import { AppInfo } from "../renderer/app-context";
+import { AppInfo } from "../reducers/app";
 
 const desktopFilesDir = "/usr/share/applications";
 

src/main/utils.ts

@@ -2,10 +2,16 @@ import fs from "fs";
 import os from "os";
 // import { setUpdateNotification } from 'electron-update-notification' // TODO:
 import plist from "simple-plist";
-import { MacosAppInfo } from "../types";
 import { machineId } from "node-machine-id";
 import ua from "universal-analytics";
 
+interface MacosAppInfo {
+  CFBundleIdentifier: string;
+  CFBundleName: string;
+  CFBundleExecutable: string;
+  CFBundleIconFile: string;
+}
+
 export async function readdirSafe(p: string) {
   try {
     return await fs.promises.readdir(p);

src/main/win.ts

@@ -3,7 +3,7 @@ import path from "path";
 import type { HKEY, RegistryValue, RegistryStringEntry } from "registry-js";
 import { Adapter } from "./adapter";
 import { readdirSafe } from "./utils";
-import { AppInfo } from "../renderer/app-context";
+import { AppInfo } from "../reducers/app";
 
 export class WinAdapter extends Adapter {
   async readApps() {

src/reducers/app.tsx

@@ -0,0 +1,60 @@
+import { asyncThunkCreator, buildCreateSlice } from "@reduxjs/toolkit";
+
+type AppId = string;
+export type AppInfo = {
+  id: AppId;
+  name: string;
+  icon: string;
+  exePath: string;
+  hidden?: boolean;
+};
+type State = {
+  status: "idle" | "loading" | "failed";
+  info: Record<AppId, AppInfo>;
+};
+
+const initialState: State = {
+  status: "idle",
+  info: {},
+};
+
+export const appSlice = buildCreateSlice({
+  creators: { asyncThunk: asyncThunkCreator },
+})({
+  name: "app",
+  initialState,
+  reducers: (create) => ({
+    read: create.asyncThunk(
+      async () => {
+        const { ipcRenderer } = require("electron");
+        const apps: AppInfo[] = await ipcRenderer.invoke("read-apps");
+        return apps;
+      },
+      {
+        pending: (state) => {
+          state.status = "loading";
+        },
+        fulfilled: (state, action) => {
+          state.status = "idle";
+          state.info = action.payload
+            .sort((a, b) => (a.id < b.id ? -1 : 1))
+            .reduce((s, app) => {
+              return {
+                ...s,
+                [app.id]: app,
+              };
+            }, state.info);
+        },
+        rejected: (state) => {
+          state.status = "failed";
+        },
+      },
+    ),
+    addTemp: create.reducer<AppInfo>((state, { payload }) => {
+      if (payload) {
+        state.info[payload.id] = payload; // TODO: Remove it after session closed
+        state.info[payload.id]!.hidden = true;
+      }
+    }),
+  }),
+});

src/reducers/index.ts

@@ -0,0 +1,14 @@
+import * as rr from "react-redux";
+import { combineSlices, configureStore } from "@reduxjs/toolkit";
+import { appSlice } from "./app";
+import { sessionSlice } from "./session";
+
+const reducer = combineSlices(appSlice, sessionSlice);
+export const store = configureStore({ reducer });
+
+export type Dispatch = (typeof store)["dispatch"];
+
+export const useDispatch =
+  rr.useDispatch.withTypes<(typeof store)["dispatch"]>();
+export const useSelector =
+  rr.useSelector.withTypes<ReturnType<typeof reducer>>();

src/reducers/session.tsx

@@ -0,0 +1,73 @@
+import { asyncThunkCreator, buildCreateSlice } from "@reduxjs/toolkit";
+
+type SessionId = string;
+type PageId = string;
+export type PageInfo = {
+  description: string;
+  devtoolsFrontendUrl: string;
+  id: PageId;
+  title: string;
+  type: "node" | "page" | "webview";
+  url: string;
+};
+type SessionInfo = {
+  appId: string;
+  pages: Record<string, PageInfo>;
+  log: string;
+  nodePort: number;
+  windowPort: number;
+};
+type State = Record<SessionId, SessionInfo>;
+
+const initialState: State = {};
+
+export const sessionSlice = buildCreateSlice({
+  creators: { asyncThunk: asyncThunkCreator },
+})({
+  name: "session",
+  initialState,
+  reducers: (create) => ({
+    add: create.reducer<{
+      sessionId: SessionId;
+      appId: string;
+      nodePort: number;
+      windowPort: number;
+    }>((state, { payload }) => {
+      state[payload.sessionId] = {
+        appId: payload.appId,
+        nodePort: payload.nodePort,
+        windowPort: payload.windowPort,
+        pages: {},
+        log: "",
+      };
+    }),
+    remove: create.reducer<SessionId>((state, { payload }) => {
+      delete state[payload];
+    }),
+    updatePages: create.asyncThunk(
+      async ({ ports, sessionId }: { ports: number[]; sessionId: string }) => {
+        const { ipcRenderer } = require("electron");
+        const pages: PageInfo[] = await ipcRenderer.invoke(
+          "fetch-pages",
+          ports,
+        );
+        return { sessionId, pages };
+      },
+      {
+        fulfilled: (state, { payload: { sessionId, pages } }) => {
+          state[sessionId]!.pages = {};
+          pages
+            .sort((a, b) => (a.id < b.id ? -1 : 1))
+            .forEach((page) => {
+              state[sessionId]!.pages[page.id] = page;
+            });
+        },
+      },
+    ),
+    updateLog: create.reducer<{ sessionId: string; text: string }>(
+      (state, { payload }) => {
+        state[payload.sessionId]!.log += payload.text;
+      },
+    ),
+  }),
+});