feat: create Settings/Accounts/Calendars page (#4090)

* feat: create Settings/Accounts/Calendars page

Closes #4059

* docs: add SettingsAccountsCalendars stories

* refactor: add SettingsNavigationDrawerItem component
This commit is contained in:
Thaïs
2024-02-20 15:28:15 -03:00
committed by GitHub
parent 4552e98b7f
commit 11581ca9c3
14 changed files with 184 additions and 105 deletions

View File

@ -1,8 +1,10 @@
import { useCallback } from 'react';
import { useMatch, useNavigate, useResolvedPath } from 'react-router-dom';
import { useNavigate } from 'react-router-dom';
import { useAuth } from '@/auth/hooks/useAuth';
import { SettingsNavigationDrawerItem } from '@/settings/components/SettingsNavigationDrawerItem';
import { AppPath } from '@/types/AppPath';
import { SettingsPath } from '@/types/SettingsPath';
import {
IconApps,
IconAt,
@ -31,67 +33,45 @@ export const SettingsNavigationDrawerItems = () => {
navigate(AppPath.SignIn);
}, [signOut, navigate]);
const isCalendarEnabled = useIsFeatureEnabled('IS_CALENDAR_ENABLED');
const isMessagingEnabled = useIsFeatureEnabled('IS_MESSAGING_ENABLED');
const isIntegrationsItemActive = !!useMatch({
path: useResolvedPath('/settings/integrations').pathname,
end: true,
});
const isAccountsItemActive = !!useMatch({
path: useResolvedPath('/settings/accounts').pathname,
end: true,
});
const isAccountsEmailsItemActive = !!useMatch({
path: useResolvedPath('/settings/accounts/emails').pathname,
end: true,
});
return (
<>
<NavigationDrawerSection>
<NavigationDrawerSectionTitle label="User" />
<NavigationDrawerItem
<SettingsNavigationDrawerItem
label="Profile"
to="/settings/profile"
path={SettingsPath.ProfilePage}
Icon={IconUserCircle}
active={
!!useMatch({
path: useResolvedPath('/settings/profile').pathname,
end: true,
})
}
/>
<NavigationDrawerItem
<SettingsNavigationDrawerItem
label="Appearance"
to="/settings/profile/appearance"
path={SettingsPath.Appearance}
Icon={IconColorSwatch}
active={
!!useMatch({
path: useResolvedPath('/settings/profile/appearance').pathname,
end: true,
})
}
/>
{isMessagingEnabled && (
<NavigationDrawerItemGroup>
<NavigationDrawerItem
<SettingsNavigationDrawerItem
label="Accounts"
to="/settings/accounts"
path={SettingsPath.Accounts}
Icon={IconAt}
active={isAccountsItemActive}
/>
<NavigationDrawerItem
<SettingsNavigationDrawerItem
level={2}
label="Emails"
to="/settings/accounts/emails"
path={SettingsPath.AccountsEmails}
Icon={IconMail}
active={isAccountsEmailsItemActive}
matchSubPages
/>
<NavigationDrawerItem
<SettingsNavigationDrawerItem
level={2}
label="Calendars"
path={SettingsPath.AccountsCalendars}
Icon={IconCalendarEvent}
soon
matchSubPages
soon={!isCalendarEnabled}
/>
</NavigationDrawerItemGroup>
)}
@ -99,55 +79,31 @@ export const SettingsNavigationDrawerItems = () => {
<NavigationDrawerSection>
<NavigationDrawerSectionTitle label="Workspace" />
<NavigationDrawerItem
<SettingsNavigationDrawerItem
label="General"
to="/settings/workspace"
path={SettingsPath.Workspace}
Icon={IconSettings}
active={
!!useMatch({
path: useResolvedPath('/settings/workspace').pathname,
end: true,
})
}
/>
<NavigationDrawerItem
<SettingsNavigationDrawerItem
label="Members"
to="/settings/workspace-members"
path={SettingsPath.WorkspaceMembersPage}
Icon={IconUsers}
active={
!!useMatch({
path: useResolvedPath('/settings/workspace-members').pathname,
end: true,
})
}
/>
<NavigationDrawerItem
<SettingsNavigationDrawerItem
label="Data model"
to="/settings/objects"
path={SettingsPath.Objects}
Icon={IconHierarchy2}
active={
!!useMatch({
path: useResolvedPath('/settings/objects').pathname,
end: false,
})
}
matchSubPages
/>
<NavigationDrawerItem
<SettingsNavigationDrawerItem
label="Developers"
to="/settings/developers"
path={SettingsPath.Developers}
Icon={IconRobot}
active={
!!useMatch({
path: useResolvedPath('/settings/developers').pathname,
end: true,
})
}
/>
<NavigationDrawerItem
<SettingsNavigationDrawerItem
label="Integrations"
to="/settings/integrations"
path={SettingsPath.Integrations}
Icon={IconApps}
active={isIntegrationsItemActive}
/>
</NavigationDrawerSection>