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:
@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user