fix: stop redirect when an error occurs on top page

reearth · Sep 21, 2022 · 236354a · 236354a
1 parent ec305d6
commit 236354a
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 18 deletions.
diff --git a/src/auth/hooks.ts b/src/auth/hooks.ts
@@ -24,9 +24,10 @@ export default function useAuth() {
   };
 }
 
-export function useCleanUrl() {
-  const { isAuthenticated, isLoading } = useAuth0();
+export function useCleanUrl(): [string | undefined, boolean] {
+  const { isLoading } = useAuth0();
   const [error, setError] = useState<string>();
+  const [done, setDone] = useState(false);
 
   useEffect(() => {
     if (isLoading) return; // ensure that Auth0 can detect errors
@@ -46,9 +47,10 @@ export function useCleanUrl() {
     const url = `${window.location.pathname}${queries ? "?" : ""}${queries}`;
 
     history.replaceState(null, document.title, url);
-  }, [isAuthenticated, isLoading]);
+    setDone(true);
+  }, [isLoading]);
 
-  return error;
+  return [error, done];
 }
 
 export function useAuthenticationRequired(): [boolean, string | undefined] {
@@ -67,7 +69,7 @@ export function useAuthenticationRequired(): [boolean, string | undefined] {
     login();
   }, [authError, isAuthenticated, isLoading, login, logout]);
 
-  const error = useCleanUrl();
+  const [error] = useCleanUrl();
 
   return [isAuthenticated, error];
 }
diff --git a/src/components/molecules/RootPage/index.tsx b/src/components/molecules/RootPage/index.tsx
@@ -5,12 +5,16 @@ import Flex from "@reearth/components/atoms/Flex";
 import Icon from "@reearth/components/atoms/Icon";
 import { styled, useTheme } from "@reearth/theme";
 
-const RootPage: React.FC = () => {
+export type Props = {
+  loading?: boolean;
+};
+
+const RootPage: React.FC<Props> = ({ loading }) => {
   const theme = useTheme();
   return (
     <Wrapper justify="center" align="center" direction="column">
       <StyledIcon icon="logo" size={200} />
-      <RingLoader size={35} color={theme.main.strongText} />
+      {loading && <RingLoader size={35} color={theme.main.strongText} />}
     </Wrapper>
   );
 };

diff --git a/src/components/organisms/Authentication/RootPage/hooks.ts b/src/components/organisms/Authentication/RootPage/hooks.ts
@@ -12,7 +12,7 @@ export type Mode = "layer" | "widget";
 export default () => {
   const t = useT();
   const { isAuthenticated, isLoading, error: authError, login, logout } = useAuth();
-  const error = useCleanUrl();
+  const [error, isErrorChecked] = useCleanUrl();
   const navigate = useNavigate();
   const [currentTeam, setTeam] = useTeam();
   const [, setNotification] = useNotification();
@@ -25,6 +25,7 @@ export default () => {
       const res = await axios.post(
         (window.REEARTH_CONFIG?.api || "/api") + "/signup/verify/" + token,
       );
+
       if (res.status === 200) {
         setNotification({
           type: "success",
@@ -43,6 +44,8 @@ export default () => {
   );
 
   useEffect(() => {
+    if (!isErrorChecked || error) return;
+
     if (window.location.search) {
       const searchParam = new URLSearchParams(window.location.search).toString().split("=");
       if (searchParam[0] === "user-verification-token") {
@@ -67,22 +70,27 @@ export default () => {
     setTeam,
     data,
     teamId,
+    isErrorChecked,
+    error,
   ]);
 
   useEffect(() => {
-    if (authError || (isAuthenticated && !loading && data?.me === null)) {
+    if (isErrorChecked && (authError || (isAuthenticated && !loading && data?.me === null))) {
       logout();
     }
-  }, [authError, data?.me, isAuthenticated, loading, logout]);
+  }, [authError, data?.me, isAuthenticated, isErrorChecked, loading, logout]);
 
-  if (error) {
-    setNotification({
-      type: "error",
-      text: error,
-    });
-  }
+  useEffect(() => {
+    if (error) {
+      setNotification({
+        type: "error",
+        text: error,
+      });
+    }
+  }, [error, setNotification]);
 
   return {
+    error,
     isLoading,
     isAuthenticated,
   };

diff --git a/src/components/organisms/Authentication/RootPage/index.tsx b/src/components/organisms/Authentication/RootPage/index.tsx
@@ -6,9 +6,9 @@ import MoleculeRootPage from "@reearth/components/molecules/RootPage";
 import useHooks from "./hooks";
 
 const RootPage: React.FC = () => {
-  const { isLoading, isAuthenticated } = useHooks();
+  const { isLoading, isAuthenticated, error } = useHooks();
 
-  return isLoading ? <Loading /> : !isAuthenticated ? <MoleculeRootPage /> : null;
+  return isLoading ? <Loading /> : !isAuthenticated ? <MoleculeRootPage loading={!error} /> : null;
 };
 
 export default RootPage;