Classifier: add a loading state

- Add a `loading` state to the classifier container. Defer rendering the `Classifier` until after the container is mounted and the store has initialised.
- Fix a small auth bug in the UPP store. Get an access token after checking the current user session, before fetching user preferences.

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/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