resources/js/components/common/Header.js

   1 import PropTypes from 'prop-types';
   2 import React from 'react';
   3 import { Button, Container, Nav, Navbar } from 'react-bootstrap';
   4 import { LinkContainer } from 'react-router-bootstrap';
   5 import { useLocation } from 'react-router-dom';
   6 import { useTranslation } from 'react-i18next';
   7
   8 import Icon from './Icon';
   9 import LanguageSwitcher from './LanguageSwitcher';
  10 import { getAvatarUrl } from '../../helpers/User';
  11 import { withUser } from '../../helpers/UserContext';
  12
  13 const Header = ({ doLogout, user }) => {
  14         const { pathname } = useLocation();
  15         const { t } = useTranslation();
  16
  17         return <Navbar id="header" bg="dark" variant="dark">
  18                 <Container fluid>
  19                         <LinkContainer to="/">
  20                                 <Navbar.Brand>
  21                                         ALttP
  22                                 </Navbar.Brand>
  23                         </LinkContainer>
  24                         <Nav activeKey={pathname}>
  25                                 <LinkContainer to="/tournaments/6">
  26                                         <Nav.Link href="/tournaments/6">
  27                                                 ALttPR Weekly
  28                                         </Nav.Link>
  29                                 </LinkContainer>
  30                                 <LinkContainer to="/tournaments/5">
  31                                         <Nav.Link href="/tournaments/5">
  32                                                 Super Metroid
  33                                         </Nav.Link>
  34                                 </LinkContainer>
  35                         </Nav>
  36                         <Nav activeKey={pathname} className="ms-auto">
  37                                 <LinkContainer to="/tech">
  38                                         <Nav.Link href="/tech">
  39                                                 {t('menu.tech')}
  40                                         </Nav.Link>
  41                                 </LinkContainer>
  42                                 <LinkContainer to="/map">
  43                                         <Nav.Link href="/map">
  44                                                 {t('menu.map')}
  45                                         </Nav.Link>
  46                                 </LinkContainer>
  47                         </Nav>
  48                         <Navbar.Text className="mx-2">
  49                                 <LanguageSwitcher />
  50                         </Navbar.Text>
  51                         <Nav>
  52                                 {user ?
  53                                         <>
  54                                                 <LinkContainer to={`/users/${user.id}`}>
  55                                                         <Nav.Link>
  56                                                                 <img alt="" src={getAvatarUrl(user)} />
  57                                                                 {user.username}
  58                                                                 <span className="text-muted">#{user.discriminator}</span>
  59                                                         </Nav.Link>
  60                                                 </LinkContainer>
  61                                                 <Button
  62                                                         onClick={doLogout}
  63                                                         title={t('button.logout')}
  64                                                         variant="outline-secondary"
  65                                                 >
  66                                                         <Icon.LOGOUT title="" />
  67                                                 </Button>
  68                                         </>
  69                                 :
  70                                         <Button
  71                                                 href="/login"
  72                                                 onClick={() => {
  73                                                         if (location.pathname.length > 1) {
  74                                                                 localStorage.setItem('returnPath', location.pathname.substr(1));
  75                                                         }
  76                                                 }}
  77                                                 variant="discord"
  78                                         >
  79                                                 <Icon.DISCORD />
  80                                                 {' '}
  81                                                 {t('button.login')}
  82                                         </Button>
  83                                 }
  84                         </Nav>
  85                 </Container>
  86         </Navbar>;
  87 };
  88
  89 Header.propTypes = {
  90         doLogout: PropTypes.func,
  91         user: PropTypes.shape({
  92                 avatar: PropTypes.string,
  93                 discriminator: PropTypes.string,
  94                 id: PropTypes.string,
  95                 username: PropTypes.string,
  96         }),
  97 };
  98
  99 export default withUser(Header);