UserMenu.tsx

import { AccountCircle } from '@mui/icons-material';
import { Badge, IconButton, Menu, MenuItem } from '@mui/material';
import { useState } from 'react';
import { useAppDispatch, useAppSelector } from '../../../store/hooks';
import { logout, usertokenState } from './usertokenSlice';
import UserTokenDialog from './UserTokenDialog';
import JSZip from 'jszip';
import { clearPrivateProjects, selectProjects } from '../../../features/soil-editor/soileditorSlice';
import FileSaver from 'file-saver';
import { DB_DISABLED } from '../../../const';

const UserMenu = (): JSX.Element => {
  const [anchorEl, setAnchorEl] = useState(null);
  const usertoken = useAppSelector(usertokenState);
  const projects = useAppSelector(selectProjects);
  const [open, setOpen] = useState(false);
  const dispatch = useAppDispatch();

  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const handleMenuClick = (event: any) => {
    setAnchorEl(event.currentTarget);
  };

  const downloadAllProjects = () => {
    const zip = new JSZip();
    Object.entries(projects).forEach(([projectName, project]) => {
      Object.entries(project.files).forEach(([fileName, file]) => {
        zip.file(project.name + "/" + fileName + ".soil", file.textModel);
      });
    });
    zip.generateAsync({ type: 'blob' }).then(function (content) {
      const timestamp = new Date().toISOString();
      if(usertoken.token) FileSaver.saveAs(content, timestamp + "+" + usertoken.token + '.zip');
    });
  };

  return (
    <div>
      <Badge 
        invisible={usertoken.logged_in || DB_DISABLED} 
        badgeContent={'!'} 
        color={'error'}
        overlap={"circular"}
        sx={{mr: 3}}>
      <IconButton
        disabled = {DB_DISABLED}
        size="large"
        aria-controls="menu-appbar"
        aria-haspopup="true"
        onClick={handleMenuClick}
        color="inherit"
      >
        <AccountCircle />
      </IconButton>
      <Menu
        id="menu-appbar"
        anchorEl={anchorEl}
        anchorOrigin={{
          vertical: 'center',
          horizontal: 'center',
        }}
        keepMounted
        transformOrigin={{
          vertical: 'top',
          horizontal: 'right',
        }}
        open={Boolean(anchorEl)}
        onClose={() => setAnchorEl(null)}
      >
        <MenuItem onClick={() => {setOpen(true)}}>
          {usertoken.logged_in ? (
            <>Logged in as: {usertoken.token}</>
          ) : (
            <>Login</>
          )}
        </MenuItem>
        {usertoken.logged_in && <MenuItem onClick={() => {
          dispatch(logout());
          dispatch(clearPrivateProjects());
          }}>Logout</MenuItem>}
        {usertoken.logged_in && <MenuItem onClick={() => {downloadAllProjects()}}>Download all projects</MenuItem>}
        <UserTokenDialog open={open} onClose={()=>{setOpen(false)}}></UserTokenDialog>
      </Menu>
      </Badge>
    </div>
  );
};

export default UserMenu;