refactor(app-project): optimistic updates for YourProjectStats

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

@@ -11,8 +11,7 @@ import { useAdminMode } from '@hooks'
 import addQueryParams from '@helpers/addQueryParams'
 import logToSentry from '@helpers/logger/logToSentry.js'
 import ErrorMessage from './components/ErrorMessage'
-import useYourProjectStats from '../YourProjectStats/useYourProjectStats.js'
-import incrementStats from '../YourProjectStats/helpers/incrementStats.js'
+import { updateYourStats } from '../YourProjectStats/useYourProjectStats.js'
 
 function onError(error, errorInfo = {}) {
   logToSentry(error, errorInfo)
@@ -61,18 +60,17 @@ export default function ClassifierWrapper({
     Add the recently classified subject to the signed-in user's Recents.
   */
   const projectID = project?.id
-  const { mutate } = useYourProjectStats({ projectID, userID })
 
   const addRecents = recents?.add
   const onCompleteClassification = useCallback((classification, subject) => {
     personalization.incrementSessionCount()
-    incrementStats(mutate, projectID, userID)
+    updateYourStats(projectID, userID)
     addRecents({
       favorite: subject.favorite,
       subjectId: subject.id,
       locations: subject.locations
     })
-  }, [addRecents, mutate, projectID, userID])
+  }, [addRecents, projectID, userID])
 
   /*
     If the page URL contains a subject ID, update that ID when the classification subject changes.

packages/app-project/src/screens/ClassifyPage/components/YourProjectStats/useYourProjectStats.js

@@ -4,6 +4,7 @@ import logToSentry from '@helpers/logger/logToSentry.js'
 
 import { usePanoptesAuthToken } from '@hooks'
 import { getTodayDateString, getNumDaysAgoDateString, getQueryPeriod } from './helpers/dateRangeHelpers.js'
+import incrementStats from './helpers/incrementStats.js'
 
 const SWROptions = {
   revalidateIfStale: true,
@@ -24,6 +25,8 @@ function statsHost(env) {
 
 const endpoint = '/classifications/users'
 
+let mutate
+
 /* user.created_at is needed for allTimeQuery, and not always available on the logged in user object */
 async function fetchUserCreatedAt({ token, userID }) {
   const authorization = `Bearer ${token}`
@@ -96,10 +99,22 @@ async function fetchStats({ endpoint, projectID, userID, token }) {
   return null
 }
 
+/**
+ * Optimistically increment project stats, without revalidating the SWR cache.
+ * @param {string} projectID 
+ * @param {string} userID 
+ * @returns the mutated stats data
+ */
+export function updateYourStats(projectID, userID) {
+  return incrementStats(mutate, projectID, userID)
+}
+
 export default function useYourProjectStats({ projectID, userID }) {
   const token = usePanoptesAuthToken()
 
   // only fetch stats when a userID is available. Don't fetch if no user signed in.
   const key = token && userID ? { endpoint, projectID, userID, token } : null
-  return useSWR(key, fetchStats, SWROptions)
+  const fetchedStats = useSWR(key, fetchStats, SWROptions)
+  mutate = fetchedStats.mutate
+  return fetchedStats
 }