From aeee0f3471f392f8d7ad9cb7a3577da11a35f65a Mon Sep 17 00:00:00 2001
From: Jim O'Donnell <jim@zooniverse.org>
Date: Fri, 13 Oct 2023 16:48:38 +0100
Subject: [PATCH] First steps towards admin mode

---
 .../app-root/src/components/PageFooter.js     | 10 +++--
 .../app-root/src/components/PageHeader.js     |  3 ++
 packages/app-root/src/hooks/index.js          |  1 +
 packages/app-root/src/hooks/useAdminMode.js   | 45 +++++++++++++++++++
 4 files changed, 56 insertions(+), 3 deletions(-)
 create mode 100644 packages/app-root/src/hooks/useAdminMode.js

diff --git a/packages/app-root/src/components/PageFooter.js b/packages/app-root/src/components/PageFooter.js
index 84982f21a32..5f82892b747 100644
--- a/packages/app-root/src/components/PageFooter.js
+++ b/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}
+    />
   )
 }
\ No newline at end of file
diff --git a/packages/app-root/src/components/PageHeader.js b/packages/app-root/src/components/PageHeader.js
index 2ffc97a7d4a..7fbf01ffbf8 100644
--- a/packages/app-root/src/components/PageHeader.js
+++ b/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}
diff --git a/packages/app-root/src/hooks/index.js b/packages/app-root/src/hooks/index.js
index 16926d8a139..e6419b719c3 100644
--- a/packages/app-root/src/hooks/index.js
+++ b/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'
diff --git a/packages/app-root/src/hooks/useAdminMode.js b/packages/app-root/src/hooks/useAdminMode.js
new file mode 100644
index 00000000000..0e314f3db42
--- /dev/null
+++ b/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 }
+}
\ No newline at end of file