Change komante to commentaire

components/komante/ekri-komante.js

@@ -11,26 +11,25 @@ import {
 } from '@mui/material'
 import MuiAlert from '@mui/material/Alert'
 
-const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:1337'
+const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:1337/api'
 
 const Alert = forwardRef(function Alert(props, ref) {
   return <MuiAlert ref={ref} elevation={6} variant='filled' {...props} />
 })
-function EkriKomante({session, teks, meteEsKomanteOuve}) {
+function EkriKomante({session, paroleId, meteEsKomanteOuve}) {
   const {jwt, user} = session
-  const {id} = teks
   const [komante, meteKomante] = useState({kontni: ''})
   const [ere, meteEre] = useState('')
   const [sikse, meteSikse] = useState('')
   const [chaje, meteChaje] = useState(false)
   const [esOuve, meteEsOuve] = useState(false)
 
-  const handleClick = () => {
+  const handleClick = async () => {
     meteChaje(true)
     const {kontni} = komante
 
     if (kontni === '') {
-      meteEre({mesaj: 'Champ obligatoire'})
+      meteEre({error: {message: 'Champ obligatoire'}})
       meteChaje(false)
 
       return
@@ -41,21 +40,28 @@ function EkriKomante({session, teks, meteEsKomanteOuve}) {
       Authorization: `Bearer ${jwt}`
     }
 
-    axios.post(`${API_URL}/komante`, {
-      kontni,
-      teks: id,
-      user: user.id
-    }, {
-      headers
-    })
-      .then(() => {
-        meteSikse('Commentaire envoyé avec succès. Il apparaîtra sur le site après validation.')
-        meteChaje(false)
-      })
-      .catch(error => {
-        meteEre(error)
-        meteChaje(false)
+    try {
+      await axios.post(`${API_URL}/commentaires`, {
+        data: {
+          contenu: kontni,
+          parole: paroleId,
+          user: {
+            id: user.id,
+            username: user.username,
+            email: user.email
+          },
+          datePublication: new Date()
+        }
+      }, {
+        headers
       })
+
+      meteSikse('Commentaire envoyé avec succès. Il apparaîtra sur le site après validation.')
+      meteChaje(false)
+    } catch (error) {
+      meteEre(error?.response?.data)
+      meteChaje(false)
+    }
   }
 
   const handleUpdate = useCallback(update => {
@@ -97,10 +103,10 @@ function EkriKomante({session, teks, meteEsKomanteOuve}) {
           fullWidth
           multiline
           required
-          helperText='Votre commentaire (obligatoire)'
+          helperText='*Obligatoire. 500 caractères maximum'
           style={{marginTop: '1em'}}
           id='komante'
-          label='Kòmantè'
+          label='Commentaire'
           value={komante.kontni}
           rows={8}
           variant='outlined'
@@ -123,16 +129,16 @@ function EkriKomante({session, teks, meteEsKomanteOuve}) {
         {chaje && <LinearProgress size={24} style={{width: '100%', marginBlock: '1em'}} />}
       </div>
       {sikse && (
-        <Snackbar open={esOuve} autoHideDuration={3000} onClose={handleClose}>
+        <Snackbar open={esOuve} autoHideDuration={10_000} onClose={handleClose}>
           <Alert severity='success' onClose={handleClose}>
             <strong>{sikse}</strong>
           </Alert>
         </Snackbar>
       )}
       {ere && (
-        <Snackbar open={esOuve} autoHideDuration={3000} onClose={handleClose}>
+        <Snackbar open={esOuve} autoHideDuration={10_000} onClose={handleClose}>
           <Alert severity='error' onClose={handleClose}>
-            <strong>Une erreur s’est produite</strong> : <i>{ere.message}</i>
+            <strong>Une erreur s’est produite</strong> : <i>{ere?.error?.message}</i>
           </Alert>
         </Snackbar>
       )}
@@ -142,7 +148,7 @@ function EkriKomante({session, teks, meteEsKomanteOuve}) {
 
 EkriKomante.propTypes = {
   session: PropTypes.object.isRequired,
-  teks: PropTypes.object.isRequired,
+  paroleId: PropTypes.number.isRequired,
   meteEsKomanteOuve: PropTypes.func.isRequired
 }
 

components/komante/komante-list.js

@@ -35,23 +35,23 @@ const StyledList = styled(List)((
   }
 }))
 
-export default function KomanteList({komante}) {
+export default function KomanteList({commentaires}) {
   return (
     <StyledList className={classes.root}>
-      {komante.map(({id, username, kontni, sentAt}) => (
+      {commentaires.map(({id, attributes}) => (
         <div key={id}>
           <ListItemText
             primary={
-              <Typography gutterBottom style={{fontWeight: 'bold'}} variant='body1'>
-                {username}
+              <Typography gutterBottom style={{textDecoration: 'underline'}} variant='body1'>
+                <small>{attributes.user.data.attributes.username}</small>
               </Typography>
             }
           />
           <ListItemText
-            primary={formatJsonString(kontni)}
+            primary={formatJsonString(attributes.contenu)}
             secondary={
               <Typography gutterBottom style={{marginBlock: 5, fontStyle: 'italic'}} variant='caption' display='block'>
-                {format(new Date(sentAt), 'Pp', {locale: fr})}
+                {format(new Date(attributes.datePublication), 'Pp', {locale: fr})}
               </Typography>
             }
           />
@@ -63,5 +63,5 @@ export default function KomanteList({komante}) {
 }
 
 KomanteList.propTypes = {
-  komante: PropTypes.array.isRequired
+  commentaires: PropTypes.array.isRequired
 }

components/komante/vwe-komante.js

@@ -45,7 +45,7 @@ const Root = styled('div')((
 
 const KomanteTooltip = Tooltip
 
-export default function VweKomante({komante, teks}) {
+export default function VweKomante({commentaires, parole, paroleId}) {
   const [esOuve, meteEsOuve] = useState(false)
   const [esKoneksyonOuve, meteEsKoneksyonOuve] = useState(false)
   const [esKomenteOuve, meteEsKomanteOuve] = useState(false)
@@ -88,7 +88,7 @@ export default function VweKomante({komante, teks}) {
           size='large'
           onClick={handleClick}
         >
-          <Badge badgeContent={komante.length} color='primary'>
+          <Badge badgeContent={commentaires.length} color='primary'>
             <CommentIcon />
           </Badge>
         </IconButton>
@@ -109,8 +109,8 @@ export default function VweKomante({komante, teks}) {
             tabIndex={-1}
             component='div'
           >
-            {komante.length > 0 ? (
-              <KomanteList komante={komante} />
+            {commentaires.length > 0 ? (
+              <KomanteList commentaires={commentaires} />
             ) : (
               <Typography component='div' align='center'>
                 Aucun commentaire
@@ -140,7 +140,7 @@ export default function VweKomante({komante, teks}) {
         )}
         {session && session.user && esKomenteOuve && (
           <>
-            <EkriKomante session={session} teks={teks} meteEsKomanteOuve={meteEsKomanteOuve} />
+            <EkriKomante session={session} parole={parole} paroleId={paroleId} meteEsKomanteOuve={meteEsKomanteOuve} />
             <Button fullWidth style={{marginBottom: 10}} color='primary' onClick={() => meteEsKomanteOuve(false)}>
               Fermer
             </Button>
@@ -152,10 +152,11 @@ export default function VweKomante({komante, teks}) {
 }
 
 VweKomante.defaultProps = {
-  komante: null
+  commentaires: null
 }
 
 VweKomante.propTypes = {
-  komante: PropTypes.array,
-  teks: PropTypes.object.isRequired
+  commentaires: PropTypes.array,
+  parole: PropTypes.object.isRequired,
+  paroleId: PropTypes.number.isRequired
 }