Merge pull request #720 from adamkendis/FRONT-envCleanup

Frontend cleanup and favicon
hackforla · Jul 1, 2020 · 0ea8159 · 0ea8159
2 parents dd9f007 + 9e813b3
commit 0ea8159
Show file tree

Hide file tree

Showing 29 changed files with 49 additions and 88 deletions.
diff --git a/.example.env b/.example.env
diff --git a/.github/workflows/Continuous_Deployment_Frontend_Dev.yml b/.github/workflows/Continuous_Deployment_Frontend_Dev.yml
@@ -19,8 +19,10 @@ jobs:
       run: npm install
     - name: Setup environment
       run: |
-        echo REACT_APP_MAPBOX_TOKEN=${{ secrets.MAPBOX_TOKEN }} > .env
-        echo DB_URL=${{ secrets.API_URL_DEV }} >> .env
+        echo MAPBOX_TOKEN=${{ secrets.MAPBOX_TOKEN }} > .env
+        echo MAPBOX_STREETS_URL=${{ secrets.MAPBOX_STREETS_URL }} > .env
+        echo MAPBOX_SATELLITE_URL=${{ secrets.MAPBOX_SATELLITE_URL }} > .env
+        echo API_URL=${{ secrets.API_URL_DEV }} >> .env
         echo MIXPANEL_ENABLED=${{ secrets.MIXPANEL_ENABLED }} >> .env
         echo MIXPANEL_TOKEN_PROD=${{ secrets.MIXPANEL_TOKEN_PROD }} >> .env
         echo MIXPANEL_TOKEN_DEV=${{ secrets.MIXPANEL_TOKEN_DEV }} >> .env

diff --git a/.github/workflows/Continuous_Deployment_Frontend_Prod.yml b/.github/workflows/Continuous_Deployment_Frontend_Prod.yml
@@ -19,8 +19,10 @@ jobs:
       run: npm install
     - name: Setup environment
       run: |
-        echo REACT_APP_MAPBOX_TOKEN=${{ secrets.MAPBOX_TOKEN }} > .env
-        echo DB_URL=${{ secrets.API_URL_PROD }} >> .env
+        echo MAPBOX_TOKEN=${{ secrets.MAPBOX_TOKEN }} > .env
+        echo MAPBOX_STREETS_URL=${{ secrets.MAPBOX_STREETS_URL }} > .env
+        echo MAPBOX_SATELLITE_URL=${{ secrets.MAPBOX_SATELLITE_URL }} > .env
+        echo API_URL=${{ secrets.API_URL_PROD }} >> .env
         echo MIXPANEL_ENABLED=${{ secrets.MIXPANEL_ENABLED }} >> .env
         echo MIXPANEL_TOKEN_PROD=${{ secrets.MIXPANEL_TOKEN_PROD }} >> .env
         echo MIXPANEL_TOKEN_DEV=${{ secrets.MIXPANEL_TOKEN_DEV }} >> .env

diff --git a/.github/workflows/Continuous_Integration_Frontend.yml b/.github/workflows/Continuous_Integration_Frontend.yml
@@ -16,8 +16,10 @@ jobs:
       run: npm run lint
     - name: Setup environment
       run: |
-        echo REACT_APP_MAPBOX_TOKEN=${{ secrets.MAPBOX_TOKEN }} > .env
-        echo DB_URL=${{ secrets.API_URL_PROD }} >> .env
+        echo MAPBOX_TOKEN=${{ secrets.MAPBOX_TOKEN }} > .env
+        echo MAPBOX_STREETS_URL=${{ secrets.MAPBOX_STREETS_URL }} > .env
+        echo MAPBOX_SATELLITE_URL=${{ secrets.MAPBOX_SATELLITE_URL }} > .env
+        echo API_URL=${{ secrets.API_URL_PROD }} >> .env
         echo MIXPANEL_ENABLED=${{ secrets.MIXPANEL_ENABLED }} >> .env
         echo MIXPANEL_TOKEN_PROD=${{ secrets.MIXPANEL_TOKEN_PROD }} >> .env
         echo MIXPANEL_TOKEN_DEV=${{ secrets.MIXPANEL_TOKEN_DEV }} >> .env

