fix(web): GlobalModal not showing when it should (#857)

reearth · Dec 12, 2023 · 8df7d07 · 8df7d07
1 parent 5740377
commit 8df7d07
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 7 deletions.
diff --git a/web/src/app.tsx b/web/src/app.tsx
@@ -1,6 +1,7 @@
 import { Suspense } from "react";
 
 import Loading from "@reearth/beta/components/Loading";
+import GlobalModal from "@reearth/beta/features/GlobalModal";
 import NotificationBanner from "@reearth/beta/features/Notification";
 import { Provider as I18nProvider } from "@reearth/services/i18n";
 
@@ -17,6 +18,7 @@ export default function App() {
           <I18nProvider>
             <Suspense fallback={<Loading animationSize={80} animationColor="#3B3CD0" />}>
               <NotificationBanner />
+              <GlobalModal />
               <AppRoutes />
             </Suspense>
           </I18nProvider>

diff --git a/...omponents/organisms/GlobalModal/index.tsx → web/src/beta/features/GlobalModal/index.tsx b/...omponents/organisms/GlobalModal/index.tsx → web/src/beta/features/GlobalModal/index.tsx
@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useState } from "react";
 
 import { useAuth } from "@reearth/services/auth";
+import { config } from "@reearth/services/config";
 import { useLang as useCurrentLang } from "@reearth/services/i18n";
 import {
   NotificationType,
@@ -9,7 +10,8 @@ import {
 } from "@reearth/services/state";
 
 const GlobalModal: React.FC = () => {
-  const extensions = window.REEARTH_CONFIG?.extensions?.globalModal;
+  const extensions = config()?.extensions?.globalModal;
+
   const { getAccessToken, logout } = useAuth();
   const currentLang = useCurrentLang();
   const [currentTheme] = useCurrentTheme();
@@ -18,15 +20,15 @@ const GlobalModal: React.FC = () => {
   const [accessToken, setAccessToken] = useState<string>();
 
   useEffect(() => {
+    if (accessToken) return;
     getAccessToken().then(token => {
       setAccessToken(token);
     });
-  }, [getAccessToken]);
+  }, [accessToken, getAccessToken]);
 
   const handleNotificationChange = useCallback(
-    (type: NotificationType, text: string, heading?: string) => {
-      setNotification({ type, text, heading });
-    },
+    (type: NotificationType, text: string, heading?: string) =>
+      setNotification({ type, text, heading }),
     [setNotification],
   );
 

diff --git a/web/src/beta/pages/Page.tsx b/web/src/beta/pages/Page.tsx
@@ -1,6 +1,5 @@
 import React, { ReactNode, useMemo } from "react";
 
-import GlobalModal from "@reearth/classic/components/organisms/GlobalModal"; // todo: migrate to beta
 import { useMeFetcher, useProjectFetcher, useSceneFetcher } from "@reearth/services/api";
 import { AuthenticatedPage } from "@reearth/services/auth";
 
@@ -49,7 +48,6 @@ const PageWrapper: React.FC<Props> = ({ sceneId, projectId, workspaceId, renderI
     <Loading animationSize={80} />
   ) : (
     <>
-      <GlobalModal />
       {renderItem({
         sceneId,
         projectId: currentProjectId,