{"size": 3037, "ext": "js", "max_stars_repo_path": "frontend/app/src/components/header/ManageAGsButton.js", "max_stars_repo_name": "TDDD96-Kandidatgrupp-1-2020/Visual1ze", "max_stars_repo_stars_event_min_datetime": "2020-05-25T13:30:55.000Z", "max_stars_repo_stars_event_max_datetime": "2021-11-08T13:00:01.000Z", "max_issues_repo_path": "frontend/app/src/components/header/ManageAGsButton.js", "max_issues_repo_name": "matheus-bernat/Visual1ze", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "frontend/app/src/components/header/ManageAGsButton.js", "max_forks_repo_name": "matheus-bernat/Visual1ze", "max_forks_repo_forks_event_min_datetime": "2021-03-30T14:38:40.000Z", "max_forks_repo_forks_event_max_datetime": "2021-03-30T14:38:40.000Z"}
{"max_stars_count": 6, "max_issues_count": null, "max_forks_count": 1, "avg_line_length": 30.6767676768, "max_line_length": 99, "alphanum_fraction": 0.6427395456}
/**
 * UsernameDropdown takes care of the dropdown menu for the user.
 * Based on the role different things will appear.
 */

import React, { useState } from 'react';
import { Button, Menu, MenuItem } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
import { BrowserRouter as Router, Redirect } from 'react-router-dom';
import { withRouter } from 'react-router-dom';
import auth from '../../auth';
import { colorTheme } from '../../App';

// Variable containing styling of components in the render function below.
const useStyles = makeStyles(() => ({
  menuButton: {
    borderRadius: 5,
    color: 'white',
    height: 40,
    fontSize: colorTheme.font.size,
    '&:hover': {
      backgroundColor: colorTheme.palette.primary.dark,
    }
  },
  menuItem: {
    color: 'white',
    height: 40,
    fontSize: colorTheme.font.size,
    backgroundColor: colorTheme.palette.primary.main,
    '&:hover': {
      backgroundColor: colorTheme.palette.primary.dark,
    }
  }
}));

/**
 * This component is the the dropdown menu for ManageAGs. It contains a few different things,
 * like Create AG and view AG.
 * props parameter is passed down from withRouter in order to access browser history.
 */
function ManageAGs(props) {
  const classes = useStyles(); // Get style.
  const [anchorEl, setAnchorEl] = useState(null); // Contains whether the dropdown menu is open.
  // Fetch JSON object containing user information that is stored in the browser's sessionStorage.
  const userInformation = JSON.parse(sessionStorage.getItem("userInformation"));

  /**
   * Handles click outside menu.
   */
  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };

  /**
   * Closes the dropdown menu.
   */
  const handleClose = () => {
    setAnchorEl(null);
  }


  // If not logged in take the user back to loginpage!
  if (!auth.isAuthenticated()) {
    return <Redirect to="/"/>
  }

  /**
   * Redirect page to Create AG page.
   */
  const handleCreateAG = () => {
    props.history.push("/" + userInformation.role + "/create_ag");
  }

  return (
      <Router>
        <div>
          <Button
            className={classes.menuButton} variant='text' color='primary' onClick={handleClick} >
            <b>Manage AGs</b>
          </Button>
          <Menu
            MenuListProps={{ disablePadding: true }}
            getContentAnchorEl={null}
            anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
            transformOrigin={{ vertical: "top", horizontal: "center" }}
            anchorEl={anchorEl}
            keepMounted
            open={Boolean(anchorEl)}
            onClose={handleClose}
          >
            <MenuItem className={classes.menuItem} onClick={handleCreateAG} >Create AG</MenuItem>
          </Menu>
        </div>
      </Router>
  );
} export default withRouter(ManageAGs)
// Exporting the component wrapped around "withRouter" gives the component access to props.history,
// which means that the component can route the users to other pages.
