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/client'

import {
  IconButton,
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  Button,
  Typography,
  Tooltip,
  Zoom
} from '@material-ui/core'
import AddCommentIcon from '@material-ui/icons/AddComment'
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 [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' onClick={handleClick}>
            <AddCommentIcon />
          </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
}