feat: sync the isVerified state of authed user

packages/webapp/src/containers/Authentication/Authentication.tsx

@@ -1,5 +1,4 @@
 // @ts-nocheck
-import React from 'react';
 import { Route, Switch, useLocation } from 'react-router-dom';
 import BodyClassName from 'react-body-classname';
 import styled from 'styled-components';

packages/webapp/src/containers/Authentication/EmailConfirmation.tsx

@@ -1,27 +1,46 @@
 // @ts-nocheck
-import { useEffect } from 'react';
-import { useHistory, useParams } from 'react-router-dom';
+import { useEffect, useMemo } from 'react';
+import { useLocation, useHistory } from 'react-router-dom';
 import { useAuthSignUpVerify } from '@/hooks/query';
+import { AppToaster } from '@/components';
+import { Intent } from '@blueprintjs/core';
+
+function useQuery() {
+  const { search } = useLocation();
+  return useMemo(() => new URLSearchParams(search), [search]);
+}
 
 export default function EmailConfirmation() {
   const { mutateAsync: authSignupVerify } = useAuthSignUpVerify();
-  const params = useParams();
   const history = useHistory();
+  const query = useQuery();
 
-  const token = params.token;
-  const email = params.email;
+  const token = query.get('token');
+  const email = query.get('email');
 
   useEffect(() => {
     if (!token || !email) {
-      history.push('register/email_confirmation');
+      history.push('/auth/login');
     }
   }, [history, token, email]);
 
   useEffect(() => {
-    authSignupVerify(token, email)
-      .then(() => {})
-      .catch((error) => {});
-  }, [token, email, authSignupVerify]);
+    authSignupVerify({ token, email })
+      .then(() => {
+        AppToaster.show({
+          message: 'Your email has been verified, Congrats!',
+          intent: Intent.SUCCESS,
+        });
+        history.push('/');
+      })
+      .catch(() => {
+        AppToaster.show({
+          message: 'Something went wrong',
+          intent: Intent.DANGER,
+        });
+        history.push('/');
+      });
+  }, [token, email, authSignupVerify, history]);
 
   return null;
 }

packages/webapp/src/containers/Authentication/RegisterVerify.tsx

@@ -7,10 +7,8 @@ import { AppToaster, Stack } from '@/components';
 import { useAuthActions } from '@/hooks/state';
 import { useAuthSignUpVerifyResendMail } from '@/hooks/query';
 import { AuthContainer } from './AuthContainer';
-import { useHistory } from 'react-router-dom';
 
 export default function RegisterVerify() {
-  const history = useHistory();
   const { setLogout } = useAuthActions();
   const { mutateAsync: resendSignUpVerifyMail, isLoading } =
     useAuthSignUpVerifyResendMail();
@@ -30,8 +28,6 @@ export default function RegisterVerify() {
         });
       });
   };
-
-  // Handle logout link click.
   const handleSignOutBtnClick = () => {
     setLogout();
   };
@@ -60,11 +56,11 @@ export default function RegisterVerify() {
             <Button
               large
               fill
-              intent={Intent.DANGER}
               minimal
+              intent={Intent.DANGER}
               onClick={handleSignOutBtnClick}
             >
-              Signout
+              Not my email
             </Button>
           </Stack>
         </AuthInsiderCard>