Rewrite usePanoptesUser with useSWR

- use `useSWR` to fetch the user object from Panoptes.
- persist the returned data in local storage.
- reset the current Panoptes session when auth changes.

packages/app-root/src/helpers/fetchPanoptesUser.js

@@ -5,7 +5,7 @@ import { auth as authHelpers } from '@zooniverse/panoptes-js'
   Get a Panoptes user from a Panoptes JSON Web Token (JWT), if we have one, or from
   the Panoptes API otherwise.
 */
-export default async function fetchPanoptesUser(storedUser) {
+export default async function fetchPanoptesUser({ user: storedUser }) {
   try {
     const jwt = await auth.checkBearerToken()
     /*

packages/app-root/src/hooks/usePanoptesUser.js

@@ -1,5 +1,6 @@
 import auth from 'panoptes-client/lib/auth'
-import { useEffect, useState } from 'react'
+import { useEffect } from 'react'
+import useSWR from 'swr'
 
 import { fetchPanoptesUser } from '../helpers'
 
@@ -11,46 +12,47 @@ if (isBrowser) {
 
 const localStorage = isBrowser ? window.localStorage : null
 const storedUserJSON = localStorage?.getItem('panoptes-user')
-let user = storedUserJSON && JSON.parse(storedUserJSON)
+let storedUser = storedUserJSON && JSON.parse(storedUserJSON)
 /*
   Null users crash the ZooHeader component.
   Set them to undefined for now.
 */
-if (user === null) {
-  user = undefined
+if (storedUser === null) {
+  storedUser = undefined
 }
 
 export default function usePanoptesUser() {
-  const [error, setError] = useState(null)
-  const [loading, setLoading] = useState(true)
-
-  useEffect(function () {
-    async function checkUserSession() {
-      setLoading(true)
-      try {
-        const panoptesUser = await fetchPanoptesUser(user)
-        if (panoptesUser) {
-          localStorage?.setItem('panoptes-user', JSON.stringify(panoptesUser))
-          user = panoptesUser
-        } else {
-          user = undefined
-          localStorage?.removeItem('panoptes-user')
-        }
-      } catch (error) {
-        setError(error)
-      }
-      setLoading(false)
+  const key = {
+    user: storedUser,
+    endpoint: '/me'
+  }
+
+  /*
+   `useSWR` here will always return the same stale user object.
+    See https://github.com/zooniverse/panoptes-javascript-client/issues/207
+  */
+  const { data, error, isLoading } = useSWR(key, fetchPanoptesUser)
+  if (data) {
+    storedUser = data
+  }
+
+  useEffect(function subscribeToAuthChanges() {
+    auth.listen('change', auth.checkCurrent)
+
+    return function () {
+      auth.stopListening('change', auth.checkCurrent)
     }
+  }, [])
 
-    if (isBrowser) {
-      checkUserSession()
+  useEffect(function persistUserInStorage() {
+    if (data) {
+      localStorage?.setItem('panoptes-user', JSON.stringify(data))
     }
-    auth.listen('change', checkUserSession)
 
-    return function () {
-      auth.stopListening('change', checkUserSession)
+    return () => {
+      localStorage?.removeItem('panoptes-user')
     }
-  }, [])
+  }, [data])
 
-  return { data: user, error, isLoading: loading }
+  return { data: storedUser, error, isLoading }
 }