Create VweKomante component

2021-06-26 12:27:48 +02:00
parent b6d7000ad5
commit 40f76779f7
1 changed files with 136 additions and 0 deletions
@@ -0,0 +1,136 @@
+import {useState, useEffect, useRef} from 'react'
+import PropTypes from 'prop-types'
+import {useSession} from 'next-auth/client'
+import Koneksyon from '../sesyon/koneksyon'
+
+import {
+  IconButton,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Button,
+  Typography,
+  Tooltip,
+  Zoom,
+  withStyles,
+  makeStyles
+} from '@material-ui/core'
+import AddCommentIcon from '@material-ui/icons/AddComment'
+import KomanteList from './komante-list'
+import {useRouter} from 'next/router'
+import EkriKomante from './ekri-komante'
+
+const useStyles = makeStyles(theme => ({
+  margin: {
+    margin: theme.spacing(1)
+  },
+  extendedIcon: {
+    marginRight: theme.spacing(1)
+  }
+}))
+
+const KomanteTooltip = withStyles(() => ({
+  tooltip: {
+    fontSize: 18
+  }
+}))(Tooltip)
+
+export default function VweKomante({komante, teks}) {
+  const classes = useStyles()
+  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 (
+    <>
+      <KomanteTooltip title='Komantè' placement='bottom' TransitionComponent={Zoom}>
+        <IconButton className={classes.margin} color='primary' aria-label='commentaire' component='span' onClick={handleClick}>
+          <AddCommentIcon fontSize='large' />
+        </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>
+    </>
+  )
+}
+
+VweKomante.defaultProps = {
+  komante: null
+}
+
+VweKomante.propTypes = {
+  komante: PropTypes.array,
+  teks: PropTypes.object.isRequired
+}