louiscklaw/lettersoup-online
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

"update user popover with dynamic user metadata loading and improved UI consistency,"

Browse Source
This commit is contained in:
louiscklaw
2025-05-11 07:55:16 +08:00
parent 9a8fd1c073
commit b5e9c8ba34
5 changed files with 164 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
002_source/cms/src/components/dashboard/layout/user-popover/custom-sign-out.tsx
View File

@@ -37,7 +37,11 @@ export function CustomSignOut(): React.JSX.Element {
}, [checkSession, router]);
return (
<MenuItem component="div" onClick={handleSignOut} sx={{ justifyContent: 'center' }}>
<MenuItem
component="div"
onClick={handleSignOut}
sx={{ justifyContent: 'center' }}
>
Sign out
</MenuItem>
);

48
002_source/cms/src/components/dashboard/layout/user-popover/user-popover.tsx
View File

@@ -23,8 +23,10 @@ import { CognitoSignOut } from './cognito-sign-out';
import { CustomSignOut } from './custom-sign-out';
import { FirebaseSignOut } from './firebase-sign-out';
import { SupabaseSignOut } from './supabase-sign-out';
import { authClient } from '@/lib/auth/custom/client';
import { logger } from '@/lib/default-logger';
const user = {
const defaultUser = {
id: 'USR-000',
name: 'Sofia Rivers',
avatar: '/assets/avatar.png',
@@ -38,6 +40,23 @@ export interface UserPopoverProps {
}
export function UserPopover({ anchorEl, onClose, open }: UserPopoverProps): React.JSX.Element {
const [userMeta, setUserMeta] = React.useState<User>(defaultUser);
async function loadUserMeta(): Promise<void> {
try {
const tempUserMeta = await authClient.getUser();
if (tempUserMeta.error) throw new Error(tempUserMeta.error);
setUserMeta(tempUserMeta.data as unknown as User);
} catch (error) {
logger.error(error);
}
}
React.useEffect(() => {
void loadUserMeta();
}, []);
if (!userMeta) return <>loading</>;
return (
<Popover
anchorEl={anchorEl}
@@ -48,26 +67,41 @@ export function UserPopover({ anchorEl, onClose, open }: UserPopoverProps): Reac
transformOrigin={{ horizontal: 'right', vertical: 'top' }}
>
<Box sx={{ p: 2 }}>
<Typography>{user.name}</Typography>
<Typography color="text.secondary" variant="body2">
{user.email}
<Typography>{userMeta.name}</Typography>
<Typography
color="text.secondary"
variant="body2"
>
{userMeta.email}
</Typography>
</Box>
<Divider />
<List sx={{ p: 1 }}>
<MenuItem component={RouterLink} href={paths.dashboard.settings.account} onClick={onClose}>
<MenuItem
component={RouterLink}
href={paths.dashboard.settings.account}
onClick={onClose}
>
<ListItemIcon>
<UserIcon />
</ListItemIcon>
Account
</MenuItem>
<MenuItem component={RouterLink} href={paths.dashboard.settings.security} onClick={onClose}>
<MenuItem
component={RouterLink}
href={paths.dashboard.settings.security}
onClick={onClose}
>
<ListItemIcon>
<LockKeyIcon />
</ListItemIcon>
Security
</MenuItem>
<MenuItem component={RouterLink} href={paths.dashboard.settings.billing} onClick={onClose}>
<MenuItem
component={RouterLink}
href={paths.dashboard.settings.billing}
onClick={onClose}
>
<ListItemIcon>
<CreditCardIcon />
</ListItemIcon>

57
002_source/cms/src/components/dashboard/layout/vertical/main-nav.tsx
View File

@@ -60,7 +60,11 @@ export function MainNav({ items }: MainNavProps): React.JSX.Element {
py: 1,
}}
>
<Stack direction="row" spacing={2} sx={{ alignItems: 'center', flex: '1 1 auto' }}>
<Stack
direction="row"
spacing={2}
sx={{ alignItems: 'center', flex: '1 1 auto' }}
>
<IconButton
onClick={(): void => {
setOpenNav(true);
@@ -105,11 +109,17 @@ function SearchButton(): React.JSX.Element {
return (
<React.Fragment>
<Tooltip title="Search">
<IconButton onClick={dialog.handleOpen} sx={{ display: { xs: 'none', lg: 'inline-flex' } }}>
<IconButton
onClick={dialog.handleOpen}
sx={{ display: { xs: 'none', lg: 'inline-flex' } }}
>
<MagnifyingGlassIcon />
</IconButton>
</Tooltip>
<SearchDialog onClose={dialog.handleClose} open={dialog.open} />
<SearchDialog
onClose={dialog.handleClose}
open={dialog.open}
/>
</React.Fragment>
);
}
@@ -120,11 +130,18 @@ function ContactsButton(): React.JSX.Element {
return (
<React.Fragment>
<Tooltip title="Contacts">
<IconButton onClick={popover.handleOpen} ref={popover.anchorRef}>
<IconButton
onClick={popover.handleOpen}
ref={popover.anchorRef}
>
<UsersIcon />
</IconButton>
</Tooltip>
<ContactsPopover anchorEl={popover.anchorRef.current} onClose={popover.handleClose} open={popover.open} />
<ContactsPopover
anchorEl={popover.anchorRef.current}
onClose={popover.handleClose}
open={popover.open}
/>
</React.Fragment>
);
}
@@ -140,12 +157,19 @@ function NotificationsButton(): React.JSX.Element {
sx={{ '& .MuiBadge-dot': { borderRadius: '50%', height: '10px', right: '6px', top: '6px', width: '10px' } }}
variant="dot"
>
<IconButton onClick={popover.handleOpen} ref={popover.anchorRef}>
<IconButton
onClick={popover.handleOpen}
ref={popover.anchorRef}
>
<BellIcon />
</IconButton>
</Badge>
</Tooltip>
<NotificationsPopover anchorEl={popover.anchorRef.current} onClose={popover.handleClose} open={popover.open} />
<NotificationsPopover
anchorEl={popover.anchorRef.current}
onClose={popover.handleClose}
open={popover.open}
/>
</React.Fragment>
);
}
@@ -165,11 +189,20 @@ function LanguageSwitch(): React.JSX.Element {
sx={{ display: { xs: 'none', lg: 'inline-flex' } }}
>
<Box sx={{ height: '24px', width: '24px' }}>
<Box alt={language} component="img" src={flag} sx={{ height: 'auto', width: '100%' }} />
<Box
alt={language}
component="img"
src={flag}
sx={{ height: 'auto', width: '100%' }}
/>
</Box>
</IconButton>
</Tooltip>
<LanguagePopover anchorEl={popover.anchorRef.current} onClose={popover.handleClose} open={popover.open} />
<LanguagePopover
anchorEl={popover.anchorRef.current}
onClose={popover.handleClose}
open={popover.open}
/>
</React.Fragment>
);
}
@@ -210,7 +243,11 @@ function UserButton(): React.JSX.Element {
<Avatar src={user.avatar} />
</Badge>
</Box>
<UserPopover anchorEl={popover.anchorRef.current} onClose={popover.handleClose} open={popover.open} />
<UserPopover
anchorEl={popover.anchorRef.current}
onClose={popover.handleClose}
open={popover.open}
/>
</React.Fragment>
);
}