diff --git a/Dockerfile b/Dockerfile
diff --git a/311-system-architecture.png → ...ion/Resources/311-system-architecture.png b/311-system-architecture.png → ...ion/Resources/311-system-architecture.png
diff --git a/public/candlestick.png → Documentation/Resources/candlestick.png b/public/candlestick.png → Documentation/Resources/candlestick.png
diff --git a/public/frequency.svg → Documentation/Resources/frequency.svg b/public/frequency.svg → Documentation/Resources/frequency.svg
diff --git a/public/heatmap.png → Documentation/Resources/heatmap.png b/public/heatmap.png → Documentation/Resources/heatmap.png
diff --git a/public/pinmap.png → Documentation/Resources/pinmap.png b/public/pinmap.png → Documentation/Resources/pinmap.png
diff --git a/public/timetoclose.svg → Documentation/Resources/timetoclose.svg b/public/timetoclose.svg → Documentation/Resources/timetoclose.svg
diff --git a/Orchestration/docker-compose-example.yml b/Orchestration/docker-compose-example.yml
@@ -29,9 +29,11 @@ services:
    restart: always
    container_name: "311-frontend"
    environment:
-     REACT_APP_MAPBOX_TOKEN: REDACTED
-     DB_URL: http://localhost:5000
-     MIXPANEL_ENABLED: -1
+     MAPBOX_TOKEN: REDACTED
+     MAPBOX_STREETS_URL: REDACTED
+     MAPBOX_SATELLITE_URL: REDACTED
+     API_URL: http://localhost:5000
+     MIXPANEL_ENABLED: 0
      MIXPANEL_TOKEN_PROD: REDACTED
      MIXPANEL_TOKEN_DEV: REDACTED
    ports:

diff --git a/bin/api-test/index.js b/bin/api-test/index.js
@@ -4,7 +4,7 @@ const tests = require('./tests');
 
 ////////////////// CONFIG /////////////////////
 
-const API_URL = process.env.DB_URL;
+const { API_URL } = process.env;
 const CALLS_PER_TEST = 5;
 
 ////////////////// HELPERS ////////////////////

diff --git a/bin/checkEnv.js b/bin/checkEnv.js
@@ -2,6 +2,7 @@
 // verifies that the .env file contains all the keys in .example.env
 
 const fs = require('fs');
+const path = require('path');
 const dotenv = require('dotenv');
 
 function getKeys(fileName) {
@@ -13,9 +14,9 @@ function getKeys(fileName) {
   }
 }
 
