mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-18 11:13:30 +00:00
updated note connector
This commit is contained in:
parent
3b78123939
commit
0dcba44c4d
@ -1,6 +1,5 @@
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
import ActiveLink from '@components/activeLink';
|
||||
import { NoteConnector } from '@components/connectors/note';
|
||||
import CreatePost from '@components/navigatorBar/createPost';
|
||||
import { ProfileMenu } from '@components/navigatorBar/profileMenu';
|
||||
|
||||
@ -15,9 +14,6 @@ export default function NavigatorBar() {
|
||||
<div className="flex h-full flex-col flex-wrap justify-between overflow-hidden px-2 pt-3 pb-4">
|
||||
{/* main */}
|
||||
<div className="flex flex-col gap-4">
|
||||
<div>
|
||||
<NoteConnector />
|
||||
</div>
|
||||
{/* Create post */}
|
||||
<div className="flex flex-col rounded-lg bg-zinc-900 ring-1 ring-white/10">
|
||||
<div className="flex flex-col p-2">
|
||||
|
@ -47,8 +47,19 @@ export const NoteConnector = memo(function NoteConnector() {
|
||||
);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<p>Note</p>
|
||||
<div className="flex h-12 items-center justify-between border-b border-zinc-800 px-6 shadow-input">
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-zinc-500"># following</h3>
|
||||
</div>
|
||||
<div>
|
||||
<div className="inline-flex items-center gap-2">
|
||||
<span className="relative flex h-3 w-3">
|
||||
<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-400 opacity-75"></span>
|
||||
<span className="relative inline-flex h-3 w-3 rounded-full bg-green-500"></span>
|
||||
</span>
|
||||
<p className="text-sm font-medium text-zinc-500">Online</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
});
|
@ -3,18 +3,18 @@ import BaseLayout from '@layouts/baseLayout';
|
||||
import NewsFeedLayout from '@layouts/newsfeedLayout';
|
||||
|
||||
import { DatabaseContext } from '@components/contexts/database';
|
||||
import { NoteConnector } from '@components/note/connector';
|
||||
import { Placeholder } from '@components/note/placeholder';
|
||||
import { Repost } from '@components/note/repost';
|
||||
import { Single } from '@components/note/single';
|
||||
|
||||
import { useLocalStorage, writeStorage } from '@rehooks/local-storage';
|
||||
import { useCallback } from 'react';
|
||||
import { useCallback, useState } from 'react';
|
||||
import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal, useContext, useEffect, useRef } from 'react';
|
||||
import { Virtuoso } from 'react-virtuoso';
|
||||
|
||||
export default function Page() {
|
||||
const { db }: any = useContext(DatabaseContext);
|
||||
const [data]: any = useLocalStorage('notes');
|
||||
const [data, setData] = useState([]);
|
||||
|
||||
const limit = useRef(30);
|
||||
const offset = useRef(0);
|
||||
@ -22,7 +22,7 @@ export default function Page() {
|
||||
useEffect(() => {
|
||||
const getData = async () => {
|
||||
const result = await db.select(`SELECT * FROM cache_notes ORDER BY created_at DESC LIMIT ${limit.current}`);
|
||||
writeStorage('notes', result);
|
||||
setData(result);
|
||||
};
|
||||
|
||||
getData().catch(console.error);
|
||||
@ -32,7 +32,7 @@ export default function Page() {
|
||||
offset.current += limit.current;
|
||||
// next query
|
||||
const result = await db.select(`SELECT * FROM cache_notes ORDER BY created_at DESC LIMIT ${limit.current} OFFSET ${offset.current}`);
|
||||
writeStorage('notes', (data) => [...data, ...result]);
|
||||
setData((data) => [...data, ...result]);
|
||||
}, [db]);
|
||||
|
||||
const ItemContent = useCallback(
|
||||
@ -57,26 +57,29 @@ export default function Page() {
|
||||
);
|
||||
|
||||
return (
|
||||
<Virtuoso
|
||||
data={data}
|
||||
itemContent={ItemContent}
|
||||
components={{
|
||||
EmptyPlaceholder: () => <Placeholder />,
|
||||
ScrollSeekPlaceholder: () => <Placeholder />,
|
||||
}}
|
||||
computeItemKey={computeItemKey}
|
||||
scrollSeekConfiguration={{
|
||||
enter: (velocity) => Math.abs(velocity) > 800,
|
||||
exit: (velocity) => Math.abs(velocity) < 500,
|
||||
}}
|
||||
endReached={loadMore}
|
||||
overscan={800}
|
||||
increaseViewportBy={1000}
|
||||
className="scrollbar-hide relative h-full w-full rounded-lg"
|
||||
style={{
|
||||
contain: 'strict',
|
||||
}}
|
||||
/>
|
||||
<div className="h-full w-full">
|
||||
<NoteConnector />
|
||||
<Virtuoso
|
||||
data={data}
|
||||
itemContent={ItemContent}
|
||||
components={{
|
||||
EmptyPlaceholder: () => <Placeholder />,
|
||||
ScrollSeekPlaceholder: () => <Placeholder />,
|
||||
}}
|
||||
computeItemKey={computeItemKey}
|
||||
scrollSeekConfiguration={{
|
||||
enter: (velocity) => Math.abs(velocity) > 800,
|
||||
exit: (velocity) => Math.abs(velocity) < 500,
|
||||
}}
|
||||
endReached={loadMore}
|
||||
overscan={800}
|
||||
increaseViewportBy={1000}
|
||||
className="scrollbar-hide relative h-full w-full"
|
||||
style={{
|
||||
contain: 'strict',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user