Update client dependencies

client/.babelrc

@@ -1,3 +1,16 @@
-{ "presets": [ "react", ["env", {"modules": false}], "stage-2" ],
-  "plugins": [ "react-hot-loader/babel", "babel-plugin-transform-object-rest-spread" ]
+{
+  "presets": [
+    "@babel/preset-react",
+    [
+      "@babel/preset-env",
+      {
+        "targets": "> 0.25%, not dead"
+      }
+    ]
+  ],
+  "plugins": [
+    "react-hot-loader/babel",
+    "@babel/plugin-proposal-object-rest-spread",
+    "@babel/plugin-proposal-class-properties"
+  ]
 }

client/package.json

@@ -7,57 +7,62 @@
   "license": "MIT",
   "scripts": {
     "start": "NODE_ENV=development webpack-dev-server --inline --content-base . --history-api-fallback",
+    "start:new": "webpack-dev-server --open --config webpack.dev.js",
     "build": "NODE_ENV=production webpack",
+    "build:new": "webpack --config webpack.prod.js",
     "dev-build": "NODE_ENV=development webpack",
     "test": "eslint src --ext .jsx,.js --fix"
   },
   "devDependencies": {
-    "babel-core": "^6.24.1",
-    "babel-eslint": "^7.2.3",
-    "babel-loader": "^7.0.0",
-    "babel-plugin-transform-object-rest-spread": "^6.23.0",
-    "babel-preset-env": "^1.5.1",
-    "babel-preset-react": "^6.24.1",
-    "babel-preset-stage-2": "^6.24.1",
-    "copy-webpack-plugin": "^4.0.1",
-    "css-loader": "^0.28.3",
-    "eslint": "^3.19.0",
-    "eslint-config-airbnb": "^15.0.1",
-    "eslint-plugin-import": "^2.3.0",
-    "eslint-plugin-jsx-a11y": "^5.0.3",
-    "eslint-plugin-react": "^7.0.1",
-    "file-loader": "^0.11.2",
+    "@babel/cli": "^7.5.0",
+    "@babel/core": "^7.5.4",
+    "@babel/plugin-proposal-class-properties": "^7.5.0",
+    "@babel/plugin-proposal-object-rest-spread": "^7.5.4",
+    "@babel/preset-env": "^7.5.4",
+    "@babel/preset-react": "^7.0.0",
+    "babel-eslint": "^10.0.2",
+    "babel-loader": "^8.0.6",
+    "compression-webpack-plugin": "^3.0.0",
+    "copy-webpack-plugin": "^5.0.3",
+    "css-loader": "^3.0.0",
+    "eslint": "^6.0.1",
+    "eslint-config-airbnb": "^17.1.1",
+    "eslint-plugin-import": "^2.18.0",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-react": "^7.14.2",
+    "file-loader": "^4.0.0",
     "font-awesome": "^4.7.0",
-    "html-webpack-plugin": "^2.28.0",
-    "node-sass": "^4.9.2",
-    "redbox-react": "^1.5.0",
-    "sass-loader": "^6.0.5",
-    "style-loader": "^0.18.1",
-    "url-loader": "^0.5.8",
-    "webpack": "^2.6.1",
-    "webpack-dev-server": "^2.11.2"
+    "html-webpack-plugin": "^3.2.0",
+    "node-sass": "^4.12.0",
+    "sass-loader": "^7.1.0",
+    "uglifyjs-webpack-plugin": "^2.1.3",
+    "url-loader": "^2.0.1",
+    "webpack": "^4.35.3",
+    "webpack-cli": "^3.3.6",
+    "webpack-dev-server": "^3.7.2",
+    "webpack-merge": "^4.2.1"
   },
   "dependencies": {
     "autosuggest-highlight": "^3.1.0",
-    "compression-webpack-plugin": "^1.0.1",
     "font-awesome": "^4.7.0",
     "has-flag": "^2.0.0",
     "husky": "^0.14.3",
     "immutability-helper": "^2.3.0",
     "is-utf8": "^0.2.1",
     "p-map": "^1.1.1",
     "prop-types": "^15.5.10",
-    "react": "^15.5.4",
+    "react": "^16.8.6",
     "react-autosuggest": "^9.3.2",
-    "react-dom": "^15.5.4",
-    "react-hot-loader": "3.0.0-beta.6",
+    "react-dom": "^16.8.6",
+    "react-hot-loader": "^4.12.6",
     "react-modal": "^2.2.4",
     "react-redux": "^5.0.5",
     "react-router": "^4.1.1",
     "react-router-dom": "^4.1.1",
     "redux": "^3.7.2",
     "redux-api-middleware": "^1.0.3",
-    "shufflejs": "^5.0.1",
+    "shufflejs": "^5.2.2",
+    "style-loader": "^0.23.1",
     "swipejs": "^2.2.10",
     "underscore": "^1.8.3"
   }

client/src/index.jsx

@@ -1,25 +1,17 @@
+import 'react-hot-loader'
 import React from 'react';
 import { render } from 'react-dom';
-import { AppContainer } from 'react-hot-loader';
 import { Provider } from 'react-redux';
-import Redbox from 'redbox-react';
 
-// import reducer from './reducers';
 import store from './store/store';
 import App from './App';
 import './style.scss';
 
-delete AppContainer.prototype.unstable_handleError;
-
 const root = document.getElementById('root');
 
 render(
   <Provider store={store}>
-    <AppContainer>
-      <App />
-    </AppContainer>
+    <App />
   </Provider>,
   root,
 );
-
-if (module.hot) module.hot.accept(App, () => render(App));

client/src/store/actions/apiActions.js

@@ -1,5 +1,5 @@
 import { CALL_API } from 'redux-api-middleware';
-import { BASE_URL } from './apiConfig.js';
+import BASE_URL from './apiConfig';
 
 export const SEND_EMAIL_REQUEST = 'SEND_EMAIL_REQUEST';
 export const SEND_EMAIL_SUCCESS = 'SEND_EMAIL_SUCCESS';

client/src/store/actions/apiConfig.js

@@ -6,16 +6,16 @@
 /* ================================= SETUP ================================= */
 
 const prodUrl = 'https://co-ment.glitch.me';
-const devUrl  = 'https://co-ment-dev.glitch.me';
-//const devUrl  = 'http://127.0.0.1:3001';
+const devUrl = 'https://co-ment-dev.glitch.me';
+// const devUrl  = 'http://127.0.0.1:3001';
 
 
 /* ================================ EXPORTS ================================ */
 
 // ENVIRONMENT is a global variable defined by weback.config.js
 // defaults to DEVELOPMENT
-export const BASE_URL = (ENVIRONMENT === 'PRODUCTION' ? prodUrl : devUrl);
+export default (ENVIRONMENT === 'PRODUCTION' ? prodUrl : devUrl);
 
 // for testing locally with production DB
 // uncomment line 21 and comment out line 17
-// export const BASE_URL = 'https://co-ment.glitch.me';
+// export default prodUrl;

client/src/store/actions/apiConnectionActions.js

@@ -1,5 +1,5 @@
 import { CALL_API } from 'redux-api-middleware';
-import { BASE_URL } from './apiConfig.js';
+import BASE_URL from './apiConfig';
 
 export const CONNECTION_REQUEST = 'CONNECTION_REQUEST';
 export const CONNECTION_SUCCESS = 'CONNECTION_SUCCESS';

client/src/store/actions/apiConversationActions.js

@@ -1,5 +1,5 @@
 import { CALL_API } from 'redux-api-middleware';
-import { BASE_URL } from './apiConfig';
+import BASE_URL from './apiConfig';
 
 /*
 * Function getConversations - retrieve all conversations where the user is

client/src/store/actions/apiLoginActions.js

@@ -1,5 +1,5 @@
 import { CALL_API } from 'redux-api-middleware';
-import { BASE_URL } from './apiConfig';
+import BASE_URL from './apiConfig';
 
 export const VALIDATE_TOKEN_REQUEST = 'VALIDATE_TOKEN_REQUEST';
 export const VALIDATE_TOKEN_SUCCESS = 'VALIDATE_TOKEN_SUCCESS';

client/src/store/actions/apiPostActions.js

@@ -1,5 +1,5 @@
 import { CALL_API } from 'redux-api-middleware';
-import { BASE_URL } from './apiConfig';
+import BASE_URL from './apiConfig';
 
 export const GET_POST_REQUEST = 'GET_POST_REQUEST';
 export const GET_POST_SUCCESS = 'GET_POST_SUCCESS';

client/webpack.common.js

@@ -0,0 +1,48 @@
+const path = require('path');
+const HTMLWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = {
+  output: {
+    path: path.join(__dirname, 'build'),
+    filename: 'index.js'
+  },
+  resolve: {
+    extensions: ['.js', '.jsx', '.json']
+  },
+  module: {
+    rules: [
+      {
+        test: /\.jsx?$/,
+        exclude: /node_modules/,
+        loader: 'babel-loader',
+        include: path.join(__dirname, 'src')
+      },
+      {
+        test: /\.scss$/,
+        use: [
+          'style-loader',
+          'css-loader',
+          'sass-loader'
+        ]
+      },
+      {
+        test: /\.(jpg|png|gif|bmp|svg|woff|woff2|ttf|eot)$/,
+        // loader: 'file-loader',
+        // options: {
+        //   name: '[name].[ext]',
+        //   outputPath: 'assets/'
+        // }
+        loader: require.resolve('url-loader')
+      }
+    ]
+  },
+
+  plugins: [
+    new HTMLWebpackPlugin({
+      template: path.join(__dirname, '/src/index.html'),
+      filename: 'index.html',
+      inject: 'body'
+    })
+  ]
+
+};