Last Done: Pulled 'loader' branch from origin after working with Khal…

…id to implement loading splash page Next Up: Begin working on styling the file directory drop down menus
reactide · Aug 6, 2019 · 8c03e51 · 8c03e51
1 parent f966213
commit 8c03e51
Show file tree

Hide file tree

Showing 7 changed files with 88 additions and 43 deletions.
diff --git a/example/build/index.html b/example/build/index.html
@@ -13,8 +13,8 @@ <h1>Build Tools Challenge</h1>
   <!-- <script src="build/bundle.js"></script> -->
 
   <!-- uncomment below and comment out the tag above for webpack challenge -->
-  <script src="build/webpack-bundle.js"></script>
+  <!-- <script src="build/webpack-bundle.js"></script> -->
 
-  <script type="text/javascript" src="webpack-bundle.js"></script>
+  <!-- <script type="text/javascript" src="webpack-bundle.js"></script> -->
 </body>
 </html>
diff --git a/lib/projInfo.js b/lib/projInfo.js
diff --git a/main/main.js b/main/main.js
@@ -50,6 +50,8 @@ app.on('ready', async () => {
     show: false
   });
 
+
+
   // load index.html to main window
   win.loadURL('file://' + path.join(__dirname, '../renderer/index.html'));
 

diff --git a/main/menus/mainMenu.js b/main/menus/mainMenu.js
@@ -1,9 +1,12 @@
 'use strict';
-const { dialog } = require('electron');
+const { dialog, BrowserWindow } = require('electron');
 const path = require('path');
 const copy = require('../../lib/copy-directory');
 const deleteDirectory = require('../../lib/delete-directory');
 const cra = require('../../lib/create-react-app');
