admin-dashboard-web/src/Components/SideMenu/index.js

import {
  AppstoreOutlined,
  FileTextOutlined,
  HistoryOutlined,
  LogoutOutlined,
  ScanOutlined,
  SettingOutlined,
  SnippetsOutlined,
  UsergroupAddOutlined,
} from "@ant-design/icons";
import { Badge, Divider, Menu } from "antd";
import Sider from "antd/es/layout/Sider";
import { useContext, useEffect, useState } from "react";
import { useLocation, useNavigate } from "react-router-dom";
import PropTypes from "prop-types";
import {
  Constants,
  MyAvatar,
  WebSocketContext,
  getUserId,
  hasOnePermission,
  hasPermission,
} from "../../utils";
import { useTranslation } from "react-i18next";

export default function SideMenu({ userSession, setUserSession }) {
  const location = useLocation();
  const [selectedKeys, setSelectedKeys] = useState("/");
  const webSocketContext = useContext(WebSocketContext);
  const { t } = useTranslation();

  useEffect(() => setSelectedKeys(location.pathname), [location.pathname]);

  const navigate = useNavigate();

  const getCurrentUsedScannerName = () => {
    const scannerName = webSocketContext.Scanners.find(
      (scanner) => scanner.UsedByUserId === getUserId()
    )?.Name;

    return scannerName === undefined
      ? t("sideMenu.adminArea.noScannerSelected")
      : scannerName;
  };

  const getFirstMenuItems = () => {
    let items = [
      {
        label: t("sideMenu.dashboard"),
        icon: <AppstoreOutlined />,
        key: "/",
      },
    ];

    let groupTasks = {
      label: t("sideMenu.groupTasks"),
      type: "group",
      children: [
        {
          label: t("sideMenu.groupTasks.overview"),
          icon: <SnippetsOutlined />,
          key: "/group-tasks",
        },
      ],
    };

    if (
      hasPermission(
        webSocketContext.User.Permissions,
        Constants.PERMISSIONS.GROUP_TASKS.HISTORY
      )
    ) {
      groupTasks.children.push({
        label: t("sideMenu.groupTasks.history"),
        icon: <HistoryOutlined />,
        key: "/group-tasks-history",
      });
    }

    items.push(groupTasks);

    items.push({
      type: "divider",
    });

    if (
      hasOnePermission(
        webSocketContext.User.Permissions,
        Constants.PERMISSIONS.ADMIN_AREA.ROLES.CREATE_NEW_ROLE,
        Constants.PERMISSIONS.ADMIN_AREA.ROLES.UPDATE_ROLE,
        Constants.PERMISSIONS.ADMIN_AREA.ROLES.DELETE_ROLE,
        Constants.PERMISSIONS.ADMIN_AREA.ROLES.MOVE_ROLE_UP_DOWN,
        Constants.PERMISSIONS.ADMIN_AREA.LOGS
      )
    ) {
      let adminArea = {
        label: t("sideMenu.adminArea"),
        icon: <SettingOutlined />,
        key: "/admin-area",
        children: [],
      };

      if (
        hasOnePermission(
          webSocketContext.User.Permissions,
          Constants.PERMISSIONS.ADMIN_AREA.ROLES.CREATE_NEW_ROLE,
          Constants.PERMISSIONS.ADMIN_AREA.ROLES.UPDATE_ROLE,
          Constants.PERMISSIONS.ADMIN_AREA.ROLES.DELETE_ROLE,
          Constants.PERMISSIONS.ADMIN_AREA.ROLES.MOVE_ROLE_UP_DOWN
        )
      ) {
        adminArea.children.push({
          label: t("sideMenu.adminArea.roles"),
          icon: <UsergroupAddOutlined />,
          key: "/admin-area/roles",
        });
      }

      if (
        hasPermission(
          webSocketContext.User.Permissions,
          Constants.PERMISSIONS.ADMIN_AREA.LOGS
        )
      ) {
        adminArea.children.push({
          label: t("sideMenu.adminArea.logs"),
          icon: <FileTextOutlined />,
          key: "/admin-area/logs",
        });
      }

      items.push(adminArea);
    }

    return items;
  };

  const getSecondMenuItems = () => {
    let items = [];

    if (
      hasPermission(
        webSocketContext.User.Permissions,
        Constants.PERMISSIONS.SCANNER.USE_SCANNERS
      )
    ) {
      items.push({
        icon: <ScanOutlined />,
        label: getCurrentUsedScannerName(),
        key: "/scanners",
      });
    }

    items.push(
      {
        icon: (
          <Badge
            status={webSocketContext.ConnectionBadgeStatus}
            text={`${webSocketContext.ConnectedWebSocketUsersCount} ${
              webSocketContext.ConnectedWebSocketUsersCount === 1
                ? t("sideMenu.usersCount")
                : t("sideMenu.usersCount.multiple")
            }`}
          />
        ),
        key: "/users",
      },
      {
        label: ` ${webSocketContext.User.Username}`,
        icon: (
          <MyAvatar
            allUsers={webSocketContext.AllUsers}
            userId={webSocketContext.User.Id}
          />
        ),
        key: "/user-profile",
      },
      {
        label: t("sideMenu.logout"),
        icon: <LogoutOutlined />,
        onClick: () => {
          setUserSession();
          window.location.href = "/";

          fetch(`${Constants.API_ADDRESS}/user/auth/logout`, {
            method: "DELETE",
            headers: {
              "Content-Type": "application/json",
              "X-Authorization": userSession,
            },
          }).catch(console.error);
        },
        key: "/",
      }
    );

    return items;
  };

  return (
    <Sider
      theme="light"
      style={{ overflow: "auto", position: "fixed", height: "100vh" }}
    >
      <div
        style={{
          display: "flex",
          justifyContent: "space-between",
          flexDirection: "column",
          height: "100%",
        }}
      >
        <div>
          <div className="CompanyNameContainer">
            <span>C</span>
            <span>O</span>
            <span>M</span>
            <span>P</span>
            <span>A</span>
            <span>N</span>
            <span>Y</span>
          </div>
          <div className="Subtitle">Admin Dashboard</div>
          <Menu
            mode="inline"
            onClick={(item) => {
              navigate(item.key);
            }}
            theme="light"
            selectedKeys={[selectedKeys]}
            items={getFirstMenuItems()}
            defaultOpenKeys={["/admin-area"]}
          />
        </div>
        <div>
          <Divider />

          <Menu
            selectable={false}
            mode="vertical"
            onClick={(item) => navigate(item.key)}
            items={getSecondMenuItems()}
          />
        </div>
      </div>
    </Sider>
  );
}

/*
 <div className="CompanyNameContainer">
  <span>J</span>
  <span>A</span>
  <span>N</span>
  <span>E</span>
  <span>X</span>
</div>
*/

SideMenu.propTypes = {
  setUserSession: PropTypes.func.isRequired,
};