Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 | import React, { ReactElement } from "react";
import { useHistory } from "react-router-dom";
import { redirect } from "../../background/methods/redirect";
import logo from "../../assets/images/logos/logo.png";
import { Nav, Navbar, NavbarBrand, NavDropdown } from "react-bootstrap";
import { SystemState } from "../../background/redux/actions/sytemState";
import { connect, ConnectedProps } from "react-redux";
import {logout} from "../../background/api/auth";
export interface navBarElement_Interface {
name: string;
text: string;
link: string;
deviantVisibleLink?: string;
logo: string | null;
onClick?: (...sth: any) => any;
}
const mapState = (state: SystemState) => ({
username: state.user.username
});
const connector = connect(mapState);
type PropsFromRedux = ConnectedProps<typeof connector>;
function Header(props: PropsFromRedux): ReactElement {
const history = useHistory();
const navBarElements: navBarElement_Interface[] = [
{
name: "main",
text: "Main",
link: "/",
deviantVisibleLink: "/start",
logo: null
},
{
name: "files",
text: "Files",
link: "/file",
logo: null
},
{
name: "registration",
text: "Registration",
link: "/registration",
logo: null
}
];
const final: ReactElement[] = [];
navBarElements.forEach((element) => {
final.push(
<Nav.Link
className="nav-link nav-item"
key={"navBarElement-" + element.name}
href={element.deviantVisibleLink ?? element.link}
onClick={(event: any) => {
redirect(history, element.link, event);
if (element.onClick) element.onClick();
}}
>
<span />
<span className="navbar-link-description">{element.text}</span>
</Nav.Link>
);
});
return (
<header>
<div className="container">
<Navbar bg="primary" expand="lg" sticky="top">
<NavbarBrand
href="/start"
onClick={(event: any) => {
redirect(history, "/", event);
}}
>
<img
src={logo}
className="d-inline-block align-top"
alt="Logo"
height="30px"
width="auto"
/>
FileFighter
</NavbarBrand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
{props.username && (
<Nav className="navbar-collapse justify-content-end">
{final}
<NavDropdown title={props.username} id="basic-nav-dropdown">
<NavDropdown.Item
href="/profile"
onClick={(event: any) => {
redirect(history, "/profile", event);
}}
>
Profile
</NavDropdown.Item>
<NavDropdown.Item
onClick={(event: any) => {
logout()
}}
>
Logout
</NavDropdown.Item>
</NavDropdown>
</Nav>
)}
</Navbar.Collapse>
</Navbar>
</div>
</header>
);
}
export default connector(Header);
|