hackforla · sellnat77 · Nov 19, 2019 · Nov 13, 2019 · Nov 13, 2019 · Nov 13, 2019
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,9 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react"
+  ],
+  "plugins": [
+    "@babel/plugin-proposal-class-properties"
+  ]
+}
diff --git a/.github/workflows/Continuous_Integration_Frontend.yml b/.github/workflows/Continuous_Integration_Frontend.yml
@@ -21,6 +21,6 @@ jobs:
     - name: Build project
       run: npm run-script build
     - name: Run Tests
-      run: export CI=true && npm run test -- --coverage
+      run: npm run-script test -- --coverage
       env:
         MAPBOX_TOKEN: ${{ secrets.MAPBOX_TOKEN }}
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,5 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
+dist/
 # Test results
 coverage/
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -4,44 +4,40 @@
   "homepage": "https://hackforla.github.io/311-data",
   "dependencies": {
     "axios": "^0.19.0",
+    "babel-jest": "^24.9.0",
     "dataframe-js": "^1.4.3",
-    "dev": "^0.1.3",
     "gh-pages": "^2.1.1",
-    "ignore-warnings": "^0.2.1",
+    "jest": "^24.9.0",
     "leaflet": "^1.5.1",
-    "node-sass": "^4.12.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-leaflet": "^2.4.0",
     "react-leaflet-choropleth": "^2.0.0",
-    "react-scripts": "3.0.1",
+    "react-test-renderer": "^16.12.0",
     "react-vis": "^1.11.7"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
+    "start": "npm start",
+    "dev": "webpack-dev-server",
+    "build": "webpack",
+    "test": "jest",
     "predeploy": "npm run build",
     "deploy": "gh-pages -d build"
   },
-  "eslintConfig": {
-    "extends": "react-app"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
   "devDependencies": {
+    "@babel/core": "^7.7.2",
+    "@babel/plugin-proposal-class-properties": "^7.7.0",
+    "@babel/preset-env": "^7.7.1",
+    "@babel/preset-react": "^7.7.0",
+    "babel-loader": "^8.0.6",
+    "css-loader": "^3.2.0",
     "enzyme": "^3.10.0",
-    "enzyme-adapter-react-16": "^1.14.0"
+    "enzyme-adapter-react-16": "^1.15.1",
+    "node-sass": "^4.12.0",
+    "sass-loader": "^8.0.0",
+    "style-loader": "^1.0.0",
+    "webpack": "^4.41.2",
+    "webpack-cli": "^3.3.10",
+    "webpack-dev-server": "^3.9.0"
   }
 }
diff --git a/public/index.html b/public/index.html
@@ -2,41 +2,16 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
     <link rel="stylesheet" href="https://unpkg.com/react-vis/dist/style.css">
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
           integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
           crossorigin=""/>
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>React App</title>
+    <title>311 Data</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
+    <script src="bundle.js"></script>
   </body>
 </html>
diff --git a/src/App.css b/src/App.css
diff --git a/src/App.js b/src/App.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import './App.css';
 import Header from './containers/Header/Header.jsx'
 import MapContainer from './containers/Map/MapContainer.jsx'
 import FrequencyContainer from './containers/Graphs/FrequencyContainer.jsx'

diff --git a/src/App.test.js b/src/App.test.js
diff --git a/src/components/LoadingSpinner/LoadingSpinner.js b/src/components/LoadingSpinner/LoadingSpinner.js
@@ -1,4 +1,4 @@
-import './Styles/LoadingSpinner.scss';
+// import './Styles/LoadingSpinner.scss';
 import React from 'react';
 
 const LoadingSpinner = () => {

diff --git a/src/components/TreeMapVis/HoverInfo.js b/src/components/TreeMapVis/HoverInfo.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import './Styles/HoverInfo.scss';
+// import './Styles/HoverInfo.scss';
 
 const HoverInfo = ({dataTitle, dataCount}) => {
   return (

diff --git a/src/components/TreeMapVis/TreeMapVis.js b/src/components/TreeMapVis/TreeMapVis.js
@@ -3,8 +3,7 @@ import {Treemap} from 'react-vis';
 import Legend from './Legend.js';
 import HoverInfo from './HoverInfo.js';
 import Filters from './Filters.js';
-import DateFilters from '../common/dataPicker.jsx';
-import "./Styles/TreeMapVis.scss"
+// import "./Styles/TreeMapVis.scss"
 import {getZoomedCallVolume, getBroadCallVolume} from '../../Util/DataService.js';
 
 class TreeMapVis extends React.Component {
@@ -125,8 +124,8 @@ class TreeMapVis extends React.Component {
           dataTitle={this.state.hoveredItem}
           dataCount={this.state.callVolume}/>
         <Legend />
-        <DateFilters
-          onChange={this.onDatePickerChange}/>
+        {/* <DateFilters
+          onChange={this.onDatePickerChange}/> */}
       </div>
     );
   }

diff --git a/src/components/common/Legend.jsx b/src/components/common/Legend.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {DiscreteColorLegend} from 'react-vis';
 import {getColorMap} from '../../Util/DataService.js';
-import './Styles/Legend.scss'
+// import './Styles/Legend.scss'
 
 
 export default () => {

diff --git a/src/index.css b/src/index.css
diff --git a/src/index.js b/src/index.js
@@ -1,12 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
+// import './index.css';
 import App from './App';
-import * as serviceWorker from './serviceWorker';
 
 ReactDOM.render(<App />, document.getElementById('root'));
-
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister();
diff --git a/src/serviceWorker.js b/src/serviceWorker.js