Merge pull request #94 from conveyal/refactor-a-bit

Refactor a bit

Author: trevorgerhardt

configurations/default/settings.yml

@@ -1,7 +1,7 @@
 cloudfront: EJKZ46R7IC1BB
 entries:
   - src/index.js:assets/index.js
-  - src/containers/indianapolis/style.css:assets/index.css
+  - src/index.css:assets/index.css
 env: development
 flyle: true
 s3bucket: taui

package.json

@@ -24,11 +24,11 @@
   },
   "homepage": "https://github.com/conveyal/taui",
   "devDependencies": {
-    "mastarm": "^2.0.0",
-    "semantic-release": "^4.3.5"
+    "mastarm": "^3.0.0",
+    "semantic-release": "^6.3.2"
   },
   "dependencies": {
-    "@conveyal/woonerf": "^0.2.1",
+    "@conveyal/woonerf": "^0.3.1",
     "browsochrones": "^0.9.1",
     "color": "^0.11.1",
     "debug": "^2.2.0",

src/actions/index.js

@@ -5,7 +5,7 @@ import {createAction} from 'redux-actions'
 import fetch, {
   incrementFetches as incrementWork,
   decrementFetches as decrementWork
-} from '@conveyal/woonerf/build/lib/fetch'
+} from '@conveyal/woonerf/fetch'
 
 import featureToLabel from '../utils/feature-to-label'
 import {setKeyTo} from '../utils/hash'

src/containers/indianapolis/index.js src/components/application.js

@@ -1,28 +1,17 @@
 import lonlng from 'lonlng'
 import React, {Component, PropTypes} from 'react'
-import {connect} from 'react-redux'
 
-import {
-  clearEnd,
-  clearIsochrone,
-  clearStart,
-  setBaseActive,
-  setComparisonActive,
-  updateDestination,
-  updateOrigin,
-  updateSelectedTimeCutoff
-} from '../../actions'
-import featureToLabel from '../../utils/feature-to-label'
+import featureToLabel from '../utils/feature-to-label'
 import Form from './form'
-import Fullscreen from '../../components/fullscreen'
-import Icon from '../../components/icon'
-import Log from '../../components/log'
+import Fullscreen from './fullscreen'
+import Icon from './icon'
+import Log from './log'
 import Map from './map'
-import messages from '../../utils/messages'
-import RouteCard from '../../components/route-card'
-import initializeBrowsochrones from '../../utils/initialize-browsochrones'
+import messages from '../utils/messages'
+import RouteCard from './route-card'
+import initializeBrowsochrones from '../utils/initialize-browsochrones'
 
