Untitled

/* -------------------------------------------------------------------------- */
/*                                   Imports                                  */
/* -------------------------------------------------------------------------- */
import React, { useState } from "react";
import "antd/dist/antd.css";
import { useNavigate } from "react-router-dom";
/* ---------------------------------- redux --------------------------------- */
import { useSelector } from "react-redux";
/* ---------------------------- api and constants --------------------------- */
import { roleAccess, localHost } from "../../../services/config";
/* ---------------------------------- antd ---------------------------------- */
import {
  DashboardOutlined,
  UserOutlined,
  CopyOutlined,
  BarChartOutlined,
  PieChartOutlined,
  ToolOutlined,
  SolutionOutlined,
  SafetyCertificateOutlined,
} from "@ant-design/icons";
import { Layout, Menu, Row, Col, Space, Spin } from "antd";
const { Sider } = Layout;

/* -------------------------------------------------------------------------- */
/*                                  SiderMenu                                 */
/* -------------------------------------------------------------------------- */
const SiderMenu = () => {
  console.log("SiderMenu - render");
  const navigate = useNavigate();
  const currentUserPermissions = useSelector(
    (state) => state.workflowManager.currentUserPermissions
  );

  const currentUserDetails = useSelector(
    (state) => state.workflowManager.getCurrentUserDetails
  );
  console.log("check current user Permission", currentUserPermissions);
  console.log("check current user Details sider menu", currentUserDetails);
  const [collapsedSiderMenu, setCollapsedSiderMenu] = useState(false);
  const hasAdminAccess = roleAccess.admin.includes(currentUserDetails.roleId);
  console.log("check admin access", hasAdminAccess);

  if (!currentUserDetails) {
    return (
      <Space size="middle">
        <Spin size="small" />
        <Spin />
        <Spin size="large" />
      </Space>
    );
  }
  const menuItems = [
    {
      label: "Dashboard",
      key: "",
      icon: <DashboardOutlined />,
    },
    {
      label: "Qtech76",
      key: "ReviewSubmission",
      icon: <DashboardOutlined />,
    },
    {
      label: "My Authorisation Details",
      key: "MyAuthorisationDetails",
      icon: <SafetyCertificateOutlined />,
    },
    {
      label: "New Authorisation Details",
      key: "UserAuthDetailsPhase2",
      icon: <SafetyCertificateOutlined />,
    },
    {
      label: "User Management",
      key: "UserManagement",
      icon: <UserOutlined />,
      style: {
        display: hasAdminAccess ? "block" : "none",
      },
    },
    {
      label: "Role Management",
      key: "RoleManagement",
      icon: <CopyOutlined />,
      style: {
        display: hasAdminAccess ? "block" : "none",
      },
    },
    // Temporarily Comment The Path Below
    // {
    //   label: "Category Management",
    //   key: "CategoryManagement",
    //   icon: <PieChartOutlined />,
    //   style: {
    //     display:
    //       currentUserPermissions &&
    //       currentUserPermissions.includes("Permissions.TrainingManagement.View")
    //         ? "block"
    //         : "none",
    //   },
    // },
    // {
    //   label: "Parts Management",
    //   key: "PartsManagement",
    //   icon: <ToolOutlined />,
    //   style: {
    //     display:
    //       currentUserPermissions &&
    //       currentUserPermissions.includes("Permissions.TrainingManagement.View")
    //         ? "block"
    //         : "none",
    //   },
    // },
    {
      label: "User Authorisation",
      key: "UserAuthorisationManagement",
      icon: <SolutionOutlined />,
      style: {
        display: hasAdminAccess ? "block" : "none",
      },
    },
  ];

  return (
    <Sider
      collapsible
      collapsed={collapsedSiderMenu}
      onCollapse={(value) => setCollapsedSiderMenu(value)}
    >
      <Row
        className="logo"
        gutter={(0, 16)}
        onClick={(e) => {
          navigate(`/qtech`);
        }}
      >
        <Col>
          {
            //   window.location === "127.0.0.1" || "localhost" ? (
            //   <img alt="logo" src={window.location.origin + "/Logo.png"} />
            // )
            localHost ? (
              <img alt="logo" src="/Logo.png" />
            ) : (
              <img alt="logo" src="./Logo.png" />
            )
          }
        </Col>
        {!collapsedSiderMenu && <Col>Q-TECH</Col>}
      </Row>
      <Menu
        theme="dark"
        mode="inline"
        items={menuItems}
        onClick={(e) => {
          navigate(`/qtech/${e.key}`);
        }}
      ></Menu>
    </Sider>
  );
};

export default SiderMenu;