Add admin mode

- persist the current user in local storage.
- check admin mode with `useAdminMode`.
- add the admin mode toggle to the footer, and the admin mode border to the page.

packages/app-root/src/components/PageFooter.js

@@ -1,13 +1,16 @@
 'use client'
+import AdminCheckbox from '@zooniverse/react-components/AdminCheckbox'
 import ZooFooter from '@zooniverse/react-components/ZooFooter'
 
-import { usePanoptesUser } from '../hooks'
+import { useAdminMode, usePanoptesUser } from '../hooks'
 
 export default function PageFooter() {
-  // we'll need the user in order to detect admin mode.
-  const { data: user } = usePanoptesUser()
+  const { data: user, isLoading } = usePanoptesUser()
+  const { adminMode, toggleAdmin } = useAdminMode(user)
 
   return (
-    <ZooFooter />
+    <ZooFooter
+      adminContainer={(!isLoading && user?.admin) ? <AdminCheckbox onChange={toggleAdmin} checked={adminMode} /> : null}
+    />
   )
 }

packages/app-root/src/components/PageHeader.js

@@ -2,6 +2,7 @@
 import ZooHeader from '@zooniverse/react-components/ZooHeader'
 
 import {
+  useAdminMode,
   usePanoptesUser,
   useUnreadMessages,
   useUnreadNotifications
@@ -11,9 +12,11 @@ export default function PageHeader() {
   const { data: user } = usePanoptesUser()
   const { data: unreadMessages }= useUnreadMessages(user)
   const { data: unreadNotifications }= useUnreadNotifications(user)
+  const { adminMode, toggleAdmin } = useAdminMode(user)
 
   return (
     <ZooHeader
+      isAdmin={adminMode}
       unreadMessages={unreadMessages}
       unreadNotifications={unreadNotifications}
       user={user}

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

@@ -1,3 +1,4 @@
+export { default as useAdminMode } from './useAdminMode.js'
 export { default as usePanoptesUser } from './usePanoptesUser.js'
 export { default as useUnreadMessages } from './useUnreadMessages.js'
 export { default as useUnreadNotifications } from './useUnreadNotifications.js'

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

@@ -0,0 +1,44 @@
+import { useEffect, useState } from 'react'
+
+const isBrowser = typeof window !== 'undefined'
+const localStorage = isBrowser ? window.localStorage : null
+const storedAdminFlag = !!localStorage?.getItem('adminFlag')
+const adminBorderImage = 'repeating-linear-gradient(45deg,#000,#000 25px,#ff0 25px,#ff0 50px) 5'
+
+export default function useAdminMode(user) {
+  const [adminState, setAdminState] = useState(storedAdminFlag)
+  const adminMode = user?.admin && adminState
+
+  useEffect(function onUserChange() {
+    const isAdmin = user?.admin
+    if (isAdmin) {
+      const adminFlag = !!localStorage?.getItem('adminFlag')
+      setAdminState(adminFlag)
+    } else {
+      localStorage?.removeItem('adminFlag')
+    }
+  }, [user?.admin])
+
+  useEffect(function onAdminChange() {
+    if (adminMode) {
+      document.body.style.border = '5px solid'
+      document.body.style.borderImage = adminBorderImage
+    }
+    return () => {
+      document.body.style.border = ''
+      document.body.style.borderImage = ''
+    }
+  }, [adminMode])
+
+  function toggleAdmin() {
+    let newAdminState = !adminState
+    setAdminState(newAdminState)
+    if (newAdminState) {
+      localStorage?.setItem('adminFlag', true)
+    } else {
+      localStorage?.removeItem('adminFlag')
+    }
+  }
+
+  return { adminMode, toggleAdmin }
+}

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

@@ -29,7 +29,13 @@ async function fetchPanoptesUser() {
   return await auth.checkCurrent()
 }
 
-let user
+const isBrowser = typeof window !== 'undefined'
+const localStorage = isBrowser ? window.localStorage : null
+const storedUserJSON = localStorage?.getItem('panoptes-user')
+let user = storedUserJSON && JSON.parse(storedUserJSON)
+if (user === null) {
+  user = undefined
+}
 
 export default function usePanoptesUser() {
   const [error, setError] = useState(null)
@@ -39,19 +45,14 @@ export default function usePanoptesUser() {
     async function checkUserSession() {
       setLoading(true)
       try {
-        const {
-          admin,
-          avatar_src,
-          display_name,
-          id,
-          login,
-        } = await fetchPanoptesUser()
-        user = {
-          admin,
-          avatar_src,
-          display_name,
-          id,
-          login,
+        const panoptesUser = await fetchPanoptesUser()
+        if (panoptesUser) {
+          const { admin, avatar_src, display_name, id, login } = panoptesUser
+          user = { admin, avatar_src, display_name, id, login }
+          localStorage?.setItem('panoptes-user', JSON.stringify(user))
+        } else {
+          user = undefined
+          localStorage?.removeItem('panoptes-user')
         }
       } catch (error) {
         setError(error)