Add AjouteTradiksyon to EkriTeks

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 <MuiAlert elevation={6} variant='filled' {...props} />
 }
 
+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})}
         />
-        <TextField
-          fullWidth
+        {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
-          helperText='Traduction des paroles de la musique'
               style={{marginTop: '1em'}}
-          id='tradiksyon'
-          name='tradiksyon'
-          label='Tradiksyon'
-          value={teksEkri.tradiksyon}
+              id={`tradiksyon-${k}`}
+              name={`tradiksyon-${k}`}
+              label={`${textLabels[k].title}`}
+              value={tradiksyon[k]}
               rows={8}
-          variant='outlined'
-          onChange={event => handleUpdate({tradiksyon: event.target.value})}
+              endAdornment={
+                <InputAdornment position='end'>
+                  <RemoveTooltip title='Effacer la traduction' placement='left'>
+                    <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