1
0
mirror of https://github.com/h3poteto/whalebird-desktop synced 2024-12-25 00:10:59 +01:00
Whalebird-desktop-client-ma.../renderer/components/compose/EditMedia.tsx
2024-01-09 21:33:01 +09:00

68 lines
2.0 KiB
TypeScript

import { Button, Dialog, DialogBody, DialogHeader, Textarea, Typography } from '@material-tailwind/react'
import { Entity, MegalodonInterface } from 'megalodon'
import { useEffect, useState } from 'react'
import { FormattedMessage } from 'react-intl'
type Props = {
media: Entity.Attachment | undefined
close: () => void
client: MegalodonInterface
}
export default function EditMedia(props: Props) {
const [description, setDescription] = useState('')
useEffect(() => {
if (props.media) {
const f = async () => {
const res = await props.client.getMedia(props.media.id)
if (res.data.description) {
setDescription(res.data.description)
}
}
f()
}
}, [props.media, props.client])
const submit = async () => {
if (!props.media || !props.client) return
await props.client.updateMedia(props.media.id, {
description: description
})
}
const onClose = () => {
setDescription('')
props.close()
}
return (
<Dialog open={props.media !== undefined} handler={onClose} size="xl">
{props.media && (
<>
<DialogHeader>
<FormattedMessage id="compose.edit_media.title" />
</DialogHeader>
<DialogBody className="max-h-full max-w-full">
<div className="flex gap-2">
<div className="w-1/4">
<Typography>
<FormattedMessage id="compose.edit_media.label" />
</Typography>
<Textarea id="description" rows={4} value={description} onChange={ev => setDescription(ev.target.value)} />
<Button className="mt-2" onClick={submit}>
<FormattedMessage id="compose.edit_media.submit" />
</Button>
</div>
<div className="w-3/4">
<img src={props.media.preview_url} className="object-cover m-auto" />
</div>
</div>
</DialogBody>
</>
)}
<></>
</Dialog>
)
}