{"size": 4450, "ext": "js", "max_stars_repo_path": "ui/src/components/navis/quark-navi.js", "max_stars_repo_name": "euonymus-prod/gluons-grandstack", "max_stars_repo_stars_event_min_datetime": "2020-03-12T22:31:56.000Z", "max_stars_repo_stars_event_max_datetime": "2020-03-12T22:31:56.000Z", "max_issues_repo_path": "ui/src/components/navis/quark-navi.js", "max_issues_repo_name": "euonymus-prod/gluons-grandstack", "max_issues_repo_issues_event_min_datetime": "2020-03-20T15:46:18.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-25T18:10:27.000Z", "max_forks_repo_path": "ui/src/components/navis/quark-navi.js", "max_forks_repo_name": "euonymus-prod/gluons-grandstack", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": 22, "max_forks_count": null, "avg_line_length": 29.8657718121, "max_line_length": 79, "alphanum_fraction": 0.6395505618}
import React from "react";
import PropTypes from "prop-types";
import { injectIntl } from "react-intl";
// redux
import { connect } from "react-redux";
import { withRouter } from "react-router-dom";
import { withAuthUser } from "../../providers/session";
import { withFirebase } from "../../providers/firebase";
import * as ROUTES from "../../constants/routes";
import SubmitQuarkDelete from "../submit-quark-delete";
import Util from "../../utils/common";
// import { convertTableForTemporallyUse } from "../../utils/auth-util";
// Material UI
import MenuItem from "@material-ui/core/MenuItem";
import Menu from "@material-ui/core/Menu";
import IconButton from "@material-ui/core/IconButton";
import Badge from "@material-ui/core/Badge";
import AddCircleOutlineIcon from "@material-ui/icons/AddCircleOutline";
import EditIcon from "@material-ui/icons/Edit";
// import DeleteForeverIcon from "@material-ui/icons/DeleteForever";
import ViewListIcon from "@material-ui/icons/ViewList";
import AccountCircle from "@material-ui/icons/AccountCircle";

const util = new Util(false);

const QuarkNavi = props => {
  const { authUser } = props;

  const handleMenuClose = () => {
    props.handleMenuClose();
  };

  const onAddQuarkClick = () => {
    props.history.push(ROUTES.ADD_QUARK);
    handleMenuClose();
  };

  const onEditQuarkClick = () => {
    const quark_id = props.current_quark.id;
    props.history.push(`${ROUTES.EDIT_QUARK_BASE}${quark_id}`);
    handleMenuClose();
  };

  const onListClick = () => {
    props.history.push(ROUTES.LIST);
    handleMenuClose();
  };

  const renderMenuItem = (title, iconComponent, onClick, label) => {
    return (
      <MenuItem onClick={onClick}>
        <IconButton aria-label={label} color="inherit">
          <Badge badgeContent={0} color="secondary">
            {iconComponent}
          </Badge>
        </IconButton>
        <p>{title}</p>
      </MenuItem>
    );
  };
  const renderIconItem = (title, iconComponent, onClick, label) => {
    return (
      <IconButton aria-label={label} onClick={onClick}>
        <Badge badgeContent={0} color="secondary">
          {iconComponent}
        </Badge>
      </IconButton>
    );
  };

  const showEditQuark = () => {
    if (!props.current_quark) {
      return false;
    }
    return props.location.pathname.startsWith(ROUTES.GRAPH_BASE);
  };

  const renderItems = func => {
    const user_id = authUser ? authUser.uid : "";
    const is_admin = authUser ? authUser.is_admin : false;
    const list = props.intl.formatMessage({
      id: "menu_navbar_list",
      defaultMessage: "List"
    });
    const profile = props.intl.formatMessage({
      id: "menu_navbar_profile",
      defaultMessage: "Profile"
    });
    if (!authUser) {
      // NOTE: Fragment is not allowed by Menu component
      return (
        <div>
          {func(list, <ViewListIcon />, onListClick)}
          {func(profile, <AccountCircle />, props.handleProfileMenuOpen)}
        </div>
      );
    }

    return (
      <div>
        {func("Add New Quark", <AddCircleOutlineIcon />, onAddQuarkClick)}
        {showEditQuark() && func("Edit Quark", <EditIcon />, onEditQuarkClick)}
        {showEditQuark() && (
          <SubmitQuarkDelete
            name={util.localedProp(props.current_quark, "name")}
            variables={{ id: props.current_quark.id, user_id, is_admin }}
            withMenu={props.withMenu}
          />
        )}

        {func(list, <ViewListIcon />, onListClick)}
        {func(profile, <AccountCircle />, props.handleProfileMenuOpen)}
      </div>
    );
  };

  if (props.withMenu) {
    return (
      <Menu
        anchorEl={props.anchorEl}
        anchorOrigin={{ vertical: "top", horizontal: "right" }}
        id="primary-search-account-menu-quark"
        keepMounted
        transformOrigin={{ vertical: "top", horizontal: "right" }}
        open={Boolean(props.anchorEl)}
        onClose={handleMenuClose}
      >
        {renderItems(renderMenuItem)}
      </Menu>
    );
  } else {
    return renderItems(renderIconItem);
  }
};

QuarkNavi.propTypes = {
  intl: PropTypes.object.isRequired,
  anchorEl: PropTypes.object,
  handleMenuClose: PropTypes.func.isRequired,
  handleProfileMenuOpen: PropTypes.func.isRequired,
  withMenu: PropTypes.bool.isRequired
};
QuarkNavi.defaultProps = {
  withMenu: false
};
export default connect(state => state)(
  withRouter(withAuthUser(withFirebase(injectIntl(QuarkNavi))))
);
