I'm tired of writing commit message, sorry!
This commit is contained in:
@@ -1,47 +1,10 @@
|
||||
import BaseLayout from '@layouts/base';
|
||||
import WithSidebarLayout from '@layouts/withSidebar';
|
||||
|
||||
import { Note } from '@components/note';
|
||||
|
||||
import { initialNotesAtom } from '@stores/note';
|
||||
|
||||
import { useVirtualizer } from '@tanstack/react-virtual';
|
||||
import { useAtom } from 'jotai';
|
||||
import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal, useMemo, useRef } from 'react';
|
||||
import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal } from 'react';
|
||||
|
||||
export default function Page() {
|
||||
const [data]: any = useAtom(initialNotesAtom);
|
||||
|
||||
const parentRef = useRef(null);
|
||||
const count = useMemo(() => data.length, [data]);
|
||||
|
||||
const virtualizer = useVirtualizer({
|
||||
count,
|
||||
getScrollElement: () => parentRef.current,
|
||||
getItemKey: (index: number) => data[index].id,
|
||||
estimateSize: () => 500,
|
||||
overscan: 5,
|
||||
});
|
||||
|
||||
const items = virtualizer.getVirtualItems();
|
||||
|
||||
return (
|
||||
<div className="h-full w-full">
|
||||
{items.length > 0 && (
|
||||
<div ref={parentRef} className="scrollbar-hide h-full w-full overflow-y-auto" style={{ contain: 'strict' }}>
|
||||
<div className={`relative w-full h-${virtualizer.getTotalSize()}px`}>
|
||||
<div className="absolute top-0 left-0 w-full" style={{ transform: `translateY(${items[0].start}px)` }}>
|
||||
{items.map((virtualRow) => (
|
||||
<div key={virtualRow.key} data-index={virtualRow.index} ref={virtualizer.measureElement}>
|
||||
<Note event={data[virtualRow.index]} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
return <></>;
|
||||
}
|
||||
|
||||
Page.getLayout = function getLayout(
|
||||
|
||||
@@ -32,7 +32,7 @@ export default function Page() {
|
||||
const result = await db.select(
|
||||
`SELECT * FROM
|
||||
cache_notes
|
||||
WHERE created_at <= ${dateToUnix(now.current)}
|
||||
WHERE created_at <= ${dateToUnix(now.current)} AND is_root = 0
|
||||
ORDER BY created_at DESC
|
||||
LIMIT ${limit.current} OFFSET ${offset.current}`
|
||||
);
|
||||
@@ -43,7 +43,7 @@ export default function Page() {
|
||||
const result = await db.select(
|
||||
`SELECT * FROM
|
||||
cache_notes
|
||||
WHERE created_at > ${dateToUnix(now.current)}
|
||||
WHERE created_at > ${dateToUnix(now.current)} AND is_root = 0
|
||||
ORDER BY created_at DESC
|
||||
LIMIT ${limit.current}`
|
||||
);
|
||||
@@ -65,14 +65,16 @@ export default function Page() {
|
||||
|
||||
const computeItemKey = useCallback(
|
||||
(index: Key) => {
|
||||
return data[index].id;
|
||||
return data[index].id + data[index].created_at;
|
||||
},
|
||||
[data]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const getData = async () => {
|
||||
const result = await db.select(`SELECT * FROM cache_notes ORDER BY created_at DESC LIMIT ${limit.current}`);
|
||||
const result = await db.select(
|
||||
`SELECT * FROM cache_notes WHERE is_root = 0 ORDER BY created_at DESC LIMIT ${limit.current}`
|
||||
);
|
||||
if (result.length > 0) {
|
||||
setData(result);
|
||||
} else {
|
||||
|
||||
Reference in New Issue
Block a user