Files
lume/src/pages/newsfeed/[id].tsx
T
2023-04-05 09:48:57 +07:00

68 lines
1.7 KiB
TypeScript

import BaseLayout from '@layouts/base';
import WithSidebarLayout from '@layouts/withSidebar';
import FormComment from '@components/form/comment';
import { NoteComment } from '@components/note/comment';
import { NoteExtend } from '@components/note/extend';
import { RelayContext } from '@components/relaysProvider';
import { useRouter } from 'next/router';
import {
JSXElementConstructor,
ReactElement,
ReactFragment,
ReactPortal,
useContext,
useEffect,
useState,
} from 'react';
export default function Page() {
const [pool, relays]: any = useContext(RelayContext);
const router = useRouter();
const id = router.query.id || null;
const [rootEvent, setRootEvent] = useState(null);
const [comments, setComments] = useState([]);
useEffect(() => {
/*getNoteByID(id)
.then((res) => {
setRootEvent(res);
getAllCommentNotes(id).then((res: any) => setComments(res));
})
.catch(console.error);*/
}, [id, pool, relays]);
return (
<div className="scrollbar-hide flex h-full flex-col gap-2 overflow-y-auto py-3">
<div className="flex h-min min-h-min w-full select-text flex-col px-3">
{rootEvent && <NoteExtend event={rootEvent} />}
</div>
<div>
<FormComment eventID={id} />
</div>
<div className="flex flex-col">
{comments.length > 0 && comments.map((comment) => <NoteComment key={comment.id} event={comment} />)}
</div>
</div>
);
}
Page.getLayout = function getLayout(
page:
| string
| number
| boolean
| ReactElement<unknown, string | JSXElementConstructor<unknown>>
| ReactFragment
| ReactPortal
) {
return (
<BaseLayout>
<WithSidebarLayout>{page}</WithSidebarLayout>
</BaseLayout>
);
};