pawol.nu/components/soumet/ekri-teks.js

import {useEffect, useState} from 'react'
import PropTypes from 'prop-types'
import axios from 'axios'
import {
  Box,
  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'>
      <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})}
        />
        <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={{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={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