Started webpack update

.eslintrc.json

@@ -20,6 +20,7 @@
     "plugin:react/recommended"
   ],
   "rules": {
+    "no-unused-vars": "warn",
     "no-console": "off",
     "no-case-declarations": "off",
     "no-template-curly-in-string": "warn",
@@ -43,7 +44,11 @@
       "error",
       4,
       {
-        "SwitchCase": 1
+        "SwitchCase": 1,
+        "ignoredNodes": [
+          "JSXAttribute",
+          "JSXSpreadAttribute"
+        ]
       }
     ],
     "jsx-quotes": "error",
@@ -123,6 +128,7 @@
     "react/no-typos": "warn",
     "react/jsx-indent": "error",
     "react/jsx-pascal-case": "error",
-    "react/jsx-wrap-multilines": "warn"
+    "react/jsx-wrap-multilines": "warn",
+    "react/no-deprecated": "off"
   }
 }
\ No newline at end of file

package.json

@@ -5,48 +5,76 @@
   "private": true,
   "dependencies": {
     "array-sort": "^0.1.4",
-    "autosuggest-highlight": "^3.1.0",
     "classnames": "^2.2.5",
-    "fuzzysearch": "^1.0.3",
-    "history": "^4.6.3",
-    "immutability-helper": "^2.3.0",
     "mapbox": "^1.0.0-beta9",
     "mapbox-gl": "^0.40.1",
     "material-ui": "^1.0.0-beta.25",
     "material-ui-icons": "^1.0.0-alpha.19",
-    "node-sass-chokidar": "^0.0.3",
-    "npm-run-all": "^4.1.1",
     "phone-formatter": "^0.0.2",
+    "promise": "7.1.1",
     "prop-types": "^15.5.10",
     "react": "^15.6.1",
     "react-autosuggest": "^9.3.2",
     "react-classnames": "^0.1.2",
     "react-dom": "^15.6.1",
     "react-mapbox-gl": "^2.5.2",
-    "react-notification-system": "^0.2.16",
     "react-redux": "^5.0.5",
     "react-router-dom": "^4.1.2",
     "react-router-redux": "^5.0.0-alpha.9",
-    "react-scripts": "1.0.10",
     "redux": "^3.7.2",
     "redux-thunk": "^2.2.0",
-    "typeface-roboto": "0.0.50"
+    "typeface-roboto": "0.0.50",
+    "webpack-manifest-plugin": "1.1.0"
   },
   "devDependencies": {
-    "babel-eslint": "^7.2.3",
-    "eslint-plugin-react": "^7.5.1"
+    "autoprefixer": "7.1.1",
+    "babel": "^6.23.0",
+    "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.3",
+    "babel-loader": "^7.1.4",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-preset-env": "^1.7.0",
+    "babel-preset-react": "^6.24.1",
+    "eslint": "4.19.1",
+    "babel-eslint": "^8.2.3",
+    "clean-webpack-plugin": "^0.1.19",
+    "css-loader": "^0.28.4",
+    "eslint-loader": "^2.0.0",
+    "eslint-plugin-react": "^7.8.2",
+    "file-loader": "^1.1.11",
+    "html-webpack-plugin": "^3.2.0",
+    "mini-css-extract-plugin": "^0.4.0",
+    "node-sass": "^4.9.0",
+    "optimize-css-assets-webpack-plugin": "^4.0.2",
+    "sass-loader": "^7.0.2",
+    "style-loader": "^0.18.2",
+    "uglifyjs-webpack-plugin": "^1.2.5",
+    "webpack": "^4.4.1",
+    "webpack-cli": "^2.1.5",
+    "webpack-dev-server": "^3.1.4",
+    "postcss-loader": "2.0.6",
+    "sw-precache-webpack-plugin": "0.11.3"
   },
   "proxy": "http://localhost:3001",
   "scripts": {
-    "build-css": "node-sass-chokidar src/styles/ -o src/styles/build",
-    "watch-css": "node-sass-chokidar src/styles/ -o src/styles/build --watch --recursive",
-    "start-js": "react-scripts start",
-    "start": "npm-run-all -p build-css watch-css start-js",
-    "build-js": "react-scripts build",
-    "build": "npm-run-all build-css build-js",
-    "test": "react-scripts test --env=jsdom",
-    "eject": "react-scripts eject",
-    "storybook": "start-storybook -p 9009 -s public",
-    "build-storybook": "build-storybook -s public"
+    "build": "webpack --config webpack/webpack.config.prod.js",
+    "serve": "webpack-dev-server --config webpack/webpack.config.dev.js --open"
+  },
+  "babel": {
+    "presets": [
+      [
+        "env",
+        {
+          "modules": false
+        }
+      ],
+      "react"
+    ],
+    "plugins": [
+      "transform-class-properties"
+    ]
+  },
+  "eslintConfig": {
+    "extends": "react"
   }
 }

