Make frontend testable locally

[braindawg]

This is a (partial) fix for issue #151 - this will use constants declared within the terraform/ingest file for salary threshold values rather than inline scalar values. Ideally, these constants would be declared in a single place at a higher level so that they could be used by both terraform and the frontend pieces. Currently we have two separately declared sets of constants.

In order to test this patch locally, I had to comment out all of the references to our S3 buckets due to CORS restrictions (in SummaryCharts.js and ExploreCharts.js). To provide an alternative data source, I downloaded the JSON accessible via those buckets (by using Chrome dev tools to grab the source JSON from the actual production Inclucivics page) and stored them locally in the project's /public folder. The employees.csv file needed to go into a subdirectory separated by date.

Here were the files needed and where I stored them relative to the project root:

/public/data/dates.json /public/data/departments.json /public/data/2017-07-14/employees.csv /public/data/summaries.json

And here were the testing-only edits to SummaryCharts.js and ExploreCharts.js:

--- a/src/ExploreCharts.js
+++ b/src/ExploreCharts.js
@@ -30,13 +30,15 @@ export default class ExploreCharts extends PureComponent {
   }

   fetchDepartments () {
-    return window.fetch(`${S3_URL}/data/departments.json`)
+//    return window.fetch(`${S3_URL}/data/departments.json`)
+    return window.fetch(`/data/departments.json`)
       .then(res => res.json())
   }

   fetchEmployees (date) {
     return window.fetch(
-      `${S3_URL}/data/${date}/employees.csv`
+//      `${S3_URL}/data/${date}/employees.csv`
+      `/data/${date}/employees.csv`
     ).then(
       res => res.text()
     ).then(text => {
@@ -49,7 +51,8 @@ export default class ExploreCharts extends PureComponent {
   }

   fetchDates () {
-    return window.fetch(`${S3_URL}/data/dates.json`)
+//    return window.fetch(`${S3_URL}/data/dates.json`)
+    return window.fetch(`/data/dates.json`)
     .then(res => res.json())
   }

_________________________________________

--- a/src/SummaryCharts.js
+++ b/src/SummaryCharts.js
@@ -13,11 +13,12 @@ export default class SummaryCharts extends PureComponent {
   }

   fetchSummaries () {
-    return window.fetch(`${S3_URL}/data/summaries.json`)
+ //   return window.fetch(`${S3_URL}/data/summaries.json`)
+    return window.fetch(`/data/summaries.json`)
       .then(res => res.json())
       .then(summaries => {
         summaries.forEach(s => {
-          let [year, month, day] = s.date.split('-').map((x) => parseInt(x))
+          let [year, month, day] = s.date.split('-').map((x) => parseInt(x, 10))
           // Need to subtract 1 because Date's month field is 0 based
           s.date = new Date(year, month - 1, day)
         })

I think we probably want to either document this process so that it's a little easier for people to figure out how to test this locally, or figure out programmatically whether we're reading from S3 or from local files. Thoughts?

[combinatorist]

Thanks for your PR, @braindawg, honestly, I'll need to refamiliarize myself with our dev / deployments environments etc before I can review this, but I'll take a shot the next time I can make a Saturday session.

[combinatorist]

Note, this PR also improves the development environment / experience so it's a little easier to make first time contributions. 👍

[combinatorist]

All this needs is to:

• [x] add missing months of test data
• [x] update README so first time developer can be successful

[braindawg]

Added test data for all dates included in the test dates.json, so the site running in local test mode will at least appear to have a complete set of data.

Will work with someone new tonight to user-test the README and see what kind of edits are required to get them running from my repo.