From ac41fc67580bf1ee183ba27150cc8defc948f145 Mon Sep 17 00:00:00 2001
From: Jim O'Donnell <jim@zooniverse.org>
Date: Tue, 17 Aug 2021 11:33:52 +0100
Subject: [PATCH] Remove inject

---
 .../DailyClassificationsChart.stories.js      |  4 +-
 .../DailyClassificationsChartConnector.js     | 38 +++++++++++
 .../DailyClassificationsChartContainer.js     | 64 ++++++++-----------
 ...DailyClassificationsChartContainer.spec.js |  2 +-
 4 files changed, 67 insertions(+), 41 deletions(-)
 create mode 100644 packages/app-project/src/screens/ClassifyPage/components/YourStats/components/DailyClassificationsChart/DailyClassificationsChartConnector.js

diff --git a/packages/app-project/src/screens/ClassifyPage/components/YourStats/components/DailyClassificationsChart/DailyClassificationsChart.stories.js b/packages/app-project/src/screens/ClassifyPage/components/YourStats/components/DailyClassificationsChart/DailyClassificationsChart.stories.js
index c848864287b..2f96d451b75 100644
--- a/packages/app-project/src/screens/ClassifyPage/components/YourStats/components/DailyClassificationsChart/DailyClassificationsChart.stories.js
+++ b/packages/app-project/src/screens/ClassifyPage/components/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/packages/app-project/src/screens/ClassifyPage/components/YourStats/components/DailyClassificationsChart/DailyClassificationsChartConnector.js b/packages/app-project/src/screens/ClassifyPage/components/YourStats/components/DailyClassificationsChart/DailyClassificationsChartConnector.js
new file mode 100644
index 00000000000..6027a384ab4
--- /dev/null
+++ b/packages/app-project/src/screens/ClassifyPage/components/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)
\ No newline at end of file
diff --git a/packages/app-project/src/screens/ClassifyPage/components/YourStats/components/DailyClassificationsChart/DailyClassificationsChartContainer.js b/packages/app-project/src/screens/ClassifyPage/components/YourStats/components/DailyClassificationsChart/DailyClassificationsChartContainer.js
index 26894277eac..215600e70fb 100644
--- a/packages/app-project/src/screens/ClassifyPage/components/YourStats/components/DailyClassificationsChart/DailyClassificationsChartContainer.js
+++ b/packages/app-project/src/screens/ClassifyPage/components/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/packages/app-project/src/screens/ClassifyPage/components/YourStats/components/DailyClassificationsChart/DailyClassificationsChartContainer.spec.js b/packages/app-project/src/screens/ClassifyPage/components/YourStats/components/DailyClassificationsChart/DailyClassificationsChartContainer.spec.js
index a2b3a946f17..c93cb421bb1 100644
--- a/packages/app-project/src/screens/ClassifyPage/components/YourStats/components/DailyClassificationsChart/DailyClassificationsChartContainer.spec.js
+++ b/packages/app-project/src/screens/ClassifyPage/components/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}