upgrade undux (#802)

bayesimpact · May 14, 2018 · 4c66df0 · 4c66df0
1 parent 9b6e464
commit 4c66df0
Show file tree

Hide file tree

Showing 31 changed files with 1,020 additions and 1,010 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -31,21 +31,21 @@
     "react-autocomplete": "^1.8.1",
     "react-chartjs-2": "^2.7.0",
     "react-device-detect": "^0.1.0",
-    "react-ga": "^2.4.1",
+    "react-ga": "react-ga/react-ga#2b61ba9",
     "react-mapbox-gl": "^2.8.0",
-    "undux": "^3.2.1"
+    "undux": "^4.4.0"
   },
   "devDependencies": {
     "@types/chart.js": "^2.7.7",
     "@types/jest": "^21.1.6",
-    "@types/lodash": "^4.14.85",
+    "@types/lodash": "^4.14.108",
     "@types/mapbox-gl": "^0.40.1",
     "@types/material-ui": "^0.18.4",
     "@types/papaparse": "^4.1.31",
     "@types/prettier": "^1.9.0",
     "@types/prop-types": "^15.5.2",
-    "@types/react": "^16.0.25",
-    "@types/react-dom": "^16.0.3",
+    "@types/react": "^16.3.14",
+    "@types/react-dom": "^16.0.5",
     "axios": "^0.17.1",
     "chart.js": "^2.7.1",
     "concurrently": "^3.5.0",
@@ -72,7 +72,7 @@
     "react-dom": "^16.1.1",
     "rmfr": "^1.0.3",
     "robotstxt-webpack-plugin": "^4.0.1",
-    "rx": "^4.1.0",
+    "rxjs": "^6.1.0",
     "ts-jest": "^21.2.3",
     "ts-loader": "^4.0.1",
     "ts-node": "^6.0.3",

diff --git a/frontend/src/components/AddDatasetDrawer/AddDatasetDrawer.tsx b/frontend/src/components/AddDatasetDrawer/AddDatasetDrawer.tsx
@@ -16,7 +16,7 @@ import './AddDatasetDrawer.css'
 const githubLink = SecureLink('https://github.com/beaconlabs/encompass', 'GitHub')
 const contactUsLink = SecureLink('mailto:[email protected]?subject=Driving%Time%20Analysis', 'contact us')
 
-export let AddDatasetDrawer = withStore('selectedDataset', 'useCustomCountyUpload')(({ store }) =>
+export let AddDatasetDrawer = withStore(({ store }) =>
   <div className='AddDatasetDrawer Drawer'>
     <BackLink />
     <h2 className='Secondary'>Upload your data to explore</h2>
@@ -40,7 +40,7 @@ export let AddDatasetDrawer = withStore('selectedDataset', 'useCustomCountyUploa
   </div >
 )
 
-let AnalyzerButton = withStore('uploadedProvidersFilename')(({ store }) =>
+let AnalyzerButton = withStore(({ store }) =>
   <div>
     <RaisedButton
       className={'Button -Primary'}
@@ -82,7 +82,7 @@ function Analyze(store: Store) {
   }
 }
 
-let DownloadDatasetLink = withStore()(({ store }) =>
+let DownloadDatasetLink = withStore(({ store }) =>
   <div>
     <FlatButton
       className='DownloadDatasetLink Button -Primary'

diff --git a/frontend/src/components/AdequacyDoughnut/AdequacyDoughnut.tsx b/frontend/src/components/AdequacyDoughnut/AdequacyDoughnut.tsx
@@ -23,7 +23,7 @@ type Props = {
  */
 (Chart as any).defaults.global.legend.labels.usePointStyle = true
 
-export let AdequacyDoughnut = withStore('adequacies', 'method')<Props>(({ serviceAreas, store }) => {
+export let AdequacyDoughnut = withStore<Props>(({ serviceAreas, store }) => {
 
   if (isEmpty(store.get('adequacies'))) {
     return <div className='AdequacyDoughnut Flex -Center'>

diff --git a/frontend/src/components/AnalyticsDrawer/AnalyticsDrawer.tsx b/frontend/src/components/AnalyticsDrawer/AnalyticsDrawer.tsx
@@ -9,43 +9,41 @@ import { CensusAnalytics } from './CensusAnalytics'
 /**
  * TODO: Show loading indicator while necessary data is being fetched.
  */
-export let AnalyticsDrawer = withStore(
-  'selectedDataset', 'selectedCensusCategory', 'selectedCounties',
-  'selectedCountyType', 'selectedFormat', 'selectedServiceAreas', 'selectedFilterMethod')(({ store }) => {
+export let AnalyticsDrawer = withStore(({ store }) => {
 
-    let selectedDataset = store.get('selectedDataset')
+  let selectedDataset = store.get('selectedDataset')
 
-    if (!selectedDataset) {
-      return <div className='AnalyticsDrawer'>
-        <BackLink />
-        <p>Error - Please reload the page</p>
-      </div>
-    }
-
-    return <div className='AnalyticsDrawer Drawer'>
+  if (!selectedDataset) {
+    return <div className='AnalyticsDrawer'>
       <BackLink />
-      <h2 className='Secondary'>{selectedDataset.name}</h2>
-      <div className='Description'>
-        <h4 className='HeavyWeight Muted'>Description</h4>
-        <div dangerouslySetInnerHTML={{ __html: selectedDataset.description }} />
-      </div>
-      <div className='Selectors'>
-        <SelectorBlock />
-      </div>
+      <p>Error - Please reload the page</p>
+    </div>
+  }
+
+  return <div className='AnalyticsDrawer Drawer'>
+    <BackLink />
+    <h2 className='Secondary'>{selectedDataset.name}</h2>
+    <div className='Description'>
+      <h4 className='HeavyWeight Muted'>Description</h4>
+      <div dangerouslySetInnerHTML={{ __html: selectedDataset.description }} />
+    </div>
+    <div className='Selectors'>
+      <SelectorBlock />
+    </div>
+    <div>
+      <CensusAnalytics />
+    </div>
+    <div className='Description'>
+      <h4 className='HeavyWeight Muted'>Data Sources</h4>
       <div>
-        <CensusAnalytics />
-      </div>
-      <div className='Description'>
-        <h4 className='HeavyWeight Muted'>Data Sources</h4>
-        <div>
-          <div dangerouslySetInnerHTML={{ __html: selectedDataset.dataSources }} />
-          <br />
-          Population Data: European Commission, Joint Research Centre (JRC); Columbia University, Center for International Earth Science Information Network
-           - CIESIN (2015): GHS population grid, derived from GPW4, multitemporal (1975, 1990, 2000, 2015).
-           European Commission, Joint Research Centre (JRC) {SecureLink('http://data.europa.eu/89h/jrc-ghsl-ghs_pop_gpw4_globe_r2015a', '[Dataset]')}.
-           <br /><br />
-          Demographic Information: 2012-2016 American Community Survey 5-year estimates. {SecureLink('https://www.census.gov/programs-surveys/acs/news/data-releases/2016/release.html', 'U.S. Census Bureau')}.
-        </div>
+        <div dangerouslySetInnerHTML={{ __html: selectedDataset.dataSources }} />
+        <br />
+        Population Data: European Commission, Joint Research Centre (JRC); Columbia University, Center for International Earth Science Information Network
+          - CIESIN (2015): GHS population grid, derived from GPW4, multitemporal (1975, 1990, 2000, 2015).
+          European Commission, Joint Research Centre (JRC) {SecureLink('http://data.europa.eu/89h/jrc-ghsl-ghs_pop_gpw4_globe_r2015a', '[Dataset]')}.
+          <br /><br />
+        Demographic Information: 2012-2016 American Community Survey 5-year estimates. {SecureLink('https://www.census.gov/programs-surveys/acs/news/data-releases/2016/release.html', 'U.S. Census Bureau')}.
       </div>
     </div>
-  })
+  </div>
+})
diff --git a/frontend/src/components/AnalyticsDrawer/CensusAnalytics.tsx b/frontend/src/components/AnalyticsDrawer/CensusAnalytics.tsx
@@ -12,11 +12,7 @@ import { DownloadAnalysisLink } from '../DownloadAnalysisLink/DownloadAnalysisLi
 import { StatsBox } from '../StatsBox/StatsBox'
 import './CensusAnalytics.css'
 
-export let CensusAnalytics = withStore(
-  'adequacies',
-  'selectedServiceAreas',
-  'serviceAreas'
-)(({ store }) => {
+export let CensusAnalytics = withStore(({ store }) => {
 
   let selectedServiceAreas = store.get('selectedServiceAreas') ? store.get('selectedServiceAreas')! : store.get('serviceAreas')
   let selectedCensusCategory = store.get('selectedCensusCategory')

diff --git a/frontend/src/components/App/App.tsx b/frontend/src/components/App/App.tsx
@@ -26,7 +26,7 @@ if (!isWebGLEnabled()){
   }
 }
 
-export let App = withStore('error', 'success', 'alert')(({ store }) =>
+export let App = withStore(({ store }) =>
   <MuiThemeProvider>
     <div className='App'>
       <Header />

diff --git a/frontend/src/components/CSVUploader/CSVUploader.tsx b/frontend/src/components/CSVUploader/CSVUploader.tsx
@@ -9,7 +9,7 @@ type Props = {
   onUpload(file: File): void
 }
 
-export let CSVUploader = withStore('alert')<Props>(({ label, onUpload, store }) =>
+export let CSVUploader = withStore<Props>(({ label, onUpload, store }) =>
   <div>
     <FlatButton
       className='CSVUploader Button -Secondary'

diff --git a/frontend/src/components/CensusAdequacyCharts/CensusAdequacyCharts.tsx b/frontend/src/components/CensusAdequacyCharts/CensusAdequacyCharts.tsx
@@ -19,7 +19,7 @@ type Props = {
  * TODO: Fix typings upstream in DefinitelyTyped/chart.js
  */
 
-export let CensusAdequacyCharts = withStore('adequacies', 'method')<Props>(({ serviceAreas, censusCategory, store }) => {
+export let CensusAdequacyCharts = withStore<Props>(({ serviceAreas, censusCategory, store }) => {
   let method = store.get('method')
 
   // Calculate summaryStatistics for each group.

diff --git a/frontend/src/components/CensusAdequacyTable/CensusAdequacyTable.tsx b/frontend/src/components/CensusAdequacyTable/CensusAdequacyTable.tsx
@@ -18,7 +18,7 @@ type Props = {
 }
 
 // Force first column to be larger than the other ones.
-let firstColumnStyle = {
+let firstColumnStyle: React.CSSProperties = {
   width: '30%',
   whiteSpace: 'normal'
 }
@@ -30,7 +30,7 @@ let firstColumnStyle = {
  */
 // (Chart as any).defaults.global.legend.labels.usePointStyle = true
 
-export let CensusAdequacyTable = withStore('adequacies', 'method', 'selectedCensusGroup')<Props>(({ serviceAreas, censusCategory, store }) => {
+export let CensusAdequacyTable = withStore<Props>(({ serviceAreas, censusCategory, store }) => {
   if (isEmpty(store.get('adequacies'))) {
     return <div className='CensusAdequacyTable Flex -Center'>
       <CircularProgress

diff --git a/frontend/src/components/DatasetsDrawer/DatasetsDrawer.tsx b/frontend/src/components/DatasetsDrawer/DatasetsDrawer.tsx
@@ -42,7 +42,7 @@ let tiles = [
 ]
 let DatasetTilePicker = TilePicker<Dataset>()
 
-export let DatasetsDrawer = withStore('selectedDataset')(({ store }) =>
+export let DatasetsDrawer = withStore(({ store }) =>
   <div className='DatasetsDrawer Drawer'>
     <p>Welcome to Encompass, a geographic analysis tool built by {SecureLink('http://www.thebeaconlabs.org', 'Beacon Labs')}. Choose one of the datasets below to begin exploring the accessibility of health care services in different regions of the U.S.</p>
     <DatasetTilePicker

diff --git a/frontend/src/components/DownloadAnalysisLink/DownloadAnalysisLink.tsx b/frontend/src/components/DownloadAnalysisLink/DownloadAnalysisLink.tsx
@@ -11,7 +11,7 @@ import './DownloadAnalysisLink.css'
 
 const useStaticCsvs: boolean = CONFIG.staticAssets.csv.useStaticCsvs
 
-export let DownloadAnalysisLink = withStore()(({ store }) =>
+export let DownloadAnalysisLink = withStore(({ store }) =>
   <FlatButton
     className='DownloadAnalysisLink Button -Primary'
     icon={<DownloadIcon />}

diff --git a/frontend/src/components/FilterBar/FilterBar.tsx b/frontend/src/components/FilterBar/FilterBar.tsx
@@ -7,7 +7,7 @@ import { CONFIG } from '../../config/config'
 import { withStore } from '../../services/store'
 import './FilterBar.css'
 
-export let FilterBar = withStore('method', 'allowDrivingTime')(({ store }) => {
+export let FilterBar = withStore(({ store }) => {
   return <Paper className='FilterBar' zDepth={1}>
     <div className='Filter -FixedWidthBig'>
       <span>Measure</span>

diff --git a/frontend/src/components/Header/Header.tsx b/frontend/src/components/Header/Header.tsx
@@ -13,7 +13,7 @@ import './Header.css'
 
 let title = 'Encompass' + CONFIG.title_suffix
 
-export let Header = withStore('modal')(({ store }) =>
+export let Header = withStore(({ store }) =>
   < AppBar
     className='Header'
     title={SecureLink('.', title, '_self')}

diff --git a/frontend/src/components/LeftPane/LeftPane.tsx b/frontend/src/components/LeftPane/LeftPane.tsx
@@ -13,7 +13,7 @@ let drawers = {
   '/add-data': AddDatasetDrawer
 }
 
-export let LeftPane = withStore('route')(({ store }) =>
+export let LeftPane = withStore(({ store }) =>
   <>
     {map(drawers, (Component, route) =>
       <Drawer

diff --git a/frontend/src/components/Link/Link.tsx b/frontend/src/components/Link/Link.tsx
@@ -9,7 +9,7 @@ type Props = {
   to: Route
 }
 
-export let Link = withStore()<Props>(({ children, className, onClick, store, to }) =>
+export let Link = withStore<Props>(({ children, className, onClick, store, to }) =>
   <a
     className={'Link ' + (className || '')}
     onClick={e => {
@@ -23,7 +23,7 @@ export let Link = withStore()<Props>(({ children, className, onClick, store, to
 )
 Link.displayName = 'Link'
 
-export let BackLink = withStore()(({ store }) =>
+export let BackLink = withStore(({ store }) =>
   <Link
     className='Muted Uppercase'
     onClick={() => {

diff --git a/frontend/src/components/MapLegend/MapLegend.tsx b/frontend/src/components/MapLegend/MapLegend.tsx
@@ -5,7 +5,7 @@ import { withStore } from '../../services/store'
 import { getLegend } from '../../utils/adequacy'
 import './MapLegend.css'
 
-export let MapLegend = withStore('method', 'selectedCensusGroup')(({ store }) =>
+export let MapLegend = withStore(({ store }) =>
   <ul className='MapLegend'>
     Population by Access
     <li><i>{store.get('selectedCensusGroup')}</i></li>

diff --git a/frontend/src/components/MapTooltip/MapTooltip.tsx b/frontend/src/components/MapTooltip/MapTooltip.tsx
@@ -51,7 +51,7 @@ function _togglePrevProvider(store: Store) {
   store.set('providerIndex')(index - 1)
 }
 
-export let ProviderPopup = withStore('providerIndex')<ProviderProps>(({ store, point: { features, lngLat } }) => {
+export let ProviderPopup = withStore<ProviderProps>(({ store, point: { features, lngLat } }) => {
   let index = store.get('providerIndex')
   let maxIndex = features.length - 1
   let indexMessage = (index + 1) + ' of ' + (maxIndex + 1)

diff --git a/frontend/src/components/MapView/MapView.tsx b/frontend/src/components/MapView/MapView.tsx
@@ -77,14 +77,7 @@ function removePopup(store: Store) {
 const SCALE_CONTROL_STYLE = { bottom: 30, right: 58 }
 const ZOOM_CONTROL_STYLE = { bottom: 30, right: 19 }
 
-export let MapView = withStore(
-  'pointFeatureCollections',
-  'mapCenter',
-  'providerIndex',
-  'providers',
-  'selectedProvider',
-  'selectedRepresentativePoint'
-)(({ store }) => {
+export let MapView = withStore(({ store }) => {
   let providers = store.get('providers')
   let selectedRepresentativePoint = store.get('selectedRepresentativePoint')
   let selectedProvider = store.get('selectedProvider')

diff --git a/frontend/src/components/Selectors/SelectorBlock.tsx b/frontend/src/components/Selectors/SelectorBlock.tsx
@@ -12,43 +12,43 @@ import { ServiceAreaSelector } from './ServiceAreaSelector'
 import { StateSelector } from './StateSelector'
 
 // TODO - Consider abstracting the Selector class to avoid duplications.
-export let SelectorBlock = withStore('selectedState')(({ store }) => {
-    return (
-        <div className='Selectors'>
-            {store.get('selectedDataset') && store.get('selectedDataset')!.usaWide ? <div className='SelectorRow'>
-                <h4 className='HeavyWeight Muted'>State</h4>
-                <StateSelector
-                    className='Menu'
-                    store={store}
-                    value={store.get('selectedState')} />
-            </div > : null}
-            <div className='SelectorRow'>
-                <h4 className='HeavyWeight Muted'>County Filter</h4>
-                <FilterMethodSelector
-                    className='Menu'
-                    onChange={store.set('selectedFilterMethod')}
-                    value={store.get('selectedFilterMethod')}
-                />
-                {selectorByMethod(store.get('selectedFilterMethod'), store)}
-            </div>
-            {CONFIG.is_census_data_available ? <div className='SelectorRow'>
-                <h4 className='HeavyWeight Muted'>Demographic</h4>
-                <CensusCategorySelector
-                    className='Menu'
-                    onChange={store.set('selectedCensusCategory')}
-                    value={store.get('selectedCensusCategory')}
-                />
-            </div > : null}
-            <div className='SelectorRow'>
-                <h4 className='HeavyWeight Muted'>Values</h4>
-                <FormatSelector
-                    className='Menu'
-                    onChange={store.set('selectedFormat')}
-                    value={store.get('selectedFormat')}
-                />
-            </div>
-        </div>
-    )
+export let SelectorBlock = withStore(({ store }) => {
+  return (
+      <div className='Selectors'>
+          {store.get('selectedDataset') && store.get('selectedDataset')!.usaWide ? <div className='SelectorRow'>
+              <h4 className='HeavyWeight Muted'>State</h4>
+              <StateSelector
+                  className='Menu'
+                  store={store}
+                  value={store.get('selectedState')} />
+          </div > : null}
+          <div className='SelectorRow'>
+              <h4 className='HeavyWeight Muted'>County Filter</h4>
+              <FilterMethodSelector
+                  className='Menu'
+                  onChange={store.set('selectedFilterMethod')}
+                  value={store.get('selectedFilterMethod')}
+              />
+              {selectorByMethod(store.get('selectedFilterMethod'), store)}
+          </div>
+          {CONFIG.is_census_data_available ? <div className='SelectorRow'>
+              <h4 className='HeavyWeight Muted'>Demographic</h4>
+              <CensusCategorySelector
+                  className='Menu'
+                  onChange={store.set('selectedCensusCategory')}
+                  value={store.get('selectedCensusCategory')}
+              />
+          </div > : null}
+          <div className='SelectorRow'>
+              <h4 className='HeavyWeight Muted'>Values</h4>
+              <FormatSelector
+                  className='Menu'
+                  onChange={store.set('selectedFormat')}
+                  value={store.get('selectedFormat')}
+              />
+          </div>
+      </div>
+  )
 })
 
 function selectorByMethod(method: FilterMethod, store: Store) {

diff --git a/frontend/src/components/Selectors/ServiceAreaSelector.tsx b/frontend/src/components/Selectors/ServiceAreaSelector.tsx
@@ -17,7 +17,7 @@ const styles = {
   }
 }
 
-export let ServiceAreaSelector = withStore('counties')<Props>(({ className, onChange, store, values }) => {
+export let ServiceAreaSelector = withStore<Props>(({ className, onChange, store, values }) => {
   let menuItems = chain(store.get('counties'))
     .map(_ => <MenuItem value={_} key={_} primaryText={capitalizeWords(_)} />)
     .value()