♻️ refactor: Use hook to check PWA env

bentwnghk · Sep 27, 2023 · b4234db · b4234db
1 parent a35c379
commit b4234db
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 11 deletions.
diff --git a/package.json b/package.json
@@ -68,8 +68,8 @@
     "@emoji-mart/data": "^1",
     "@emoji-mart/react": "^1",
     "@icons-pack/react-simple-icons": "^9",
-    "@lobehub/chat-plugin-sdk": "^1.17.7",
-    "@lobehub/chat-plugins-gateway": "^1.5.3",
+    "@lobehub/chat-plugin-sdk": "latest",
+    "@lobehub/chat-plugins-gateway": "latest",
     "@lobehub/ui": "latest",
     "@vercel/analytics": "^1",
     "ahooks": "^3",
@@ -88,16 +88,16 @@
     "lucide-react": "latest",
     "nanoid": "^5",
     "next": "^13.5.3",
-    "openai": "^4.10.0",
+    "openai": "^4",
     "polished": "^4",
     "react": "^18",
     "react-dom": "^18",
     "react-hotkeys-hook": "^4",
     "react-i18next": "^13",
     "react-intersection-observer": "^9",
-    "react-layout-kit": "^1.7.4",
+    "react-layout-kit": "^1",
     "swr": "^2",
-    "systemjs": "^6.14.2",
+    "systemjs": "^6",
     "ts-md5": "^1",
     "url-join": "^5",
     "use-merge-value": "^1",
@@ -118,7 +118,7 @@
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
-    "@types/systemjs": "^6.13.3",
+    "@types/systemjs": "^6",
     "@types/uuid": "^9",
     "@umijs/lint": "^4",
     "@vitest/coverage-v8": "latest",

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -19,7 +19,7 @@ const RootLayout = ({ children }: PropsWithChildren) => {
   const primaryColor = cookieStore.get(LOBE_THEME_PRIMARY_COLOR);
 
   return (
-    <html lang="en">
+    <html lang="en-US">
       <body>
         <StyleRegistry>
           <Layout

diff --git a/src/app/metadata.ts b/src/app/metadata.ts
@@ -47,7 +47,7 @@ const metadata: Metadata = {
         width: 960,
       },
     ],
-    locale: 'en_US',
+    locale: 'en-US',
     siteName: title,
     title: title,
     type: 'website',

diff --git a/src/hooks/useIsPWA.ts b/src/hooks/useIsPWA.ts
@@ -0,0 +1,15 @@
+import { useEffect, useState } from 'react';
+
+export const useIsPWA = () => {
+  const [isPWA, setIsPWA] = useState(false);
+
+  useEffect(() => {
+    const isInStandaloneMode = () =>
+      'standalone' in window.navigator && window.navigator['standalone'];
+    if (isInStandaloneMode()) {
+      setIsPWA(true);
+    }
+  }, []);
+
+  return isPWA;
+};
diff --git a/src/layout/AppLayout.tsx b/src/layout/AppLayout.tsx
@@ -3,15 +3,15 @@ import { PropsWithChildren, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import SideBar from '@/features/SideBar';
-
-const isPwa = window.matchMedia('(display-mode: standalone)').matches;
+import { useIsPWA } from '@/hooks/useIsPWA';
 
 const AppLayout = memo<PropsWithChildren>(({ children }) => {
+  const isPWA = useIsPWA();
   const theme = useTheme();
   return (
     <Flexbox
       horizontal
-      style={isPwa ? { borderTop: `1px solid ${theme.colorBorder}` } : {}}
+      style={isPWA ? { borderTop: `1px solid ${theme.colorBorder}` } : {}}
       width={'100%'}
     >
       <SideBar />