PNSPS-frontend-MaterialUI/src/pages/authentication/auth-forms/UploadFileTable.js

// material-ui
import RemoveCircleOutlineIcon from '@mui/icons-material/RemoveCircleOutline';
import * as React from 'react';
import { useEffect } from "react";
import {
    Box,
    IconButton,
    Stack,
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableRow,
    Typography
} from '@mui/material';
import { FormattedMessage, useIntl } from "react-intl";
// ==============================|| EVENT TABLE ||============================== //

export default function UploadFileTable({ recordList, setUpdateRows, }) {

    const [rows, setRows] = React.useState(recordList);

    const intl = useIntl();

    useEffect(() => {
        setRows(recordList);
    }, [recordList]);

    const handleCancelClick = (id) => {
        setRows((prevRows) => {
            const newRows = prevRows.filter((row) => row.id !== id);
            setUpdateRows(newRows);
            return newRows;
        });
    };

    const formatFileSize = (size) => `${Math.ceil(size / 1024)} KB`;

    if (rows.length === 0) {
        return (
            <Box
                sx={{
                    height: '200px',
                    width: '100%',
                    border: 1,
                    borderColor: 'divider',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                }}
            >
                <Typography variant="h6">
                    <FormattedMessage id="noFile"/>
                </Typography>
            </Box>
        );
    }

    return (
        <Box sx={{ height: '200px', width: '100%', border: 1, borderColor: 'divider', overflow: 'auto' }}>
            <Table size="small" aria-label={intl.formatMessage({ id: 'fileName' })}>
                <TableHead>
                    <TableRow>
                        <TableCell padding="checkbox" sx={{ width: 48 }} />
                        <TableCell>{intl.formatMessage({ id: 'fileName' })}</TableCell>
                        <TableCell align="right">{intl.formatMessage({ id: 'fileSize' })}</TableCell>
                    </TableRow>
                </TableHead>
                <TableBody>
                    {rows.map((row) => (
                        <TableRow key={row.id}>
                            <TableCell padding="checkbox">
                                <IconButton
                                    size="small"
                                    color="error"
                                    role="button"
                                    aria-label={intl.formatMessage({ id: 'delete' })}
                                    onClick={() => handleCancelClick(row.id)}
                                >
                                    <RemoveCircleOutlineIcon fontSize="small" />
                                </IconButton>
                            </TableCell>
                            <TableCell>
                                <Stack direction="row" alignItems="center">
                                    <Typography variant="body2">{row.name}</Typography>
                                </Stack>
                            </TableCell>
                            <TableCell align="right">
                                <Typography variant="body2">{formatFileSize(row.size)}</Typography>
                            </TableCell>
                        </TableRow>
                    ))}
                </TableBody>
            </Table>
        </Box>
    );
}