From c1f46e70b2579536c7f8c0dfe70cdcce30a65372 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Wed, 28 Aug 2024 12:08:29 +0800 Subject: [PATCH] Add a maintenance mode banner --- .../components/elements/MaintenanceBanner.tsx | 42 ++++++++++++ .../nav-containers/HomeContainer.tsx | 5 +- .../web/components/templates/AuthLayout.tsx | 2 + .../web/components/templates/LoginLayout.tsx | 2 + .../components/templates/NavigationLayout.tsx | 15 ++--- yarn.lock | 64 +++++++++++-------- 6 files changed, 89 insertions(+), 41 deletions(-) create mode 100644 packages/web/components/elements/MaintenanceBanner.tsx diff --git a/packages/web/components/elements/MaintenanceBanner.tsx b/packages/web/components/elements/MaintenanceBanner.tsx new file mode 100644 index 000000000..ba5134284 --- /dev/null +++ b/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 && ( + + Omnivore will be undergoing maintenance for 30 minutes at 04:00 UTC, + during that time the website and APIs will be unavailable. + + { + setShowMaintenanceMode(false) + }} + /> + + )} + + ) +} diff --git a/packages/web/components/nav-containers/HomeContainer.tsx b/packages/web/components/nav-containers/HomeContainer.tsx index c5cbbabc5..66bbf788f 100644 --- a/packages/web/components/nav-containers/HomeContainer.tsx +++ b/packages/web/components/nav-containers/HomeContainer.tsx @@ -181,8 +181,9 @@ type NavigationContextType = { dispatch: React.Dispatch } -const NavigationContext = - createContext(undefined) +const NavigationContext = createContext( + undefined +) export const useNavigation = (): NavigationContextType => { const context = useContext(NavigationContext) diff --git a/packages/web/components/templates/AuthLayout.tsx b/packages/web/components/templates/AuthLayout.tsx index bc9388894..f12553320 100644 --- a/packages/web/components/templates/AuthLayout.tsx +++ b/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 ( <> + + } largerLayoutNode={} diff --git a/packages/web/components/templates/NavigationLayout.tsx b/packages/web/components/templates/NavigationLayout.tsx index 453e9df51..90e105f64 100644 --- a/packages/web/components/templates/NavigationLayout.tsx +++ b/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 ( - // - // ) - // } return ( +
{ diff --git a/yarn.lock b/yarn.lock index c8b423ed5..3d1884b88 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5073,6 +5073,15 @@ dependencies: "@babel/runtime" "^7.13.10" +"@radix-ui/react-announce@^0.2.0": + version "0.2.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-announce/-/react-announce-0.2.0.tgz#dcacff8aa61deda7c7ba6b7227f645036151086c" + integrity sha512-Ccn4nKF2nLeHZ2XAay154qy9/oXxLdC3vhzGhsQpF4gkSG8wd5dHgVhoBtKUEWf2QYro9oLqP6B9DkY09MRBew== + dependencies: + "@radix-ui/react-compose-refs" "1.1.0" + "@radix-ui/react-primitive" "2.0.0" + "@radix-ui/react-use-layout-effect" "1.1.0" + "@radix-ui/react-arrow@1.0.3": version "1.0.3" resolved "https://registry.yarnpkg.com/@radix-ui/react-arrow/-/react-arrow-1.0.3.tgz#c24f7968996ed934d57fe6cde5d6ec7266e1d25d" @@ -5140,6 +5149,11 @@ dependencies: "@babel/runtime" "^7.13.10" +"@radix-ui/react-compose-refs@1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz#656432461fc8283d7b591dcf0d79152fae9ecc74" + integrity sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw== + "@radix-ui/react-context@0.1.1": version "0.1.1" resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-0.1.1.tgz#06996829ea124d9a1bc1dbe3e51f33588fab0875" @@ -5413,6 +5427,13 @@ "@babel/runtime" "^7.13.10" "@radix-ui/react-slot" "1.0.2" +"@radix-ui/react-primitive@2.0.0": + version "2.0.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz#fe05715faa9203a223ccc0be15dc44b9f9822884" + integrity sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw== + dependencies: + "@radix-ui/react-slot" "1.1.0" + "@radix-ui/react-progress@^1.0.1": version "1.0.1" resolved "https://registry.yarnpkg.com/@radix-ui/react-progress/-/react-progress-1.0.1.tgz#49ec2f729a67ba3b580a90356fc1d871466a4212" @@ -5488,6 +5509,13 @@ "@babel/runtime" "^7.13.10" "@radix-ui/react-compose-refs" "1.0.1" +"@radix-ui/react-slot@1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.1.0.tgz#7c5e48c36ef5496d97b08f1357bb26ed7c714b84" + integrity sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw== + dependencies: + "@radix-ui/react-compose-refs" "1.1.0" + "@radix-ui/react-switch@^1.0.1": version "1.0.2" resolved "https://registry.yarnpkg.com/@radix-ui/react-switch/-/react-switch-1.0.2.tgz#e3d1b9fe18b6b1173aadc8b8e6efdc96a28a70f8" @@ -5576,6 +5604,11 @@ dependencies: "@babel/runtime" "^7.13.10" +"@radix-ui/react-use-layout-effect@1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.0.tgz#3c2c8ce04827b26a39e442ff4888d9212268bd27" + integrity sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w== + "@radix-ui/react-use-previous@0.1.1": version "0.1.1" resolved "https://registry.yarnpkg.com/@radix-ui/react-use-previous/-/react-use-previous-0.1.1.tgz#0226017f72267200f6e832a7103760e96a6db5d0" @@ -29395,7 +29428,7 @@ string-template@~0.2.1: resolved "https://registry.yarnpkg.com/string-template/-/string-template-0.2.1.tgz#42932e598a352d01fc22ec3367d9d84eec6c9add" integrity sha1-QpMuWYo1LQH8IuwzZ9nYTuxsmt0= -"string-width-cjs@npm:string-width@^4.2.0": +"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.2.2, string-width@^4.2.3: version "4.2.3" resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== @@ -29421,15 +29454,6 @@ string-width@^1.0.1: is-fullwidth-code-point "^2.0.0" strip-ansi "^4.0.0" -"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.2.2, string-width@^4.2.3: - version "4.2.3" - resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" - integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== - dependencies: - emoji-regex "^8.0.0" - is-fullwidth-code-point "^3.0.0" - strip-ansi "^6.0.1" - string-width@^3.0.0: version "3.1.0" resolved "https://registry.yarnpkg.com/string-width/-/string-width-3.1.0.tgz#22767be21b62af1081574306f69ac51b62203961" @@ -29584,7 +29608,7 @@ string_decoder@~1.1.1: dependencies: safe-buffer "~5.1.0" -"strip-ansi-cjs@npm:strip-ansi@^6.0.1": +"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.1: version "6.0.1" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== @@ -29619,13 +29643,6 @@ strip-ansi@^6.0.0: dependencies: ansi-regex "^5.0.0" -strip-ansi@^6.0.1: - version "6.0.1" - resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" - integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== - dependencies: - ansi-regex "^5.0.1" - strip-ansi@^7.0.0: version "7.0.1" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.0.1.tgz#61740a08ce36b61e50e65653f07060d000975fb2" @@ -32325,7 +32342,7 @@ workerpool@6.2.1: resolved "https://registry.yarnpkg.com/workerpool/-/workerpool-6.2.1.tgz#46fc150c17d826b86a008e5a4508656777e9c343" integrity sha512-ILEIE97kDZvF9Wb9f6h5aXK4swSlKGUcOEGiIYb2OOu/IrDU9iwj0fD//SsA6E5ibwJxpEvhullJY4Sl4GcpAw== -"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0": +"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0: version "7.0.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== @@ -32351,15 +32368,6 @@ wrap-ansi@^6.0.1, wrap-ansi@^6.2.0: string-width "^4.1.0" strip-ansi "^6.0.0" -wrap-ansi@^7.0.0: - version "7.0.0" - resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" - integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== - dependencies: - ansi-styles "^4.0.0" - string-width "^4.1.0" - strip-ansi "^6.0.0" - wrap-ansi@^8.1.0: version "8.1.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"