Resolve "Update Dev Environment"

fgregorio · Sep 28, 2017 · 4da6adf · 4da6adf
1 parent 7e3830c
commit 4da6adf
Show file tree

Hide file tree

Showing 32 changed files with 2,228 additions and 8,040 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,4 +1,9 @@
 {
-  "presets": ["react", "es2015"],
-  "plugins": ["transform-class-properties", "styled-components", "transform-object-rest-spread"]
+  "presets": [ "es2015", "react" ],
+  "plugins": [
+    "react-hot-loader/babel",
+    "transform-class-properties",
+    "transform-object-rest-spread",
+    "styled-components"
+  ]
 }
diff --git a/.gitignore b/.gitignore
@@ -1 +1,2 @@
-node_modules
+.env
+/node_modules
diff --git a/app.js b/app.js
@@ -9,6 +9,7 @@ const { app, BrowserWindow, ipcMain } = require('electron');
 
 // 3rd Party Libs
 const appConfig = require('electron-settings');
+require('dotenv').config();
 
 let mainWindow         = null;
 let previewWindow      = null;
@@ -25,7 +26,7 @@ function createMainWindow() {
     y: mainWindowState.bounds && mainWindowState.bounds.y || undefined,
     width: mainWindowState.bounds && mainWindowState.bounds.width || 1000,
     height: mainWindowState.bounds && mainWindowState.bounds.height || 800,
-    minWidth: 700,
+    minWidth: 800,
     minHeight: 600,
     titleBarStyle: 'hiddenInset',
     backgroundColor: '#2e2c29',
@@ -144,16 +145,25 @@ function setInitialValues() {
   }
 }
 
