Create EkriTeks component

components/kont/ekri-teks.js

@@ -0,0 +1,206 @@
+import {useEffect, useState} from 'react'
+import PropTypes from 'prop-types'
+import axios from 'axios'
+import {
+  Button,
+  Container,
+  Grid,
+  LinearProgress,
+  Snackbar,
+  TextField,
+  Typography
+} from '@material-ui/core'
+import MuiAlert from '@material-ui/lab/Alert'
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:1337'
+
+function Alert(props) {
+  return <MuiAlert elevation={6} variant='filled' {...props} />
+}
+
+function EkriTeks({session}) {
+  const {jwt, user} = session
+  const [teksEkri, setTeksEkri] = useState({awtis: '', tit: '', transkripsyon: '', tradiksyon: ''})
+  const [error, setError] = useState('')
+  const [success, setSuccess] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [open, setOpen] = useState(false)
+
+  const handleUpdate = update => {
+    setTeksEkri({...teksEkri, ...update})
+  }
+
+  const handleClose = (event, reason) => {
+    if (reason === 'clickaway') {
+      return
+    }
+
+    setOpen(false)
+    setSuccess('')
+    setError('')
+  }
+
+  const handleClick = () => {
+    setLoading(true)
+    const {awtis, tit, transkripsyon, tradiksyon} = teksEkri
+
+    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: tradiksyon === '' ? null : tradiksyon
+          },
+          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: '', tradiksyon: ''})
+  }
+
+  useEffect(() => {
+    if (success) {
+      setOpen(true)
+      handleReset()
+    }
+  }, [success])
+
+  useEffect(() => {
+    if (error) {
+      setOpen(true)
+    }
+  }, [error])
+
+  return (
+    <Container maxWidth='sm'>
+      <Typography gutterBottom align='center' variant='h4' component='h1'>
+        Soumettre un texte
+      </Typography>
+      <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})}
+        />
+        <TextField
+          fullWidth
+          multiline
+          helperText='Traduction des paroles de la musique'
+          style={{marginTop: '1em'}}
+          id='tradiksyon'
+          name='tradiksyon'
+          label='Tradiksyon'
+          value={teksEkri.tradiksyon}
+          rows={8}
+          variant='outlined'
+          onChange={event => handleUpdate({tradiksyon: event.target.value})}
+        />
+      </form>
+      <div>
+        <Button
+          fullWidth
+          disabled={loading || teksEkri.awtis === '' || teksEkri.tit === '' || teksEkri.transkripsyon === ''}
+          style={{marginTop: 20}}
+          variant='contained'
+          color='primary'
+          onClick={handleClick}
+        >
+          <Typography style={{fontWeight: 'bold'}}>
+            Soumèt
+          </Typography>
+        </Button>
+        {loading && <LinearProgress size={24} style={{width: '100%', marginTop: '1em'}} />}
+      </div>
+      {success && (
+        <Snackbar open={open} autoHideDuration={10000} 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>
+      )}
+    </Container>
+  )
+}
+
+EkriTeks.propTypes = {
+  session: PropTypes.object.isRequired
+}
+
+export default EkriTeks