Cédric FAMIBELLE-PRONZOLA
299 lines
8.3 KiB
JavaScript
299 lines
8.3 KiB
JavaScript
import {useCallback, useEffect, useState} from 'react'
|
||
import {styled} from '@mui/material/styles'
|
||
import PropTypes from 'prop-types'
|
||
import axios from 'axios'
|
||
import {
|
||
Box,
|
||
Button,
|
||
Container,
|
||
FormControl,
|
||
FormHelperText,
|
||
Grid,
|
||
IconButton,
|
||
InputAdornment,
|
||
InputLabel,
|
||
LinearProgress,
|
||
OutlinedInput,
|
||
Snackbar,
|
||
TextField,
|
||
Tooltip,
|
||
Typography
|
||
} from '@material-ui/core'
|
||
import MuiAlert from '@material-ui/lab/Alert'
|
||
import CloseIcon from '@material-ui/icons/Close'
|
||
|
||
import AjouteTradiksyon from './ajoute-tradiksyon'
|
||
|
||
const PREFIX = 'EkriTeks'
|
||
|
||
const classes = {
|
||
tooltip: `${PREFIX}-tooltip`
|
||
}
|
||
|
||
const StyledContainer = styled(Container)(() => ({
|
||
[`& .${classes.tooltip}`]: {
|
||
fontSize: 18
|
||
}
|
||
}))
|
||
|
||
const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:1337'
|
||
|
||
const textLabels = {
|
||
fr: {
|
||
title: 'Traduction',
|
||
help: 'Traduction des paroles de la musique',
|
||
emoji: '🇫🇷'
|
||
},
|
||
en: {
|
||
title: 'Translation',
|
||
help: 'Translation of music lyrics',
|
||
emoji: '🇬🇧'
|
||
},
|
||
es: {
|
||
title: 'Traducción',
|
||
help: 'Traducción de la letra de la música',
|
||
emoji: '🇪🇸'
|
||
}
|
||
}
|
||
|
||
function Alert(props) {
|
||
return <MuiAlert elevation={6} variant='filled' {...props} />
|
||
}
|
||
|
||
const RemoveTooltip = Tooltip
|
||
|
||
function EkriTeks({session}) {
|
||
const {jwt, user} = session
|
||
const [teksEkri, setTeksEkri] = useState({awtis: '', tit: '', transkripsyon: ''})
|
||
const [tradiksyon, setTradiksyon] = useState({fr: '', en: '', es: ''})
|
||
const [kiChawLang, setKiChwalang] = useState([])
|
||
const [error, setError] = useState('')
|
||
const [success, setSuccess] = useState('')
|
||
const [loading, setLoading] = useState(false)
|
||
const [open, setOpen] = useState(false)
|
||
|
||
const handleUpdate = useCallback(update => {
|
||
setTeksEkri({...teksEkri, ...update})
|
||
}, [teksEkri])
|
||
|
||
const handleUpdateTradiksyon = useCallback(update => {
|
||
setTradiksyon({...tradiksyon, ...update})
|
||
}, [tradiksyon])
|
||
|
||
const handleRemoveTradiksyon = useCallback(idTradiksyon => {
|
||
setKiChwalang(kiChawLang.filter(t => t !== idTradiksyon))
|
||
setTradiksyon({[tradiksyon.idTradiksyon]: ''})
|
||
}, [kiChawLang, setKiChwalang, setTradiksyon, tradiksyon])
|
||
|
||
const handleClose = (event, reason) => {
|
||
if (reason === 'clickaway') {
|
||
return
|
||
}
|
||
|
||
setOpen(false)
|
||
setSuccess('')
|
||
setError('')
|
||
}
|
||
|
||
const handleClick = () => {
|
||
setLoading(true)
|
||
const {awtis, tit, transkripsyon} = teksEkri
|
||
const {fr, en, es} = tradiksyon
|
||
|
||
if (teksEkri.awtis === '' || teksEkri.tit === '' || teksEkri.transkripsyon === '') {
|
||
setError({message: 'Certains champs sont obligatoires'})
|
||
setLoading(false)
|
||
|
||
return
|
||
}
|
||
|
||
const headers = {
|
||
'content-type': 'application/json',
|
||
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
|
||
},
|
||
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: ''})
|
||
setKiChwalang([])
|
||
}
|
||
|
||
useEffect(() => {
|
||
if (success) {
|
||
setOpen(true)
|
||
handleReset()
|
||
}
|
||
}, [success])
|
||
|
||
useEffect(() => {
|
||
if (error) {
|
||
setOpen(true)
|
||
}
|
||
}, [error])
|
||
|
||
return (
|
||
<StyledContainer maxWidth='sm'>
|
||
<Box align='center' marginBottom={2}>
|
||
<Typography display='inline' variant='h5' component='h1'>
|
||
Soumèt an tèks
|
||
</Typography>
|
||
<Typography>
|
||
<small>(soumettre un texte)</small>
|
||
</Typography>
|
||
</Box>
|
||
<form noValidate autoComplete='off'>
|
||
<Grid container style={{textAlign: 'center'}} spacing={1}>
|
||
<Grid item xs>
|
||
<TextField
|
||
required
|
||
id='awtis'
|
||
name='awtis'
|
||
label='Awtis'
|
||
value={teksEkri.awtis}
|
||
variant='outlined'
|
||
helperText='Nom de l’artiste (obligatoire)'
|
||
onChange={event => handleUpdate({awtis: event.target.value})}
|
||
/>
|
||
</Grid>
|
||
<Grid item xs>
|
||
<TextField
|
||
required
|
||
id='tit'
|
||
name='tit'
|
||
label='Tit'
|
||
value={teksEkri.tit}
|
||
variant='outlined'
|
||
helperText='Titre de la musique (obligatoire)'
|
||
onChange={event => handleUpdate({tit: event.target.value})}
|
||
/>
|
||
</Grid>
|
||
</Grid>
|
||
<TextField
|
||
fullWidth
|
||
multiline
|
||
required
|
||
helperText='Transcription des paroles de la musique (obligatoire)'
|
||
style={{marginTop: '1em'}}
|
||
id='transkripsyon'
|
||
label='Transkripsyon'
|
||
value={teksEkri.transkripsyon}
|
||
rows={8}
|
||
variant='outlined'
|
||
onChange={event => handleUpdate({transkripsyon: event.target.value})}
|
||
/>
|
||
{kiChawLang.length > 0 && kiChawLang.map(k => (
|
||
<FormControl key={k} fullWidth style={{marginBlock: 10}}>
|
||
<InputLabel htmlFor={`tradiksyon-${k}`}>
|
||
<span dangerouslySetInnerHTML={{__html: textLabels[k].emoji}} /> {textLabels[k].title}
|
||
</InputLabel>
|
||
<OutlinedInput
|
||
multiline
|
||
style={{marginTop: '1em'}}
|
||
id={`tradiksyon-${k}`}
|
||
name={`tradiksyon-${k}`}
|
||
label={`${textLabels[k].title}`}
|
||
value={tradiksyon[k]}
|
||
rows={8}
|
||
endAdornment={
|
||
<InputAdornment position='end'>
|
||
<RemoveTooltip
|
||
title='Effacer la traduction'
|
||
placement='left'
|
||
classes={{
|
||
tooltip: classes.tooltip
|
||
}}
|
||
>
|
||
<IconButton
|
||
color='secondary'
|
||
style={{bottom: 75}}
|
||
aria-label='remove-tradiksyon'
|
||
edge='end'
|
||
onClick={() => handleRemoveTradiksyon(k)}
|
||
>
|
||
<CloseIcon />
|
||
</IconButton>
|
||
</RemoveTooltip>
|
||
</InputAdornment>
|
||
}
|
||
onChange={event => handleUpdateTradiksyon({[k]: event.target.value})}
|
||
/>
|
||
<FormHelperText id={`tradiksyon-${k}`}>{textLabels[k].help}</FormHelperText>
|
||
</FormControl>
|
||
))}
|
||
</form>
|
||
<AjouteTradiksyon chwaLang={kiChawLang} setChwaLang={setKiChwalang} />
|
||
<div>
|
||
<Button
|
||
fullWidth
|
||
disabled={loading || teksEkri.awtis === '' || teksEkri.tit === '' || teksEkri.transkripsyon === ''}
|
||
style={{marginBlock: 20}}
|
||
variant='contained'
|
||
color='primary'
|
||
onClick={handleClick}
|
||
>
|
||
<Typography style={{fontWeight: 'bold'}}>
|
||
Soumèt
|
||
</Typography>
|
||
</Button>
|
||
{loading && <LinearProgress size={24} style={{width: '100%', marginBlock: '1em'}} />}
|
||
</div>
|
||
{success && (
|
||
<Snackbar open={open} autoHideDuration={10_000} onClose={handleClose}>
|
||
<Alert severity='success' onClose={handleClose}>
|
||
<strong>{success}</strong>
|
||
</Alert>
|
||
</Snackbar>
|
||
)}
|
||
{error && (
|
||
<Snackbar open={open} autoHideDuration={6000} onClose={handleClose}>
|
||
<Alert severity='error' onClose={handleClose}>
|
||
<strong>Une erreur s’est produite</strong> : <i>{error.message}</i>
|
||
</Alert>
|
||
</Snackbar>
|
||
)}
|
||
</StyledContainer>
|
||
)
|
||
}
|
||
|
||
EkriTeks.propTypes = {
|
||
session: PropTypes.object.isRequired
|
||
}
|
||
|
||
export default EkriTeks
|