Browse Source

Change menu button when user signed up

develop
Apostolos Fanakis 4 years ago
parent
commit
98a2c6723b
  1. 1
      packages/concordia-app/public/locales/en/translation.json
  2. 30
      packages/concordia-app/src/layouts/MainLayout/MainLayoutMenu/index.jsx

1
packages/concordia-app/public/locales/en/translation.json

@ -9,5 +9,6 @@
"register.form.username.field.label": "Username", "register.form.username.field.label": "Username",
"register.form.username.field.placeholder": "Username", "register.form.username.field.placeholder": "Username",
"register.p.account.address": "Account address:", "register.p.account.address": "Account address:",
"topbar.button.profile": "Profile",
"topbar.button.register": "Sign Up" "topbar.button.register": "Sign Up"
} }

30
packages/concordia-app/src/layouts/MainLayout/MainLayoutMenu/index.jsx

@ -1,12 +1,14 @@
import React from 'react'; import React from 'react';
import { withRouter } from 'react-router';
import { Menu } from 'semantic-ui-react'; import { Menu } from 'semantic-ui-react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { useHistory } from 'react-router';
import { connect } from 'react-redux';
import AppContext from '../../../components/AppContext'; import AppContext from '../../../components/AppContext';
import appLogo from '../../../assets/images/app_logo.png'; import appLogo from '../../../assets/images/app_logo.png';
const MainLayoutMenu = (props) => { const MainLayoutMenu = (props) => {
const { history: { push } } = props; const { user: { hasSignedUp } } = props;
const history = useHistory();
const { t } = useTranslation(); const { t } = useTranslation();
return ( return (
@ -18,19 +20,33 @@ const MainLayoutMenu = (props) => {
link link
name="home" name="home"
key="home" key="home"
onClick={() => { push('/'); }} onClick={() => { history.push('/'); }}
> >
<img src={appLogo} alt="app_logo" /> <img src={appLogo} alt="app_logo" />
</Menu.Item> </Menu.Item>
{hasSignedUp
? (
<Menu.Item
link
name="profile"
key="profile"
onClick={() => { history.push('/profile'); }}
position="right"
>
{t('topbar.button.profile')}
</Menu.Item>
)
: (
<Menu.Item <Menu.Item
link link
name="register" name="register"
key="register" key="register"
onClick={() => { push('/auth/register'); }} onClick={() => { history.push('/auth/register'); }}
position="right" position="right"
> >
{t('topbar.button.register')} {t('topbar.button.register')}
</Menu.Item> </Menu.Item>
)}
</Menu> </Menu>
</div> </div>
)} )}
@ -38,4 +54,8 @@ const MainLayoutMenu = (props) => {
); );
}; };
export default withRouter(MainLayoutMenu); const mapStateToProps = (state) => ({
user: state.user,
});
export default connect(mapStateToProps)(MainLayoutMenu);

Loading…
Cancel
Save