diff --git a/packages/app-project/src/screens/ClassifyPage/components/ClassifierWrapper/ClassifierWrapper.js b/packages/app-project/src/screens/ClassifyPage/components/ClassifierWrapper/ClassifierWrapper.js index 9a3cebe03f..b1c7e4cb07 100644 --- a/packages/app-project/src/screens/ClassifyPage/components/ClassifierWrapper/ClassifierWrapper.js +++ b/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. diff --git a/packages/app-project/src/screens/ClassifyPage/components/YourProjectStats/useYourProjectStats.js b/packages/app-project/src/screens/ClassifyPage/components/YourProjectStats/useYourProjectStats.js index bb01533c18..94060a4a3e 100644 --- a/packages/app-project/src/screens/ClassifyPage/components/YourProjectStats/useYourProjectStats.js +++ b/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 }