diff --git a/components/kont/ekri-teks.js b/components/kont/ekri-teks.js new file mode 100644 index 0000000..3141cfa --- /dev/null +++ b/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 +} + +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 ( + + + Soumettre un texte + +
+ + + handleUpdate({awtis: event.target.value})} + /> + + + handleUpdate({tit: event.target.value})} + /> + + + handleUpdate({transkripsyon: event.target.value})} + /> + handleUpdate({tradiksyon: event.target.value})} + /> + +
+ + {loading && } +
+ {success && ( + + + {success} + + + )} + {error && ( + + + Une erreur s’est produite : {error.message} + + + )} +
+ ) +} + +EkriTeks.propTypes = { + session: PropTypes.object.isRequired +} + +export default EkriTeks