+const { ipcMain } = require('electron');
+
+let splash = null;
 
 const menuTemplate = windowObj => [
   {
@@ -30,7 +33,37 @@ const menuTemplate = windowObj => [
           //Run cra with 'save' variable as destination path
           if (save) {
             cra(path.join(path.dirname(save), path.basename(save).toLowerCase()));
+            splash = new BrowserWindow({
+              width: 600,
+              height: 400,
+              minWidth: 604,
+              minHeight: 283,
+              webPreferences: {
+                devTools: false
+              }
+            })
+
+
+            splash.setAlwaysOnTop(true);
+            splash.loadFile(path.join(__dirname, "../../splash/public/index.html"))
+
+            // splash.webContents.on("devtools-opened", () => {  devToolsOpen ? splash.webContents.closeDevTools() : !devToolsOpen });
+            // splash.webContents.on("devtools-opened", () => { splash.webContents.closeDevTools(); })
+
+
+            splash.once('ready-to-show', () => {
+              splash.show();
+            })
+
             global.mainWindow.webContents.send('newProject');
+
+            ipcMain.on('closeSplash', () => {
+              splash.close()
+            })
+
+            ipcMain.on('closed', () => {
+              splash = null
+            })
           }
         },
         accelerator: 'CommandOrControl+N'
@@ -55,7 +88,6 @@ const menuTemplate = windowObj => [
       {
         label: 'Save',
         click: () => {
-
           global.mainWindow.webContents.send('saveFile');
         },
         accelerator: 'CommandOrControl+S'
@@ -89,6 +121,7 @@ const menuTemplate = windowObj => [
         accelerator: process.platform == 'darwin' ? 'Command+I' : 'Ctrl+I',
         click(item, focusedWindow) {
           focusedWindow.toggleDevTools()
+
         }
       },
       {
@@ -99,4 +132,6 @@ const menuTemplate = windowObj => [
 ];
 
 
-module.exports = menuTemplate;
+module.exports = menuTemplate
+
+
diff --git a/renderer/components/App.jsx b/renderer/components/App.jsx
@@ -52,7 +52,7 @@ export default class App extends React.Component {
       outputOrTerminal: 'output',
       liveServerPID: null,
       closed: false,
-      toggleTerminal:false,      
+      toggleTerminal: false,
     };
 
     this.fileTreeInit();
@@ -153,16 +153,17 @@ export default class App extends React.Component {
       this.setState({
         componentTreeObj: componentObj
       });
-    }    
+    }
     else if (projInfo.reactEntry === '') {
       let rootPath = path.dirname(projInfo.reactEntry);
       let fileName = path.basename(projInfo.reactEntry);
       const componentObj = importPathFunctions.constructComponentTree(fileName, rootPath);
       console.log('componentObj = ', componentObj)
       this.setState({
         componentTreeObj: componentObj
-      })}
-     // if neither Create React App or have webpack, then can't render it 
+      })
+    }
+    // if neither Create React App or have webpack, then can't render it 
     else {
       this.setState({
         componentTreeObj: {}
@@ -173,6 +174,7 @@ export default class App extends React.Component {
   /**
    * Registers listeners for opening projects and new projects
    */
+
   fileTreeInit() {
     ipcRenderer.on('openDir', (event, dirPath) => {
       if (dirPath !== this.state.rootDirPath) {
@@ -181,6 +183,8 @@ export default class App extends React.Component {
     }),
       ipcRenderer.on('newProject', (event, arg) => {
         if (this.state.watch) this.state.watch.close();
+        console.log(this.state)
+
         this.setState({
           fileTree: null,
           watch: null,
@@ -190,9 +194,11 @@ export default class App extends React.Component {
             path: null,
             type: null
           },
-          cra: true
+          cra: true,
         });
-      });
+      })
+      console.log('this is the file tree', this.state)
+
   }
   /**
    * sends old path and new name to main process to rename, closes rename form and sets filechangetype and newName for fswatch
@@ -291,7 +297,7 @@ export default class App extends React.Component {
       let watch = fs.watch(dirPath, { recursive: true, persistent: true }, (eventType, fileName) => {
         if (eventType === 'rename') {
           const fileTree = this.state.fileTree;
-          
+
           const absPath = path.join(this.state.rootDirPath, fileName);
           const parentDir = this.findParentDir(path.dirname(absPath), fileTree);
           const name = path.basename(absPath);
@@ -366,6 +372,9 @@ export default class App extends React.Component {
         rootDirPath: dirPath,
         watch
       });
+
+      ipcRenderer.send('closeSplash');
+
       this.constructComponentTreeObj();
     });
   }
@@ -573,20 +582,20 @@ export default class App extends React.Component {
     ipcRenderer.send('closeSim', this.state.liveServerPID);
   }
 
-  close(){
-    this.setState({closed: !this.state.closed})
+  close() {
+    this.setState({ closed: !this.state.closed })
   }
-  toggleTerminal(){
-    this.setState({toggleTerminal:!this.state.toggleTerminal})
+  toggleTerminal() {
+    this.setState({ toggleTerminal: !this.state.toggleTerminal })
   }
   /**
    * render function for TextEditorPane
    */
   renderTextEditorPane() {
     return (
       <TextEditorPane
-        close = {this.close}
-        toggleTerminal = {this.toggleTerminal}
+        close={this.close}
+        toggleTerminal={this.toggleTerminal}
         appState={this.state}
         setActiveTab={this.setActiveTab}
         closeTab={this.closeTab}
@@ -598,17 +607,17 @@ export default class App extends React.Component {
 
   renderSideLayout() {
     return (
-      <ride-pane style={{ flexGrow: 0,flexBasis: this.state.closed ? 0 : 250}}>
+      <ride-pane style={{ flexGrow: 0, flexBasis: this.state.closed ? 0 : 250 }}>
         <div className="item-views">
           <div className="styleguide pane-item">
             <header className="styleguide-header">
-              <h5>File Directory</h5> 
+              <h5>File Directory</h5>
 
               <div id="comptree-titlebar-right">
-              {this.state.fileTree && 
-                  <RefreshFileDirectory updateFileDirectory={this.updateFileDirectory} />}    
+                {this.state.fileTree &&
+                  <RefreshFileDirectory updateFileDirectory={this.updateFileDirectory} />}
               </div>
-       
+
             </header>
             <main className="styleguide-sections">
               {this.state.fileTree &&
@@ -646,7 +655,7 @@ export default class App extends React.Component {
                   <RefreshComponentTreeButton constructComponentTreeObj={this.constructComponentTreeObj} />}
               </div>
             </header>
-            
+
             <main className="styleguide-sections">
               {
                 this.state.componentTreeObj &&
@@ -663,7 +672,7 @@ export default class App extends React.Component {
     let renderer = [];
 
     if (this.state.simulator) {
-      
+
       renderer.push(
         <React.Fragment>
           <InWindowSimulator url={this.state.url} />
@@ -673,21 +682,21 @@ export default class App extends React.Component {
         </React.Fragment>
       );
       renderer.push(
-      <TabContainer
-        close = {this.close}
-        toggleTerminal = {this.toggleTerminal}
-        appState={this.state}
-        setActiveTab={this.setActiveTab}
-        closeTab={this.closeTab}
-        cbOpenSimulator_Main={this.openSimulatorInMain}
-        cbOpenSimulator_Ext={this.openSim}
-      />)
+        <TabContainer
+          close={this.close}
+          toggleTerminal={this.toggleTerminal}
+          appState={this.state}
+          setActiveTab={this.setActiveTab}
+          closeTab={this.closeTab}
+          cbOpenSimulator_Main={this.openSimulatorInMain}
+          cbOpenSimulator_Ext={this.openSim}
+        />)
     }
     else {
       renderer.push(
         <TabContainer
-          close = {this.close}
-          toggleTerminal = {this.toggleTerminal}
+          close={this.close}
+          toggleTerminal={this.toggleTerminal}
           appState={this.state}
           setActiveTab={this.setActiveTab}
           closeTab={this.closeTab}
@@ -704,8 +713,8 @@ export default class App extends React.Component {
       return this.renderTextEditorPane();
     }
   }
-  renderTerminal(){
-    if(this.state.toggleTerminal){
+  renderTerminal() {
+    if (this.state.toggleTerminal) {
       return (
         <ConsolePane
           rootDirPath={this.state.rootDirPath}
@@ -717,7 +726,7 @@ export default class App extends React.Component {
   }
   renderMainLayout() {
     return (
-      <ride-pane style={{ flexGrow: 1, flexBasis: '1200px'}}>
+      <ride-pane style={{ flexGrow: 1, flexBasis: '1200px' }}>
         {this.state.rootDirPath &&
           <React.Fragment>
             {this.renderMainTopPanel()}
@@ -729,7 +738,7 @@ export default class App extends React.Component {
     );
   }
 
-  updateFileDirectory (){
+  updateFileDirectory() {
     this.setFileTree(this.state.rootDirPath);
   }
 

diff --git a/renderer/components/MockComponentTree.js b/renderer/components/MockComponentTree.js
@@ -105,7 +105,6 @@ class MockComponentTree extends React.PureComponent {
                   <label htmlFor={"ct_child-npt_" + name}>[comp_props] ({childProps.length})</label><br />
                   {this.renderChildProps(childProps)}
                 </React.Fragment>)}
-
             </span>
           </div>
         )}

diff --git a/renderer/index.html b/renderer/index.html
@@ -11,7 +11,7 @@
 
 <body>
   <div id='root'></div>
-  <script src='../dist/webpack-bundle.js'></script>
+  <!-- <script src='../dist/webpack-bundle.js'></script> -->
   <script type='text/javascript'>
     // if (process.env.NODE_ENV === 'development') {
     //   var script = document.createElement('script');