groot/automatisch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add primitive profile settings

Browse Source
This commit is contained in:
Ali BARIN
2022-03-29 20:50:01 +02:00
committed by Ömer Faruk Aydın
parent 68e5e6d011
commit 140734b32c
13 changed files with 279 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
packages/web/src/components/AccountDropdownMenu/index.tsx
View File

@@ -2,6 +2,7 @@ import * as React from 'react';
import { useNavigate } from 'react-router-dom';
import MenuItem from '@mui/material/MenuItem';
import Menu, { MenuProps } from '@mui/material/Menu';
import { Link } from 'react-router-dom';
import * as URLS from 'config/urls';
import useAuthentication from 'hooks/useAuthentication';
@@ -49,7 +50,18 @@ function AccountDropdownMenu(props: AccountDropdownMenuProps): React.ReactElemen
open={open}
onClose={onClose}
>
<MenuItem onClick={logout}>{formatMessage('accountDropdownMenu.logout')}</MenuItem>
<MenuItem
component={Link}
to={URLS.SETTINGS_DASHBOARD}
>
{formatMessage('accountDropdownMenu.settings')}
</MenuItem>
<MenuItem
onClick={logout}
>
{formatMessage('accountDropdownMenu.logout')}
</MenuItem>
</Menu>
);
}

82
packages/web/src/components/Drawer/index.tsx
View File

@@ -4,21 +4,28 @@ import { SwipeableDrawerProps } from '@mui/material/SwipeableDrawer';
import Toolbar from '@mui/material/Toolbar';
import List from '@mui/material/List';
import Divider from '@mui/material/Divider';
import AppsIcon from '@mui/icons-material/Apps';
import SwapCallsIcon from '@mui/icons-material/SwapCalls';
import HistoryIcon from '@mui/icons-material/History';
import ExploreIcon from '@mui/icons-material/Explore';
import useMediaQuery from '@mui/material/useMediaQuery';
import ListItemLink from 'components/ListItemLink';
import HideOnScroll from 'components/HideOnScroll';
import useFormatMessage from 'hooks/useFormatMessage';
import * as URLS from 'config/urls';
import { Drawer as BaseDrawer } from './style';
const iOS = typeof navigator !== 'undefined' && /iPad|iPhone|iPod/.test(navigator.userAgent);
export default function Drawer(props: SwipeableDrawerProps): React.ReactElement {
type DrawerLink = {
Icon: React.ElementType;
primary: string;
to: string;
};
type DrawerProps = {
links: DrawerLink[];
bottomLinks?: DrawerLink[];
} & SwipeableDrawerProps;
export default function Drawer(props: DrawerProps): React.ReactElement {
const { links = [], bottomLinks = [], ...drawerProps } = props;
const theme = useTheme();
const matchSmallScreens = useMediaQuery(theme.breakpoints.down('md'), { noSsr: true });
const formatMessage = useFormatMessage();
@@ -31,46 +38,43 @@ export default function Drawer(props: SwipeableDrawerProps): React.ReactElement
return (
<BaseDrawer
{...props}
{...drawerProps}
disableBackdropTransition={!iOS}
disableDiscovery={iOS}
variant={matchSmallScreens ? 'temporary' : 'permanent'}
>
<HideOnScroll unmountOnExit>
<Toolbar />
</HideOnScroll>
{/* keep the following encapsulating `div` to have `space-between` children */}
<div>
<HideOnScroll unmountOnExit>
<Toolbar />
</HideOnScroll>
<List sx={{ py: 0, mt: 3 }}>
{links.map(({ Icon, primary, to }, index) => (
<ListItemLink
key={`${to}-${index}`}
icon={<Icon htmlColor={theme.palette.primary.main} />}
primary={formatMessage(primary)}
to={to}
onClick={closeOnClick}
/>
))}
</List>
<Divider />
</div>
<List sx={{ py: 0, mt: 3 }}>
<ListItemLink
icon={<SwapCallsIcon htmlColor={theme.palette.primary.main} />}
primary={formatMessage('drawer.flows')}
to={URLS.FLOWS}
onClick={closeOnClick}
/>
<ListItemLink
icon={<AppsIcon htmlColor={theme.palette.primary.main} />}
primary={formatMessage('drawer.apps')}
to={URLS.APPS}
onClick={closeOnClick}
/>
<ListItemLink
icon={<HistoryIcon htmlColor={theme.palette.primary.main} />}
primary={formatMessage('drawer.executions')}
to={URLS.EXECUTIONS}
onClick={closeOnClick}
/>
<ListItemLink
icon={<ExploreIcon htmlColor={theme.palette.primary.main} />}
primary={formatMessage('drawer.explore')}
to={URLS.EXPLORE}
onClick={closeOnClick}
/>
{bottomLinks.map(({ Icon, primary, to }, index) => (
<ListItemLink
key={`${to}-${index}`}
icon={<Icon htmlColor={theme.palette.primary.main} />}
primary={formatMessage(primary)}
to={to}
onClick={closeOnClick}
/>
))}
</List>
<Divider />
</BaseDrawer>
);
}

13
packages/web/src/components/Drawer/style.ts
View File

@@ -1,4 +1,5 @@
import { styled, Theme, CSSObject } from '@mui/material/styles';
import { drawerClasses } from '@mui/material/Drawer';
import MuiSwipeableDrawer from '@mui/material/SwipeableDrawer';
const drawerWidth = 300;
@@ -35,11 +36,19 @@ export const Drawer = styled(MuiSwipeableDrawer)(
boxSizing: 'border-box',
...(open && {
...openedMixin(theme),
'& .MuiDrawer-paper': openedMixin(theme),
[`& .${drawerClasses.paper}`]: {
...openedMixin(theme),
display: 'flex',
justifyContent: 'space-between'
},
}),
...(!open && {
...closedMixin(theme),
'& .MuiDrawer-paper': closedMixin(theme),
[`& .${drawerClasses.paper}`]: {
...closedMixin(theme),
display: 'flex',
justifyContent: 'space-between'
},
}),
}),
);

