Integrate UPP store in project app (#2238)

* Create new parent store for stats and UPP. Make it child of User.

* Tests for UPP

* Only request for UPP if not already present. Rewrite tests to be async.

* Fix spec after rebase

packages/app-project/src/screens/ClassifyPage/components/ClassifierWrapper/ClassifierWrapperConnector.js

@@ -14,8 +14,7 @@ function useStore() {
     user,
     ui: {
       mode
-    },
-    yourStats
+    }
   } = store
 
   return ({
@@ -24,7 +23,7 @@ function useStore() {
     project,
     recents,
     user,
-    yourStats
+    yourStats: user.personalization
   })
 }
 

packages/app-project/src/screens/ClassifyPage/components/ClassifierWrapper/ClassifierWrapperConnector.spec.js

@@ -5,7 +5,6 @@ import React from 'react'
 import asyncStates from '@zooniverse/async-states'
 
 import initStore from '@stores/initStore'
-import ClassifierWrapper from './ClassifierWrapper'
 import ClassifierWrapperConnector from './ClassifierWrapperConnector'
 
 describe('Component > ClassifierWrapperConnector', function () {
@@ -59,7 +58,7 @@ describe('Component > ClassifierWrapperConnector', function () {
       })
 
       it('should include your personal stats', function () {
-        expect(wrapper.props().yourStats).to.equal(store.yourStats)
+        expect(wrapper.props().yourStats).to.equal(store.user.personalization)
       })
 
       it('should include the project', function () {

packages/app-project/src/screens/ClassifyPage/components/YourStats/YourStatsContainer.js

@@ -6,7 +6,7 @@ import YourStats from './YourStats'
 import withRequireUser from '@shared/components/withRequireUser'
 
 function storeMapper (stores) {
-  const { project, yourStats: { counts } } = stores.store
+  const { project, user: { personalization: { counts } } } = stores.store
   return {
     counts,
     projectName: project['display_name']

packages/app-project/src/screens/ClassifyPage/components/YourStats/components/DailyClassificationsChart/DailyClassificationsChartContainer.js

@@ -6,7 +6,7 @@ import React, { Component } from 'react'
 import DailyClassificationsChart from './DailyClassificationsChart'
 
 function storeMapper (stores) {
-  const { project, yourStats: { counts, thisWeek } } = stores.store
+  const { project, user: { personalization: { counts, stats: { thisWeek } } } } = stores.store
   return {
     counts,
     thisWeek,

packages/app-project/stores/Store.js

@@ -6,16 +6,14 @@ import Project from './Project'
 import Recents from './Recents'
 import UI from './UI'
 import User from './User'
-import YourStats from './YourStats'
 
 const Store = types
   .model('Store', {
     collections: types.optional(Collections, {}),
     project: types.optional(Project, {}),
     recents: types.optional(Recents, {}),
     ui: types.optional(UI, {}),
-    user: types.optional(User, {}),
-    yourStats: types.optional(YourStats, {})
+    user: types.optional(User, {})
   })
 
   .views(self => ({

packages/app-project/stores/User.js

@@ -1,7 +1,7 @@
 import asyncStates from '@zooniverse/async-states'
 import { flow, types } from 'mobx-state-tree'
 import auth from 'panoptes-client/lib/auth'
-
+import UserPersonalization from './UserPersonalization'
 import numberString from './types/numberString'
 
 const User = types
@@ -11,7 +11,8 @@ const User = types
     error: types.maybeNull(types.frozen({})),
     id: types.maybeNull(numberString),
     login: types.maybeNull(types.string),
-    loadingState: types.optional(types.enumeration('state', asyncStates.values), asyncStates.loading)
+    loadingState: types.optional(types.enumeration('state', asyncStates.values), asyncStates.loading),
+    personalization: types.optional(UserPersonalization, {})
   })
 
   .views(self => ({

packages/app-project/stores/UserPersonalization.js

@@ -0,0 +1,61 @@
+import { addDisposer, getRoot, types } from 'mobx-state-tree'
+import { autorun } from 'mobx'
+import UserProjectPreferences from './UserProjectPreferences'
+import YourStats from './YourStats'
+
+const UserPersonalization = types
+  .model('UserPersonalization', {
+    projectPreferences: types.optional(UserProjectPreferences, {}),
+    stats: types.optional(YourStats, {}),
+    totalClassificationCount: 0
+  })
+  .volatile(self => ({
+    sessionCount: 0
+  }))
+  .views(self => ({
+    get counts() {
+      const todaysDate = new Date()
+      let today
+      try {
+        const todaysCount = self.stats.thisWeek.length === 7
+          ? self.stats.thisWeek[todaysDate.getDay() - 1].count
+          : 0
+        today = todaysCount + self.sessionCount
+      } catch (error) {
+        today = 0
+      }
+
+      return {
+        today,
+        total: self.totalClassificationCount
+      }
+    }
+  }))
+  .actions(self => {
+    function createParentObserver() {
+      const parentDisposer = autorun(() => {
+        const { project, user } = getRoot(self)
+        if (project.id && user.id) {
+          self.projectPreferences.fetchResource()
+          self.stats.fetchDailyCounts()
+        }
+      })
+      addDisposer(self, parentDisposer)
+    }
+    return {
+      afterAttach() {
+        createParentObserver()
+      },
+
+      increment() {
+        self.sessionCount = self.sessionCount + 1
+        self.totalClassificationCount = self.totalClassificationCount + 1
+      },
+
+      setTotalClassificationCount(count) {
+        self.totalClassificationCount = count
+      }
+    }
+  })
+
+export default UserPersonalization