-class Indianapolis extends Component {
+export default class Application extends Component {
   static propTypes = {
     actionLog: PropTypes.arrayOf(PropTypes.object),
     browsochrones: PropTypes.object.isRequired,
@@ -245,23 +234,3 @@ class Indianapolis extends Component {
     )
   }
 }
-
-function mapStateToProps (state, ownProps) {
-  return state
-}
-
-function mapDispatchToProps (dispatch, ownProps) {
-  return {
-    clearEnd: () => dispatch(clearEnd()),
-    clearIsochrone: () => dispatch(clearIsochrone()),
-    clearStart: () => dispatch(clearStart()),
-    initializeBrowsochrones: (actions) => dispatch(actions),
-    moveOrigin: (options) => dispatch(updateOrigin(options)),
-    moveDestination: (options) => dispatch(updateDestination(options)),
-    onTimeCutoffChange: (options) => dispatch(updateSelectedTimeCutoff(options)),
-    setBaseActive: () => dispatch(setBaseActive()),
-    setComparisonActive: () => dispatch(setComparisonActive())
-  }
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(Indianapolis)

src/components/deep-equal.js

@@ -1,12 +1,12 @@
+import Pure from '@conveyal/woonerf/components/pure'
 import React from 'react'
 import Geocoder from 'react-select-geocoder'
 
-import DeepEqual from '../../components/deep-equal'
-import featureToLabel from '../../utils/feature-to-label'
-import {search} from '../../utils/mapbox-geocoder'
-import messages from '../../utils/messages'
+import featureToLabel from '../utils/feature-to-label'
+import {search} from '../utils/mapbox-geocoder'
+import messages from '../utils/messages'
 
-export default class Form extends DeepEqual {
+export default class Form extends Pure {
   render () {
     const {
       geocoder,

src/containers/indianapolis/form.js src/components/form.js

@@ -1,7 +1,8 @@
+import Pure from '@conveyal/woonerf/components/pure'
 import React from 'react'
 
-import {pure} from '../deep-equal'
-
-const Fullscreen = (props) => <div className='Fullscreen'>{props.children}</div>
-
-export default pure(Fullscreen)
+export default class Fullscreen extends Pure {
+  render () {
+    return <div className='Fullscreen'>{this.props.children}</div>
+  }
+}

src/components/fullscreen/index.js

@@ -1,15 +1,17 @@
+import Pure from '@conveyal/woonerf/components/pure'
 import React from 'react'
 
-import {pure} from './deep-equal'
+export default class Icon extends Pure {
+  render () {
+    const {
+      className = '',
+      type,
+      ...props
+    } = this.props
 
-const Icon = ({
-  className = '',
-  type,
-  ...props
-}) =>
-  <i
-    className={`fa fa-${type} fa-fw ${className}`}
-    {...props}
-    />
-
-export default pure(Icon)
+    return <i
+      className={`fa fa-${type} fa-fw ${className}`}
+      {...props}
+      />
+  }
+}

src/components/icon.js

@@ -1,11 +1,10 @@
+import Pure from '@conveyal/woonerf/components/pure'
 import React, {PropTypes} from 'react'
 import moment from 'moment'
 
-import DeepEqual from '../deep-equal'
-
 const format = 'HH:mm:ss'
 
-export default class LogItem extends DeepEqual {
+export default class LogItem extends Pure {
   static propTypes = {
     createdAt: PropTypes.object,
     level: PropTypes.string,

src/components/log-item/index.js

@@ -1,9 +1,9 @@
+import Pure from '@conveyal/woonerf/components/pure'
 import React, {PropTypes} from 'react'
 
-import DeepEqual from '../deep-equal'
 import LogItem from '../log-item'
 
-export default class Log extends DeepEqual {
+export default class Log extends Pure {
   static propTypes = {
     items: PropTypes.arrayOf(PropTypes.object).isRequired
   };

src/components/log/index.js

@@ -1,13 +1,13 @@
+import Pure from '@conveyal/woonerf/components/pure'
 import {Browser} from 'leaflet'
 import React, {PropTypes} from 'react'
 import {GeoJson, Map as LeafletMap, Marker, Popup, TileLayer, ZoomControl} from 'react-leaflet'
 
-import DeepEqual from '../../components/deep-equal'
-import Icon from '../../components/icon'
-import leafletIcon from '../../utils/leaflet-icons'
-import messages from '../../utils/messages'
-import TransitiveLayer from '../../components/transitive-map-layer'
-import transitiveStyle from './transitive-style'
+import Icon from './icon'
+import leafletIcon from '../utils/leaflet-icons'
+import messages from '../utils/messages'
+import TransitiveLayer from './transitive-map-layer'
+import transitiveStyle from '../transitive-style'
 
 const startIcon = leafletIcon({
   icon: 'play',
@@ -19,7 +19,7 @@ const endIcon = leafletIcon({
   markerColor: 'orange'
 })
 
-export default class Map extends DeepEqual {
+export default class Map extends Pure {
   static propTypes = {
     centerCoordinates: PropTypes.arrayOf(PropTypes.number),
     clearStartAndEnd: PropTypes.func.isRequired,

src/containers/indianapolis/map.js src/components/map.js

@@ -1,14 +1,14 @@
+import Pure from '@conveyal/woonerf/components/pure'
 import Color from 'color'
 import React from 'react'
 import toCapitalCase from 'lodash.capitalize'
 import toSpaceCase from 'lodash.lowercase'
 import unique from 'lodash.uniq'
 
-import DeepEqual from './deep-equal'
 import Icon from './icon'
 import messages from '../utils/messages'
 
-export default class RouteCard extends DeepEqual {
+export default class RouteCard extends Pure {
   render () {
     const {
       active,

src/components/route-card.js

@@ -0,0 +1,33 @@
+import {connect} from 'react-redux'
+
+import {
+  clearEnd,
+  clearIsochrone,
+  clearStart,
+  setBaseActive,
+  setComparisonActive,
+  updateDestination,
+  updateOrigin,
+  updateSelectedTimeCutoff
+} from '../actions'
+import Application from '../components/application'
+
+function mapStateToProps (state, ownProps) {
+  return state
+}
+
+function mapDispatchToProps (dispatch, ownProps) {
+  return {
+    clearEnd: () => dispatch(clearEnd()),
+    clearIsochrone: () => dispatch(clearIsochrone()),
+    clearStart: () => dispatch(clearStart()),
+    initializeBrowsochrones: (actions) => dispatch(actions),
+    moveOrigin: (options) => dispatch(updateOrigin(options)),
+    moveDestination: (options) => dispatch(updateDestination(options)),
+    onTimeCutoffChange: (options) => dispatch(updateSelectedTimeCutoff(options)),
+    setBaseActive: () => dispatch(setBaseActive()),
+    setComparisonActive: () => dispatch(setComparisonActive())
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Application)

src/components/timecutoff-select.js

@@ -1,9 +1,9 @@
-import mount from '@conveyal/woonerf/build/lib/mount'
+import mount from '@conveyal/woonerf/mount'
 
-import Indianapolis from './containers/indianapolis'
+import Application from './containers/application'
 import reducers from './reducers'
 
 mount({
-  app: Indianapolis,
+  app: Application,
   reducers
 })

src/containers/application.js

@@ -1,4 +1,4 @@
-import {DECREMENT_FETCH, INCREMENT_FETCH} from '@conveyal/woonerf/build/lib/fetch'
+import {DECREMENT_FETCH, INCREMENT_FETCH} from '@conveyal/woonerf/fetch'
 import {handleActions} from 'redux-actions'
 
 export default handleActions({