konstitisyon.nu/components/versions/list-versions.js

import {forwardRef, useRef, useState} from 'react'
import PropTypes from 'prop-types'
import Table from '@mui/material/Table'
import TableBody from '@mui/material/TableBody'
import TableCell from '@mui/material/TableCell'
import TableContainer from '@mui/material/TableContainer'
import TableHead from '@mui/material/TableHead'
import TableRow from '@mui/material/TableRow'
import Paper from '@mui/material/Paper'
import Button from '@mui/material/Button'
import {TableVirtuoso} from 'react-virtuoso'
import {Box, Typography} from '@mui/material'
import LogoutCountdown from '../session/logout-countdown.js'
import VersionDialog from './version-dialog.js'
import {formatDate} from '@/lib/format.js'
import {compareVersion} from '@/lib/directus.js'

const columns = [
  {
    width: 200,
    label: 'Version',
    dataKey: 'name',
  },
  {
    width: 120,
    label: 'Créée le',
    dataKey: 'date_created',
    numeric: true,
  }
]

const VirtuosoTableComponents = {
  Scroller: forwardRef((props, ref) => (
    <TableContainer component={Paper} {...props} ref={ref} />
  )),
  Table: props => (
    <Table {...props} sx={{borderCollapse: 'separate', tableLayout: 'fixed'}} />
  ),
  TableHead: forwardRef((props, ref) => <TableHead {...props} ref={ref} />),
  TableRow,
  TableBody: forwardRef((props, ref) => <TableBody {...props} ref={ref} />),
}

function fixedHeaderContent() {
  return (
    <TableRow>
      {columns.map(column => (
        <TableCell
          key={column.dataKey}
          variant='head'
          align={column.numeric || false ? 'right' : 'left'}
          style={{width: column.width}}
          sx={{backgroundColor: 'background.paper'}}
        >
          {column.label}
        </TableCell>
      ))}
    </TableRow>
  )
}

function rowContent({
  row,
  accessToken,
  userId,
  countdownRef,
  setError,
  setIsErrorAlertOpen,
  setIsOpenComparison,
  setVersionData
}) {
  const handleButtonClick = async versionId => {
    const version = await compareVersion({
      accessToken,
      userId,
      versionId,
      countdownRef,
      setError,
      setIsErrorAlertOpen
    })

    if (version) {
      setVersionData({...version, versionId})
      setIsOpenComparison(true)
    }
  }

  return (
    <>
      {columns.map(column => (
        <TableCell
          key={column.dataKey}
          align={column.numeric || false ? 'right' : 'left'}
        >
          {column.dataKey === 'date_created'
            ? formatDate(row[column.dataKey], 'Pp')
            : <Button variant='outlined' color='success' onClick={() => handleButtonClick(row.id)}>{row[column.dataKey]}</Button>}
        </TableCell>
      ))}
    </>
  )
}

export default function ListVersions({
  collection,
  data,
  accessToken,
  userId,
  setError,
  setIsErrorAlertOpen
}) {
  const countdownRef = useRef()

  const [isOpenComparison, setIsOpenComparison] = useState(false)
  const [versionData, setVersionData] = useState(null)

  return (
    <>
      <Box>
        <Typography variant='button' textAlign='center' sx={{display: 'block', fontWeight: 'bold'}}>
          {collection}
        </Typography>
        <Paper style={{height: 350, width: '100%', marginBlock: 5}}>
          <TableVirtuoso
            data={data}
            components={VirtuosoTableComponents}
            fixedHeaderContent={fixedHeaderContent}
            itemContent={(index, row) => rowContent({
              index, row, accessToken, userId, countdownRef, setError, setIsErrorAlertOpen, setIsOpenComparison, setVersionData
            })}
          />
        </Paper>
      </Box>
      {isOpenComparison && (
        <VersionDialog versionData={versionData} isOpen={isOpenComparison} setIsOpen={setIsOpenComparison} />
      )}
      <LogoutCountdown ref={countdownRef} setError={setError} setIsErrorAlertOpen={setIsErrorAlertOpen} />
    </>
  )
}

ListVersions.propTypes = {
  collection: PropTypes.oneOf(['titres', 'articles']).isRequired,
  data: PropTypes.array.isRequired,
  accessToken: PropTypes.string.isRequired,
  userId: PropTypes.string.isRequired,
  setError: PropTypes.func.isRequired,
  setIsErrorAlertOpen: PropTypes.func.isRequired
}