public/index.html

@@ -28,8 +28,8 @@
     <meta name="twitter:title" content="What's Open">
     <meta name="twitter:description" content="Facility hours for George Mason University">
 
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.png">
+    <link rel="manifest" href="./manifest.json">
+    <link rel="shortcut icon" href="./favicon.png">
     <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.40.1/mapbox-gl.css' rel='stylesheet' />
 </head>
 <!-- Global site tag (gtag.js) - Google Analytics -->

src/index.js

@@ -11,7 +11,7 @@ import ReduxThunk from 'redux-thunk';
 import reducers from './reducers/index';
 import {MuiThemeProvider} from 'material-ui/styles';
 import theme from './theme';
-import './styles/build/whatsOpen.css';
+import './styles/whatsOpen.scss';
 import 'typeface-roboto';
 
 // Create a history of your choosing (we're using a browser history in this case)

src/reducers/api.js

-import {GET_ALERTS, GET_FACILITIES, SET_ALERTS, SET_FACILITIES, SORT_FACILITY_CARDS, VIEW_ALERT } from '../actions/action-types';
+import {GET_ALERTS, GET_FACILITIES, SET_ALERTS, SET_FACILITIES, SORT_FACILITY_CARDS, VIEW_ALERT} from '../actions/action-types';
 import cloneDeep from 'lodash/cloneDeep';
 import facilityUtils from '../utils/facilityUtils';
 const defaultFacilityState = {

src/utils/nameUtils.js

@@ -18,7 +18,7 @@ export const removeBrackets = (name) => {
     return name;
 };
 
-const linkRegex = /(?:(?:https?|ftp|file):\/\/|www\.|ftp\.)(?:\([-A-Z0-9+&@#\/%=~_|$?!:,.]*\)|[-A-Z0-9+&@#\/%=~_|$?!:,.])*(?:\([-A-Z0-9+&@#\/%=~_|$?!:,.]*\)|[A-Z0-9+&@#\/%=~_|$])/igm;
+const linkRegex = /(?:(?:https?|ftp|file):\/\/|www\.|ftp\.)(?:\([-A-Z0-9+&@#/%=~_|$?!:,.]*\)|[-A-Z0-9+&@#/%=~_|$?!:,.])*(?:\([-A-Z0-9+&@#/%=~_|$?!:,.]*\)|[A-Z0-9+&@#/%=~_|$])/igm;
 /**
  * Finds where links appear in a string.
  *

webpack/loaders.js

+const paths = require('./paths');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+const eslintLoader = {
+    test: /\.(js|jsx)$/,
+    enforce: 'pre',
+    loader: 'eslint-loader',
+    include: paths.appSrc
+};
+
+const babelLoader = {
+    test: /\.(js|jsx)$/,
+    loader: 'babel-loader',
+    include: paths.appSrc
+};
+
+const postCssLoader = {
+    loader: 'postcss-loader',
+    options: {
+        plugins: () => [require('autoprefixer')]
+    }
+}
+
+const cssLoader = {
+    test: /\.css$/,
+    use: [
+        'style-loader',
+        'css-loader',
+        postCssLoader
+    ]
+}
+
+const scssLoader = {
+    test: /\.scss$/,
+    use: [
+        'style-loader',
+        'css-loader',
+        postCssLoader,
+        'sass-loader'
+    ]
+}
+
+const cssExtractLoader = {
+    test: /\.css$/,
+    use: [
+        MiniCssExtractPlugin.loader,
+        'css-loader',
+        postCssLoader
+    ]
+}
+
+const scssExtractLoader = {
+    test: /\.scss$/,
+    use: [
+        MiniCssExtractPlugin.loader,
+        "css-loader",
+        postCssLoader,
+        "sass-loader"
+    ]
+}
+
+const fileLoader = {
+    exclude: [
+        /\.html$/,
+        /\.(js|jsx)$/,
+        /\.css$/,
+        /\.scss$/,
+        /\.json$/,
+        /\.bmp$/,
+        /\.gif$/,
+        /\.jpe?g$/,
+        /\.png$/
+    ],
+    loader: require.resolve('file-loader'),
+    options: {
+        name: 'static/media/[name].[hash:8].[ext]'
+    }
+}
+
+module.exports = {
+    eslintLoader: eslintLoader,
+    babelLoader: babelLoader,
+    cssLoader: cssLoader,
+    scssLoader: scssLoader,
+    cssExtractLoader: cssExtractLoader,
+    scssExtractLoader: scssExtractLoader,
+    fileLoader: fileLoader
+}
\ No newline at end of file

webpack/paths.js

+const path = require('path');
+const fs = require('fs');
+
+const appDirectory = fs.realpathSync(process.cwd());
+const resolveApp = (relativePath) => path.resolve(appDirectory, relativePath);
+
+module.exports = {
+    appHtml: resolveApp('public/index.html'),
+    appIndexJs: resolveApp('src/index.js'),
+    appBuild: resolveApp('build'),
+    appSrc: resolveApp('src'),
+    appDist: resolveApp('dist'),
+    publicPath: ''
+};
\ No newline at end of file

webpack/webpack.config.dev.js

+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const webpack = require('webpack');
+const paths = require('./paths');
+const loaders = require('./loaders');
+
+module.exports = {
+    mode: 'development',
+    entry: [
+        paths.appIndexJs
+    ],
+    output: {
+        path: paths.appBuild,
+        filename: 'static/js/bundle.js',
+        publicPath: paths.publicPath
+    },
+    resolve: {
+        extensions: ['.js', '.jsx', '.json']
+    },
+    module: {
+        rules: [
+            loaders.eslintLoader,
+            loaders.babelLoader,
+            loaders.cssLoader,
+            loaders.scssLoader,
+            loaders.fileLoader        
+        ]
+    },
+    plugins: [
+        new HtmlWebpackPlugin({
+            inject: true,
+            template: paths.appHtml
+        }),
+        new webpack.NamedModulesPlugin(),
+        new webpack.HotModuleReplacementPlugin()
+    ],
+    devServer: {
+        contentBase: paths.appBuild,
+        hot: true,
+        port: 3000,
+        compress: true
+    }
+};
\ No newline at end of file

webpack/webpack.config.prod.js

+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const CleanWebpackPlugin = require('clean-webpack-plugin');
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const webpack = require('webpack');
+const paths = require('./paths');
+const loaders = require('./loaders');
+
+module.exports = {
+    mode: 'production',
+    entry: [
+        paths.appIndexJs
+    ],
+    output: {
+        path: paths.appBuild,
+        filename: 'static/js/bundle.js',
+        publicPath: paths.publicPath
+    },
+    resolve: {
+        extensions: ['.js', '.jsx', '.json']
+    },
+    module: {
+        rules: [
+            loaders.eslintLoader,
+            loaders.babelLoader,
+            loaders.cssExtractLoader,
+            loaders.scssExtractLoader,
+            loaders.fileLoader
+        ]
+    },
+    optimization: {
+        minimizer: [
+            new UglifyJsPlugin({
+                parallel: true,
+                sourceMap: true
+            }),
+            new OptimizeCSSAssetsPlugin({})
+        ]
+    },
+    plugins: [
+        new CleanWebpackPlugin(['build']),
+        new HtmlWebpackPlugin({
+            inject: true,
+            template: paths.appHtml,
+            minify: {
+                removeComments: true,
+                collapseWhitespace: true,
+                removeRedundantAttributes: true,
+                useShortDoctype: true,
+                removeEmptyAttributes: true,
+                removeStyleLinkTypeAttributes: true,
+                keepClosingSlash: true,
+                minifyJS: true,
+                minifyCSS: true,
+                minifyURLs: true,
+            }
+        }),
+        new SWPrecacheWebpackPlugin({
+            dontCacheBustUrlsMatching: /\.\w{8}\./,
+            filename: 'service-worker.js',
+            logger(message) {
+                if (message.indexOf('Total precache size is') === 0) {
+                    return;
+                }
+                if (message.indexOf('Skipping static resource') === 0) {
+                    return;
+                }
+                console.log(message);
+            },
+            minify: true,
+            navigateFallback: paths.publicUrl + '/index.html',
+            navigateFallbackWhitelist: [/^(?!\/__).*/],
+            staticFileGlobsIgnorePatterns: [/\.map$/, /asset-manifest\.json$/],
+        }),
+        new MiniCssExtractPlugin({
+            filename: '[name].css',
+            chunkFilename: '[id].css'
+        })
+    ]
+};
\ No newline at end of file