Improve ListVersion component

components/versions/list-versions.js

@@ -1,5 +1,4 @@
-
-import * as React from 'react'
+import {forwardRef, useRef, useState} from 'react'
 import PropTypes from 'prop-types'
 import Table from '@mui/material/Table'
 import TableBody from '@mui/material/TableBody'
@@ -11,7 +10,10 @@ 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 = [
   {
@@ -28,15 +30,15 @@ const columns = [
 ]
 
 const VirtuosoTableComponents = {
-  Scroller: React.forwardRef((props, ref) => (
+  Scroller: forwardRef((props, ref) => (
     <TableContainer component={Paper} {...props} ref={ref} />
   )),
   Table: props => (
     <Table {...props} sx={{borderCollapse: 'separate', tableLayout: 'fixed'}} />
   ),
-  TableHead: React.forwardRef((props, ref) => <TableHead {...props} ref={ref} />),
+  TableHead: forwardRef((props, ref) => <TableHead {...props} ref={ref} />),
   TableRow,
-  TableBody: React.forwardRef((props, ref) => <TableBody {...props} ref={ref} />),
+  TableBody: forwardRef((props, ref) => <TableBody {...props} ref={ref} />),
 }
 
 function fixedHeaderContent() {
@@ -57,7 +59,32 @@ function fixedHeaderContent() {
   )
 }
 
-function rowContent(_index, row) {
+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)
+      setIsOpenComparison(true)
+    }
+  }
+
   return (
     <>
       {columns.map(column => (
@@ -65,32 +92,58 @@ function rowContent(_index, row) {
           key={column.dataKey}
           align={column.numeric || false ? 'right' : 'left'}
         >
-          {column.dataKey === 'date_created' ? formatDate(row[column.dataKey], 'Pp') : <Button variant='outlined' color='success'>{row[column.dataKey]}</Button>}
+          {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}) {
+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={rowContent}
-        />
-      </Paper>
-    </Box>
+    <>
+      <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
+  data: PropTypes.array.isRequired,
+  accessToken: PropTypes.string.isRequired,
+  userId: PropTypes.string.isRequired,
+  setError: PropTypes.func.isRequired,
+  setIsErrorAlertOpen: PropTypes.func.isRequired
 }