Whalebird-desktop-client-ma.../renderer/components/detail/Reply.tsx

61 lines
1.8 KiB
TypeScript
Raw Normal View History

2023-11-28 16:37:21 +01:00
import { MegalodonInterface, Entity } from 'megalodon'
import { useEffect, useRef, useState } from 'react'
import { Virtuoso } from 'react-virtuoso'
import Status from '../timelines/status/Status'
import Compose from '../compose/Compose'
type Props = {
client: MegalodonInterface
status_id: string
2023-12-02 11:26:45 +01:00
openMedia: (media: Entity.Attachment) => void
2023-11-28 16:37:21 +01:00
}
export default function Reply(props: Props) {
const [ancestors, setAncestors] = useState<Array<Entity.Status>>([])
const [status, setStatus] = useState<Entity.Status | null>(null)
const [composeHeight, setComposeHeight] = useState(120)
const composeRef = useRef<HTMLDivElement | null>(null)
useEffect(() => {
const observer = new ResizeObserver(entries => {
entries.forEach(el => {
setComposeHeight(el.contentRect.height)
})
})
if (composeRef.current) {
observer.observe(composeRef.current)
}
return () => {
observer.disconnect()
}
}, [])
useEffect(() => {
if (props.status_id) {
const f = async () => {
const s = await props.client.getStatus(props.status_id)
setStatus(s.data)
const res = await props.client.getStatusContext(props.status_id)
setAncestors(res.data.ancestors)
}
f()
}
}, [props.status_id])
return (
<div className="overflow-x-hidden" style={{ height: 'calc(100% - 50px)' }}>
<Virtuoso
style={{ height: `calc(100% - ${composeHeight}px)` }}
data={[...ancestors, status].filter(s => s !== null)}
2023-12-02 11:26:45 +01:00
itemContent={(_, status) => (
<Status client={props.client} status={status} key={status.id} onRefresh={() => {}} openMedia={props.openMedia} />
)}
2023-11-28 16:37:21 +01:00
/>
<div ref={composeRef}>
<Compose client={props.client} in_reply_to={status} />
</div>
</div>
)
}