+// Add Devtool Extensions
+function addDevToolsExtension() {
+  BrowserWindow.addDevToolsExtension(process.env.REACT_DEV_TOOLS_PATH);
+  BrowserWindow.addDevToolsExtension(process.env.REDUX_DEV_TOOLS_PATH);
+}
+
 // Initialize
 function initialize() {
   // Load all main process files
   loadMainProcessFiles();
 
+  // Start the app
   app.on('ready', () => {
     // Create The Main Window
     createMainWindow();
     // Create Preview Window
     createPreviewWindow();
+    // Add Devtools Extenstion
+    addDevToolsExtension();
     // Set Initial Values
     setInitialValues();
     // Add Event Listener

diff --git a/app/components/form/Recipient.jsx b/app/components/form/Recipient.jsx
@@ -31,7 +31,11 @@ class Recipient extends Component {
   // Handle Reset Form
   componentWillReceiveProps(nextProps) {
     const { recipient } = nextProps;
-    if (_.isEmpty(recipient.new) && _.isEmpty(recipient.select)) {
+    if (
+      _.isEmpty(recipient.new) &&
+      _.isEmpty(recipient.select) &&
+      recipient.newRecipient === true
+    ) {
       this.setState(
         Object.assign({}, this.state, {
           newRecipient: true,
@@ -146,7 +150,7 @@ class Recipient extends Component {
           : null}
       </Section>
     );
-  };
+  }
 }
 
 // PropTypes Validation

diff --git a/app/components/settings/PrintOptions.jsx b/app/components/settings/PrintOptions.jsx
@@ -34,7 +34,7 @@ class PrintOptions extends Component {
 
     ipc.on('confirmed-export-directory', (event, path) => {
       this.setState({exportDir: path}, () => {
-        this.updatePrintOptionsState();
+        this.props.updateSettings('printOptions', this.state);
       });
     });
   }
@@ -86,8 +86,9 @@ class PrintOptions extends Component {
               name="template"
               value={this.state.template}
               onChange={this.handleInputChange}>
-              <option value="copywriter">Copywriter</option>
-              <option value="marketing">Marketing</option>
+              <option value="minimal">Minimal</option>
+              <option value="business">Business</option>
+              <option value="modern">Modern</option>
             </select>
           </div>
         </div>

diff --git a/app/helpers/form.js b/app/helpers/form.js
@@ -37,7 +37,7 @@ function getInvoiceData(formData) {
   if (recipient.newRecipient) {
     invoiceData.recipient = recipient.new;
   } else {
-    invoiceData.recipient = {...recipient.select};
+    invoiceData.recipient = recipient.select;
   }
   // Set Invoice DueDate
   if (dueDate.required) invoiceData.dueDate = dueDate.selectedDate;

diff --git a/app/index.html b/app/index.html
@@ -1,8 +1,9 @@
-<!DOCTYPE html>
-<html>
+<!doctype html>
+<html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <title>Paperless</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title>React App</title>
     <link rel="stylesheet" href="../static/css/bootstrap.min.css"></link>
     <link rel="stylesheet" href="../static/css/ionicons.min.css"></link>
     <link rel="stylesheet" href="../static/css/general.css"></link>
@@ -13,19 +14,17 @@
     <link rel="stylesheet" href="../static/css/date-picker.css"></link>
   </head>
   <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
     <div id="root"></div>
+    <!-- Javascript -->
+    <script>
+      if (typeof module === 'object') {
+        window.module = module; module = undefined;
+      }
+    </script>
+    <script src="http://localhost:3000/mainWindow.bundle.js"></script>
+    <script>if (window.module) module = window.module;</script>
   </body>
-
-  <!-- Javascript -->
-  <script>
-    if (typeof module === 'object') {
-      window.module = module; module = undefined;
-    }
-  </script>
-
-  <!-- Renderer -->
-  <script src="./renderer.js"></script>
-  <script src="./index.js"></script>
-
-  <script>if (window.module) module = window.module;</script>
 </html>
diff --git a/app/index.js b/app/index.js
diff --git a/app/index.jsx b/app/index.jsx
@@ -0,0 +1,25 @@
+// Libraries
+import React from 'react';
+import ReactDOM from 'react-dom';
+import {AppContainer} from 'react-hot-loader';
+import {Provider} from 'react-redux';
+import configureStore from './store';
+
+// Root Component
+import App from './App';
+
+// Store
+const store = configureStore();
+
+// Render
+ReactDOM.render(
+  <Provider store={store}>
+    <AppContainer>
+      <App />
+    </AppContainer>
+  </Provider>,
+  document.getElementById('root'),
+);
+
+// Accepting Hot Updates
+module.hot && module.hot.accept();
diff --git a/app/reducers/index.js → app/reducers/index.jsx b/app/reducers/index.js → app/reducers/index.jsx
diff --git a/app/renderer.js b/app/renderer.js
@@ -1,19 +1,8 @@
-// Node Libs
-const path = require('path');
-const glob = require('glob');
-
-// Custom Libs
-const sounds = require(path.join(__dirname, '../libs/sounds.js'));
-
-// Imports Main Renderere Files
-function loadMaiRendererFiles() {
-  const files = glob.sync(path.join(__dirname, './renderers/*.js'));
-  files.forEach(file => require(file));
-  sounds.preload();
-}
+// Libs
+import sounds from '../libs/sounds';
 
 function initialize() {
-  loadMaiRendererFiles();
+  sounds.preload();
   sounds.play('STARTUP');
   console.timeEnd('init');
 }

diff --git a/app/renderers/dialog.js b/app/renderers/dialog.js
@@ -3,10 +3,10 @@ const path = require('path');
 const url  = require('url');
 
 // Electron Libs
-const { BrowserWindow } = require('electron').remote
+const { BrowserWindow } = require('electron').remote;
 
 // Custom Libs
-const sounds = require(path.join(__dirname, '../../libs/sounds.js'));
+const sounds = require('../../libs/sounds.js');
 
 function showModalWindow(dialogOptions, returnChannel='', ...rest) {
   let modalWin = new BrowserWindow({
@@ -17,7 +17,7 @@ function showModalWindow(dialogOptions, returnChannel='', ...rest) {
     show: false,
   });
   modalWin.loadURL(url.format({
-    pathname: path.join(__dirname, '../../modal/index.html'),
+    pathname: path.resolve(__dirname, '../../modal/index.html'),
     protocol: 'file:',
     slashes: true
   }));

diff --git a/app/store/index.jsx b/app/store/index.jsx
@@ -0,0 +1,45 @@
+// Redux
+import {createStore, applyMiddleware, compose} from 'redux';
+
+// Root Reducer
+import rootReducer from '../reducers';
+
+// 3rd Party MWs
+import Logger from 'redux-logger';
+
+// Custom Middleware
+import MeasureMW from '../middlewares/MeasureMW';
+import FormMW from '../middlewares/FormMW';
+import ContactsMW from '../middlewares/ContactsMW';
+import InvoicesMW from '../middlewares/InvoicesMW';
+import SettingsMW from '../middlewares/SettingsMW';
+import UIMiddleware from '../middlewares/UIMiddleware';
+
+const middlewares = [
+  MeasureMW,
+  FormMW,
+  ContactsMW,
+  InvoicesMW,
+  SettingsMW,
+  UIMiddleware,
+  Logger,
+];
+
+// Redux Devtool
+const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+
+export default function configureStore(initialState) {
+  const store = createStore(
+    rootReducer,
+    initialState,
+    composeEnhancers(applyMiddleware(...middlewares))
+  );
+  if(module.hot) {
+    // Enable Webpack hot module replacement for reducers
+    module.hot.accept('../reducers', () => {
+      const nextReducer = require("../reducers/index").default;
+      store.replaceReducer(nextReducer);
+    });
+  }
+  return store;
+}
diff --git a/modal/index.html b/modal/index.html
@@ -24,10 +24,8 @@ <h4 id="modalTitle"></h4>
         window.module = module; module = undefined;
       }
     </script>
-
     <!-- Renderer -->
-    <script src="./modal_index.js"></script>
-
+    <script src="http://localhost:3000/modalWindow.bundle.js"></script>
     <script>if (window.module) module = window.module;</script>
   </body>
 </html>