Merge pull request #934 from blockscout/bugfix/email-verification-logout

show profile menu if email is not confirmed

ui/snippets/profileMenu/ProfileMenuContent.tsx

@@ -8,31 +8,37 @@ import useNavItems from 'lib/hooks/useNavItems';
 import getDefaultTransitionProps from 'theme/utils/getDefaultTransitionProps';
 import NavLink from 'ui/snippets/navigation/NavLink';
 
-type Props = UserInfo;
+type Props = {
+  data?: UserInfo;
+};
 
-const ProfileMenuContent = ({ name, nickname, email }: Props) => {
+const ProfileMenuContent = ({ data }: Props) => {
   const { accountNavItems, profileItem } = useNavItems();
   const primaryTextColor = useColorModeValue('blackAlpha.800', 'whiteAlpha.800');
 
   return (
     <Box>
-      <Text
-        fontSize="sm"
-        fontWeight={ 500 }
-        color={ primaryTextColor }
-        { ...getDefaultTransitionProps() }
-      >
-        Signed in as { name || nickname }
-      </Text>
-      <Text
-        fontSize="sm"
-        mb={ 1 }
-        fontWeight={ 500 }
-        color="gray.500"
-        { ...getDefaultTransitionProps() }
-      >
-        { email }
-      </Text>
+      { (data?.name || data?.nickname) && (
+        <Text
+          fontSize="sm"
+          fontWeight={ 500 }
+          color={ primaryTextColor }
+          { ...getDefaultTransitionProps() }
+        >
+        Signed in as { data.name || data.nickname }
+        </Text>
+      ) }
+      { data?.email && (
+        <Text
+          fontSize="sm"
+          mb={ 1 }
+          fontWeight={ 500 }
+          color="gray.500"
+          { ...getDefaultTransitionProps() }
+        >
+          { data.email }
+        </Text>
+      ) }
       <NavLink item={ profileItem } isActive={ undefined } px="0px" isCollapsed={ false }/>
       <Box as="nav" mt={ 2 } pt={ 2 } borderTopColor="divider" borderTopWidth="1px" { ...getDefaultTransitionProps() }>
         <VStack as="ul" spacing="0" alignItems="flex-start" overflow="hidden">

ui/snippets/profileMenu/ProfileMenuDesktop.tsx

 import type { ButtonProps } from '@chakra-ui/react';
 import { Popover, PopoverContent, PopoverBody, PopoverTrigger, Button } from '@chakra-ui/react';
-import { route } from 'nextjs-routes';
 import React from 'react';
 
 import useFetchProfileInfo from 'lib/hooks/useFetchProfileInfo';
@@ -9,25 +8,25 @@ import UserAvatar from 'ui/shared/UserAvatar';
 import ProfileMenuContent from 'ui/snippets/profileMenu/ProfileMenuContent';
 
 const ProfileMenuDesktop = () => {
-  const { data, error } = useFetchProfileInfo();
+  const { data, error, isLoading } = useFetchProfileInfo();
   const loginUrl = useLoginUrl();
+  const [ hasMenu, setHasMenu ] = React.useState(false);
 
-  const buttonProps: Partial<ButtonProps> = (() => {
-    if (error?.status === 403) {
-      return {
-        as: 'a',
-        href: route({ pathname: '/auth/profile' }),
-      };
+  React.useEffect(() => {
+    if (!isLoading) {
+      setHasMenu(Boolean(data) || error?.status === 403);
     }
+  }, [ data, error?.status, isLoading ]);
 
-    if (!data) {
-      return {
-        as: 'a',
-        href: loginUrl,
-      };
+  const buttonProps: Partial<ButtonProps> = (() => {
+    if (hasMenu) {
+      return {};
     }
 
-    return {};
+    return {
+      as: 'a',
+      href: loginUrl,
+    };
   })();
 
   return (
@@ -43,10 +42,10 @@ const ProfileMenuDesktop = () => {
           <UserAvatar size={ 50 }/>
         </Button>
       </PopoverTrigger>
-      { data && (
+      { hasMenu && (
         <PopoverContent w="212px">
           <PopoverBody padding="24px 16px 16px 16px">
-            <ProfileMenuContent { ...data }/>
+            <ProfileMenuContent data={ data }/>
           </PopoverBody>
         </PopoverContent>
       ) }

ui/snippets/profileMenu/ProfileMenuMobile.tsx

 import { Box, Drawer, DrawerOverlay, DrawerContent, DrawerBody, useDisclosure, Button } from '@chakra-ui/react';
 import type { ButtonProps } from '@chakra-ui/react';
-import { route } from 'nextjs-routes';
 import React from 'react';
 
 import useFetchProfileInfo from 'lib/hooks/useFetchProfileInfo';
@@ -11,30 +10,30 @@ import ProfileMenuContent from 'ui/snippets/profileMenu/ProfileMenuContent';
 const ProfileMenuMobile = () => {
   const { isOpen, onOpen, onClose } = useDisclosure();
 
-  const { data, error } = useFetchProfileInfo();
+  const { data, error, isLoading } = useFetchProfileInfo();
   const loginUrl = useLoginUrl();
+  const [ hasMenu, setHasMenu ] = React.useState(false);
 
-  const buttonProps: Partial<ButtonProps> = (() => {
-    if (error?.status === 403) {
-      return {
-        as: 'a',
-        href: route({ pathname: '/auth/profile' }),
-      };
+  React.useEffect(() => {
+    if (!isLoading) {
+      setHasMenu(Boolean(data) || error?.status === 403);
     }
+  }, [ data, error?.status, isLoading ]);
 
-    if (!data) {
-      return {
-        as: 'a',
-        href: loginUrl,
-      };
+  const buttonProps: Partial<ButtonProps> = (() => {
+    if (hasMenu) {
+      return {};
     }
 
-    return {};
+    return {
+      as: 'a',
+      href: loginUrl,
+    };
   })();
 
   return (
     <>
-      <Box padding={ 2 } onClick={ data ? onOpen : undefined }>
+      <Box padding={ 2 } onClick={ hasMenu ? onOpen : undefined }>
         <Button
           variant="unstyled"
           height="auto"
@@ -43,7 +42,7 @@ const ProfileMenuMobile = () => {
           <UserAvatar size={ 24 }/>
         </Button>
       </Box>
-      { data && (
+      { hasMenu && (
         <Drawer
           isOpen={ isOpen }
           placement="right"
@@ -53,7 +52,7 @@ const ProfileMenuMobile = () => {
           <DrawerOverlay/>
           <DrawerContent maxWidth="260px">
             <DrawerBody p={ 6 }>
-              <ProfileMenuContent { ...data }/>
+              <ProfileMenuContent data={ data }/>
             </DrawerBody>
           </DrawerContent>
         </Drawer>