houston-fe/src/components/LeftNav/index.tsx

import React, { useState } from 'react';
import cx from 'classnames';
import { useNavigate } from 'react-router-dom';

import { Navbar } from '@navi/web-ui/lib/components';
import DashboardIcon from '@navi/web-ui/lib/icons/DashboardIcon/DashboardIcon';
import NaviNewLogoIcon from '@navi/web-ui/lib/icons/NaviLogoIcon/NaviNewLogoIcon';
import AlertOutlineIcon from '@navi/web-ui/lib/icons/AlertOutlineIcon';
import LeadIcon from '@navi/web-ui/lib/icons/LeadIcon';
import { NavItemType } from '@navi/web-ui/lib/components/Navbar/types';
import { Typography } from '@navi/web-ui/lib/primitives';
import { toast } from '@navi/web-ui/lib/primitives/Toast';
import TeamIcon from '../../assets/TeamIcon';
import JiraDashboardIcon from '@src/assets/JiraDashboardIcon';
import Dialog from '../Dialog';
import styles from './LeftNav.module.scss';
import GroupIcon from '../../assets/GroupIcon';

interface LeftNavProps {
  children?: React.ReactNode;
}

const LeftNav: React.FC<LeftNavProps> = ({ children }) => {
  const navigate = useNavigate();
  const [isExpanded, setIsExpanded] = useState(false);
  const [dialogOpen, setDialogOpen] = useState(false);
  const userDetails = localStorage.getItem('user-data');

  const openDialog = (): void => setDialogOpen(true);
  const closeDialog = (): void => setDialogOpen(false);

  const confirmLogout = (): void => {
    closeDialog();
    localStorage.removeItem('react-token');
    localStorage.removeItem('user-data');
    window.location.reload();
  };

  const handleExpandChange = (isExpanded: boolean): void => {
    setIsExpanded(isExpanded);
  };

  const navItemsList: NavItemType[] = [
    {
      itemType: 'simpleNavItem',
      label: 'Dashboard',
      route: '/',
      Icon: DashboardIcon,
      handleNavigation: () => navigate('/'),
    },
    {
      itemType: 'simpleNavItem',
      label: 'Severity',
      route: '/severity',
      Icon: AlertOutlineIcon,
      handleNavigation: () => navigate('/severity'),
    },
    {
      itemType: 'simpleNavItem',
      label: 'Team',
      route: '/team',
      Icon: LeadIcon,
      handleNavigation: () => navigate('/team'),
    },
    {
      itemType: 'simpleNavItem',
      label: 'Houston metrics',
      route: '/metrics',
      Icon: GroupIcon,
      handleNavigation: () => navigate('/metrics'),
    },
    {
      itemType: 'simpleNavItem',
      label: 'TEAM1',
      route: '/Team-Revamp',
      Icon: TeamIcon,
      handleNavigation: () => navigate('/Team-Revamp'),
    },
    {
      itemType: 'simpleNavItem',
      label: 'Jira dashboard',
      route: '/jiraDashboard',
      Icon: JiraDashboardIcon,
      handleNavigation: () => navigate('/jiraDashboard'),
    },
  ];

  const returnUserData = () => {
    if (userDetails && userDetails?.length) {
      try {
        const parsedUserData = JSON.parse(userDetails);
        return parsedUserData?.preferred_username || 'User';
      } catch (error) {
        console.log(error);
      }
    } else if (window.config.ENVIRONMENT === 'production') {
      if (window.config.DISABLE_UNIVERSAL_AUTH === 'true') {
        toast.error(
          `You don't have access to the portal, Please contact #houston-help slack channel for access.`,
        );
        localStorage.removeItem('react-token');
        setTimeout(() => {
          window.location.reload();
        }, 2000);
      } else {
        return 'User';
      }
    }
  };

  const footerDetails = {
    footerText: returnUserData(),
    options: [
      {
        label: 'Logout',
        handleClick: openDialog,
      },
    ],
  };

  const headerContent: JSX.Element = (
    <div>
      <div className={styles.header}>
        <NaviNewLogoIcon width={28} height={28} />
        {isExpanded && (
          <Typography variant="h3" color="white" style={{ marginTop: '8px' }}>
            Houston UI
          </Typography>
        )}
      </div>
    </div>
  );
  return (
    <>
      <Navbar
        headerContent={headerContent}
        navItemList={navItemsList}
        footer={footerDetails}
        handleNavbarStateChange={handleExpandChange}
      >
        <div
          className={cx(
            styles['page-content-container'],
            isExpanded ? styles['expanded-page-content'] : '',
          )}
        >
          {children}
        </div>
      </Navbar>
      {dialogOpen && (
        <Dialog
          open={dialogOpen}
          onClose={closeDialog}
          header="Logout"
          showFooter
          footerButtons={[
            {
              label: 'Yes',
              onClick: confirmLogout,
            },
            {
              label: 'No',
              onClick: closeDialog,
            },
          ]}
        >
          <div className={styles['dialog-content']}>
            <Typography variant="p3">
              Are you sure you want to logout?
            </Typography>
          </div>
        </Dialog>
      )}
    </>
  );
};

export default LeftNav;