feat: add requirements route

Author: MarcScheib

package-lock.json

@@ -50,6 +50,7 @@
     "axios": "^1.4.0",
     "electron-squirrel-startup": "^1.0.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.14.1"
   }
 }

package.json

@@ -1,5 +1,6 @@
-import { app, BrowserWindow, ipcMain, IpcMainEvent } from 'electron';
 import { exec } from 'child_process';
+import { app, BrowserWindow, ipcMain } from 'electron';
+import { promisify } from 'node:util';
 
 // This allows TypeScript to pick up the magic constants that's auto-generated by Forge's Webpack
 // plugin that tells the Electron app where to look for the Webpack-bundled app code (depending on
@@ -33,7 +34,7 @@ const createWindow = (): void => {
 // initialization and is ready to create browser windows.
 // Some APIs can only be used after this event occurs.
 app.on('ready', () => {
-  ipcMain.on('set-title', handleSetTitle);
+  ipcMain.handle('get-requirements', getRequirements);
 
   return createWindow();
 });
@@ -57,19 +58,21 @@ app.on('activate', () => {
 
 // In this file you can include the rest of your app's specific main process
 // code. You can also put them in separate files and import them here.
-function handleSetTitle(event: IpcMainEvent, title: string) {
-  exec('node -v', (error, stdout, stderr) => {
-    if (error) {
-      console.log(`error: ${error.message}`);
-      return;
-    }
-    if (stderr) {
-      console.log(`stderr: ${stderr}`);
-      return;
-    }
-    console.log(`stdout: ${stdout}`);
-    const webContents = event.sender;
-    const win = BrowserWindow.fromWebContents(webContents);
-    win.setTitle(stdout);
-  });
+const requirements = [
+  'node -v',
+  'npm -v',
+  'mvn --version',
+  'java -version',
+  'git --version',
+];
+const execPromise = promisify(exec);
+
+async function getRequirements(): Promise<
+  { stdout: string; stderr: string }[]
+> {
+  return Promise.all(
+    requirements.map(requirement => {
+      return execPromise(requirement);
+    })
+  );
 }

src/index.ts

@@ -1,5 +1,5 @@
 import { contextBridge, ipcRenderer } from 'electron';
 
 contextBridge.exposeInMainWorld('electronAPI', {
-  setTitle: (title: string) => ipcRenderer.send('set-title', title),
+  getRequirements: () => ipcRenderer.invoke('get-requirements'),
 });

src/preload.ts

@@ -1,10 +1,40 @@
+import React from 'react';
 import { createRoot } from 'react-dom/client';
+import { createHashRouter, RouterProvider } from 'react-router-dom';
+import Requirements from './modules/requirements/requirements';
 import { TipManager } from './tip-manager';
+import Overview from './modules/overview/main';
+
+const router = createHashRouter([
+  {
+    path: '/',
+    element: <TipManager />,
+    errorElement: (
+      <div>
+        <a href="/main_window">Home</a>
+      </div>
+    ),
+    children: [
+      {
+        path: 'requirements',
+        element: <Requirements />,
+      },
+      {
+        index: true,
+        element: <Overview />,
+      }
+    ],
+  },
+]);
 
 function render() {
   const container = document.getElementById('app');
   const root = createRoot(container);
-  root.render(<TipManager />);
+  root.render(
+    <React.StrictMode>
+      <RouterProvider router={router} />
+    </React.StrictMode>
+  );
 }
 
 render();

src/ui/app.tsx

@@ -1,11 +1,15 @@
 declare global {
   interface Window {
-    electronAPI: any;
+    electronAPI: ElectronAPI;
   }
 }
 
+export interface ElectronAPI {
+  getRequirements: () => Promise<{ stdout: string; stderr: string }[]>;
+}
+
 export class BaseAPI {
-  private _base: any;
+  private _base: ElectronAPI;
 
   get base() {
     return this._base;

src/ui/electron-api/base.ts

@@ -1,7 +1,7 @@
-import { BaseAPI } from "./base";
+import { BaseAPI } from './base';
 
 export class CommonAPI extends BaseAPI {
-  setTitle(title: string) {
-    this.base.setTitle(title);
+  async getRequirements(): Promise<{ stdout: string; stderr: string }[]> {
+    return this.base.getRequirements();
   }
 }

src/ui/electron-api/common.ts

@@ -0,0 +1,20 @@
+import Typography from '@mui/material/Typography';
+
+export default function Overview() {
+  return (
+    <Typography paragraph>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus
+      non enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
+      imperdiet. Semper risus in hendrerit gravida rutrum quisque non tellus.
+      Convallis convallis tellus id interdum velit laoreet id donec ultrices.
+      Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit
+      adipiscing bibendum est ultricies integer quis. Cursus euismod quis
+      viverra nibh cras. Metus vulputate eu scelerisque felis imperdiet proin
+      fermentum leo. Mauris commodo quis imperdiet massa tincidunt. Cras
+      tincidunt lobortis feugiat vivamus at augue. At augue eget arcu dictum
+      varius duis at consectetur lorem. Velit sed ullamcorper morbi tincidunt.
+      Lorem donec massa sapien faucibus et molestie ac.
+    </Typography>
+  );
+}

src/ui/modules/overview/main.tsx

@@ -0,0 +1,26 @@
+import Button from '@mui/material/Button';
+import { useState } from 'react';
+import { CommonAPI } from '../../electron-api/common';
+
+export default function Requirements() {
+  const getRequirements = async () => {
+    const requirements = await new CommonAPI().getRequirements();
+    setRequirements(requirements.map(requirement => requirement.stdout));
+  };
+
+  const [requirements, setRequirements] = useState<string[]>([]);
+
+  return (
+    <div>
+      <h1>Requirements</h1>
+      <Button variant="contained" onClick={getRequirements}>
+        Check
+      </Button>
+      <ul>
+        {requirements.map((requirement, index) => (
+          <li key={index}>{requirement}</li>
+        ))}
+      </ul>
+    </div>
+  );
+}