Merge pull request #27 from oslabs-beta/sean

Possible final merge?

Author: jujupro

app/.electron/main.js renamed to app/.electron/main.ts

@@ -1,35 +1,32 @@
-const electron = require('electron');
-
 /*
 @description: main.js is what controls the lifecycle of the electron application from initialization to termination.
 @actions: codes for Github Oauth has been commented out because of lack of functionality.
 */
 require('dotenv').config();
 const { DEV_PORT } = require('../../config.js');
 const path = require('path');
-const {
+import {
   app,
   protocol,
-  dialog,
   BrowserWindow,
   session,
-  ipcMain
-} = require('electron');
+  ipcMain,
+  dialog
+} from 'electron';
 // The splash screen is what appears while the app is loading
 // const { initSplashScreen, OfficeTemplate } = require('electron-splashscreen');
-const { resolve } = require('app-root-path');
-
+import { resolve } from 'app-root-path';
 // to install react dev tool extension
 // const {
 //   default: installExtension,
 //   REACT_DEVELOPER_TOOLS
 // } = require('electron-devtools-installer');
-const debug = require('electron-debug');
-
+import debug from 'electron-debug';
 // import custom protocol in protocol.js
-const Protocol = require('./protocol');
+import Protocol from './protocol';
 // menu from another file to modularize the code
-const MenuBuilder = require('./menu');
+
+import MenuBuilder from './menu';
 
 // mode that the app is running in
 const isDev =
@@ -39,8 +36,8 @@ const selfHost = `http://localhost:${port}`;
 
 // Keep a global reference of the window object, if you don't, the window will
 // be closed automatically when the JavaScript object is garbage collected.
-let win;
-let menuBuilder;
+let win: BrowserWindow | null;
+let menuBuilder: any;
 
 // function to create a new browser window
 // this function will be called when Electron has initialized itself
@@ -108,15 +105,15 @@ async function createWindow() {
 
   // load page once window is loaded
   win.once('ready-to-show', () => {
-    win.show();
+    win!.show();
   });
 
   // automatically open DevTools when opening the app
   // Note: devtools is creating many errors in the logs at the moment but can't figure out how to resolve the issue
   if (isDev) {
     win.webContents.once('dom-ready', () => {
       debug();
-      win.webContents.openDevTools();
+      win!.webContents.openDevTools();
     });
   }
 
@@ -128,7 +125,7 @@ async function createWindow() {
     app.quit();
   });
 
-  menuBuilder = MenuBuilder(win, 'ReacType');
+  menuBuilder = MenuBuilder(win!, 'ReacType');
   menuBuilder.buildMenu();
 
   // Removed this security feature for now since it's not being used
