fixed the desktop app

Author: kelsicw

app/components/Splash.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import '../stylesheets/Splash.scss';
 
-//Chronos logo when first starting the electron app. Has the picture for 4 seconds. 
+//Chronos logo when first starting the electron app. Has the picture for 4 seconds.
 const Splash: React.FC = React.memo(props => {
   const [visible, setVisible] = useState(true);
 
@@ -13,7 +13,7 @@ const Splash: React.FC = React.memo(props => {
     <>
       {visible && (
         <div id="splash">
-          <img id="splashLogo" src="../assets/logo.svg" alt="Chronos" />
+          <img id="splashLogo" src="assets/logo.svg" alt="Chronos" />
         </div>
       )}
     </>

app/containers/SidebarContainer.tsx

@@ -12,30 +12,31 @@ import { AwsContext } from '../context/AwsContext';
 
 const SidebarContainer = React.memo(props => {
   // Extract invervalID from ApplicationContext. Initival value: intervalID = null
-  const { intervalID } = useContext  (ApplicationContext);
+  const { intervalID } = useContext(ApplicationContext);
   // Extract isLoading and setLoading state from AwsContext. Initial value: isLoading = true
-  const { isLoading, setLoadingState } = useContext(AwsContext); 
+  const { isLoading, setLoadingState } = useContext(AwsContext);
 
   // clear interval and set loading state to true when leaving graph containers
 
   /**
-   * @function handleCLick - check if the 'intervalID' exists. If so, theres a timer running and the fuunction clears the timer using @function clearInterval - function. 
-   * Checks if variable 'isLoading' is false and if so the content is not loading and therefore, sets it to true using the setLoadingState function.   
+   * @function handleCLick - check if the 'intervalID' exists. If so, theres a timer running and the fuunction clears the timer using @function clearInterval - function.
+   * Checks if variable 'isLoading' is false and if so the content is not loading and therefore, sets it to true using the setLoadingState function.
    */
   const handleClick = () => {
-    if(intervalID) clearInterval(intervalID);
-    if(!isLoading) setLoadingState(true);
-  }
+    if (intervalID) clearInterval(intervalID);
+    if (!isLoading) setLoadingState(true);
+  };
 
   return (
     <div className="sidebar-container" id="mySidebar">
       <div className="sidebar">
         <div className="firstRow">
           <span>
-            <img alt="C" id="C" src="../assets/C.svg" />
+            {/* Attempting to change the path by taking out the ../ */}
+            <img alt="C" id="C" src="assets/C.svg" />
           </span>
           <span>
-            <img alt="Chronos" id="logo" src="../assets/logo.svg" />
+            <img alt="Chronos" id="logo" src="assets/logo.svg" />
           </span>
         </div>
         <hr className="line" id="firstLine" />
@@ -87,7 +88,7 @@ const SidebarContainer = React.memo(props => {
         </div>
       </div>
     </div>
-  )
+  );
 });
 
 export default SidebarContainer;

electron/Main.ts

@@ -3,7 +3,7 @@ import './routes/dashboard';
 import { clearGuestSettings } from './routes/dashboard';
 import './routes/data';
 import './routes/cloudbased';
-import { join } from 'path';
+import path from 'path';
 
 // Declare variable to be used as the application window
 let win: Electron.BrowserWindow;
@@ -32,11 +32,7 @@ const createWindow = () => {
     win.webContents.openDevTools();
   } else {
     // Production
-    // win.loadFile(path.resolve(__dirname, '../index.html'));
-    //* Wasn't going to the correct file in the line above.
-    const indexPath = join(app.getAppPath(), 'index.html');
-    console.log('indexPath: ', indexPath); //* I can't get this to console log. I would love to see what this path is to better understand the build!
-    win.loadFile(indexPath);
+    win.loadFile(path.join(app.getAppPath(), 'index.html'));
   }
 
   ipcMain.on('max', () => {

utilities/copyDist.js

@@ -1,17 +1,3 @@
-// THIS IS THE OLD BUILD CODE IN THE PACKAGE.JSON:
-/* "prepareDist": "npm run deleteDist && tsc -v && tsc -p . && npm run build && 
-npm run copyAssetsDist && 
-npm run copyPackageJsonDist && 
-npm run copyBuildDist && 
-npm run copyBuildDBDist && 
-npm run copyBuildModelsDist && 
-npm run copyBuildRoutesDist && 
-npm run copyBuildUtilitiesDist && 
-npm run copySettingsDist && 
-npm run installDep",
-*/
-
-
 /* Use this to prepare packaging the electron app into an executable
 tsc compiled the electron "backend" code into the /build folder
 webpack compiled the react "frontend" code into the /dist folder
@@ -22,18 +8,19 @@ of the /dist folder, so copy the required code into this folder
 const fse = require('fs-extra');
 const path = require('path');
 
-console.log('Copying files into the /dist folder prior to electron packaging')
+console.log('Copying files into the /dist folder prior to electron packaging');
 
 let sourceDir;
 let destDir;
 
-// "copyAssetsDist": "echo D | xcopy app\\assets dist\\assets",
-// sourceDir = path.resolve(__dirname, '../app/assets');
-// destDir = path.resolve(__dirname, '../dist/assets');
-// if (!fse.existsSync(destDir)) {
-//   fse.mkdirSync(destDir);
-// }
-// fse.copySync(sourceDir, destDir);
+// Copy assets from app/assets into dist
+// so that assets load in package build
+sourceDir = path.resolve(__dirname, '../app/assets');
+destDir = path.resolve(__dirname, '../dist/assets');
+if (!fse.existsSync(destDir)) {
+  fse.mkdirSync(destDir);
+}
+fse.copySync(sourceDir, destDir);
 
 // Copy package.json from root directory into webpack's /dist folder
 // so that the necessary node modules can get installed