2
packages/web/src/components/Form/index.tsx
View File

@@ -7,7 +7,7 @@ type FormProps = {
defaultValues?: UseFormProps['defaultValues'];
onSubmit?: SubmitHandler<FieldValues>;
render?: (props: UseFormReturn) => React.ReactNode;
}
};
const noop = () => null;

33
packages/web/src/components/Layout/index.tsx
View File

@@ -1,16 +1,44 @@
import * as React from 'react';
import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar';
import { useTheme } from '@mui/material/styles';
import useMediaQuery from '@mui/material/useMediaQuery';
import AppsIcon from '@mui/icons-material/Apps';
import SwapCallsIcon from '@mui/icons-material/SwapCalls';
import HistoryIcon from '@mui/icons-material/History';
import ExploreIcon from '@mui/icons-material/Explore';
import Box from '@mui/material/Box';
import * as URLS from 'config/urls';
import AppBar from 'components/AppBar';
import Drawer from 'components/Drawer';
import Toolbar from '@mui/material/Toolbar';
type PublicLayoutProps = {
children: React.ReactNode;
}
const drawerLinks = [
{
Icon: SwapCallsIcon,
primary: 'drawer.flows',
to: URLS.FLOWS,
},
{
Icon: AppsIcon,
primary: 'drawer.apps',
to: URLS.APPS,
},
{
Icon: HistoryIcon,
primary: 'drawer.executions',
to: URLS.EXECUTIONS,
},
{
Icon: ExploreIcon,
primary: 'drawer.explore',
to: URLS.EXPLORE,
},
];
export default function PublicLayout({ children }: PublicLayoutProps): React.ReactElement {
const theme = useTheme();
const matchSmallScreens = useMediaQuery(theme.breakpoints.down('lg'), { noSsr: true });
@@ -25,6 +53,7 @@ export default function PublicLayout({ children }: PublicLayoutProps): React.Rea
<Box sx={{ display: 'flex', }}>
<Drawer
links={drawerLinks}
open={isDrawerOpen}
onOpen={openDrawer}
onClose={closeDrawer}

2
packages/web/src/components/ListItemLink/index.tsx
View File

@@ -14,7 +14,7 @@ type ListItemLinkProps = {
export default function ListItemLink(props: ListItemLinkProps): React.ReactElement {
const { icon, primary, to, onClick } = props;
const selected = useMatch({ path: to, end: false });
const selected = useMatch({ path: to, end: true });
const CustomLink = React.useMemo(
() =>

62
packages/web/src/components/SettingsLayout/index.tsx Normal file
View File

@@ -0,0 +1,62 @@
import * as React from 'react';
import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar';
import { useTheme } from '@mui/material/styles';
import useMediaQuery from '@mui/material/useMediaQuery';
import AccountCircleIcon from '@mui/icons-material/AccountCircle';
import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew';
import * as URLS from 'config/urls';
import AppBar from 'components/AppBar';
import Drawer from 'components/Drawer';
type SettingsLayoutProps = {
children: React.ReactNode;
}
const drawerLinks = [
{
Icon: AccountCircleIcon,
primary: 'settingsDrawer.myProfile',
to: URLS.SETTINGS_PROFILE,
},
];
const drawerBottomLinks = [
{
Icon: ArrowBackIosNewIcon,
primary: 'settingsDrawer.goBack',
to: '/',
}
];
export default function SettingsLayout({ children }: SettingsLayoutProps): React.ReactElement {
const theme = useTheme();
const matchSmallScreens = useMediaQuery(theme.breakpoints.down('lg'), { noSsr: true });
const [isDrawerOpen, setDrawerOpen] = React.useState(!matchSmallScreens);
const openDrawer = () => setDrawerOpen(true);
const closeDrawer = () => setDrawerOpen(false);
return (
<>
<AppBar drawerOpen={isDrawerOpen} onDrawerOpen={openDrawer} onDrawerClose={closeDrawer} />
<Box sx={{ display: 'flex', }}>
<Drawer
links={drawerLinks}
bottomLinks={drawerBottomLinks}
open={isDrawerOpen}
onOpen={openDrawer}
onClose={closeDrawer}
/>
<Box sx={{ flex: 1, }}>
<Toolbar />
{children}
</Box>
</Box>
</>
);
}