Merge pull request #4341 from omnivore-app/feat/web-maintenance-banner

Add a maintenance mode banner

packages/web/components/elements/MaintenanceBanner.tsx

@@ -0,0 +1,42 @@
+import { usePersistedState } from '../../lib/hooks/usePersistedState'
+import { CloseButton } from './CloseButton'
+import { HStack, SpanBox } from './LayoutPrimitives'
+
+export const MaintenanceBanner = () => {
+  const [
+    showMaintenanceMode,
+    setShowMaintenanceMode,
+    isLoadingShowMaintenanceMode,
+  ] = usePersistedState({
+    key: 'show-maintenance-mode',
+    isSessionStorage: false,
+    initialValue: true,
+  })
+  return (
+    <>
+      {!isLoadingShowMaintenanceMode && showMaintenanceMode && (
+        <HStack
+          css={{
+            p: '5px',
+            width: '100%',
+            position: 'fixed',
+            bg: '#FF5733',
+            color: '#FFFFFF',
+            zIndex: '100',
+          }}
+          alignment="center"
+          distribution="center"
+        >
+          Omnivore will be undergoing maintenance for 30 minutes at 04:00 UTC,
+          during that time the website and APIs will be unavailable.
+          <SpanBox css={{ width: '50px' }} />
+          <CloseButton
+            close={() => {
+              setShowMaintenanceMode(false)
+            }}
+          />
+        </HStack>
+      )}
+    </>
+  )
+}

packages/web/components/nav-containers/HomeContainer.tsx

@@ -181,8 +181,9 @@ type NavigationContextType = {
   dispatch: React.Dispatch<Action>
 }
 
-const NavigationContext =
-  createContext<NavigationContextType | undefined>(undefined)
+const NavigationContext = createContext<NavigationContextType | undefined>(
+  undefined
+)
 
 export const useNavigation = (): NavigationContextType => {
   const context = useContext(NavigationContext)

packages/web/components/templates/AuthLayout.tsx

@@ -1,4 +1,5 @@
 import { Box, VStack, HStack } from '../elements/LayoutPrimitives'
+import { MaintenanceBanner } from '../elements/MaintenanceBanner'
 import { OmnivoreNameLogo } from '../elements/images/OmnivoreNameLogo'
 import { theme } from '../tokens/stitches.config'
 import { GoogleReCaptchaProvider } from '@google-recaptcha/react'
@@ -11,6 +12,7 @@ type ProfileLayoutProps = {
 export function AuthLayout(props: ProfileLayoutProps): JSX.Element {
   return (
     <>
+      <MaintenanceBanner />
       <VStack
         alignment="center"
         distribution="center"

packages/web/components/templates/LoginLayout.tsx

@@ -10,10 +10,12 @@ import type { LoginFormProps } from './LoginForm'
 import { OmnivoreNameLogo } from '../elements/images/OmnivoreNameLogo'
 
 import featureFullWidthImage from '../../public/static/images/login/login-feature-image-full.png'
+import { MaintenanceBanner } from '../elements/MaintenanceBanner'
 
 export function LoginLayout(props: LoginFormProps): JSX.Element {
   return (
     <>
+      <MaintenanceBanner />
       <MediumBreakpointBox
         smallerLayoutNode={<MobileLoginLayout {...props} />}
         largerLayoutNode={<MediumLoginLayout {...props} />}

packages/web/components/templates/NavigationLayout.tsx

@@ -1,7 +1,6 @@
 import { PageMetaData, PageMetaDataProps } from '../patterns/PageMetaData'
 import { HStack, SpanBox, VStack } from '../elements/LayoutPrimitives'
 import { ReactNode, useEffect, useState, useCallback } from 'react'
-import { useGetViewerQuery } from '../../lib/networking/queries/useGetViewerQuery'
 import { navigationCommands } from '../../lib/keyboardShortcuts/navigationShortcuts'
 import { useKeyboardShortcuts } from '../../lib/keyboardShortcuts/useKeyboardShortcuts'
 import { useRouter } from 'next/router'
@@ -19,10 +18,12 @@ import { List } from '@phosphor-icons/react'
 import { LIBRARY_LEFT_MENU_WIDTH } from './navMenu/LibraryLegacyMenu'
 import { AddLinkModal } from './AddLinkModal'
 import useWindowDimensions from '../../lib/hooks/useGetWindowDimensions'
-import { useAddItem } from '../../lib/networking/library_items/useLibraryItems'
 import { useHandleAddUrl } from '../../lib/hooks/useHandleAddUrl'
 import { useGetViewer } from '../../lib/networking/viewer/useGetViewer'
 import { useQueryClient } from '@tanstack/react-query'
+import { usePersistedState } from '../../lib/hooks/usePersistedState'
+import { CloseButton } from '../elements/CloseButton'
+import { MaintenanceBanner } from '../elements/MaintenanceBanner'
 
 export type NavigationSection =
   | 'home'
@@ -109,15 +110,6 @@ export function NavigationLayout(props: NavigationLayoutProps): JSX.Element {
   }, [showLogout])
 
   const { logout } = useLogout()
-  // if (isLoading) {
-  //   return (
-  //     <HStack
-  //       css={{ width: '100vw', height: '100vh' }}
-  //       distribution="start"
-  //       alignment="start"
-  //     ></HStack>
-  //   )
-  // }
 
   return (
     <HStack
@@ -126,6 +118,7 @@ export function NavigationLayout(props: NavigationLayoutProps): JSX.Element {
       alignment="start"
     >
       <PageMetaData path={props.section} title={props.title} />
+      <MaintenanceBanner />
       <Header
         menuOpen={props.showNavigationMenu}
         toggleMenu={() => {