111 lines
2.7 KiB
JavaScript
111 lines
2.7 KiB
JavaScript
import Link from '@material-ui/core/Link';
|
|
import Grid from '@material-ui/core/Grid';
|
|
import GroupIcon from '@material-ui/icons/Group';
|
|
import Box from '@material-ui/core/Box';
|
|
import Typography from '@material-ui/core/Typography';
|
|
import Button from '@material-ui/core/Button';
|
|
import ExitToAppIcon from '@material-ui/icons/ExitToApp';
|
|
import { connect } from 'react-redux';
|
|
import { withStyles } from '@material-ui/styles';
|
|
import { logout } from './reducers/login';
|
|
|
|
const styles = (theme) => {
|
|
return {
|
|
container: {
|
|
width: '100%'
|
|
},
|
|
flexbox: {
|
|
display: 'flex',
|
|
flexGrow: 1,
|
|
width: 'auto'
|
|
},
|
|
buttonWrapper: {
|
|
alignItems: 'flex-end'
|
|
},
|
|
button: {
|
|
alignItems: 'flex-end'
|
|
},
|
|
typography: {
|
|
margin: '5px 0px'
|
|
}
|
|
};
|
|
};
|
|
|
|
const Navbar = (props) => {
|
|
const { classes } = props;
|
|
return (
|
|
<div>
|
|
<Grid container direction='row' alignItems='flex-end' justify='flex-end' className={classes.container}>
|
|
<Grid item className={classes.flexbox}>
|
|
<Box className={classes.flexbox} />
|
|
</Grid>
|
|
<Grid item alignItems='flex-end' justify='flex-end'>
|
|
<LoginLogoutButton className={classes.buttonWrapper} {...props} />
|
|
</Grid>
|
|
</Grid>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const LoginLogoutButton = connect(
|
|
(state) => {
|
|
return {
|
|
token: state.login.token
|
|
};
|
|
},
|
|
(dispatch, props) => {
|
|
return {};
|
|
}
|
|
)(({ children, ...props }) => {
|
|
const { classes } = props;
|
|
return props.token !== undefined ? (
|
|
<>
|
|
<Button
|
|
variant='contained'
|
|
color='primary'
|
|
onClick={() => {
|
|
window.location.pathname = '/account';
|
|
}}
|
|
className={classes.button}>
|
|
<GroupIcon />
|
|
<Typography>Settings</Typography>
|
|
</Button>
|
|
<Button
|
|
variant='contained'
|
|
color='primary'
|
|
onClick={() => {
|
|
props.logout();
|
|
}}
|
|
className={classes.button}>
|
|
<ExitToAppIcon />
|
|
<Typography className={classes.typography}>Log Out</Typography>
|
|
</Button>
|
|
</>
|
|
) : (
|
|
<Button
|
|
variant='contained'
|
|
color='primary'
|
|
fullWidth
|
|
onClick={() => {
|
|
window.location.pathname = '/login';
|
|
}}
|
|
className={classes.button}>
|
|
<ExitToAppIcon />
|
|
<Typography className={classes.typography}>Log In</Typography>
|
|
</Button>
|
|
);
|
|
});
|
|
|
|
export default connect(
|
|
(state, props) => {
|
|
return {};
|
|
},
|
|
(dispatch, props) => {
|
|
return {
|
|
logout: () => {
|
|
dispatch(logout());
|
|
}
|
|
};
|
|
}
|
|
)(withStyles(styles)(Navbar));
|