-const envKeys = getKeys('.env'),
-      exampleKeys = getKeys('.example.env'),
-      missingKeys = exampleKeys.filter(key => !envKeys.includes(key));
+const envKeys = getKeys(path.resolve(__dirname, '../src/.env')),
+  exampleKeys = getKeys(path.resolve(__dirname, '../src/.example.env')),
+  missingKeys = exampleKeys.filter(key => !envKeys.includes(key));
 
 if (missingKeys.length > 0) {
   console.error('You are missing these keys in your .env file:', missingKeys, '\n');

diff --git a/copyEnv.sh b/copyEnv.sh
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/favicon.png b/public/favicon.png
diff --git a/public/index.html b/public/index.html
@@ -13,6 +13,7 @@
           integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
           crossorigin=""/>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:700|Roboto&display=swap" >
+    <link rel="shortcut icon" href="favicon.png" >
     <title>311 Data</title>
   </head>
   <body>

diff --git a/public/manifest.json b/public/manifest.json
diff --git a/server.js b/server.js
diff --git a/src/.example.env b/src/.example.env
@@ -0,0 +1,7 @@
+MAPBOX_TOKEN=REDACTED
+MAPBOX_STREETS_URL=https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/{z}/{x}/{y}
+MAPBOX_SATELLITE_URL=https://api.mapbox.com/styles/v1/mapbox/satellite-streets-v11/tiles/{z}/{x}/{y}
+API_URL=REDACTED
+MIXPANEL_ENABLED=0
+MIXPANEL_TOKEN_PROD=REDACTED
+MIXPANEL_TOKEN_DEV=REDACTED
diff --git a/src/components/PinMap/PinMap.jsx b/src/components/PinMap/PinMap.jsx
@@ -44,8 +44,8 @@ class PinMap extends Component {
     this.state = {
       position: [34.0094213, -118.6008506],
       zoom: 10,
-      mapUrl: `https://api.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}.png?access_token=${process.env.REACT_APP_MAPBOX_TOKEN}`,
-      satelliteUrl: `https://api.mapbox.com/styles/v1/mapbox/satellite-streets-v11/tiles/{z}/{x}/{y}?access_token=${process.env.REACT_APP_MAPBOX_TOKEN}`,
+      streetsLayerUrl: `${process.env.MAPBOX_STREETS_URL}?access_token=${process.env.MAPBOX_TOKEN}`,
+      satelliteLayerUrl: `${process.env.MAPBOX_SATELLITE_URL}?access_token=${process.env.MAPBOX_TOKEN}`,
       geoJSON: ncOverlay,
       bounds: null,
       ready: false,
@@ -223,8 +223,8 @@ class PinMap extends Component {
     const {
       position,
       zoom,
-      mapUrl,
-      satelliteUrl,
+      streetsLayerUrl,
+      satelliteLayerUrl,
       bounds,
       geoJSON,
       width,
@@ -274,13 +274,13 @@ class PinMap extends Component {
           >
             <BaseLayer checked name="Streets">
               <TileLayer
-                url={mapUrl}
+                url={streetsLayerUrl}
                 attribution="MapBox"
               />
             </BaseLayer>
             <BaseLayer name="Satellite">
               <TileLayer
-                url={satelliteUrl}
+                url={satelliteLayerUrl}
                 attribution="MapBox"
               />
             </BaseLayer>

diff --git a/src/components/chartExtras/ComparisonCriteria.jsx b/src/components/chartExtras/ComparisonCriteria.jsx
@@ -112,11 +112,11 @@ ComparisonCriteria.propTypes = {
   sets: PropTypes.shape({
     set1: PropTypes.shape({
       district: PropTypes.string,
-      list: PropTypes.array,
+      list: PropTypes.arrayOf(PropTypes.string),
     }),
     set2: PropTypes.shape({
       district: PropTypes.string,
-      list: PropTypes.array,
+      list: PropTypes.arrayOf(PropTypes.string),
     }),
   }).isRequired,
   requestTypes: PropTypes.shape({}).isRequired,

diff --git a/src/components/main/menu/Submit.jsx b/src/components/main/menu/Submit.jsx
@@ -105,7 +105,7 @@ Submit.propTypes = {
   filters: propTypes.shape({
     startDate: propTypes.string,
     endDate: propTypes.string,
-    councils: propTypes.array,
+    councils: propTypes.arrayOf(propTypes.string),
     requestTypes: propTypes.shape({}),
   }).isRequired,
   comparisonFilters: propTypes.shape({
@@ -115,11 +115,11 @@ Submit.propTypes = {
       chart: propTypes.string,
       set1: propTypes.shape({
         district: propTypes.string,
-        list: propTypes.array,
+        list: propTypes.arrayOf(propTypes.string),
       }),
       set2: propTypes.shape({
         district: propTypes.string,
-        list: propTypes.array,
+        list: propTypes.arrayOf(propTypes.string),
       }),
     }),
     requestTypes: propTypes.shape({}),

diff --git a/src/redux/sagas/comparisonData.js b/src/redux/sagas/comparisonData.js
@@ -20,7 +20,7 @@ import {
 
 /* /////////// INDIVIDUAL API CALLS /////////// */
 
-const BASE_URL = process.env.DB_URL;
+const BASE_URL = process.env.API_URL;
 
 function* getCountsComparison(filters) {
   const url = `${BASE_URL}/comparison/counts`;

diff --git a/src/redux/sagas/data.js b/src/redux/sagas/data.js
@@ -31,7 +31,7 @@ import {
 
 /* ////////////////// API CALLS  //////////////// */
 
-const BASE_URL = process.env.DB_URL;
+const BASE_URL = process.env.API_URL;
 
 /* ////  MAP //// */
 

diff --git a/src/redux/sagas/metadata.js b/src/redux/sagas/metadata.js
@@ -12,7 +12,7 @@ import {
 } from '../reducers/metadata';
 
 function* getMetadata() {
-  const url = `${process.env.DB_URL}/status/api`;
+  const url = `${process.env.API_URL}/status/api`;
   try {
     const { data } = yield call(axios.get, url);
     yield put(getMetadataSuccess(data));

diff --git a/src/utils/Mixpanel.js b/src/utils/Mixpanel.js
@@ -5,7 +5,7 @@ const token = envCheck ? process.env.MIXPANEL_TOKEN_PROD : process.env.MIXPANEL_
 
 // Set MIXPANEL_ENABLED env variable to:
 //   1 or greater to enable Mixpanel logging
-//  -1 to disable Mixpanel logging
+//   0 to disable Mixpanel logging
 const mixpanelEnabled = process.env.MIXPANEL_ENABLED > 0;
 
 if (mixpanelEnabled) {

diff --git a/webpack.config.js b/webpack.config.js
@@ -72,10 +72,13 @@ module.exports = {
     ],
   },
   plugins: [
-    new Dotenv(),
+    new Dotenv({
+      path: 'src/.env',
+    }),
     new HtmlWebpackPlugin({
       template: './public/index.html',
       title: '311-Data',
+      favicon: './public/favicon.png',
     }),
     new MiniCssExtractPlugin({
       filename: '[name].css',