47 lines
1.4 KiB
JavaScript
47 lines
1.4 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { useRouter } from 'next/router';
|
|
import Page from 'components/layout/Page';
|
|
import MenuLayout from 'components/layout/MenuLayout';
|
|
import WebsiteSettings from '../settings/WebsiteSettings';
|
|
import AccountSettings from '../settings/AccountSettings';
|
|
import ProfileSettings from '../settings/ProfileSettings';
|
|
import { useSelector } from 'react-redux';
|
|
import { FormattedMessage } from 'react-intl';
|
|
|
|
const WEBSITES = '/settings';
|
|
const ACCOUNTS = '/settings/accounts';
|
|
const PROFILE = '/settings/profile';
|
|
|
|
export default function Settings() {
|
|
const user = useSelector(state => state.user);
|
|
const [option, setOption] = useState(WEBSITES);
|
|
const router = useRouter();
|
|
const { pathname } = router;
|
|
|
|
const menuOptions = [
|
|
{
|
|
label: <FormattedMessage id="label.websites" defaultMessage="Websites" />,
|
|
value: WEBSITES,
|
|
},
|
|
{
|
|
label: <FormattedMessage id="label.accounts" defaultMessage="Accounts" />,
|
|
value: ACCOUNTS,
|
|
hidden: !user.is_admin,
|
|
},
|
|
{
|
|
label: <FormattedMessage id="label.profile" defaultMessage="Profile" />,
|
|
value: PROFILE,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<Page>
|
|
<MenuLayout menu={menuOptions} selectedOption={option} onMenuSelect={setOption}>
|
|
{pathname === WEBSITES && <WebsiteSettings />}
|
|
{pathname === ACCOUNTS && <AccountSettings />}
|
|
{pathname === PROFILE && <ProfileSettings />}
|
|
</MenuLayout>
|
|
</Page>
|
|
);
|
|
}
|