84 lines
2.8 KiB
React
84 lines
2.8 KiB
React
'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 Link from 'next/link'
|
|
|
|
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'
|
|
|
|
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 [saisie, setSaisie] = useState('')
|
|
|
|
if (!bokanteStatusId) {
|
|
return null
|
|
}
|
|
|
|
const tootUrl = `${BOKANTE_URL}/@${BOKANTE_ACCOUNT}/${bokanteStatusId}`
|
|
|
|
const repondre = () => {
|
|
const instance = extraireInstance(saisie)
|
|
if (!instance) {
|
|
return
|
|
}
|
|
|
|
window.open(`https://${instance}/authorize_interaction?uri=${encodeURIComponent(tootUrl)}`, '_blank', 'noopener,noreferrer')
|
|
setOuvert(false)
|
|
}
|
|
|
|
return (
|
|
<Box sx={{maxWidth: 700, margin: '1em auto 0', textAlign: 'center'}}>
|
|
<Typography variant='body2' sx={{mb: 1}}>
|
|
Rejoignez la discussion sur{' '}
|
|
<Link href={tootUrl} target='_blank' rel='noopener noreferrer'>Mastodon</Link>
|
|
</Typography>
|
|
<Button variant='outlined' size='small' onClick={() => setOuvert(true)}>
|
|
Répondre via Mastodon
|
|
</Button>
|
|
<Dialog open={ouvert} onClose={() => setOuvert(false)}>
|
|
<DialogTitle>Répondre depuis votre compte Mastodon</DialogTitle>
|
|
<DialogContent>
|
|
<Typography variant='body2' sx={{mb: 2}}>
|
|
Indiquez votre identifiant (@vous@votre-instance) ou juste le nom de votre
|
|
instance, vous serez redirigé·e vers votre compte pour répondre.
|
|
</Typography>
|
|
<TextField
|
|
autoFocus
|
|
fullWidth
|
|
label='@vous@votre-instance'
|
|
value={saisie}
|
|
onChange={event => setSaisie(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
|
|
}
|