pawol.nu/components/teks/repons-mastodon.jsx

'use client'

import {useState} from 'react'
import PropTypes from 'prop-types'
import Box from '@mui/material/Box'
import Button from '@mui/material/Button'
import Dialog from '@mui/material/Dialog'
import DialogTitle from '@mui/material/DialogTitle'
import DialogContent from '@mui/material/DialogContent'
import DialogActions from '@mui/material/DialogActions'
import TextField from '@mui/material/TextField'
import Typography from '@mui/material/Typography'
import FormControl from '@mui/material/FormControl'
import InputLabel from '@mui/material/InputLabel'
import Select from '@mui/material/Select'
import MenuItem from '@mui/material/MenuItem'
import Link from '@mui/material/Link'
import {Mastodon} from '@icons-pack/react-simple-icons'

const BOKANTE_URL = process.env.NEXT_PUBLIC_BOKANTE_URL || 'https://bokante.o-k-i.net'
const BOKANTE_ACCOUNT = process.env.NEXT_PUBLIC_BOKANTE_ACCOUNT || 'pawol_nu'

const INSTANCES_SUGGEREES = [
  {domain: 'bokante.o-k-i.net', label: 'BOKANTE - notre instance'},
  {domain: 'mastodon.social', label: 'mastodon.social'},
  {domain: 'piaille.fr', label: 'piaille.fr'},
]

const AUTRE_INSTANCE = 'autre'

function extraireInstance(saisie) {
  const valeur = saisie.trim().replace(/^@/, '').replace(/^https?:\/\//, '').replace(/\/$/, '')
  return valeur.includes('@') ? valeur.split('@').pop() : valeur
}

export default function ReponsMastodon({bokanteStatusId}) {
  const [ouvert, setOuvert] = useState(false)
  const [instance, setInstance] = useState(INSTANCES_SUGGEREES[0].domain)
  const [autreInstance, setAutreInstance] = useState('')

  if (!bokanteStatusId) {
    return null
  }

  const tootUrl = `${BOKANTE_URL}/@${BOKANTE_ACCOUNT}/${bokanteStatusId}`

  const repondre = () => {
    const domaine = instance === AUTRE_INSTANCE ? extraireInstance(autreInstance) : instance
    if (!domaine) {
      return
    }

    window.open(`https://${domaine}/authorize_interaction?uri=${encodeURIComponent(tootUrl)}`, '_blank', 'noopener,noreferrer')
    setOuvert(false)
    setAutreInstance('')
  }

  return (
    <Box sx={{maxWidth: 700, margin: '1em auto 0', textAlign: 'center'}}>
      <Typography variant='body2' sx={{mb: 1}}>
        Rejoignez la discussion sur le Fediverse via{' '}
        <Link
          href={tootUrl}
          target='_blank'
          rel='noopener noreferrer'
          underline='hover'
          sx={{
            display: 'inline-flex',
            alignItems: 'center',
            gap: 0.5,
            px: 1,
            py: 0.25,
            borderRadius: 1,
            bgcolor: 'action.hover',
            color: 'primary.main',
            fontWeight: 500,
            textDecoration: 'none',
            '&:hover': {
              bgcolor: 'action.selected'
            }
          }}
        >
          BOKANTE (Mastodon)
        </Link>
      </Typography>
      <Button
        variant='outlined'
        size='small'
        startIcon={<Mastodon size={16} color='#6364FF' title='' />}
        onClick={() => setOuvert(true)}
      >
        Répondre sur Mastodon
      </Button>
      <Dialog open={ouvert} onClose={() => setOuvert(false)}>
        <DialogTitle>Répondre depuis Mastodon</DialogTitle>
        <DialogContent>
          <Typography variant='body2' sx={{mb: 2}}>
            Choisissez l’instance Mastodon sur laquelle vous avez un compte.
            BOKANTE est l’instance de OKI : vous pouvez aussi utiliser
            n’importe quelle autre instance du Fediverse.
          </Typography>
          <FormControl fullWidth sx={{mb: 2}}>
            <InputLabel id='instance-mastodon-label'>Instance Mastodon</InputLabel>
            <Select
              labelId='instance-mastodon-label'
              id='instance-mastodon'
              value={instance}
              label='Instance Mastodon'
              onChange={event => setInstance(event.target.value)}
            >
              {INSTANCES_SUGGEREES.map(({domain, label}) => (
                <MenuItem key={domain} value={domain}>
                  {label}
                </MenuItem>
              ))}
              <MenuItem value={AUTRE_INSTANCE}>Autre instance…</MenuItem>
            </Select>
          </FormControl>
          {instance === AUTRE_INSTANCE && (
            <TextField
              autoFocus
              fullWidth
              label='@vous@votre-instance'
              helperText='Indiquez votre identifiant (@vous@votre-instance) ou juste le nom de votre instance, vous serez redirigé·e vers votre compte pour répondre.'
              value={autreInstance}
              onChange={event => setAutreInstance(event.target.value)}
              onKeyDown={event => {
                if (event.key === 'Enter') {
                  repondre()
                }
              }}
            />
          )}
        </DialogContent>
        <DialogActions>
          <Button onClick={() => setOuvert(false)}>Annuler</Button>
          <Button variant='contained' onClick={repondre}>Continuer</Button>
        </DialogActions>
      </Dialog>
    </Box>
  )
}

ReponsMastodon.propTypes = {
  bokanteStatusId: PropTypes.string
}