sigit.io/src/components/FileList/index.tsx

import React from 'react'
import { Button, Menu, MenuItem } from '@mui/material'
import PopupState, { bindTrigger, bindMenu } from 'material-ui-popup-state'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import {
  faCheck,
  faLock,
  faTriangleExclamation
} from '@fortawesome/free-solid-svg-icons'
import { CurrentUserFile } from '../../types/file.ts'
import styles from './style.module.scss'

interface FileListProps {
  files: CurrentUserFile[]
  currentFile: CurrentUserFile
  setCurrentFile: (file: CurrentUserFile) => void
  handleExport?: () => void
  handleEncryptedExport?: () => void
}

const FileList = ({
  files,
  currentFile,
  setCurrentFile,
  handleExport,
  handleEncryptedExport
}: FileListProps) => {
  const isActive = (file: CurrentUserFile) => file.id === currentFile.id
  return (
    <div className={styles.wrap}>
      <ul className={styles.files}>
        {files.map((currentUserFile: CurrentUserFile) => (
          <li
            key={currentUserFile.id}
            className={`${styles.fileItem} ${isActive(currentUserFile) && styles.active}`}
            onClick={() => setCurrentFile(currentUserFile)}
          >
            <div className={styles.fileNumber}>{currentUserFile.id}</div>
            <div className={styles.fileInfo}>
              <div className={styles.fileName}>{currentUserFile.file.name}</div>
            </div>

            <div className={styles.fileVisual}>
              {currentUserFile.isHashValid && (
                <FontAwesomeIcon icon={faCheck} />
              )}
            </div>
          </li>
        ))}
      </ul>

      {(typeof handleExport === 'function' ||
        typeof handleEncryptedExport === 'function') && (
        <PopupState variant="popover" popupId="download-popup-menu">
          {(popupState) => (
            <React.Fragment>
              <Button variant="contained" {...bindTrigger(popupState)}>
                Export files
              </Button>
              <Menu {...bindMenu(popupState)}>
                {typeof handleEncryptedExport === 'function' && (
                  <MenuItem
                    onClick={() => {
                      popupState.close
                      handleEncryptedExport()
                    }}
                  >
                    <FontAwesomeIcon
                      color={'var(--mui-palette-primary-main)'}
                      icon={faLock}
                    />
                    &nbsp; ENCRYPTED
                  </MenuItem>
                )}
                {typeof handleExport === 'function' && (
                  <MenuItem
                    onClick={() => {
                      popupState.close
                      handleExport()
                    }}
                  >
                    <FontAwesomeIcon
                      color={'var(--mui-palette-primary-main)'}
                      icon={faTriangleExclamation}
                    />
                    &nbsp; UNENCRYPTED
                  </MenuItem>
                )}
              </Menu>
            </React.Fragment>
          )}
        </PopupState>
      )}
    </div>
  )
}

export default FileList