| import { useEffect } from 'react'; |
| import { useRecoilState } from 'recoil'; |
| import type { TMessageProps } from '~/common'; |
| |
| import Message from './Message'; |
| import store from '~/store'; |
|
|
| export default function MultiMessage({ |
| // messageId is used recursively here |
| messageId, |
| messagesTree, |
| currentEditId, |
| setCurrentEditId, |
| }: TMessageProps) { |
| const [siblingIdx, setSiblingIdx] = useRecoilState(store.messagesSiblingIdxFamily(messageId)); |
|
|
| const setSiblingIdxRev = (value: number) => { |
| setSiblingIdx((messagesTree?.length ?? 0) - value - 1); |
| }; |
|
|
| useEffect(() => { |
| |
| setSiblingIdx(0); |
| |
| }, [messagesTree?.length]); |
|
|
| useEffect(() => { |
| if (messagesTree?.length && siblingIdx >= messagesTree?.length) { |
| setSiblingIdx(0); |
| } |
| }, [siblingIdx, messagesTree?.length, setSiblingIdx]); |
|
|
| if (!(messagesTree && messagesTree?.length)) { |
| return null; |
| } |
|
|
| const message = messagesTree[messagesTree.length - siblingIdx - 1]; |
|
|
| if (!message) { |
| return null; |
| } |
|
|
| return ( |
| <Message |
| key={message.messageId} |
| message={message} |
| currentEditId={currentEditId} |
| setCurrentEditId={setCurrentEditId} |
| siblingIdx={messagesTree.length - siblingIdx - 1} |
| siblingCount={messagesTree.length} |
| setSiblingIdx={setSiblingIdxRev} |
| /> |
| ); |
| } |
|
|
