diff --git a/components/soumet/ekri-teks.js b/components/soumet/ekri-teks.js index 9b967ac..80f06b3 100644 --- a/components/soumet/ekri-teks.js +++ b/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 ( @@ -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={ handleRemoveTradiksyon(k)} > - + @@ -273,7 +367,7 @@ function EkriTeks() { + {loading && } {success && ( @@ -302,4 +408,13 @@ function EkriTeks() { ) } +EkriTeks.defaultProps = { + selectedTeks: null +} + +EkriTeks.propTypes = { + selectedTeks: PropTypes.object, + setSelectedTeks: PropTypes.func.isRequired, +} + export default EkriTeks