@@ -141,7 +138,7 @@ async function createWindow() {
   ses
     .fromPartition(partition)
     .setPermissionRequestHandler((webContents, permission, callback) => {
-      const allowedPermissions = []; // Full list here: https://developer.chrome.com/extensions/declare_permissions#manifest
+      const allowedPermissions: string[] = []; // Full list here: https://developer.chrome.com/extensions/declare_permissions#manifest
 
       if (allowedPermissions.includes(permission)) {
         callback(true); // Approve permission request
@@ -196,7 +193,7 @@ app.on('ready', createWindow);
 
 // Quit when all windows are closed.
 app.on('window-all-closed', () => {
-  win.webContents.executeJavaScript('window.localStorage.clear();');
+  win!.webContents.executeJavaScript('window.localStorage.clear();');
   app.quit();
 });
 
@@ -343,7 +340,7 @@ ipcMain.on('choose_app_dir', (event) => {
   // dialog displays the native system's dialogue for selecting files
   // once a directory is chosen send a message back to the renderer with the path of the directory
   dialog
-    .showOpenDialog(win, {
+    .showOpenDialog(win!, {
       properties: ['openDirectory'],
       buttonLabel: 'Export'
     })
@@ -419,7 +416,7 @@ ipcMain.on('github', (event) => {
 
     if (code || error) {
       // Close the browser if code found or error
-      authWindow.destroy();
+      github.destroy();
     }
 
     // If there is a code, proceed to get token from github
@@ -464,9 +461,9 @@ ipcMain.on('github', (event) => {
         message: 'Github Oauth Successful!'
       });
       github.close();
-      win.webContents
+      win!.webContents
         .executeJavaScript(`window.localStorage.setItem('ssid', '${ssid}')`)
-        .then((result) => win.loadURL(`${redirectUrl}`))
+        .then((result) => win!.loadURL(`${redirectUrl}`))
         .catch((err) => console.log(err));
     }
   });

app/.electron/menu.js renamed to app/.electron/menu.ts

@@ -1,7 +1,6 @@
-const { Menu } = require('electron');
-const { BrowserWindow } = require('electron');
+import { Menu, BrowserWindow, Shell } from 'electron';
 const isMac = process.platform === 'darwin';
-const Protocol = require('./protocol');
+import Protocol from './protocol';
 /* 
 DESCRIPTION: This file generates an array containing a menu based on the operating system the user is running.
 menuBuilder: The entire file is encompassed in menuBuilder. Ultimately, menuBuilder returns a function called
@@ -25,14 +24,14 @@ defaultTemplate: returns an array of submenus (each an array)
 */
 
 // Create a template for a menu and create menu using that template
-var MenuBuilder = function(mainWindow, appName) {
+var MenuBuilder = function (mainWindow, appName) {
   // https://electronjs.org/docs/api/menu#main-process
   // "roles" are predefined by Electron and used for standard actions
   // https://www.electronjs.org/docs/api/menu-item
   // you can also create custom menu items with their own "on click" functionality if you need to
   // different roles are available between mac and windows
 
-  const openTutorial = () => {
+  function openTutorial(): void {
     const tutorial = new BrowserWindow({
       width: 1180,
       height: 900,
@@ -54,47 +53,28 @@ var MenuBuilder = function(mainWindow, appName) {
       tutorial.loadURL(`${Protocol.scheme}://rse/index-prod.html#/tutorial`);
     }
     tutorial.show();
-  };
+  }
 
-  let defaultTemplate = function() {
-    return [
+  const defaultTemplate= (): Electron.MenuItemConstructorOptions[] => [
       ...(isMac
         ? [
             {
               // on Mac, the first menu item name should be the name of the app
               label: appName,
               submenu: [
-                {
-                  role: 'about'
-                },
-                {
-                  type: 'separator'
-                },
-                {
-                  role: 'services'
-                },
-                {
-                  type: 'separator'
-                },
-                {
-                  role: 'hide'
-                },
-                {
-                  role: 'hideothers'
-                },
-                {
-                  role: 'unhide'
-                },
-                {
-                  type: 'separator'
-                },
-                {
-                  role: 'quit'
-                }
-              ]
-            }
+                {role: 'about'},
+                {type: 'separator'},
+                {role: 'services'},
+                {type: 'separator'},
+                {role: 'hide'},
+                {role: 'hideothers'},
+                {role: 'unhide'},
+                {type: 'separator'},
+                {role: 'quit'}
+              ] as Electron.MenuItemConstructorOptions[],
+            } ,
           ]
-        : []),
+        : []),Electron.MenuItemConstructorOptions[],
       {
         label: 'File',
         submenu: [
@@ -250,11 +230,13 @@ var MenuBuilder = function(mainWindow, appName) {
         ]
       }
     ];
-  };
+
+    return template;
+  }
 
   // constructs menu from default template
   return {
-    buildMenu: function() {
+    buildMenu: function () {
       const menu = Menu.buildFromTemplate(defaultTemplate());
       Menu.setApplicationMenu(menu);
 
@@ -263,4 +245,4 @@ var MenuBuilder = function(mainWindow, appName) {
   };
 };
 
-module.exports = MenuBuilder;
+export { MenuBuilder };

app/.electron/preload.js renamed to app/.electron/preload.ts

@@ -1,19 +1,19 @@
 // contextBridge is what allows context to be translated between the main process and the render process
-const { contextBridge } = require('electron');
-const { existsSync, writeFileSync, mkdirSync, writeFile } = require('fs');
-const formatCode = require('./preloadFunctions/format');
-const {
+import { contextBridge } from 'electron';
+import { existsSync, writeFileSync, mkdirSync, writeFile } from 'fs';
+import formatCode from './preloadFunctions/format';
+import {
   chooseAppDir,
   addAppDirChosenListener,
   removeAllAppDirChosenListeners
-} = require('./preloadFunctions/chooseAppDir');
-const {
+} from './preloadFunctions/chooseAppDir';
+import {
   setCookie,
   getCookie,
   delCookie,
   github,
   tutorial
-} = require('./preloadFunctions/cookies');
+} from './preloadFunctions/cookies';
 
 /* 
 DESCRIPTION: This file appears to limit the node methods the Electron app can access.

app/.electron/preloadFunctions/chooseAppDir.js

@@ -0,0 +1,31 @@
+import { ipcRenderer, IpcRendererEvent } from 'electron';
+import { type } from 'os';
+
+type AppDirSelectedCallback = (path: string) => void;
+
+const chooseAppDir = (): void => {
+  ipcRenderer.send('choose_app_dir');
+};
+
+// once an app directory is chosen, the main process will send an "app_dir_selected" event
+// when this event occurs, exucte the callback passed in by the user
+const addAppDirChosenListener = (callback: AppDirSelectedCallback): void => {
+  ipcRenderer.on(
+    'app_dir_selected',
+    (event: IpcRendererEvent, path: string) => {
+      callback(path);
+    }
+  );
+};
+
+// removes all listeners for the app_dir_selected event
+// this is important because otherwise listeners will pile up and events will trigger multiple events
+const removeAllAppDirChosenListeners = (): void => {
+  ipcRenderer.removeAllListeners('app_dir_selected');
+};
+
+export {
+  chooseAppDir,
+  addAppDirChosenListener,
+  removeAllAppDirChosenListeners
+};

app/.electron/preloadFunctions/chooseAppDir.ts

@@ -0,0 +1,27 @@
+import { ipcRenderer, IpcRendererEvent } from 'electron';
+
+type GetCookieCallback = (cookie: string) => void;
+
+const setCookie = (): void => {
+  ipcRenderer.send('set_cookie');
+};
+
+const getCookie = (callback: GetCookieCallback): void => {
+  ipcRenderer.on('give_cookie', (event: IpcRendererEvent, cookie: string) => {
+    callback(cookie);
+  });
+};
+
+const delCookie = (): void => {
+  ipcRenderer.send('delete_cookie');
+};
+
+const github = (): void => {
+  ipcRenderer.send('github');
+};
+
+const tutorial = (): void => {
+  ipcRenderer.send('tutorial');
+};
+
+export { setCookie, getCookie, delCookie, github, tutorial };

app/.electron/preloadFunctions/cookies.js

@@ -1,9 +1,9 @@
-const { format } = require('prettier');
+import { format } from 'prettier';
 
 // format code using prettier
 // this format function is used in the render process to format the code in the code preview
 // the format function is defined in the main process because it needs to access node functionality ('fs')
-const formatCode = code => {
+const formatCode = (code: string): string => {
   return format(code, {
     singleQuote: true,
     trailingComma: 'es5',
@@ -13,4 +13,4 @@ const formatCode = code => {
   });
 };
 
-module.exports = formatCode;
+export default formatCode;