Classifier: refactor UPP data-fetching with hooks

Remove data-fetching from the classifier's UPP store and move it into a `useProjectPreferences` hook instead. Preferences should be fetched when the logged-in user changes. UPP updates are still handled by the store, so the store is updated whenever fresh preferences are received from Panoptes.

packages/lib-classifier/src/components/Classifier/Classifier.js

@@ -1,10 +1,11 @@
+import asyncStates from '@zooniverse/async-states'
 import { applySnapshot, getSnapshot } from 'mobx-state-tree'
 import PropTypes from 'prop-types'
 import React, { useEffect } from 'react'
 import '../../translations/i18n'
 import i18n from 'i18next'
 
-import { usePanoptesUser, useProjectRoles } from '@hooks'
+import { usePanoptesUser, useProjectPreferences, useProjectRoles } from '@hooks'
 import Layout from './components/Layout'
 import ModalTutorial from './components/ModalTutorial'
 
@@ -24,6 +25,7 @@ export default function Classifier({
   const user = usePanoptesUser()
   const projectRoles = useProjectRoles(project?.id, user?.id)
   let workflowVersionChanged = false
+
   if (workflowSnapshot) {
     const storedWorkflow = classifierStore.workflows.resources.get(workflowSnapshot.id)
     workflowVersionChanged = workflowSnapshot.version !== storedWorkflow?.version
@@ -35,6 +37,25 @@ export default function Classifier({
     workflowSnapshot = storedWorkflow ? { ...getSnapshot(storedWorkflow), ...workflowSnapshot } : workflowSnapshot
   }
 
+  const upp = useProjectPreferences(project?.id, user?.id)
+
+  const uppLoading = upp === undefined
+  const { userProjectPreferences } = classifierStore
+  // are we replacing a stored UPP?
+  if (uppLoading && userProjectPreferences.loadingState === asyncStates.success) {
+    console.log('resetting stale user data')
+    userProjectPreferences.reset()
+  }
+  // store a new UPP
+  if (userProjectPreferences.loadingState !== asyncStates.success) {
+    if (upp === null) {
+      userProjectPreferences.clear()
+    }
+    if (upp?.id) {
+      userProjectPreferences.setUPP(upp)
+    }
+  }
+
   const canPreviewWorkflows = projectRoles.indexOf('owner') > -1 ||
     projectRoles.indexOf('collaborator') > -1 ||
     projectRoles.indexOf('tester') > -1

packages/lib-classifier/src/components/Classifier/ClassifierContainer.js

@@ -2,7 +2,7 @@ import { GraphQLClient } from 'graphql-request'
 import { Paragraph } from 'grommet'
 import { Provider } from 'mobx-react'
 import PropTypes from 'prop-types'
-import React, { StrictMode, useEffect, useState } from 'react'
+import React, { StrictMode, useEffect } from 'react'
 import '../../translations/i18n'
 import {
   env,
@@ -61,7 +61,6 @@ export default function ClassifierContainer({
   subjectSetID,
   workflowID
 }) {
-  const [loaded, setLoaded] = useState(false)
   const storeEnvironment = { authClient, client }
 
   const workflowSnapshot = useWorkflowSnapshot(workflowID)
@@ -82,26 +81,17 @@ export default function ClassifierContainer({
     Otherwise, hydration will overwrite the callbacks with
     their defaults.
     */
-    const { classifications, subjects, userProjectPreferences } = classifierStore
-    console.log('resetting stale user data')
-    userProjectPreferences.reset()
+    const { classifications, subjects } = classifierStore
     console.log('setting classifier event callbacks')
     classifications.setOnComplete(onCompleteClassification)
     subjects.setOnReset(onSubjectReset)
     classifierStore.setOnAddToCollection(onAddToCollection)
     classifierStore.setOnSubjectChange(onSubjectChange)
     classifierStore.setOnToggleFavourite(onToggleFavourite)
-    setLoaded(true)
   }, [])
 
-  useEffect(function onAuthChange() {
-    if (loaded) {
-      classifierStore.userProjectPreferences.checkForUser()
-    }
-  }, [loaded, authClient])
-
   try {
-    if (loaded) {
+    if (classifierStore) {
 
       return (
         <StrictMode>

packages/lib-classifier/src/components/Classifier/components/MetaTools/MetaTools.spec.js

@@ -3,7 +3,6 @@ import { render, screen } from '@testing-library/react'
 import asyncStates from '@zooniverse/async-states'
 import zooTheme from '@zooniverse/grommet-theme'
 import { Grommet } from 'grommet'
-import { when } from 'mobx'
 import { Provider } from 'mobx-react'
 
 import { DrawingTaskFactory, UPPFactory, WorkflowFactory } from '@test/factories'
@@ -125,7 +124,6 @@ describe('Components > MetaTools', function () {
 
     before(async function () {
       const store = mockStore()
-      await when(() => store.userProjectPreferences.loadingState === asyncStates.success)
       const upp = UPPFactory.build()
       store.userProjectPreferences.setUPP(upp)
       store.userProjectPreferences.setHeaders({
@@ -176,7 +174,6 @@ describe('Components > MetaTools', function () {
 
     before(async function () {
       const store = mockStore()
-      await when(() => store.userProjectPreferences.loadingState === asyncStates.success)
       const upp = UPPFactory.build()
       store.userProjectPreferences.setUPP(upp)
       store.userProjectPreferences.setHeaders({

packages/lib-classifier/src/components/Classifier/components/ModalTutorial/ModalTutorial.spec.js

@@ -3,7 +3,6 @@ import { Grommet } from 'grommet'
 import React from 'react'
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import { when } from 'mobx'
 import { Provider } from 'mobx-react'
 import sinon from 'sinon'
 
@@ -43,11 +42,10 @@ describe('ModalTutorial', function () {
     expect(tutorialTitle).to.be.null()
   })
 
-  it('should not show the tutorial if it has been seen before', async function () {
+  it('should not show the tutorial if it has been seen before', function () {
     const store = mockStore()
     const tutorialSnapshot = TutorialFactory.build({ steps })
     store.tutorials.setTutorials([tutorialSnapshot])
-    await when(() => store.userProjectPreferences.loadingState === asyncStates.success)
     const upp = UPPFactory.build()
     store.userProjectPreferences.setUPP(upp)
     store.userProjectPreferences.setHeaders({
@@ -66,11 +64,10 @@ describe('ModalTutorial', function () {
     expect(tutorialTitle).to.be.null()
   })
 
-  it('should show the tutorial if it hasn\'t been seen before', async function () {
+  it('should show the tutorial if it hasn\'t been seen before', function () {
     const store = mockStore()
     const tutorialSnapshot = TutorialFactory.build({ steps })
     store.tutorials.setTutorials([tutorialSnapshot])
-    await when(() => store.userProjectPreferences.loadingState === asyncStates.success)
     const upp = UPPFactory.build()
     store.userProjectPreferences.setUPP(upp)
     store.userProjectPreferences.setHeaders({
@@ -99,7 +96,6 @@ describe('ModalTutorial', function () {
       user = userEvent.setup({ delay: null })
       const tutorialSnapshot = TutorialFactory.build({ steps })
       store.tutorials.setTutorials([tutorialSnapshot])
-      await when(() => store.userProjectPreferences.loadingState === asyncStates.success)
       const upp = UPPFactory.build()
       store.userProjectPreferences.setUPP(upp)
       store.userProjectPreferences.setHeaders({

packages/lib-classifier/src/hooks/Readme.md

@@ -41,6 +41,13 @@ Get the logged-in user, or null if no one is logged in.
   const user = usePanoptesUser()
 ```
 
+## useProjectPreferences
+
+Get project preferences for a user and project, or null if there's no one logged in.
+```js
+  const upp = useProjectPreferences(project.id, user.id)
+```
+
 ## useProjectRoles
 
 Get the logged-in user's project roles, as an array of strings, or an empty array if no one is logged in.

packages/lib-classifier/src/hooks/index.js

@@ -3,6 +3,7 @@ export { default as useHydratedStore } from './useHydratedStore'
 export { default as usePanoptesAuth } from './usePanoptesAuth'
 export { default as usePanoptesTranslations } from './usePanoptesTranslations'
 export { default as usePanoptesUser } from './usePanoptesUser'
+export { default as useProjectPreferences } from './useProjectPreferences'
 export { default as useProjectRoles } from './useProjectRoles'
 export { default as useStores } from './useStores'
 export { default as useWorkflowSnapshot } from './useWorkflowSnapshot'

packages/lib-classifier/src/hooks/useProjectPreferences.js

@@ -0,0 +1,53 @@
+import useSWR from 'swr'
+import { panoptes } from '@zooniverse/panoptes-js'
+
+import { usePanoptesAuth } from './'
+
+const SWRoptions = {
+  revalidateIfStale: true,
+  revalidateOnMount: true,
+  revalidateOnFocus: true,
+  revalidateOnReconnect: true,
+  refreshInterval: 0
+}
+
+async function createProjectPreferences({ endpoint, project_id, authorization }) {
+  const data = {
+    links: { project: project_id },
+    preferences: {}
+  }
+  const { body } = await panoptes.post(endpoint, { project_preferences: data }, { authorization })
+  const [projectPreferences] = body.project_preferences
+  return projectPreferences
+}
+
+async function fetchProjectPreferences({ endpoint, project_id, user_id, authorization }) {
+  const { body } = await panoptes.get(endpoint, { project_id, user_id }, { authorization })
+  const [projectPreferences] = body.project_preferences
+  return projectPreferences
+}
+
+async function fetchOrCreateProjectPreferences({ endpoint, project_id, user_id, authorization }) {
+  // auth is undefined while loading
+  if (authorization === undefined) {
+    return undefined
+  }
+  // logged-in
+  if (authorization) {
+    const projectPreferences = await fetchProjectPreferences({ endpoint, project_id, user_id, authorization })
+    if (projectPreferences) {
+      return projectPreferences
+    } else {
+      return await createProjectPreferences({ endpoint, project_id, authorization })
+    }
+  }
+  // not logged-in
+  return null
+}
+
+export default function useProjectPreferences(project_id, user_id) {
+  const authorization = usePanoptesAuth(user_id)
+  const endpoint = '/project_preferences'
+  const { data } = useSWR({ endpoint, project_id, user_id, authorization }, fetchOrCreateProjectPreferences, SWRoptions)
+  return data
+}

packages/lib-classifier/src/hooks/useProjectRoles.js

@@ -11,9 +11,9 @@ const SWRoptions = {
   refreshInterval: 0
 }
 
-async function fetchProjectRoles({ project_id, user_id, authorization }) {
+async function fetchProjectRoles({ endpoint, project_id, user_id, authorization }) {
   if (authorization) {
-    const { body } = await panoptes.get(`/project_roles`, { project_id, user_id }, { authorization })
+    const { body } = await panoptes.get(endpoint, { project_id, user_id }, { authorization })
     const [projectRoles] = body.project_roles
     return projectRoles.roles
   }
@@ -22,6 +22,7 @@ async function fetchProjectRoles({ project_id, user_id, authorization }) {
 
 export default function useProjectRoles(project_id, user_id) {
   const authorization = usePanoptesAuth(user_id)
-  const { data } = useSWR({ project_id, user_id, authorization }, fetchProjectRoles, SWRoptions)
+  const endpoint = '/project_roles'
+  const { data } = useSWR({ endpoint, project_id, user_id, authorization }, fetchProjectRoles, SWRoptions)
   return data ?? []
 }

packages/lib-classifier/src/store/TutorialStore/Tutorial/Tutorial.spec.js

@@ -21,21 +21,19 @@ describe('Model > Tutorial', function () {
     })
 
     it('should be false while UPP loads', function () {
-      store.userProjectPreferences.fetchUPP({ id: 'test' })
       const tutorial = store.tutorials.active
       expect(tutorial.hasNotBeenSeen).to.be.false()
     })
 
     it('should be true for anonymous users', async function () {
       let tutorial = store.tutorials.active
-      await when(() => store.userProjectPreferences.loadingState === asyncStates.success)
+      store.userProjectPreferences.clear()
       tutorial = store.tutorials.active
       expect(tutorial.hasNotBeenSeen).to.be.true()
     })
 
     it('should be true after the user has loaded', async function () {
       let tutorial = store.tutorials.active
-      await when(() => store.userProjectPreferences.loadingState === asyncStates.success)
       const upp = UPPFactory.build()
       store.userProjectPreferences.setUPP(upp)
       tutorial = store.tutorials.active
@@ -44,7 +42,6 @@ describe('Model > Tutorial', function () {
 
     it('should be false after a user has seen the tutorial', async function () {
       let tutorial = store.tutorials.active
-      await when(() => store.userProjectPreferences.loadingState === asyncStates.success)
       const upp = UPPFactory.build()
       store.userProjectPreferences.setUPP(upp)
       store.userProjectPreferences.setHeaders({
@@ -63,7 +60,6 @@ describe('Model > Tutorial', function () {
       store = mockStore()
       const tutorialSnapshot = TutorialFactory.build()
       store.tutorials.setTutorials([tutorialSnapshot])
-      await when(() => store.userProjectPreferences.loadingState === asyncStates.success)
       const upp = UPPFactory.build()
       store.userProjectPreferences.setUPP(upp)
       store.userProjectPreferences.setHeaders({

packages/lib-classifier/src/store/UserProjectPreferencesStore/UserProjectPreferencesStore.js

@@ -16,85 +16,9 @@ const UserProjectPreferencesStore = types
 
   // TODO: move some of these req into panoptes.js helpers
   .actions(self => {
-    function afterAttach () {
-      createProjectObserver()
-    }
-
-    function createProjectObserver () {
-      const projectDisposer = autorun(() => {
-        const validProjectReference = isValidReference(() => getRoot(self).projects.active)
-
-        if (validProjectReference) {
-          self.reset()
-          self.checkForUser()
-        }
-      }, { name: 'UPPStore Project Observer autorun' })
-      addDisposer(self, projectDisposer)
-    }
-
-    function * createUPP (authorization) {
-      const { type } = self
-      const client = getRoot(self).client.panoptes
-      const project = getRoot(self).projects.active
-      const data = {
-        links: { project: project.id },
-        preferences: {}
-      }
-      self.loadingState = asyncStates.posting
-      try {
-        const response = yield client.post(`/${type}`, { [type]: data }, { authorization })
-        self.headers = response.headers
-        return response.body[type][0]
-      } catch (error) {
-        console.error(error)
-        self.loadingState = asyncStates.error
-        return null
-      }
-    }
-
-    function * checkForUser () {
-      const { authClient } = getRoot(self)
-
-      try {
-        const user = yield authClient.checkCurrent()
-
-        if (user) {
-          self.fetchUPP(user)
-        } else {
-          self.reset()
-          self.loadingState = asyncStates.success
-        }
-      } catch (error) {
-        console.error(error)
-        self.loadingState = asyncStates.error
-      }
-    }
-
-    function * fetchUPP (user) {
-      let resource
-      const { type } = self
-      const { authClient } = getRoot(self)
-      const client = getRoot(self).client.panoptes
-      const project = getRoot(self).projects.active
-
-      self.loadingState = asyncStates.loading
-      try {
-        const authorization = yield getBearerToken(authClient)
-        const response = yield client.get(`/${type}`, { project_id: project.id, user_id: user.id }, { authorization })
-        if (response.body[type][0]) {
-          // We don't store the headers from this get response because it's by query params
-          // and not for a specific resource, so the etag won't be usable for the later PUT request
-          resource = response.body[type][0]
-        } else {
-          resource = yield self.createUPP(authorization)
-        }
-
-        self.loadingState = asyncStates.success
-        if (resource) self.setUPP(resource)
-      } catch (error) {
-        console.error(error)
-        self.loadingState = asyncStates.error
-      }
+    function clear() {
+      self.resources.clear()
+      self.loadingState = asyncStates.success
     }
 
     function * fetchUPPById (id = '') {
@@ -181,13 +105,11 @@ const UserProjectPreferencesStore = types
     function setUPP (userProjectPreferences) {
       self.setResources([userProjectPreferences])
       self.setActive(userProjectPreferences.id)
+      self.loadingState = asyncStates.success
     }
 
     return {
-      afterAttach,
-      checkForUser: flow(checkForUser),
-      createUPP: flow(createUPP),
-      fetchUPP: flow(fetchUPP),
+      clear,
       fetchUPPById: flow(fetchUPPById),
       putUPP: flow(putUPP),
       setHeaders,