linking + dashboard, resume mockup

forge.config.ts

@@ -1,20 +1,33 @@
+import { AutoUnpackNativesPlugin } from '@electron-forge/plugin-auto-unpack-natives';
 import type { ForgeConfig } from '@electron-forge/shared-types';
-import { MakerSquirrel } from '@electron-forge/maker-squirrel';
-import { MakerZIP } from '@electron-forge/maker-zip';
 import { MakerDeb } from '@electron-forge/maker-deb';
 import { MakerRpm } from '@electron-forge/maker-rpm';
-import { AutoUnpackNativesPlugin } from '@electron-forge/plugin-auto-unpack-natives';
+import { MakerSquirrel } from '@electron-forge/maker-squirrel';
+import { MakerZIP } from '@electron-forge/maker-zip';
 import { WebpackPlugin } from '@electron-forge/plugin-webpack';
-
 import { mainConfig } from './webpack.main.config';
+import packageJson from './package.json';
 import { rendererConfig } from './webpack.renderer.config';
 
 const config: ForgeConfig = {
   packagerConfig: {
     asar: true,
+    protocols: [
+      {
+        "name": packageJson.productName,
+        "schemes": [packageJson.name]
+      }
+    ]
   },
   rebuildConfig: {},
-  makers: [new MakerSquirrel({}), new MakerZIP({}, ['darwin']), new MakerRpm({}), new MakerDeb({})],
+  makers: [new MakerSquirrel({}), new MakerZIP({}, ['darwin']), new MakerRpm({}),
+  {
+    "name": "@electron-forge/maker-deb",
+    "config": {
+      "mimeType": [`x-scheme-handler/${packageJson.name}`]
+    }
+  }
+  ],
   plugins: [
     new AutoUnpackNativesPlugin({}),
     new WebpackPlugin({

src/app/dashboard/index.tsx

@@ -1,7 +1,77 @@
+import {
+  Bold,
+  Button,
+  Card,
+  Col,
+  Flex,
+  Grid,
+  Metric,
+  Text,
+} from "@tremor/react";
+
 import React from "react";
+import { useAppState } from "../hooks";
 
 export const Dashboard = () => {
-  return <div>Dashboard</div>;
+  const state = useAppState();
+  const { isListRunning, isAppRunning } = state;
+
+  const toggleStartStop = async (eventName: string) => {
+    const startStop = `${eventName}:${isListRunning ? "stop" : "start"}`;
+    await (window as any).api.invoke(startStop, null);
+  };
+
+  const allEvents = [
+    { title: "Main", name: "list", isRunning: isListRunning },
+    { title: "App", name: "app", isRunning: isAppRunning },
+  ];
+
+  return (
+    <Grid numItems={1} numItemsSm={2} numItemsLg={2} className="gap-3">
+      {allEvents.map(({ isRunning, name: eventName, title }) => {
+        return (
+          <Card key={eventName}>
+            <div className="flex items-center">
+              <Metric>{title}</Metric>
+              <div className="p-3">
+                <Bold> some nice number </Bold>
+              </div>
+            </div>
+
+            <div className="flex justify-center">
+              <Button
+                onClick={() => toggleStartStop(eventName)}
+                disabled={isRunning}
+                loading={isRunning}
+              >
+                {" "}
+                {!isListRunning ? "Run" : "Running"}{" "}
+              </Button>
+
+              <div className="ml-2">
+                {isListRunning && (
+                  <Button
+                    color="red"
+                    onClick={() => toggleStartStop(eventName)}
+                  >
+                    {" "}
+                    Stop{" "}
+                  </Button>
+                )}
+              </div>
+            </div>
+          </Card>
+        );
+      })}
+
+      {/* Analytics */}
+      {/* <Col numColSpan={3}>
+        <Card>
+          <Text>Title</Text>
+        </Card>
+      </Col> */}
+    </Grid>
+  );
 };
 
 export default Dashboard;

src/app/layout.tsx

@@ -2,6 +2,7 @@ import Dashboard from "./dashboard";
 import Navbar from "./navbar";
 import Questions from "./questions";
 import React from "react";
+import Resume from "./resume";
 import Settings from "./settings";
 
 const NotFound = () => {
@@ -12,6 +13,7 @@ const routes = [
   { path: "", component: Dashboard },
   { path: "questions", component: Questions },
   { path: "settings", component: Settings },
+  { path: "resume", component: Resume },
   { path: "*", component: NotFound },
 ];
 
@@ -37,7 +39,7 @@ export const Layout = () => {
   return (
     <div className="h-full bg-gray-50 w-full">
       <Navbar user={null} />
-      <div className="p-3" style={{ paddingTop: "50px"}}>
+      <div className="p-3" style={{ paddingTop: "50px" }}>
         <Component />
       </div>
     </div>

src/app/navbar.tsx

@@ -6,6 +6,7 @@ import { Fragment } from "react";
 const navigation = [
   { name: "Dashboard", href: "/" },
   { name: "Questions", href: "/questions" },
+  { name: "Resume", href: "/resume" },
   { name: "Settings", href: "/settings" },
 ];
 

src/app/questions/list.tsx

@@ -14,18 +14,19 @@ import {
   Textarea,
   Title,
 } from "@tremor/react";
-import {
-  ClockIcon,
-  CogIcon,
-  MinusCircleIcon,
-  ShoppingCartIcon,
-  StatusOnlineIcon,
-} from "@heroicons/react/outline";
 
 import React from "react";
 import _get from "lodash/get";
 import { questionSamples } from "./list.sample";
 import { uniq } from "lodash";
+// import {
+//   ClockIcon,
+//   CogIcon,
+//   MinusCircleIcon,
+//   ShoppingCartIcon,
+//   StatusOnlineIcon,
+// } from "@heroicons/react/outline";
+
 
 const cities = [
   {

src/app/resume/index.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { Textarea } from "@tremor/react";
+
+export const ResumePage = () => {
+  return (
+    <div>
+      <Textarea rows={100} placeholder="Resume" />
+      <div className="flex justify-center mt-2 mb-2">
+        <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
+          Save
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default ResumePage;

src/app/shared.ts

@@ -7,6 +7,7 @@ export interface State {
     questions: any[];
     count: number;
     isListRunning?: boolean;
+    isAppRunning?: boolean;
     settings: ISettings;
     // TODO: add more states
 };

src/config/app.ts

@@ -2,11 +2,11 @@ import * as cheerio from "cheerio";
 
 import { APPEVENTS, AppEvents } from "../events";
 import _, { debounce } from "lodash";
+import { getAppApi, getMainApi } from "../api";
 
 import _get from "lodash/get";
 import { addJob } from "../utils/state";
 import { getBrowser } from "./browser";
-import { getMainApi } from "../api";
 
 const appEvents = AppEvents.Instance;
 
@@ -53,3 +53,46 @@ export const gotoMainPage = async (url: string) => {
     }
 }
 
+
+export const gotoAppPage = async (url: string) => {
+    try {
+
+        const browser = await getBrowser();
+        const page = await browser.newPage();
+
+        const ctx = {
+            cheerio,
+            _,
+            browser,
+            page,
+            url,
+            debounce,
+            addJob,
+        };
+
+        const getAppRes = await getAppApi();
+        if (!getAppRes) {
+            throw new Error("Error getApp api");
+        }
+
+        const mainFunc = getAppRes.data;
+
+        console.log("getAppApi", mainFunc);
+
+        return await new Promise((resolve, reject) => {
+
+            appEvents.on(APPEVENTS.APP_STOP, () => {
+                console.log("app stop");
+                page.close();
+                resolve(true);
+            });
+            const funcFunc = new Function(mainFunc);
+            funcFunc.call(null).call(null, ctx, resolve, reject);
+        });
+
+    }
+    catch (error) {
+        console.error("Error gotoAppPage", error);
+    }
+}
+

src/events/index.ts

@@ -1,6 +1,7 @@
 export const APPEVENTS = {
+    APP_STOP: 'APP_STOP',
     LIST_STOP: 'LIST_STOP',
-    
+
     SCRAP_LINKS: 'SCRAP_LINKS',
     INDEX_QUEUE: 'INDEX_QUEUE',
 }

src/index.ts

@@ -1,8 +1,12 @@
 import { APPEVENTS, AppEvents } from './events';
-import { BrowserWindow, app, ipcMain } from 'electron';
+import { BrowserWindow, app, dialog, ipcMain, shell } from 'electron';
 import { getState, setState } from "./utils/state";
 
 import { gotoMainPage } from './config/app';
+import packageJson from '../package.json';
+import path from 'node:path';
+
+const appName = packageJson.name;
 
 const appEvents = AppEvents.Instance;
 // This allows TypeScript to pick up the magic constants that's auto-generated by Forge's Webpack
@@ -11,7 +15,40 @@ const appEvents = AppEvents.Instance;
 declare const MAIN_WINDOW_WEBPACK_ENTRY: string;
 declare const MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY: string;
 
+let mainWindow: BrowserWindow = null;
 
+if (process.defaultApp) {
+  if (process.argv.length >= 2) {
+    app.setAsDefaultProtocolClient(appName, process.execPath, [path.resolve(process.argv[1])])
+  }
+} else {
+  app.setAsDefaultProtocolClient(appName)
+}
+
+const gotTheLock = app.requestSingleInstanceLock()
+
+if (!gotTheLock) {
+  app.quit()
+} else {
+  app.on('second-instance', (event, commandLine, workingDirectory) => {
+    // Someone tried to run a second instance, we should focus our window.
+    if (mainWindow) {
+      if (mainWindow.isMinimized()) mainWindow.restore()
+      mainWindow.focus()
+    }
+
+    dialog.showErrorBox('Welcome Back', `You arrived from: ${commandLine.pop().slice(0, -1)}`)
+  })
+
+  // Create mainWindow, load the rest of the app, etc...
+  app.whenReady().then(() => {
+    createWindow()
+  })
+
+  app.on('open-url', (event, url) => {
+    dialog.showErrorBox('Welcome Back', `You arrived from: ${url}`)
+  })
+}
 
 // Handle creating/removing shortcuts on Windows when installing/uninstalling.
 if (require('electron-squirrel-startup')) {
@@ -20,12 +57,13 @@ if (require('electron-squirrel-startup')) {
 
 const createWindow = (): void => {
   // Create the browser window.
-  const mainWindow = new BrowserWindow({
-    height: 600,
-    width: 800,
+  mainWindow = new BrowserWindow({
+    height: 700,
+    width: 1000,
     webPreferences: {
       preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY,
       nodeIntegration: true,
+      devTools: false,
     },
   });