Create Pataje component

2021-06-02 02:22:43 +02:00
parent 6f67c25ab2
commit 93acaee44a
1 changed files with 94 additions and 0 deletions
@@ -0,0 +1,94 @@
+import React, {useState} from 'react'
+import PropTypes from 'prop-types'
+
+import {makeStyles} from '@material-ui/core/styles'
+import SpeedDial from '@material-ui/lab/SpeedDial'
+import SpeedDialIcon from '@material-ui/lab/SpeedDialIcon'
+import SpeedDialAction from '@material-ui/lab/SpeedDialAction'
+import FileCopyIcon from '@material-ui/icons/FileCopyOutlined'
+import ShareIcon from '@material-ui/icons/Share'
+import TwitterIcon from '@material-ui/icons/Twitter'
+import {Backdrop} from '@material-ui/core'
+
+const SITE_URL = process.env.NEXT_PUBLIC_SITE_URL
+const TWITTER_HASHTAGS = process.env.NEXT_PUBLIC_TWITTER_HASHTAGS || 'OKi'
+const TWITTER_USERNAME = process.env.NEXT_PUBLIC_TWITTER_USERNAME || 'oki_972'
+
+const useStyles = makeStyles(() => ({
+  root: {
+    height: 0,
+    transform: 'translateZ(0px)'
+  }
+}))
+
+const actions = [
+  {icon: <TwitterIcon />, name: 'Twitter', code: 'twitter'},
+  {icon: <FileCopyIcon />, name: 'Copier le lien', code: 'copy'}
+]
+
+export default function Pataje({teks, setError, setSuccess}) {
+  const classes = useStyles()
+  const {tit, awtis, slug} = teks
+  const [open, setOpen] = useState(false)
+
+  const patajeUrl = `${SITE_URL}/teks/${slug}#${slug}`
+  const renderAwtis = awtis.map(a => a.alias).join(', ')
+
+  const text = `${renderAwtis} - ${tit} (Pawòl)`
+  const twitterUrl = 'https://twitter.com/intent/tweet'
+
+  const handleClose = () => {
+    setOpen(false)
+  }
+
+  const handleOpen = () => {
+    setOpen(true)
+  }
+
+  const handleClick = code => {
+    if (typeof window !== 'undefined' && code === 'twitter') {
+      window.open(`${twitterUrl}?hashtags=${TWITTER_HASHTAGS}&text=${text}&via=${TWITTER_USERNAME}&url=${patajeUrl}`, 'Partage Twitter', 'width=600,height=300')
+    }
+
+    if (typeof window !== 'undefined' && code === 'copy') {
+      navigator.clipboard.writeText(patajeUrl)
+        .then(
+          () => setSuccess('Lien copié avec succès'),
+          () => setError('Error lors de la copie du lien')
+        )
+    }
+
+    setOpen(false)
+  }
+
+  return (
+    <div className={classes.root}>
+      <Backdrop open={open} />
+      <SpeedDial
+        FabProps={{size: 'small', margin: 'auto', color: 'default'}}
+        ariaLabel='Patajé'
+        icon={<SpeedDialIcon icon={<ShareIcon />} />}
+        open={open}
+        direction='right'
+        onClose={handleClose}
+        onOpen={handleOpen}
+      >
+        {actions.map(action => (
+          <SpeedDialAction
+            key={action.name}
+            icon={action.icon}
+            tooltipPlacement='bottom'
+            tooltipTitle={action.name}
+            onClick={() => handleClick(action.code)}
+          />
+        ))}
+      </SpeedDial>
+    </div>
+  )
+}
+
+Pataje.propTypes = {
+  teks: PropTypes.object.isRequired,
+  setError: PropTypes.func.isRequired,
+  setSuccess: PropTypes.func.isRequired
+}