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}
+
+ ))}
+