Create GetVersions component

components/versions/get-versions.js

@@ -0,0 +1,108 @@
+'use client'
+
+import {useState, useRef, useEffect} from 'react'
+import PropTypes from 'prop-types'
+import Grid from '@mui/material/Grid2'
+import Typography from '@mui/material/Typography'
+import Box from '@mui/material/Box'
+import AuthAlert from '../auth-form/auth-alert.js'
+import LogoutCountdown from '../session/logout-countdown.js'
+import {Loading} from '../loading.js'
+import ListVersions from './list-versions.js'
+import {listVersions} from '@/lib/directus.js'
+
+export default function GetVersions({session}) {
+  const {accessToken, userId} = session.user
+
+  const [versions, setVersions] = useState(null)
+  const [isErrorAlertOpen, setIsErrorAlertOpen] = useState(false)
+  const [error, setError] = useState('')
+  const countdownRef = useRef()
+
+  useEffect(() => {
+    async function fetchVersions() {
+      const data = await listVersions({
+        accessToken, userId, countdownRef, setError, setIsErrorAlertOpen
+      })
+      setVersions(data)
+    }
+
+    fetchVersions()
+  }, [accessToken, userId])
+
+  if (!versions) {
+    return (
+      <>
+        {error && <AuthAlert
+          isOpen={isErrorAlertOpen}
+          setIsOpen={setIsErrorAlertOpen}
+          message={error}
+          severity='error'
+        />}
+        <Loading />
+        <LogoutCountdown ref={countdownRef} setError={setError} setIsErrorAlertOpen={setIsErrorAlertOpen} />
+      </>
+    )
+  }
+
+  const titres = versions?.filter(({collection}) => collection === 'titres')
+  const articles = versions?.filter(({collection}) => collection === 'articles')
+
+  return (
+    <>
+      {error && <AuthAlert
+        isOpen={isErrorAlertOpen}
+        setIsOpen={setIsErrorAlertOpen}
+        message={error}
+        severity='error'
+      />}
+
+      <Box
+        sx={{
+          border: '2px solid #ccc',
+          borderRadius: '8px',
+          padding: 1,
+          my: 4
+        }}
+      >
+
+        <Typography
+          gutterBottom
+          variant='h5'
+          component='h2'
+          textAlign='center'
+          sx={{display: 'block', fontWeight: 'bold', textTransform: 'uppercase'}}
+        >
+          Liste des versions
+        </Typography>
+
+        <Grid
+          container
+          spacing={2}
+          justifyContent={
+            (titres.length > 0 && articles.length === 0) || (articles.length > 0 && titres.length === 0)
+              ? 'center'
+              : 'flex-start'
+          }
+        >
+          {titres.length > 0 && (
+            <Grid size={{xs: 12, md: articles.length > 0 ? 6 : 12}}>
+              <ListVersions collection='Titres' data={titres} />
+            </Grid>
+          )}
+
+          {articles.length > 0 && (
+            <Grid size={{xs: 12, md: titres.length > 0 ? 6 : 12}}>
+              <ListVersions collection='Articles' data={articles} />
+            </Grid>
+          )}
+        </Grid>
+      </Box>
+      <LogoutCountdown ref={countdownRef} setError={setError} setIsErrorAlertOpen={setIsErrorAlertOpen} />
+    </>
+  )
+}
+
+GetVersions.propTypes = {
+  session: PropTypes.object.isRequired
+}