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