I'm tired of writing commit message, sorry!

This commit is contained in:
Ren Amamiya
2023-03-22 10:37:07 +07:00
parent 27fe32d748
commit ca87624727
7 changed files with 49 additions and 172 deletions

View File

@@ -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(

View File

@@ -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 {