function TableAssetView()

in src/components/Table/TableAssetView.js [65:197]
113 lines of code
7 McCabe index (conditional complexity)

function TableAssetView(props) {
    const classes = useTableStyle();
    const { 
        bucketName,
        userGroups,
        allGroups,
        selectedPrefix,
        filterState,
        filteredAssets, 
        filterHandler, 
        topLevelSelectedHandler,
        unselectMediaHandler,
        selectAllHandler, 
        selectedMediaAssets, 
        mediaFolders, 
        prefixChangeHandler, 
        deleteFolderHandler,
        rightClickHandler
    } = props;
    const [page, setPage] = useState(0);
    const [rowsPerPage, setRowsPerPage] = useState(10);

    // HANDLERS - ROW SELECTION //
    const handleRequestSort = (event, property) => {
        const orderBy = property;
        let order = 'desc';

        if (filterState['orderBy'] === property && filterState['order'] === 'desc') {
            order = 'asc';
        };

        let out = stableSort(filteredAssets, getComparator(order, orderBy))

        filterHandler(orderBy, order, out);
    };
    
    const handleSelectAllClick = event => {
        if (event.target.checked) {
            const newSelected = filteredAssets.map(n => n);
            selectAllHandler(newSelected);
        } else {
            unselectMediaHandler();
        }
    };

    // HANDLERS - PAGINATION //
    const handleChangePage = (event, newPage) => {
        setPage(newPage);
    };
    
    const handleChangeRowsPerPage = event => {
        setRowsPerPage(parseInt(event.target.value, 10));
        setPage(0);
    };

    const selectedAssetsHandler = (asset, isFolder=false) => {
        topLevelSelectedHandler(asset, isFolder);
    };

    const localRightClickHandler = (event, asset, isFolder=false) => {
        rightClickHandler(event, asset, isFolder);
    };

    const isSelected = (objKey) => {
        let selectedIndex = -1;
        if (selectedMediaAssets !== undefined ) {
            selectedIndex = selectedMediaAssets.findIndex((val) => {
                return val.key === objKey;
            });
            return selectedIndex !== -1;
        }
        return false;
    };

    const emptyRows = rowsPerPage - Math.min(rowsPerPage, filteredAssets.length + mediaFolders.length - page * rowsPerPage);

    return (
        <Paper className={classes.paper}>
            <TableContainer>
                <Table>
                    <TableAssetHeaderView
                        classes={classes}
                        numSelected={selectedMediaAssets.length === undefined ? 0 : selectedMediaAssets.length}
                        order={filterState['order']}
                        orderBy={filterState['orderBy']}
                        onSelectAllClick={handleSelectAllClick}
                        onRequestSort={handleRequestSort}
                        rowCount={filteredAssets.length}
                    />
                    <TableBody>
                    {mediaFolders
                        .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
                        .map((folder, index) => {
                            const labelId = `enhanced-table-checkbox-${index}`;
                            return (
                                <TableFolder bucketName={bucketName} key={folder.objKey} allGroups={allGroups} userGroups={userGroups} folder={folder} labelId={labelId} deleteHandler={deleteFolderHandler} prefixHandler={prefixChangeHandler} />
                            );
                    })}

                    {filteredAssets
                        .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
                        .map((asset, index) => {
                            const labelId = `enhanced-table-checkbox-${index}`;
                            const { key } = getBucketKey(asset.bucketObjKey);

                            return (
                                <TableAsset key={asset.bucketObjKey} asset={asset} labelId={labelId} selected={isSelected(key)} selectedHandler={selectedAssetsHandler} rightClickHandler={localRightClickHandler}/>
                            );
                        })}
                        {emptyRows > 0 && (
                            <TableRow style={{ height: 20 * emptyRows }}>
                                <TableCell colSpan={8} />
                            </TableRow>
                        )}
                    
                    </TableBody>
                </Table>
            </TableContainer>


            <TablePagination
                rowsPerPageOptions={[5, 10, 25, 30]}
                component="div"
                count={filteredAssets.length + mediaFolders.length}
                rowsPerPage={rowsPerPage}
                page={page}
                onChangePage={handleChangePage}
                onChangeRowsPerPage={handleChangeRowsPerPage}
            />
        </Paper>
    );

};