Adapt EkriTeks component to ChwaTeks

components/soumet/ekri-teks.js

@@ -1,5 +1,6 @@
 import {useCallback, useEffect, forwardRef, useState} from 'react'
 import {styled} from '@mui/material/styles'
+import PropTypes from 'prop-types'
 import axios from 'axios'
 import {useSession} from 'next-auth/react'
 import {
@@ -20,7 +21,7 @@ import {
   Typography
 } from '@mui/material'
 import MuiAlert from '@mui/material/Alert'
-import CloseIcon from '@mui/icons-material/Close'
+import VisibilityOffIcon from '@mui/icons-material/VisibilityOff'
 
 import AjouteTradiksyon from './ajoute-tradiksyon'
 
@@ -72,7 +73,7 @@ const Alert = forwardRef(function Alert(props, ref) {
 
 const RemoveTooltip = Tooltip
 
-function EkriTeks() {
+function EkriTeks({selectedTeks, setSelectedTeks}) {
   const {data: session} = useSession()
   const {jwt, user} = session
   const [teksEkri, setTeksEkri] = useState({awtis: '', tit: '', transkripsyon: ''})
@@ -81,6 +82,7 @@ function EkriTeks() {
   const [error, setError] = useState('')
   const [success, setSuccess] = useState('')
   const [loading, setLoading] = useState(false)
+  const [currentTeksId, setCurrentTeksId] = useState(null)
   const [open, setOpen] = useState(false)
 
   const handleUpdate = useCallback(update => {
@@ -93,8 +95,7 @@ function EkriTeks() {
 
   const handleRemoveTradiksyon = useCallback(idTradiksyon => {
     setKiChwalang(kiChawLang.filter(t => t !== idTradiksyon))
-    setTradiksyon({[tradiksyon.idTradiksyon]: ''})
-  }, [kiChawLang, setKiChwalang, setTradiksyon, tradiksyon])
+  }, [kiChawLang, setKiChwalang])
 
   const handleClose = (event, reason) => {
     if (reason === 'clickaway') {
@@ -123,48 +124,88 @@ function EkriTeks() {
       Authorization: `Bearer ${jwt}`
     }
 
-    axios.post(`${API_URL}/awtis`, {
-      alias: awtis,
-      user
-    }, {
-      headers
-    })
-      .then(awtisResponse => {
-        axios.post(`${API_URL}/teks`, {
-          tit,
-          transkripsyon,
-          tradiksyon: {
-            francais: fr === '' ? null : fr,
-            english: en === '' ? null : en,
-            espagnol: es === '' ? null : es,
-            deutsch: de === '' ? null : de,
-            italiano: it === '' ? null : it
-          },
-          user,
-          awtis: [awtisResponse.data._id]
-        }, {
-          headers
+    if (currentTeksId) {
+      axios.get(`${API_URL}/teks/${currentTeksId}?_publicationState=preview&_where[published_at_null]=true`)
+        .then(awtisResponse => {
+          if (awtisResponse.data.user._id !== user._id) {
+            setLoading(false)
+            return setError({message: 'Opération non autorisé'})
+          }
+
+          axios.put(`${API_URL}/teks/${currentTeksId}`, {
+            tit,
+            transkripsyon,
+            tradiksyon: {
+              francais: fr === '' ? null : fr,
+              english: en === '' ? null : en,
+              espagnol: es === '' ? null : es,
+              deutsch: de === '' ? null : de,
+              italiano: it === '' ? null : it
+            },
+            user,
+            awtis: awtisResponse.data.awtis.map(id => id)
+          }, {
+            headers
+          })
+            .then(teksResponse => {
+              const {data} = teksResponse
+              setSuccess(`Le texte "${data.tit}" a été modifié avec succès. Il apparaîtra sur le site après validation.`)
+              setLoading(false)
+            })
+            .catch(error => {
+              setError(error)
+              setLoading(false)
+            })
         })
-          .then(teksResponse => {
-            const {data} = teksResponse
-            setSuccess(`Le texte "${data.tit}" a été soumis avec succès. Il apparaîtra sur le site après validation.`)
-            setLoading(false)
-          })
-          .catch(error => {
-            setError(error)
-            setLoading(false)
-          })
-      })
-      .catch(error => {
-        setError(error)
-        setLoading(false)
+        .catch(error => {
+          setError(error)
+          setLoading(false)
+        })
+    } else {
+      axios.post(`${API_URL}/awtis`, {
+        alias: awtis,
+        user
+      }, {
+        headers
       })
+        .then(awtisResponse => {
+          axios.post(`${API_URL}/teks`, {
+            tit,
+            transkripsyon,
+            tradiksyon: {
+              francais: fr === '' ? null : fr,
+              english: en === '' ? null : en,
+              espagnol: es === '' ? null : es,
+              deutsch: de === '' ? null : de,
+              italiano: it === '' ? null : it
+            },
+            user,
+            awtis: [awtisResponse.data._id]
+          }, {
+            headers
+          })
+            .then(teksResponse => {
+              const {data} = teksResponse
+              setSuccess(`Le texte "${data.tit}" a été soumis avec succès. Il apparaîtra sur le site après validation.`)
+              setLoading(false)
+            })
+            .catch(error => {
+              setError(error)
+              setLoading(false)
+            })
+        })
+        .catch(error => {
+          setError(error)
+          setLoading(false)
+        })
+    }
   }
 
   const handleReset = () => {
     setTeksEkri({awtis: '', tit: '', transkripsyon: ''})
     setTradiksyon({fr: '', en: '', es: '', de: '', it: ''})
     setKiChwalang([])
+    setCurrentTeksId(null)
   }
 
   useEffect(() => {
@@ -180,6 +221,59 @@ function EkriTeks() {
     }
   }, [error])
 
+  useEffect(() => {
+    if (selectedTeks) {
+      setCurrentTeksId(selectedTeks._id)
+      setTeksEkri({
+        awtis: new Intl.ListFormat('fr').format(selectedTeks.awtis.map(({alias}) => alias)),
+        tit: selectedTeks.tit,
+        transkripsyon: selectedTeks.transkripsyon
+      })
+      setTradiksyon({
+        fr: selectedTeks.tradiksyon.francais || '',
+        en: selectedTeks.tradiksyon.english || '',
+        es: selectedTeks.tradiksyon.espagnol || '',
+        de: selectedTeks.tradiksyon.deutsch || '',
+        it: selectedTeks.tradiksyon.italiano || ''
+      })
+
+      const jennLangId = () => {
+        const ids = []
+        const {francais, english, espagnol, deutsch, italiano} = selectedTeks.tradiksyon
+
+        if (francais) {
+          ids.push('fr')
+        }
+
+        if (english) {
+          ids.push('en')
+        }
+
+        if (espagnol) {
+          ids.push('es')
+        }
+
+        if (deutsch) {
+          ids.push('de')
+        }
+
+        if (italiano) {
+          ids.push('it')
+        }
+
+        return ids
+      }
+
+      const langIds = jennLangId()
+
+      setKiChwalang(langIds)
+    }
+
+    return () => {
+      setSelectedTeks(null)
+    }
+  }, [teksEkri, selectedTeks, setSelectedTeks, kiChawLang])
+
   return (
     <StyledContainer maxWidth='sm'>
       <Box sx={{textAlign: 'center', marginBottom: 2}}>
@@ -196,6 +290,7 @@ function EkriTeks() {
               name='awtis'
               label='Artiste'
               value={teksEkri.awtis}
+              disabled={Boolean(currentTeksId)}
               variant='outlined'
               helperText='Nom de l’artiste (obligatoire)'
               onChange={event => handleUpdate({awtis: event.target.value})}
@@ -207,7 +302,7 @@ function EkriTeks() {
               id='tit'
               name='tit'
               label='Titre'
-              value={teksEkri.tit}
+              value={selectedTeks?.tit || teksEkri.tit}
               variant='outlined'
               helperText='Titre de la musique (obligatoire)'
               onChange={event => handleUpdate({tit: event.target.value})}
@@ -243,21 +338,20 @@ function EkriTeks() {
               endAdornment={
                 <InputAdornment position='end'>
                   <RemoveTooltip
-                    title='Effacer la traduction'
+                    title='Cacher la fenêtre'
                     placement='left'
                     classes={{
                       tooltip: classes.tooltip
                     }}
                   >
                     <IconButton
-                      color='secondary'
                       style={{bottom: 75}}
                       aria-label='remove-tradiksyon'
                       edge='end'
                       size='large'
                       onClick={() => handleRemoveTradiksyon(k)}
                     >
-                      <CloseIcon />
+                      <VisibilityOffIcon />
                     </IconButton>
                   </RemoveTooltip>
                 </InputAdornment>
@@ -273,7 +367,7 @@ function EkriTeks() {
         <Button
           fullWidth
           disabled={loading || teksEkri.awtis === '' || teksEkri.tit === '' || teksEkri.transkripsyon === ''}
-          style={{marginBlock: 20}}
+          style={{marginTop: 20}}
           variant='contained'
           color='primary'
           onClick={handleClick}
@@ -282,6 +376,18 @@ function EkriTeks() {
             Valider
           </Typography>
         </Button>
+        <Button
+          fullWidth
+          disabled={loading || (teksEkri.awtis === '' && teksEkri.tit === '' && teksEkri.transkripsyon === '')}
+          style={{marginTop: 20}}
+          variant='contained'
+          color='secondary'
+          onClick={handleReset}
+        >
+          <Typography style={{fontWeight: 'bold'}}>
+            Tout effacer
+          </Typography>
+        </Button>
         {loading && <LinearProgress size={24} style={{width: '100%', marginBlock: '1em'}} />}
       </div>
       {success && (
@@ -302,4 +408,13 @@ function EkriTeks() {
   )
 }
 
+EkriTeks.defaultProps = {
+  selectedTeks: null
+}
+
+EkriTeks.propTypes = {
+  selectedTeks: PropTypes.object,
+  setSelectedTeks: PropTypes.func.isRequired,
+}
+
 export default EkriTeks