Update webpack and refactor response fetching

.babelrc

@@ -1,4 +1,9 @@
 {
   "presets": ["es2015", "react"],
-  "plugins": ["transform-object-rest-spread"]
+  "plugins": ["transform-object-rest-spread", "add-module-exports"],
+  "env": {
+    "development": {
+      "presets": ["react-hmre"]
+    }
+  }
 }

app/app.html

@@ -9,7 +9,7 @@
 <script>
   (function () {
     const script = document.createElement('script');
-    script.src = (process.env.HOT) ? 'http://localhost:3333/dist/bundle.js' : '../dist/bundle.js';
+    script.src = (process.env.HOT) ? 'http://localhost:3333/dist/bundle.js' : './bundle.js';
     document.write(script.outerHTML);
   }());
 </script>

app/components/Sidebar.js

@@ -136,7 +136,7 @@ class Sidebar extends Component {
             {this.renderRequestGroupRow(null)}
             {requestGroups.map(requestGroup => this.renderRequestGroupRow(requestGroup))}
           </ul>
-          <div className="form-control form-control--outlined">
+          <div className="form-control form-control--underlined">
             <DebouncingInput
               type="text"
               placeholder="Filter Requests"

app/containers/App.js

@@ -190,33 +190,10 @@ class App extends Component {
     )
   }
 
-  _findActiveRequestResponse () {
-    const {requests} = this.props;
-    const activeRequest = requests.all.find(r => r._id === requests.active);
-
-    if (this.state.activeRequest !== activeRequest) {
-      this.setState({activeRequest});
-
-      if (activeRequest) {
-        db.responseGetForRequest(activeRequest).then(response => {
-          const activeResponse = response.docs.length ? response.docs[0] : null;
-          this.setState({activeResponse})
-        });
-      }
-    }
-  }
-
-  componentDidUpdate () {
-    this._findActiveRequestResponse();
-  }
-
-  componentDidMount () {
-    this._findActiveRequestResponse();
-  }
-
   render () {
-    const {actions, requests, requestGroups, tabs, modals} = this.props;
-    const {activeRequest, activeResponse} = this.state;
+    const {actions, requests, responses, requestGroups, tabs, modals} = this.props;
+    const activeRequest = requests.all.find(r => r._id === requests.active);
+    const activeResponse = activeRequest ? responses[activeRequest._id] : undefined;
 
     return (
       <div className="grid bg-super-dark tall">

app/database/index.js

@@ -145,6 +145,7 @@ export function responseGetForRequest (request) {
     selector: {
       requestId: request._id
     },
+    sort: [{requestId: 'desc'}],
     limit: 1
   })
 }

app/reducers/responses.js

