Classifier: add a loading state

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, { useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 import '../../translations/i18n'
 import {
   env,
@@ -62,24 +62,19 @@ export default function ClassifierContainer({
   workflowID
 }) {
 
+  const [loaded, setLoaded] = useState(false)
   const storeEnvironment = { authClient, client }
 
   const workflowSnapshot = useWorkflowSnapshot(workflowID)
 
   const classifierStore = useHydratedStore(storeEnvironment, cachePanoptesData, `fem-classifier-${project.id}`)
-  const loaded = !!classifierStore
 
   useEffect(function onMount() {
-    console.log('resetting stale user data')
-    classifierStore?.userProjectPreferences.reset()
-  }, [])
-
-  useEffect(function onLoad() {
     /*
     If the project uses session storage, we need to do some
     processing of the store after it loads.
     */
-    if (cachePanoptesData && loaded) {
+    if (cachePanoptesData) {
       const { subjects, workflows } = classifierStore
       if (!workflows.active?.prioritized) {
         /*
@@ -104,16 +99,17 @@ export default function ClassifierContainer({
     Otherwise, hydration will overwrite the callbacks with
     their defaults.
     */
-    if (loaded) {
-      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)
-    }
-  }, [cachePanoptesData, loaded])
+    const { classifications, subjects, userProjectPreferences } = classifierStore
+    console.log('resetting stale user data')
+    userProjectPreferences.reset()
+    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) {

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

@@ -20,22 +20,21 @@ describe('Model > Tutorial', function () {
       store.tutorials.setTutorials([tutorialSnapshot])
     })
 
-    it('should be false when the store first loads', 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
-      expect(tutorial.hasNotBeenSeen).to.be.false()
       await when(() => store.userProjectPreferences.loadingState === asyncStates.success)
       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
-      expect(tutorial.hasNotBeenSeen).to.be.false()
       await when(() => store.userProjectPreferences.loadingState === asyncStates.success)
       const upp = UPPFactory.build()
       store.userProjectPreferences.setUPP(upp)
@@ -45,7 +44,6 @@ describe('Model > Tutorial', function () {
 
     it('should be false after a user has seen the tutorial', async function () {
       let tutorial = store.tutorials.active
-      expect(tutorial.hasNotBeenSeen).to.be.false()
       await when(() => store.userProjectPreferences.loadingState === asyncStates.success)
       const upp = UPPFactory.build()
       store.userProjectPreferences.setUPP(upp)

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

@@ -56,11 +56,10 @@ const UserProjectPreferencesStore = types
       const { authClient } = getRoot(self)
 
       try {
-        const authorization = yield getBearerToken(authClient)
         const user = yield authClient.checkCurrent()
 
-        if (authorization && user) {
-          self.fetchUPP(authorization, user)
+        if (user) {
+          self.fetchUPP(user)
         } else {
           self.reset()
           self.loadingState = asyncStates.success
@@ -71,14 +70,16 @@ const UserProjectPreferencesStore = types
       }
     }
 
-    function * fetchUPP (authorization, user) {
+    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

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

@@ -113,7 +113,6 @@ describe('Model > UserProjectPreferencesStore', function () {
     it('should check for a user upon initialization when there is a project', async function () {
       rootStore = setupStores(clientStub, authClientStubWithoutUser)
       await rootStore.projects.setActive(project.id)
-      expect(authClientStubWithoutUser.checkBearerToken).to.have.been.called()
       expect(authClientStubWithoutUser.checkCurrent).to.have.been.called()
     })