MuDBase/client/src/components/appbar/AppBar.tsx

import React from 'react';
import { AppBar as MuiAppBar, Box, Tab as MuiTab, Tabs, IconButton, Typography, Menu, MenuItem } from '@material-ui/core';
import CloseIcon from '@material-ui/icons/Close';
import SearchIcon from '@material-ui/icons/Search';
import LocalOfferIcon from '@material-ui/icons/LocalOffer';
import { Link, useHistory } from 'react-router-dom';
import { WindowType } from '../windows/Windows';
import { useAuth } from '../../lib/useAuth';

export enum AppBarTab {
    Query = 0,
    Tags,
}

export const appBarTabProps: Record<any, any> = {
    [AppBarTab.Query]: {
        label: <Box display="flex"><SearchIcon /><Typography variant="button">Query</Typography></Box>,
        path: "/query",
    },
    [AppBarTab.Tags]: {
        label: <Box display="flex"><LocalOfferIcon /><Typography variant="button">Tags</Typography></Box>,
        path: "/tags",
    },
}

export function UserMenu(props: {
    position: null | number[],
    open: boolean,
    onLogout: () => void,
    onClose: () => void,
}) {
    let auth = useAuth();
    const pos = props.open && props.position ?
        { left: props.position[0], top: props.position[1] }
        : { left: 0, top: 0 }

    return <Menu
        open={props.open}
        anchorReference="anchorPosition"
        anchorPosition={pos}
        keepMounted
        onClose={props.onClose}
    >
        <Box p={2}>
            {auth.user?.email || "Unknown user"}
            <MenuItem
                onClick={() => {
                    props.onClose();
                    props.onLogout();
                }}
            >Sign out</MenuItem>
        </Box>
    </Menu>
}

export default function AppBar(props: {
    selectedTab: AppBarTab | null
}) {
    let history = useHistory();
    let auth = useAuth();

    const [userMenuPos, setUserMenuPos] = React.useState<null | number[]>(null);
    const onOpenUserMenu = (e: any) => {
        setUserMenuPos([e.clientX, e.clientY])
    };
    const onCloseUserMenu = () => {
        setUserMenuPos(null);
    };

    return <>
        <MuiAppBar position="static" style={{ background: 'grey' }}>
            <Box display="flex" alignItems="center">
                <Link to="/">
                    <Box m={0.5} display="flex" alignItems="center">
                        <img height="30px" src={process.env.PUBLIC_URL + "/logo.svg"} alt="error"></img>
                    </Box>
                </Link>
                <Box flexGrow={1}>
                    {auth.user && <Tabs
                        value={props.selectedTab}
                        onChange={(e: any, val: AppBarTab) => history.push(appBarTabProps[val].path)}
                        variant="scrollable"
                        scrollButtons="auto"
                    >
                        {Object.keys(appBarTabProps).map((tab: any, idx: number) => <MuiTab
                            label={appBarTabProps[tab].label}
                            value={idx}
                        />)}
                    </Tabs>}
                </Box>
                {auth.user && <IconButton
                    color="primary"
                    onClick={(e: any) => { onOpenUserMenu(e) }}
                >{auth.user.icon}</IconButton>}
            </Box>
        </MuiAppBar>
        <UserMenu
            position={userMenuPos}
            open={userMenuPos !== null}
            onClose={onCloseUserMenu}
            onLogout={auth.signout}
        />
    </>
}