pawol.nu/components/komante/vwe-komante.js

import {useState, useEffect, useRef} from 'react'
import {styled} from '@mui/material/styles'
import PropTypes from 'prop-types'
import {useSession} from 'next-auth/react'

import {
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  Button,
  Typography,
  Badge
} from '@mui/material'
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)
  }
}))

export default function VweKomante({commentaires, parole, paroleId}) {
  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>
      <Badge badgeContent={commentaires.length} color='primary'>
        <Button sx={{marginBlock: 3}} variant='outlined' onClick={handleClick}>
          Voir les commentaires
        </Button>
      </Badge>
      <Dialog
        open={esOuve}
        scroll='paper'
        aria-labelledby='scroll-dialog-title'
        aria-describedby='scroll-dialog-description'
        onClose={handleClose}
      >
        <DialogTitle align='center' id='scroll-dialog-title'>Commentaires</DialogTitle>
        <DialogContent dividers>
          <Typography
            ref={descriptionElementRef}
            variant='inherit'
            id='scroll-dialog-description'
            tabIndex={-1}
            component='div'
          >
            {commentaires.length > 0 ? (
              <KomanteList commentaires={commentaires} />
            ) : (
              <Typography component='div' align='center'>
                Aucun commentaire
              </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={{marginBlock: 10}} color='secondary' onClick={() => meteEsKoneksyonOuve(false)}>
            <strong>Annuler</strong>
          </Button>
        )}
        {session && session.user && esKomenteOuve && (
          <>
            <EkriKomante session={session} parole={parole} paroleId={paroleId} meteEsKomanteOuve={meteEsKomanteOuve} />
            <Button fullWidth style={{marginBottom: 10}} color='primary' onClick={() => meteEsKomanteOuve(false)}>
              Fermer
            </Button>
          </>
        )}
      </Dialog>
    </Root>
  )
}

VweKomante.defaultProps = {
  commentaires: null
}

VweKomante.propTypes = {
  commentaires: PropTypes.array,
  parole: PropTypes.object.isRequired,
  paroleId: PropTypes.number.isRequired
}