Typescript: Completed about app

package.json

@@ -82,6 +82,8 @@
     "@types/auto-launch": "^5.0.0",
     "@types/lodash.omit": "^4.5.4",
     "@types/node": "10.11.4",
+    "@types/react": "16.4.18",
+    "@types/react-dom": "16.0.9",
     "babel-cli": "6.26.0",
     "babel-eslint": "7.2.3",
     "babel-plugin-transform-async-to-generator": "6.24.1",

src/browser/main.ts

@@ -8,7 +8,6 @@ import { autoLaunchInstance } from './auto-launch-controller';
 import setChromeFlags from './chrome-flags';
 import { config } from './config-handler';
 import { windowHandler } from './window-handler';
-import { createComponentWindow } from './window-utils';
 
 const allowMultiInstance: string | boolean = getCommandLineArgs(process.argv, '--multiInstance', true) || isDevEnv;
 const singleInstanceLock: boolean = allowMultiInstance ? true : app.requestSingleInstanceLock();
@@ -38,8 +37,6 @@ async function main() {
         await autoLaunchInstance.handleAutoLaunch();
     }
 
-    createComponentWindow('about-app');
-
     /**
      * Sets chrome flags from global config
      */

src/browser/window-handler.ts

@@ -4,6 +4,9 @@ import * as url from 'url';
 
 import { getCommandLineArgs } from '../common/utils';
 import { config, IConfig } from './config-handler';
+import { createComponentWindow } from './window-utils';
+
+const { buildNumber, clientVersion, version } = require('../../package.json');// tslint:disable-line:no-var-requires
 
 export class WindowHandler {
 
@@ -63,13 +66,16 @@ export class WindowHandler {
 
     private readonly windowOpts: Electron.BrowserWindowConstructorOptions;
     private readonly globalConfig: IConfig;
+    // Window reference
     private mainWindow: Electron.BrowserWindow | null;
     private loadingWindow: Electron.BrowserWindow | null;
+    private aboutAppWindow: Electron.BrowserWindow | null;
 
     constructor(opts?: Electron.BrowserViewConstructorOptions) {
         this.windowOpts = { ... WindowHandler.getMainWindowOpts(), ...opts };
         this.mainWindow = null;
         this.loadingWindow = null;
+        this.aboutAppWindow = null;
         this.globalConfig = config.getGlobalConfigFields([ 'url', 'crashReporter' ]);
 
         try {
@@ -94,6 +100,7 @@ export class WindowHandler {
                 this.loadingWindow = null;
             }
             if (this.mainWindow) this.mainWindow.show();
+            this.createAboutAppWindow();
         });
         return this.mainWindow;
     }
@@ -116,6 +123,18 @@ export class WindowHandler {
         this.loadingWindow.setMenu(null as any);
         this.loadingWindow.once('closed', () => this.loadingWindow = null);
     }
+
+    /**
+     * creates a about app window
+     */
+    public createAboutAppWindow() {
+        this.aboutAppWindow = createComponentWindow('about-app');
+            this.aboutAppWindow.webContents.once('did-finish-load', () => {
+                if (this.aboutAppWindow) {
+                    this.aboutAppWindow.webContents.send('data', { buildNumber, clientVersion, version });
+                }
+            });
+    }
 }
 
 const windowHandler = new WindowHandler();

src/browser/window-utils.ts

@@ -1,4 +1,5 @@
 import { BrowserWindow } from 'electron';
+import * as path from 'path';
 import * as url from 'url';
 import { windowHandler } from './window-handler';
 
@@ -23,6 +24,9 @@ export function createComponentWindow(
         show: false,
         width: 300,
         ...opts,
+        webPreferences: {
+            preload: path.join(__dirname, '../renderer/preload-component'),
+        },
     };
 
     const browserWindow = new BrowserWindow(options);

src/renderer/about-app.tsx

@@ -1,23 +1,40 @@
+import { ipcRenderer, remote } from 'electron';
 import * as React from 'react';
 
+interface IState {
+    appName: string | undefined;
+    copyWrite: string | undefined;
+    clientVersion: string | undefined;
+    buildNumber: string | undefined;
+    version: string | undefined;
+}
+
 /**
  * Window that display app version and copyright info
  */
-export default class AboutBox extends React.Component {
+export default class AboutBox extends React.Component<{}, IState> {
 
-    private readonly eventHandlers = {
-        onSubmit: () => this.handleSubmit(),
-    };
-
-    constructor() {
-        super();
+    constructor(props) {
+        super(props);
+        this.state = {
+            appName: remote.app.getName() || 'Symphony',
+            buildNumber: '',
+            clientVersion: '',
+            copyWrite: `Copyright \xA9 ${new Date().getFullYear()} Symphony`,
+            version: '',
+        };
     }
 
     /**
-     * test
+     * comp
      */
-    public handleSubmit(): void {
-        console.log('test');
+    public componentWillMount() {
+        ipcRenderer.on('data', (_EVENT: Electron.Event, args: IState) => {
+            this.setState({
+                copyWrite: `Copyright \xA9 ${new Date().getFullYear()} ${this.state.appName}`,
+                version: `Version ${args.clientVersion}-${args.version} (${args.buildNumber})`,
+            });
+        });
     }
 
     /**
@@ -27,9 +44,9 @@ export default class AboutBox extends React.Component {
         return (
             <div className='content'>
                 <img className='logo' src='symphony-logo.png'/>
-                <span id='app-name' className='name'>Symphony</span>
-                <span id='version' className='version-text'/>
-                <span id='copyright' className='copyright-text' onclick={this.eventHandlers.onSubmit()}/>
+                <span id='app-name' className='name'>{this.state.appName}</span>
+                <span id='version' className='version-text'>{this.state.version}</span>
+                <span id='copyright' className='copyright-text'>{this.state.copyWrite}</span>
             </div>
         );
     }

src/renderer/preload-component.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import AboutBox from './about-app';
+
+document.addEventListener('DOMContentLoaded', load);
+
+/**
+ * Loads the appropriate component
+ */
+export function load() {
+    const query = new URL(window.location.href).searchParams;
+    const componentName = query.get('componentName');
+
+    let component;
+    switch (componentName) {
+        case 'about-app':
+            component = AboutBox;
+            break;
+    }
+    const element = React.createElement(component);
+    ReactDOM.render(element, document.getElementById('Root'));
+}

src/renderer/react-window.html

@@ -23,17 +23,4 @@
 <body style="overflow: hidden; background-color: white; margin: 0">
     <div id="Root"></div>
 </body>
-<script>
-    import * as React from 'react';
-    import * as ReactDOM from 'react-dom';
-    import { URL } from 'url';
-
-    const query = new URL(window.location.href).searchParams;
-    const componentName = query.get('component');
-    const componentPath = `../renderer/${componentName}`;
-
-    const component = require(componentPath)[componentName];
-    const element = React.createElement(component);
-    ReactDOM.render(element, document.getElementById('Root'));
-</script>
 </html>