Boilerplate

.gitignore

@@ -1,3 +1,4 @@
 /node_modules
 /.vscode
-/dist
+/dist
+/build

backend/main.js → backend/main.ts

@@ -1,17 +1,19 @@
 // main.js is the entry point to the main process (the node process)
 
 // Import parts of electron to use
-const { app, BrowserWindow } = require('electron');
-const path = require('path');
-const url = require('url');
+import { app, BrowserWindow } from 'electron';
+import { join } from 'path';
+import { format } from 'url';
+import { Children } from 'react';
 
 /************************************************************
-********* CREATE & CLOSE WINDOW UPON INITIALIZATION *********
-************************************************************/
+ ********* CREATE & CLOSE WINDOW UPON INITIALIZATION *********
+ ************************************************************/
 
-// Keep a global reference of the window object, if you don't, the window will
+// Keep a global reference of the window objects, if you don't, the window will
 // be closed automatically when the JavaScript object is garbage collected.
-let mainWindow;
+let mainWindow: any;
+let splashWindow: any;
 
 // Keep a reference for dev mode
 let dev = false;
@@ -26,17 +28,24 @@ function createWindow() {
     height: 1200,
     minWidth: 800,
     minHeight: 600,
-    title: "SeeQR",
+    title: 'SeeQR',
     show: false,
     webPreferences: {
       nodeIntegration: true,
     },
   });
+  // Create splash window
+  splashWindow = new BrowserWindow({
+    width: 800,
+    height: 600,
+    webPreferences: { nodeIntegration: true },
+    parent: mainWindow,
+  });
 
   // Load index.html of the app
   let indexPath;
   if (dev && process.argv.indexOf('--noDevServer') === -1) {
-    indexPath = url.format({
+    indexPath = format({
       protocol: 'http:',
       host: 'localhost:8080',
       pathname: 'index.html',
@@ -45,29 +54,43 @@ function createWindow() {
     mainWindow.webContents.openDevTools();
   } else {
     // In production mode, load the bundled version of index.html inside the dist folder.
-    indexPath = url.format({
+    indexPath = format({
       protocol: 'file:',
-      pathname: path.join(__dirname, '../dist', 'index.html'),
+      pathname: join(__dirname, '../dist', 'index.html'),
       slashes: true,
     });
   }
 
   mainWindow.loadURL(indexPath);
+  splashWindow.loadURL(indexPath);
+
   // Don't show until we are ready and loaded
+  // Once the main window is ready, it will remain hidden when splash is focused
   mainWindow.once('ready-to-show', () => {
-    mainWindow.show();
+    if (splashWindow != null && splashWindow.isVisible()) {
+      mainWindow.hide();
+      splashWindow.focus();
+    }
   });
+  // When splash window is open and visible, it sits on top
+  // Main window is hidden
+
   // Emitted when the window is closed.
   mainWindow.on('closed', function () {
     // De-reference the window object. Usually you would store windows
     // in an array if your app supports multi windows, this is the time
     // when you should delete the corresponding element.
     mainWindow = null;
   });
+  // when splash window is closed, main window is shown
+  splashWindow.on('closed', () => {
+    splashWindow = null;
+    mainWindow.show();
+  });
 }
 
-// Invoke createWindow to create browser windows after 
-// Electron has been initialized.Some APIs can only be used 
+// Invoke createWindow to create browser windows after
+// Electron has been initialized.Some APIs can only be used
 // after this event occurs.
 app.on('ready', createWindow);
 

frontend/components/App.jsx → frontend/components/App.tsx

@@ -3,9 +3,8 @@ import React from 'react';
 const { remote } = require('electron');
 const { dialog } = remote;
 
-
 class App extends React.Component {
-  constructor(props) {
+  constructor(props: any) {
     super(props);
     // this.handleFileClick = this.handleFileClick.bind(this);
   }
@@ -37,15 +36,14 @@ class App extends React.Component {
   render() {
     return (
       <div>
-        <h1 style={{ "color": "black" }}>SeeQR</h1>
+        <h1 style={{ color: 'black' }}>SeeQR</h1>
         {/* <h3 style={{ "color": "black" }}>Welcome!</h3>
         <h3 style={{ "color": "black" }}>Import database?</h3>
         <button>Skip</button>
         <button onClick={this.handleFileClick}>Yes</button> */}
-      </div >
-    )
+      </div>
+    );
   }
-
 }
 
 export default App;

frontend/index.js → frontend/index.tsx

@@ -9,7 +9,7 @@ document.body.appendChild(root);
 
 render(
   <div>
-    <App />
+    <App/>
   </div>,
   document.getElementById('root')
 );