@@ -5,9 +5,9 @@ const initialState = {};
 export default function (state = initialState, action) {
   switch (action.type) {
 
-    case types.RESPONSE_SET:
+    case types.RESPONSE_UPDATE:
       const newState = Object.assign({}, state);
-      newState[action.requestId] = action.response;
+      newState[action.response.requestId] = action.response;
       return newState;
     
     default:

electron.js

@@ -1,6 +1,6 @@
 
 // Don't npm install this (it breaks). Rely on the global one.
-const electron = require('electron');
+import electron from 'electron';
 
 const app = electron.app;  // Module to control application life.
 const BrowserWindow = electron.BrowserWindow;  // Module to create native browser window.
@@ -9,13 +9,13 @@ const IS_MAC = process.platform === 'darwin';
 var mainWindow = null;
 
 // Quit when all windows are closed.
-app.on('window-all-closed', function () {
+app.on('window-all-closed', () => {
   if (!IS_MAC) {
     app.quit();
   }
 });
 
-app.on('ready', function () {
+app.on('ready', () => {
   mainWindow = new BrowserWindow({
     width: 1200,
     height: 600,
@@ -28,13 +28,13 @@ app.on('ready', function () {
   // and load the app.html of the app.
   mainWindow.loadURL(`file://${__dirname}/app/app.html`);
 
-//   Open the DevTools.
-//   if (IS_DEV) {
-//     mainWindow.webContents.openDevTools();
-//   }
+  // Open the DevTools.
+  // if (IS_DEV) {
+  //   mainWindow.webContents.openDevTools();
+  // }
 
-// Emitted when the window is closed.
-  mainWindow.on('closed', function () {
+  // Emitted when the window is closed.
+  mainWindow.on('closed', () => {
     // Dereference 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.

package.json

@@ -11,8 +11,6 @@
   "dependencies": {
     "classnames": "^2.2.3",
     "codemirror": "^5.12.0",
-    "htmlhint": "^0.9.12",
-    "jsonlint": "^1.6.2",
     "jsonschema": "^1.1.0",
     "nunjucks": "^1.3.4",
     "pouchdb": "^5.3.1",
@@ -24,17 +22,18 @@
     "redux": "^3.3.1",
     "redux-logger": "^2.6.1",
     "redux-thunk": "^2.0.1",
-    "request": "^2.71.0",
-    "webpack": "^1.12.14"
+    "request": "^2.71.0"
   },
   "devDependencies": {
     "babel-core": "^6.7.2",
     "babel-jest": "^9.0.3",
     "babel-loader": "^6.2.4",
+    "babel-plugin-add-module-exports": "^0.1.2",
     "babel-plugin-transform-object-rest-spread": "^6.6.5",
     "babel-polyfill": "^6.7.2",
     "babel-preset-es2015": "^6.6.0",
     "babel-preset-react": "^6.5.0",
+    "babel-preset-react-hmre": "^1.1.1",
     "concurrently": "^2.0.0",
     "css-loader": "^0.23.1",
     "express": "latest",
@@ -49,15 +48,15 @@
     "sass-loader": "^3.2.0",
     "style-loader": "^0.13.0",
     "url-loader": "^0.5.7",
+    "webpack": "^1.12.14",
     "webpack-dev-middleware": "latest",
     "webpack-dev-server": "^1.14.1",
     "webpack-hot-middleware": "^2.10.0",
     "webpack-target-electron-renderer": "^0.4.0"
   },
   "scripts": {
-    "start": "electron electron/main.js",
-    "start-hot": "HOT=1 NODE_ENV=development electron electron.js",
-    "hot-server": "node ./webpack/server.js",
+    "start-hot": "HOT=1 NODE_ENV=development electron -r babel-register ./electron.js",
+    "hot-server": "node -r babel-register ./webpack/server.js",
     "dev": "concurrently --kill-others \"npm run hot-server\" \"npm run start-hot\"",
     "test": "jest $@",
     "package": "./scripts/package"
@@ -80,5 +79,9 @@
       "electron.js",
       "chrome.js"
     ]
+  },
+  "devEngines": {
+    "node": "4.x || 5.x",
+    "npm": "2.x || 3.x"
   }
 }

scripts/package

@@ -1,5 +1,9 @@
 #!/bin/bash
 #? Package the app
 
-webpack --config webpack/prod.config.js
-cp -r node_modules electron.js package.json dist/
+rm -r dist/*
+webpack --config webpack/webpack.config.production.js
+# cp -r node_modules electron.js package.json dist/
+cp electron.js package.json dist/
+cd dist
+NODE_ENV=production npm install

webpack/dev.config.js

@@ -1,29 +0,0 @@
-var path = require('path');
-var webpack = require('webpack');
-var base = require('./base.config');
-
-base.entry = [
-  'webpack-hot-middleware/client?path=http://localhost:3333/__webpack_hmr',
-  'webpack/hot/only-dev-server'
-].concat(base.entry);
-
-base.debug = true;
-base.devtool = 'inline-source-map';
-base.output.path = path.join(base.output.path, '/dev');
-base.output.publicPath = 'http://localhost:3333/dist/';
-
-for (var i = 0; i < base.module.loaders.length; i++) {
-  var loader = base.module.loaders[i];
-  if (loader.id === 'babel') {
-    loader.loaders = ['react-hot'].concat(loader.loaders);
-    break;
-  }
-}
-
-base.plugins = base.plugins.concat([
-  new webpack.HotModuleReplacementPlugin(),
-  new webpack.NoErrorsPlugin()
-]);
-
-module.exports = base;
-

webpack/prod.config.js

@@ -1,5 +0,0 @@
-var path = require('path');
-var webpack = require('webpack');
-var base = require('./base.config');
-
-module.exports = base;

webpack/server.js

@@ -1,24 +1,26 @@
-'use strict';
+import express from 'express';
+import webpack from 'webpack';
+import webpackDevMiddleware from 'webpack-dev-middleware';
+import webpackHotMiddleware from 'webpack-hot-middleware';
 
-const express = require('express');
-const webpack = require('webpack');
-const config = require('./dev.config.js');
+import config from './webpack.config.development';
 
 const app = express();
 const compiler = webpack(config);
-
 const PORT = 3333;
 
-app.use(require('webpack-dev-middleware')(compiler, {
+app.use(webpackDevMiddleware(compiler, {
   publicPath: config.output.publicPath,
-  stats: {colors: true}
+  stats: {
+    colors: true
+  }
 }));
 
-app.use(require('webpack-hot-middleware')(compiler));
+app.use(webpackHotMiddleware(compiler));
 
 app.listen(PORT, 'localhost', err => {
   if (err) {
-    console.log(err);
+    console.error(err);
     return;
   }
 

webpack/webpack.config.base.js

@@ -1,8 +1,7 @@
-var path = require('path');
-var webpack = require('webpack');
+import path from 'path';
+import webpack from 'webpack';
 
-var config = {
-  target: 'web',
+export default {
   devtool: 'source-map',
   context: path.join(__dirname, '../app'),
   entry: [
@@ -10,8 +9,9 @@ var config = {
     './app.html'
   ],
   output: {
-    path: path.join(__dirname, '../dist/app'),
-    filename: 'bundle.js'
+    path: path.join(__dirname, '../dist'),
+    filename: 'bundle.js',
+    libraryTarget: 'commonjs2'
   },
   module: {
     loaders: [
@@ -33,6 +33,14 @@ var config = {
         test: /\.html$/,
         loader: "file?name=[name].[ext]"
       },
+      {
+        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
+        loader: "file"
+      },
+      {
+        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
+        loader: "url?limit=10000&mimetype=image/svg+xml"
+      },
       {
         test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
         loader: "url?limit=10000&mimetype=application/font-woff"
@@ -44,14 +52,6 @@ var config = {
       {
         test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
         loader: "url?limit=10000&mimetype=application/octet-stream"
-      },
-      {
-        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
-        loader: "file"
-      },
-      {
-        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
-        loader: "url?limit=10000&mimetype=image/svg+xml"
       }
     ]
   },
@@ -60,20 +60,13 @@ var config = {
     packageMains: ['webpack', 'browser', 'web', 'browserify', ['jam', 'main'], 'main']
   },
   plugins: [
-    new webpack.DefinePlugin({
-      __DEV__: true,
-      'process.env': {
-        NODE_ENV: JSON.stringify('development')
-      }
-    }),
     new webpack.ExternalsPlugin('commonjs', [
       'request',
       'nunjucks',
       'pouchdb',
       'pouchdb-find'
     ])
-  ]
+  ],
+  target: 'electron-renderer'
 };
 
-config.target = 'electron';
-module.exports = config;

webpack/webpack.config.development.js

@@ -0,0 +1,29 @@
+import path from 'path'
+import webpack from 'webpack'
+import baseConfig from './webpack.config.base'
+
+export default {
+  ...baseConfig,
+  debug: true,
+  devtool: 'inline-source-map',
+  entry: [
+    ...baseConfig.entry,
+    'webpack-hot-middleware/client?path=http://localhost:3333/__webpack_hmr',
+    'webpack/hot/only-dev-server'
+  ],
+  output: {
+    ...baseConfig.output,
+    publicPath: 'http://localhost:3333/dist/'
+  },
+  plugins: [
+    ...baseConfig.plugins,
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NoErrorsPlugin(),
+    new webpack.DefinePlugin({
+      __DEV__: true,
+      'process.env': {
+        NODE_ENV: JSON.stringify('development')
+      }
+    })
+  ]
+}

webpack/webpack.config.production.js

@@ -0,0 +1,12 @@
+import * as base from './webpack.config.base'
+
+base.plugins = base.plugins.concat([
+  new webpack.DefinePlugin({
+    __DEV__: false,
+    'process.env': {
+      NODE_ENV: JSON.stringify('production')
+    }
+  })
+]);
+
+module.exports = base;