Connect SparklineContainer to redux store

src/components/Explorer.js

@@ -5,26 +5,17 @@ import AgencyChartContainer from './AgencyChartContainer'
 import ExplorerHeader from './ExplorerHeader'
 import NibrsContainer from './NibrsContainer'
 import NotFound from './NotFound'
-<<<<<<< HEAD
 import SidebarContainer from './SidebarContainer'
-import SparklineSection from './SparklineSection'
-=======
-import Sidebar from './Sidebar'
 import SparklineContainer from './SparklineContainer'
->>>>>>> Refactor sparklines (#773)
 import TrendContainer from './TrendContainer'
 import UcrParticipationContainer from './UcrParticipationContainer'
 import { updateApp } from '../actions/composite'
 import { showTerm } from '../actions/glossary'
 import { hideSidebar, showSidebar } from '../actions/sidebar'
 import offenses from '../util/offenses'
+import { getPlaceInfo } from '../util/place'
 import ucrParticipation from '../util/ucr'
-import lookup, { nationalKey } from '../util/usa'
-
-const getPlaceInfo = ({ place, placeType }) => ({
-  place: place || nationalKey,
-  placeType: placeType || 'national',
-})
+import lookup from '../util/usa'
 
 class Explorer extends React.Component {
   componentDidMount() {
@@ -78,11 +69,6 @@ class Explorer extends React.Component {
     const showNibrs = !noNibrs.includes(crime) && participation.nibrs
     const isAgency = placeType === 'agency'
 
-    const childProps = {
-      dispatch,
-      ...filters,
-    }
-
     return (
       <div className="site-wrapper">
         <div className="sticky top-0">
@@ -112,14 +98,7 @@ class Explorer extends React.Component {
             />
             <UcrParticipationContainer />
             <hr className="mt0 mb3" />
-            {isAgency &&
-              <SparklineContainer
-                crime={crime}
-                place={place}
-                since={filters.since}
-                summaries={summaries}
-                until={filters.until}
-              />}
+            {isAgency && <SparklineContainer />}
             {isAgency ? <AgencyChartContainer /> : <TrendContainer />}
             {showNibrs && <NibrsContainer />}
             <hr className="mt0 mb3" />

src/components/SidebarContainer.js

@@ -7,7 +7,13 @@ import LocationFilter from './LocationFilter'
 import TimePeriodFilter from './TimePeriodFilter'
 import { hideSidebar } from '../actions/sidebar'
 
-const SidebarContainer = ({ dispatch, filters, isOpen, onChange }) => {
+const SidebarContainer = ({
+  agencies,
+  dispatch,
+  filters,
+  isOpen,
+  onChange,
+}) => {
   const { crime, place, placeType } = filters
   const hide = () => dispatch(hideSidebar())
 
@@ -47,7 +53,8 @@ SidebarContainer.propTypes = {
   onChange: PropTypes.func,
 }
 
-const mapStateToProps = ({ filters, sidebar }) => ({
+const mapStateToProps = ({ agencies, filters, sidebar }) => ({
+  agencies,
   filters,
   isOpen: sidebar.isOpen,
 })

src/components/SparklineContainer.js

@@ -2,6 +2,7 @@ import { max } from 'd3-array'
 import snakeCase from 'lodash.snakecase'
 import startCase from 'lodash.startcase'
 import React from 'react'
+import { connect } from 'react-redux'
 
 import Loading from './Loading'
 import Sparkline from './Sparkline'
@@ -68,4 +69,12 @@ const SparklineContainer = ({ crime, place, since, summaries, until }) => {
   )
 }
 
-export default SparklineContainer
+const mapStateToProps = ({ crime, place, since, summaries, until }) => ({
+  crime,
+  place,
+  since,
+  summaries,
+  until,
+})
+
+export default connect(mapStateToProps)(SparklineContainer)

src/components/UcrParticipationContainer.js

@@ -9,6 +9,7 @@ import PlaceThumbnail from './PlaceThumbnail'
 import Term from './Term'
 import content from '../util/content'
 import { oriToState } from '../util/ori'
+import { getPlaceInfo } from '../util/place'
 import ucrParticipation from '../util/ucr'
 import lookupUsa, { nationalKey } from '../util/usa'
 
@@ -19,7 +20,7 @@ const participationCsvLink = (place, type) => {
 
   const path = place === nationalKey
     ? 'participation/national'
-    : `participation/states/${lookupUsa(place).toUpperCase()}`
+    : `participation/states/${lookupUsa(place)}`
 
   return [
     {
@@ -112,10 +113,9 @@ UcrParticipationContainer.propTypes = {
 
 const mapStateToProps = state => {
   const { filters, ucr } = state
-  const { place, placeType, until } = filters
+  const { until } = filters
   return {
-    place,
-    placeType,
+    ...getPlaceInfo(filters),
     ucr,
     until,
   }

src/util/place.js

@@ -0,0 +1,6 @@
+import { nationalKey } from './usa'
+
+export const getPlaceInfo = ({ place, placeType }) => ({
+  place: place || nationalKey,
+  placeType: placeType || 'national',
+})