First steps towards admin mode

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

@@ -1,13 +1,17 @@
 '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,45 @@
+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 = ''
+      console.log(document.body.style)
+    }
+  }, [adminMode])
+
+  function toggleAdmin() {
+    let newAdminState = !adminState
+    setAdminState(newAdminState)
+    if (newAdminState) {
+      localStorage?.setItem('adminFlag', true)
+    } else {
+      localStorage?.removeItem('adminFlag')
+    }
+  }
+
+  return { adminMode, toggleAdmin }
+}