128 lines
3.7 KiB
JavaScript
128 lines
3.7 KiB
JavaScript
import {useState, useEffect, forwardRef} from 'react'
|
||
import PropTypes from 'prop-types'
|
||
import {useSession} from 'next-auth/react'
|
||
import MuiAlert from '@mui/material/Alert'
|
||
import Snackbar from '@mui/material/Snackbar'
|
||
import Box from '@mui/material/Box'
|
||
|
||
import HeadLayout from '../components/head-layout'
|
||
import Koneksyon from '../components/sesyon/koneksyon'
|
||
import Dekoneksyon from '../components/sesyon/dekoneksyon'
|
||
import EkriTeks from '../components/soumet/ekri-teks'
|
||
import Footer from '../components/footer'
|
||
|
||
import {jwennUserEpiToken, jwennUserEpiUsername} from '../lib/oki-api'
|
||
import NewPassword from '../components/password/new-password'
|
||
import ChwaTeks from '../components/soumet/chwa-teks'
|
||
|
||
const Alert = forwardRef(function Alert(props, ref) {
|
||
return <MuiAlert ref={ref} elevation={6} variant='filled' {...props} />
|
||
})
|
||
|
||
export default function Soumet({code}) {
|
||
const {data: session} = useSession()
|
||
const [localUsername, setLocalUsername] = useState(null)
|
||
const [username, setUsername] = useState(null)
|
||
const [open, setOpen] = useState(true)
|
||
const [selectedTeks, setSelectedTeks] = useState(null)
|
||
const [canAutoTranslate, setCanAutoTranslate] = useState(false)
|
||
|
||
const handleClose = (event, reason) => {
|
||
if (reason === 'clickaway') {
|
||
return
|
||
}
|
||
|
||
setOpen(false)
|
||
}
|
||
|
||
useEffect(() => {
|
||
if (session?.jwt) {
|
||
const getUser = async token => {
|
||
const user = await jwennUserEpiToken(token)
|
||
setCanAutoTranslate(user.canAutoTranslate)
|
||
}
|
||
|
||
getUser(session.jwt)
|
||
}
|
||
})
|
||
|
||
useEffect(() => {
|
||
if (localStorage.getItem('username')) {
|
||
const username = localStorage.getItem('username')
|
||
setLocalUsername(username)
|
||
}
|
||
}, [])
|
||
|
||
useEffect(() => {
|
||
if (localUsername) {
|
||
const getUser = async username => {
|
||
const user = await jwennUserEpiUsername(username)
|
||
setUsername(user?.username)
|
||
}
|
||
|
||
getUser(localUsername)
|
||
}
|
||
}, [localUsername])
|
||
|
||
useEffect(() => {
|
||
if (username && localStorage.getItem('username')) {
|
||
localStorage.removeItem('username')
|
||
}
|
||
}, [username])
|
||
|
||
return (
|
||
<HeadLayout title='Soumèt - Soumettre un texte' summary='Proposez la transcription d’un texte, accompagnée d’une ou plusieurs traductions.' tab={3} slug='soumet'>
|
||
<Box sx={{display: 'flex', flexDirection: 'column', minHeight: '100vh'}}>
|
||
<Box sx={{flexGrow: 1, marginTop: 1, marginBottom: 10}}>
|
||
{!session && !code && (
|
||
<Koneksyon
|
||
chimen='/soumet'
|
||
/>
|
||
)}
|
||
|
||
{!session && code && (
|
||
<NewPassword code={code} />
|
||
)}
|
||
{session && session.user && (
|
||
<>
|
||
<Dekoneksyon position='absolute' top={95} left={5} chimen='/soumet' />
|
||
<ChwaTeks selectedTeks={selectedTeks} setSelectedTeks={setSelectedTeks} />
|
||
<EkriTeks canAutoTranslate={canAutoTranslate} selectedTeks={selectedTeks} setSelectedTeks={setSelectedTeks} />
|
||
</>
|
||
)}
|
||
{session && !session.user && (
|
||
<Dekoneksyon position='absolute' top={95} left={5} chimen='/soumet' />
|
||
)}
|
||
{username && (
|
||
<Snackbar
|
||
open={open}
|
||
autoHideDuration={10_000}
|
||
onClose={handleClose}
|
||
>
|
||
<Alert severity='success' onClose={handleClose}><strong>Bonjour {username}, votre compte a été activé avec succès. Vous pouvez vous connecter.</strong></Alert>
|
||
</Snackbar>
|
||
)}
|
||
</Box>
|
||
<Footer />
|
||
</Box>
|
||
</HeadLayout>
|
||
)
|
||
}
|
||
|
||
Soumet.defaultProps = {
|
||
code: null
|
||
}
|
||
|
||
Soumet.propTypes = {
|
||
code: PropTypes.string
|
||
}
|
||
|
||
export async function getServerSideProps({query}) {
|
||
const {code} = query
|
||
return {
|
||
props: {
|
||
code: code || null
|
||
}
|
||
}
|
||
}
|