diff --git a/components/soumet/ekri-teks.js b/components/soumet/ekri-teks.js index 499aa3f..84f608d 100644 --- a/components/soumet/ekri-teks.js +++ b/components/soumet/ekri-teks.js @@ -1,35 +1,81 @@ -import {useEffect, useState} from 'react' +import {useCallback, useEffect, useState} from 'react' import PropTypes from 'prop-types' import axios from 'axios' import { Box, Button, Container, + FormControl, + FormHelperText, Grid, + IconButton, + InputAdornment, + InputLabel, LinearProgress, + OutlinedInput, Snackbar, TextField, - Typography + Tooltip, + Typography, + withStyles } from '@material-ui/core' import MuiAlert from '@material-ui/lab/Alert' +import CloseIcon from '@material-ui/icons/Close' + +import AjouteTradiksyon from './ajoute-tradiksyon' 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 } +const RemoveTooltip = withStyles(() => ({ + tooltip: { + fontSize: 18 + } +}))(Tooltip) + function EkriTeks({session}) { const {jwt, user} = session - const [teksEkri, setTeksEkri] = useState({awtis: '', tit: '', transkripsyon: '', tradiksyon: ''}) + 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 = update => { + 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') { @@ -43,7 +89,8 @@ function EkriTeks({session}) { const handleClick = () => { setLoading(true) - const {awtis, tit, transkripsyon, tradiksyon} = teksEkri + const {awtis, tit, transkripsyon} = teksEkri + const {fr, en, es} = tradiksyon if (teksEkri.awtis === '' || teksEkri.tit === '' || teksEkri.transkripsyon === '') { setError({message: 'Certains champs sont obligatoires'}) @@ -68,7 +115,9 @@ function EkriTeks({session}) { tit, transkripsyon, tradiksyon: { - francais: tradiksyon === '' ? null : tradiksyon + francais: fr === '' ? null : fr, + english: en === '' ? null : en, + espagnol: es === '' ? null : es }, user, awtis: [awtisResponse.data._id] @@ -92,7 +141,9 @@ function EkriTeks({session}) { } const handleReset = () => { - setTeksEkri({awtis: '', tit: '', transkripsyon: '', tradiksyon: ''}) + setTeksEkri({awtis: '', tit: '', transkripsyon: ''}) + setTradiksyon({fr: '', en: '', es: ''}) + setKiChwalang([]) } useEffect(() => { @@ -158,20 +209,41 @@ function EkriTeks({session}) { variant='outlined' onChange={event => handleUpdate({transkripsyon: event.target.value})} /> - handleUpdate({tradiksyon: event.target.value})} - /> + {kiChawLang.length > 0 && kiChawLang.map(k => ( + + + {textLabels[k].title} + + + + handleRemoveTradiksyon(k)} + > + + + + + } + onChange={event => handleUpdateTradiksyon({[k]: event.target.value})} + /> + {textLabels[k].help} + + ))} +