pawol.nu/components/teks/pataje.js

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 = teks.user ? `${renderAwtis} - ${tit} (Pawòl) - (texte soumis par ${teks.user.username})` : `${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='down'
        onClose={handleClose}
        onOpen={handleOpen}
      >
        {actions.map(action => (
          <SpeedDialAction
            key={action.name}
            icon={action.icon}
            tooltipPlacement='right'
            tooltipTitle={action.name}
            onClick={() => handleClick(action.code)}
          />
        ))}
      </SpeedDial>
    </div>
  )
}

Pataje.propTypes = {
  teks: PropTypes.object.isRequired,
  setError: PropTypes.func.isRequired,
  setSuccess: PropTypes.func.isRequired
}