Remove inject

zooniverse · Aug 17, 2021 · ac41fc6 · ac41fc6
1 parent b73e3b0
commit ac41fc6
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 41 deletions.
diff --git a/...nents/YourStats/components/DailyClassificationsChart/DailyClassificationsChart.stories.js b/...nents/YourStats/components/DailyClassificationsChart/DailyClassificationsChart.stories.js
@@ -18,7 +18,7 @@ const MOCK_TOTALS = {
 
 export default {
   title: 'Project App / Screens / Classify / Daily Classifications Chart',
-  component: DailyClassificationsChart.wrappedComponent,
+  component: DailyClassificationsChart,
   args: {
     counts: MOCK_TOTALS,
     projectName: 'Snapshot Serengeti',
@@ -29,7 +29,7 @@ export default {
 export function Plain({ counts, projectName, thisWeek }) {
   return (
     <Grommet theme={zooTheme}>
-      <DailyClassificationsChart.wrappedComponent
+      <DailyClassificationsChart
         counts={counts}
         thisWeek={thisWeek}
         projectName={projectName}

diff --git a/...ents/YourStats/components/DailyClassificationsChart/DailyClassificationsChartConnector.js b/...ents/YourStats/components/DailyClassificationsChart/DailyClassificationsChartConnector.js
@@ -0,0 +1,38 @@
+import { MobXProviderContext, observer } from 'mobx-react'
+import { useContext } from 'react'
+
+import DailyClassificationsChartContainer from './DailyClassificationsChartContainer'
+
+function storeMapper(store) {
+  const {
+    project,
+    user: {
+      personalization: {
+        counts,
+        stats: {
+          thisWeek
+        }
+      }
+    }
+  } = store
+
+  return {
+    counts,
+    thisWeek,
+    projectName: project['display_name']
+  }
+}
+
+function DailyClassificationsChartConnector() {
+  const { store } = useContext(MobXProviderContext)
+  const { counts, thisWeek, projectName } = storeMapper(store)
+  return (
+    <DailyClassificationsChartContainer
+      counts={counts}
+      projectName={projectName}
+      thisWeek={thisWeek}
+    />
+  )
+}
+
+export default observer(DailyClassificationsChartConnector)
diff --git a/...ents/YourStats/components/DailyClassificationsChart/DailyClassificationsChartContainer.js b/...ents/YourStats/components/DailyClassificationsChart/DailyClassificationsChartContainer.js
@@ -1,56 +1,44 @@
 import counterpart from 'counterpart'
-import { inject, observer } from 'mobx-react'
 import { array, number, shape, string } from 'prop-types'
-import { Component } from 'react'
 
 import DailyClassificationsChart from './DailyClassificationsChart'
 
-function storeMapper (stores) {
-  const { project, user: { personalization: { counts, stats: { thisWeek } } } } = stores.store
-  return {
-    counts,
-    thisWeek,
-    projectName: project['display_name']
-  }
+const defaultCounts = {
+  today: 0
 }
 
-@inject(storeMapper)
-@observer
-class DailyClassificationsChartContainer extends Component {
-  render () {
-    const TODAY = new Date()
-    const { counts, projectName, thisWeek } = this.props
-    const stats = thisWeek.map(stat => {
-      const day = new Date(stat.period)
-      const locale = counterpart.getLocale()
-      const count = (day.getUTCDay() === TODAY.getUTCDay()) ? counts.today : stat.count
-      const longLabel = day.toLocaleDateString(locale, { weekday: 'long' })
-      const alt = `${longLabel}: ${count}`
-      const label = day.toLocaleDateString(locale, { weekday: 'narrow' })
-      return Object.assign({}, stat, { alt, count, label, longLabel })
-    })
-    return (
-      <DailyClassificationsChart
-        stats={stats}
-        projectName={projectName}
-      />
-    )
-  }
+function DailyClassificationsChartContainer({
+  counts = defaultCounts,
+  projectName,
+  thisWeek = []
+}) {
+  const TODAY = new Date()
+  const stats = thisWeek.map(stat => {
+    const day = new Date(stat.period)
+    const locale = counterpart.getLocale()
+    const count = (day.getUTCDay() === TODAY.getUTCDay()) ? counts.today : stat.count
+    const longLabel = day.toLocaleDateString(locale, { weekday: 'long' })
+    const alt = `${longLabel}: ${count}`
+    const label = day.toLocaleDateString(locale, { weekday: 'narrow' })
+    return Object.assign({}, stat, { alt, count, label, longLabel })
+  })
+  return (
+    <DailyClassificationsChart
+      stats={stats}
+      projectName={projectName}
+    />
+  )
 }
 
 DailyClassificationsChartContainer.propTypes = {
+  /** Today's counts, updated as classifications are made. */
   counts: shape({
     today: number
   }),
+  /** Project name */
   projectName: string.isRequired,
+  /** Array of daily stats from the stats server */
   thisWeek: array
 }
 
-DailyClassificationsChartContainer.defaultProps = {
-  counts: {
-    today: 0
-  },
-  thisWeek: []
-}
-
 export default DailyClassificationsChartContainer
diff --git a/...YourStats/components/DailyClassificationsChart/DailyClassificationsChartContainer.spec.js b/...YourStats/components/DailyClassificationsChart/DailyClassificationsChartContainer.spec.js
@@ -24,7 +24,7 @@ describe('Component > DailyClassificationsChartContainer', function () {
   before(function () {
     clock = sinon.useFakeTimers({ now: new Date('2019-10-06'), toFake: ['Date'] })
     wrapper = shallow(
-      <DailyClassificationsChartContainer.wrappedComponent
+      <DailyClassificationsChartContainer
         counts={MOCK_TOTALS}
         projectName='Test Project'
         thisWeek={MOCK_DAILY_COUNTS}