fix: website deploy (#117)

Magickbase · Jul 4, 2024 · a0ee457 · a0ee457
1 parent 89783f1
commit a0ee457
Show file tree

Hide file tree

Showing 16 changed files with 74 additions and 49 deletions.
diff --git a/packages/magickbase/package.json b/packages/magickbase/package.json
@@ -25,6 +25,7 @@
     "next": "13.5.6",
     "next-i18next": "^13.2.2",
     "react": "18.2.0",
+    "react-device-detect": "^2.2.3",
     "react-dom": "18.2.0",
     "react-hot-toast": "^2.4.1",
     "react-i18next": "^12.3.1",

diff --git a/packages/magickbase/src/components/ContactUs/index.tsx b/packages/magickbase/src/components/ContactUs/index.tsx
@@ -6,7 +6,7 @@ import { useTranslation } from 'next-i18next'
 import { Modal } from '@/components/Modal'
 import { Tooltip } from '@/components/Tooltip'
 import toast from 'react-hot-toast'
-import { useIsMobile } from '@magickbase-website/shared'
+import { isMobile } from 'react-device-detect'
 import styles from './styles.module.scss'
 import leftElement from './leftElement.png'
 import rightElement from './rightElement.png'
@@ -20,7 +20,6 @@ export const ContactUs: FC<ComponentProps<'div'>> = ({ className, ...props }) =>
   const { t } = useTranslation('common')
   const [copiedText, copyToClipboard] = useCopyToClipboard()
   const [copiedModalOpen, setCopiedModalOpen] = useState(false)
-  const isMobile = useIsMobile()
 
   const copy = () => {
     void copyToClipboard('[email protected]')
@@ -53,32 +52,28 @@ export const ContactUs: FC<ComponentProps<'div'>> = ({ className, ...props }) =>
 
           <div className="flex flex-col flex-1 z-[2] items-center md:items-start md:max-w-[50%]">
             <h1 className="text-3xl mb-6 md:mb-8">{t('contact_us')}</h1>
-            <p className="text-xl mb-8 text-[#999999] leading-8 text-center md:text-start">
-             {t('contact_des')}
-            </p>
+            <p className="text-xl mb-8 text-[#999999] leading-8 text-center md:text-start">{t('contact_des')}</p>
             {isMobile ? (
               <button
                 className="border-[1px] border-solid border-white rounded-xl py-4 px-6"
                 onClick={() => setCopiedModalOpen(true)}
               >
-              {t('contact_now')}
+                {t('contact_now')}
               </button>
             ) : (
               <Tooltip
                 content={
-                  <div className='flex items-center'>
+                  <div className="flex items-center">
                     [email protected]{' '}
                     {copiedText === '[email protected]' ? (
-                      <DoneSvg className="ml-2"/>
+                      <DoneSvg className="ml-2" />
                     ) : (
                       <CopySimpleSvg className="ml-2 cursor-pointer" onClick={() => copy()} />
                     )}
                   </div>
                 }
               >
-                <div className="border-[1px] border-solid border-white rounded-xl py-4 px-6">
-                {t('contact_now')}
-                </div>
+                <div className="border-[1px] border-solid border-white rounded-xl py-4 px-6">{t('contact_now')}</div>
               </Tooltip>
             )}
           </div>

diff --git a/packages/magickbase/src/components/Footer/index.tsx b/packages/magickbase/src/components/Footer/index.tsx
@@ -2,7 +2,7 @@ import { ComponentProps, FC } from 'react'
 import clsx from 'clsx'
 import { useTranslation } from 'next-i18next'
 import Link from 'next/link'
-import { useIsMobile } from '@magickbase-website/shared'
+import { isMobile } from 'react-device-detect'
 import styles from './index.module.scss'
 import IconFullLogo from './full-logo.svg'
 import { Contacts } from '../Contacts'
@@ -19,7 +19,6 @@ export const Footer: FC<FooterProps> = ({
   ...elProps
 }) => {
   const { t } = useTranslation('common')
-  const isMobile = useIsMobile()
 
   const serviceStateText =
     serviceState === 'operational'

diff --git a/packages/magickbase/src/components/Header/index.tsx b/packages/magickbase/src/components/Header/index.tsx
@@ -6,7 +6,7 @@ import * as Dialog from '@radix-ui/react-dialog'
 import { useRouter } from 'next/router'
 import { useTranslation } from 'react-i18next'
 import { OverlayScrollbarsComponent } from 'overlayscrollbars-react'
-import { useIsMobile } from '@magickbase-website/shared'
+import { isMobile } from 'react-device-detect'
 import styles from './index.module.scss'
 import IconLogo from './logo.svg'
 import IconGithub from './github.svg'
@@ -22,7 +22,6 @@ export type HeaderProps = ComponentProps<'div'> & {
 }
 
 export const Header: FC<HeaderProps> = props => {
-  const isMobile = useIsMobile()
   return isMobile ? <Header$Mobile {...props} /> : <Header$Desktop {...props} />
 }
 
@@ -75,7 +74,6 @@ export const Header$Mobile: FC<HeaderProps> = ({ navMenuGroupName, navMenus, ...
 
 const MenuDialog: FC<Pick<HeaderProps, 'navMenuGroupName' | 'navMenus'>> = ({ navMenuGroupName, navMenus }) => {
   const { t } = useTranslation('common')
-  const isMobile = useIsMobile()
   const router = useRouter()
   const { pathname, query } = router
 

diff --git a/packages/magickbase/src/components/Tooltip/index.tsx b/packages/magickbase/src/components/Tooltip/index.tsx
@@ -2,11 +2,10 @@ import { FC, PropsWithChildren, ReactNode } from 'react'
 import * as RadixTooltip from '@radix-ui/react-tooltip'
 import * as RadixPopover from '@radix-ui/react-popover'
 import clsx from 'clsx'
-import { useIsMobile } from '@magickbase-website/shared'
+import { isMobile } from 'react-device-detect'
 import styles from './index.module.scss'
 
 export const Tooltip: FC<PropsWithChildren<{ content?: ReactNode; className?: string }>> = props => {
-  const isMobile = useIsMobile()
 
   return isMobile ? (
     // RadixTooltip does not support mobile, so use RadixPopover instead.

diff --git a/packages/magickbase/src/components/UpsideDownEffect/index.tsx b/packages/magickbase/src/components/UpsideDownEffect/index.tsx
@@ -1,7 +1,7 @@
 import { ComponentProps, FC, ReactNode } from 'react'
 import Link from 'next/link'
 import clsx from 'clsx'
-import { useIsMobile } from '@magickbase-website/shared'
+import { isMobile } from 'react-device-detect'
 import styles from './index.module.scss'
 
 interface UpsideDownEffectProps {
@@ -70,8 +70,6 @@ export const LinkWithEffect: FC<ComponentProps<typeof Link> & UpsideDownEffectPr
   nodeClass,
   ...linkProps
 }) => {
-  const isMobile = useIsMobile()
-
   if (isMobile) return <Link {...linkProps}>{children}</Link>
 
   if (typeof children === 'function') throw new Error('LinkWithEffect not support children as function')

diff --git a/packages/magickbase/src/pages/_app.tsx b/packages/magickbase/src/pages/_app.tsx
@@ -3,14 +3,11 @@ import './globals.css'
 import '../styles/globals.scss'
 import 'overlayscrollbars/overlayscrollbars.css'
 import type { AppProps } from 'next/app'
-import { appWithTranslation, useTranslation } from 'next-i18next'
+import { appWithTranslation } from 'next-i18next'
 import { api } from '../utils/api'
 import { TooltipProvider } from '../components/Tooltip'
 
 function App({ Component, pageProps }: AppProps) {
-  const { ready } = useTranslation('app')
-
-  console.log('app ready', ready)
 
   return (
     <TooltipProvider>

diff --git a/packages/magickbase/src/pages/index.tsx b/packages/magickbase/src/pages/index.tsx
@@ -1,5 +1,4 @@
 import { GetServerSideProps } from 'next';
-import { useTranslation } from 'react-i18next';
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import { Footer } from '../components/Footer'
 import { Header } from '../components/Header'
@@ -22,9 +21,6 @@ export const getServerSideProps: GetServerSideProps = async ({
 
 export default function Home() {
   const aggregateStateQuery = api.uptime.aggregateState.useQuery()
-  const { ready } = useTranslation('common')
-  console.log('home page ready', ready)
-
 
   return (
     <>

diff --git a/packages/shared/src/hooks/index.ts → packages/shared/src/hooks/index.tsx b/packages/shared/src/hooks/index.ts → packages/shared/src/hooks/index.tsx
diff --git a/packages/status/package.json b/packages/status/package.json
@@ -22,13 +22,14 @@
     "@uidotdev/usehooks": "^2.4.1",
     "classnames": "2.3.2",
     "dayjs": "^1.11.10",
-    "i18next": "^22.5.0",
+    "i18next": "22.5.0",
     "next": "13.5.6",
-    "next-i18next": "^13.2.2",
+    "next-i18next": "13.2.2",
     "react": "18.2.0",
+    "react-device-detect": "^2.2.3",
     "react-dom": "18.2.0",
     "react-hot-toast": "^2.4.1",
-    "react-i18next": "^12.3.1",
+    "react-i18next": "12.3.1",
     "react-intersection-observer": "9.5.3",
     "react-use": "17.4.0",
     "rebound": "^0.1.0",

diff --git a/packages/status/src/components/Footer/index.tsx b/packages/status/src/components/Footer/index.tsx
@@ -2,7 +2,7 @@ import { ComponentProps, FC } from 'react'
 import clsx from 'clsx'
 import { useTranslation } from 'react-i18next'
 import Link from 'next/link'
-import { useIsMobile } from '@magickbase-website/shared'
+import { isMobile } from 'react-device-detect'
 import styles from './index.module.scss'
 import IconFullLogo from './full-logo.svg'
 import { Contacts } from '../Contacts'
@@ -19,7 +19,6 @@ export const Footer: FC<FooterProps> = ({
   ...elProps
 }) => {
   const { t } = useTranslation('common')
-  const isMobile = useIsMobile()
 
   const serviceStateText =
     serviceState === 'operational'

diff --git a/packages/status/src/components/Header/index.tsx b/packages/status/src/components/Header/index.tsx
@@ -5,7 +5,8 @@ import * as Dialog from '@radix-ui/react-dialog'
 import { useRouter } from 'next/router'
 import { useTranslation } from 'react-i18next'
 import { OverlayScrollbarsComponent } from 'overlayscrollbars-react'
-import { useIsMobile, languages } from '@magickbase-website/shared'
+import { isMobile } from 'react-device-detect'
+import { languages } from '@magickbase-website/shared'
 import styles from './index.module.scss'
 import IconLogo from './logo.svg'
 import IconGithub from './github.svg'
@@ -21,7 +22,6 @@ export type HeaderProps = ComponentProps<'div'> & {
 }
 
 export const Header: FC<HeaderProps> = props => {
-  const isMobile = useIsMobile()
   return isMobile ? <Header$Mobile {...props} /> : <Header$Desktop {...props} />
 }
 
@@ -74,7 +74,6 @@ export const Header$Mobile: FC<HeaderProps> = ({ navMenuGroupName, navMenus, ...
 
 const MenuDialog: FC<Pick<HeaderProps, 'navMenuGroupName' | 'navMenus'>> = ({ navMenuGroupName, navMenus }) => {
   const { t } = useTranslation('common')
-  const isMobile = useIsMobile()
   const router = useRouter()
   const { pathname, query } = router
 

diff --git a/packages/status/src/components/StatusResource/index.tsx b/packages/status/src/components/StatusResource/index.tsx
@@ -5,7 +5,7 @@ import { StatusResourceResponse } from '@/types'
 import toast from 'react-hot-toast'
 import { Tooltip } from '@/components/Tooltip'
 import { useCopyToClipboard } from '@uidotdev/usehooks'
-import { useIsMobile } from '@magickbase-website/shared'
+import { isMobile } from 'react-device-detect'
 import CopyIcon from './copy.svg'
 
 export interface StatusResourceProps extends Omit<ComponentProps<'div'>, 'resource'> {
@@ -28,7 +28,6 @@ function parseDuration(duration: number) {
 
 export const StatusResource: React.FC<StatusResourceProps> = ({ link, resource, ...props }) => {
   const { t } = useTranslation('common')
-  const isMobile = useIsMobile();
   const [_, copyToClipboard] = useCopyToClipboard()
   const currentStatus = resource.attributes.status_history[resource.attributes.status_history.length - 1]
 

diff --git a/packages/status/src/components/Tooltip/index.tsx b/packages/status/src/components/Tooltip/index.tsx
@@ -2,12 +2,10 @@ import { FC, PropsWithChildren, ReactNode } from 'react'
 import * as RadixTooltip from '@radix-ui/react-tooltip'
 import * as RadixPopover from '@radix-ui/react-popover'
 import clsx from 'clsx'
-import { useIsMobile } from '@magickbase-website/shared'
+import { isMobile } from 'react-device-detect'
 import styles from './index.module.scss'
 
 export const Tooltip: FC<PropsWithChildren<{ content?: ReactNode; className?: string }>> = props => {
-  const isMobile = useIsMobile()
-
   return isMobile ? (
     // RadixTooltip does not support mobile, so use RadixPopover instead.
     <RadixPopover.Root>

diff --git a/packages/status/src/components/UpsideDownEffect/index.tsx b/packages/status/src/components/UpsideDownEffect/index.tsx
@@ -1,7 +1,7 @@
 import { ComponentProps, FC, ReactNode } from 'react'
 import Link from 'next/link'
 import clsx from 'clsx'
-import { useIsMobile } from '@magickbase-website/shared'
+import { isMobile } from 'react-device-detect'
 import styles from './index.module.scss'
 
 interface UpsideDownEffectProps {
@@ -70,8 +70,6 @@ export const LinkWithEffect: FC<ComponentProps<typeof Link> & UpsideDownEffectPr
   nodeClass,
   ...linkProps
 }) => {
-  const isMobile = useIsMobile()
-
   if (isMobile) return <Link {...linkProps}>{children}</Link>
 
   if (typeof children === 'function') throw new Error('LinkWithEffect not support children as function')

diff --git a/yarn.lock b/yarn.lock
@@ -2293,6 +2293,7 @@ __metadata:
     next: 13.5.6
     next-i18next: ^13.2.2
     react: 18.2.0
+    react-device-detect: ^2.2.3
     react-dom: 18.2.0
     react-hot-toast: ^2.4.1
     react-i18next: ^12.3.1
@@ -2442,13 +2443,14 @@ __metadata:
     daisyui: latest
     dayjs: ^1.11.10
     eslint: ^8.56.0
-    i18next: ^22.5.0
+    i18next: 22.5.0
     next: 13.5.6
-    next-i18next: ^13.2.2
+    next-i18next: 13.2.2
     react: 18.2.0
+    react-device-detect: ^2.2.3
     react-dom: 18.2.0
     react-hot-toast: ^2.4.1
-    react-i18next: ^12.3.1
+    react-i18next: 12.3.1
     react-intersection-observer: 9.5.3
     react-use: 17.4.0
     rebound: ^0.1.0
@@ -8288,6 +8290,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"i18next@npm:22.5.0":
+  version: 22.5.0
+  resolution: "i18next@npm:22.5.0"
+  dependencies:
+    "@babel/runtime": ^7.20.6
+  checksum: 291c0e02fda20bd1827b6529dad74c01867892c7ac000befe0f69e10ad97ab074a2ae5b4ce1e0638c28ae1a6f59d1ed8503ea05bd1c324d731a44dd94c43a49a
+  languageName: node
+  linkType: hard
+
 "i18next@npm:^22.0.4, i18next@npm:^22.5.0":
   version: 22.5.1
   resolution: "i18next@npm:22.5.1"
@@ -10629,6 +10640,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"next-i18next@npm:13.2.2":
+  version: 13.2.2
+  resolution: "next-i18next@npm:13.2.2"
+  dependencies:
+    "@babel/runtime": ^7.20.13
+    "@types/hoist-non-react-statics": ^3.3.1
+    core-js: ^3
+    hoist-non-react-statics: ^3.3.2
+    i18next-fs-backend: ^2.1.1
+  peerDependencies:
+    i18next: ^22.0.6
+    next: ">= 12.0.0"
+    react: ">= 17.0.2"
+    react-i18next: ^12.2.0
+  checksum: 2adfc9facea57a5e733557d06377a85b991aa23dbc80f7af4856cfba224eac6714a46a970022a519dbda266371193f9251b12f29175a46d2b97cfcee21d5b1d4
+  languageName: node
+  linkType: hard
+
 "next-i18next@npm:^13.2.2":
   version: 13.3.0
   resolution: "next-i18next@npm:13.3.0"
@@ -11892,6 +11921,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-device-detect@npm:^2.2.3":
+  version: 2.2.3
+  resolution: "react-device-detect@npm:2.2.3"
+  dependencies:
+    ua-parser-js: ^1.0.33
+  peerDependencies:
+    react: ">= 0.14.0"
+    react-dom: ">= 0.14.0"
+  checksum: 42d9b3182b9d2495bf0d7914c9f370da51d8bdb853a3eba2acaf433894ae760386a075ba103185be825b33d42f50d85ef462087f261656d433f4c74dab23861f
+  languageName: node
+  linkType: hard
+
 "react-dom@npm:18.2.0":
   version: 18.2.0
   resolution: "react-dom@npm:18.2.0"
@@ -11928,7 +11969,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-i18next@npm:^12.3.1":
+"react-i18next@npm:12.3.1, react-i18next@npm:^12.3.1":
   version: 12.3.1
   resolution: "react-i18next@npm:12.3.1"
   dependencies:
@@ -14534,6 +14575,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ua-parser-js@npm:^1.0.33":
+  version: 1.0.38
+  resolution: "ua-parser-js@npm:1.0.38"
+  checksum: d0772b22b027338d806ab17d1ac2896ee7485bdf9217c526028159f3cd6bb10272bb18f6196d2f94dde83e3b36dc9d2533daf08a414764f6f4f1844842383838
+  languageName: node
+  linkType: hard
+
 "ua-parser-js@npm:^2.0.0-beta.1":
   version: 2.0.0-beta.3
   resolution: "ua-parser-js@npm:2.0.0-beta.3"