Cédric FAMIBELLE-PRONZOLA
158 lines
4.0 KiB
JavaScript
158 lines
4.0 KiB
JavaScript
import {useState, useEffect, useRef} from 'react'
|
|
import {styled} from '@mui/material/styles'
|
|
import PropTypes from 'prop-types'
|
|
import {useSession} from 'next-auth/react'
|
|
|
|
import {
|
|
IconButton,
|
|
Dialog,
|
|
DialogTitle,
|
|
DialogContent,
|
|
DialogActions,
|
|
Button,
|
|
Typography,
|
|
Tooltip,
|
|
Zoom
|
|
} from '@mui/material'
|
|
import CommentIcon from '@mui/icons-material/Comment'
|
|
import {useRouter} from 'next/router'
|
|
import Koneksyon from '../sesyon/koneksyon'
|
|
import KomanteList from './komante-list'
|
|
import EkriKomante from './ekri-komante'
|
|
|
|
const PREFIX = 'vwe-komante'
|
|
|
|
const classes = {
|
|
tooltip: `${PREFIX}-tooltip`,
|
|
margin: `${PREFIX}-margin`,
|
|
extendedIcon: `${PREFIX}-extendedIcon`
|
|
}
|
|
|
|
const Root = styled('div')((
|
|
{
|
|
theme
|
|
}
|
|
) => ({
|
|
[`& .${classes.margin}`]: {
|
|
margin: theme.spacing(1)
|
|
},
|
|
|
|
[`& .${classes.extendedIcon}`]: {
|
|
marginRight: theme.spacing(1)
|
|
}
|
|
}))
|
|
|
|
const KomanteTooltip = Tooltip
|
|
|
|
export default function VweKomante({komante, teks}) {
|
|
const [esOuve, meteEsOuve] = useState(false)
|
|
const [esKoneksyonOuve, meteEsKoneksyonOuve] = useState(false)
|
|
const [esKomenteOuve, meteEsKomanteOuve] = useState(false)
|
|
const {data: session} = useSession()
|
|
const router = useRouter()
|
|
|
|
const handleClick = () => {
|
|
meteEsOuve(true)
|
|
}
|
|
|
|
const handleClose = () => {
|
|
meteEsOuve(false)
|
|
}
|
|
|
|
const descriptionElementRef = useRef(null)
|
|
useEffect(() => {
|
|
if (esOuve) {
|
|
const {current: descriptionElement} = descriptionElementRef
|
|
if (descriptionElement !== null) {
|
|
descriptionElement.focus()
|
|
}
|
|
}
|
|
}, [esOuve])
|
|
|
|
return (
|
|
<Root>
|
|
<KomanteTooltip
|
|
title='Komantè'
|
|
placement='bottom'
|
|
TransitionComponent={Zoom}
|
|
classes={{
|
|
tooltip: classes.tooltip
|
|
}}
|
|
>
|
|
<IconButton
|
|
className={classes.margin}
|
|
color='primary'
|
|
aria-label='commentaire'
|
|
component='span'
|
|
size='large'
|
|
onClick={handleClick}
|
|
>
|
|
<CommentIcon />
|
|
</IconButton>
|
|
</KomanteTooltip>
|
|
<Dialog
|
|
open={esOuve}
|
|
scroll='paper'
|
|
aria-labelledby='scroll-dialog-title'
|
|
aria-describedby='scroll-dialog-description'
|
|
onClose={handleClose}
|
|
>
|
|
<DialogTitle align='center' id='scroll-dialog-title'>Kòmantè</DialogTitle>
|
|
<DialogContent dividers>
|
|
<Typography
|
|
ref={descriptionElementRef}
|
|
variant='inherit'
|
|
id='scroll-dialog-description'
|
|
tabIndex={-1}
|
|
>
|
|
{komante.length > 0 ? (
|
|
<KomanteList komante={komante} />
|
|
) : (
|
|
<Typography align='center'>
|
|
Aucun
|
|
</Typography>
|
|
)}
|
|
</Typography>
|
|
</DialogContent>
|
|
<DialogActions align='center' >
|
|
{session && session.user && !esKomenteOuve && (
|
|
<Button fullWidth color='primary' onClick={() => meteEsKomanteOuve(true)}>
|
|
Ajouter un commentaire
|
|
</Button>
|
|
)}
|
|
{!session && !esKoneksyonOuve && (
|
|
<Button fullWidth color='primary' onClick={() => meteEsKoneksyonOuve(true)}>
|
|
Se connecter pour commenter
|
|
</Button>
|
|
)}
|
|
{!session && esKoneksyonOuve && (
|
|
<Koneksyon chimen={router.asPath} />
|
|
)}
|
|
</DialogActions>
|
|
{!session && esKoneksyonOuve && (
|
|
<Button style={{marginBottom: 10}} color='primary' onClick={() => meteEsKoneksyonOuve(false)}>
|
|
Annuler
|
|
</Button>
|
|
)}
|
|
{session && session.user && esKomenteOuve && (
|
|
<>
|
|
<EkriKomante session={session} teks={teks} meteEsKomanteOuve={meteEsKomanteOuve} />
|
|
<Button fullWidth style={{marginBottom: 10}} color='primary' onClick={() => meteEsKomanteOuve(false)}>
|
|
Fermer
|
|
</Button>
|
|
</>
|
|
)}
|
|
</Dialog>
|
|
</Root>
|
|
)
|
|
}
|
|
|
|
VweKomante.defaultProps = {
|
|
komante: null
|
|
}
|
|
|
|
VweKomante.propTypes = {
|
|
komante: PropTypes.array,
|
|
teks: PropTypes.object.isRequired
|
|
}
|