mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-18 11:13:30 +00:00
added reload button for newsfeed
This commit is contained in:
parent
862082c857
commit
09c7ccc023
@ -4,10 +4,11 @@ import { RelayContext } from '@components/contexts/relay';
|
||||
|
||||
import { dateToUnix, hoursAgo } from '@utils/getDate';
|
||||
|
||||
import { ReloadIcon } from '@radix-ui/react-icons';
|
||||
import { useLocalStorage } from '@rehooks/local-storage';
|
||||
import { memo, useCallback, useContext, useRef } from 'react';
|
||||
|
||||
export const NoteConnector = memo(function NoteConnector() {
|
||||
export const NoteConnector = memo(function NoteConnector({ setReload }: { setReload: any }) {
|
||||
const { db }: any = useContext(DatabaseContext);
|
||||
const relayPool: any = useContext(RelayContext);
|
||||
|
||||
@ -51,13 +52,16 @@ export const NoteConnector = memo(function NoteConnector() {
|
||||
<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">
|
||||
<div className="flex items-center gap-2">
|
||||
<button onClick={() => setReload(true)} className="rounded-full p-1 hover:bg-zinc-800">
|
||||
<ReloadIcon className="h-3.5 w-3.5 text-zinc-500" />
|
||||
</button>
|
||||
<div className="inline-flex items-center gap-1 rounded-full border border-zinc-700 bg-zinc-800 px-2.5 py-1">
|
||||
<span className="relative flex h-1.5 w-1.5">
|
||||
<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 className="relative inline-flex h-1.5 w-1.5 rounded-full bg-green-500"></span>
|
||||
</span>
|
||||
<p className="text-sm font-medium text-zinc-500">Online</p>
|
||||
<p className="text-xs font-medium text-zinc-500">Online</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -4,17 +4,10 @@ import { UserRepost } from '@components/note/atoms/userRepost';
|
||||
import { Content } from '@components/note/content';
|
||||
import { Placeholder } from '@components/note/placeholder';
|
||||
|
||||
import * as Dialog from '@radix-ui/react-dialog';
|
||||
import { LoopIcon } from '@radix-ui/react-icons';
|
||||
import useLocalStorage from '@rehooks/local-storage';
|
||||
import dynamic from 'next/dynamic';
|
||||
import { memo, useContext, useState } from 'react';
|
||||
|
||||
const Modal = dynamic(() => import('@components/note/modal'), {
|
||||
ssr: false,
|
||||
loading: () => <></>,
|
||||
});
|
||||
|
||||
export const Repost = memo(function Repost({ root, user }: { root: any; user: string }) {
|
||||
const relayPool: any = useContext(RelayContext);
|
||||
const [relays]: any = useLocalStorage('relays');
|
||||
@ -40,23 +33,15 @@ export const Repost = memo(function Repost({ root, user }: { root: any; user: st
|
||||
|
||||
if (events !== null && Object.keys(events).length > 0) {
|
||||
return (
|
||||
<Dialog.Root>
|
||||
<Dialog.Trigger>
|
||||
<div className="flex h-min min-h-min w-full select-text flex-col border-b border-zinc-800 py-6 px-6">
|
||||
<div className="flex items-center gap-1 pl-8 text-sm">
|
||||
<LoopIcon className="h-4 w-4 text-zinc-400" />
|
||||
<div className="ml-2">
|
||||
<UserRepost pubkey={user} />
|
||||
</div>
|
||||
</div>
|
||||
{events[0].content && <Content data={events[0]} />}
|
||||
<div className="flex h-min min-h-min w-full select-text flex-col border-b border-zinc-800 py-6 px-6">
|
||||
<div className="flex items-center gap-1 pl-8 text-sm">
|
||||
<LoopIcon className="h-4 w-4 text-zinc-400" />
|
||||
<div className="ml-2">
|
||||
<UserRepost pubkey={user} />
|
||||
</div>
|
||||
<Dialog.Portal>
|
||||
<Dialog.Overlay className="fixed inset-0 bg-black bg-opacity-30 backdrop-blur-sm data-[state=open]:animate-overlayShow" />
|
||||
<Dialog.Content className="fixed inset-0 overflow-y-auto">{events[0].content && <Modal event={events[0]} />}</Dialog.Content>
|
||||
</Dialog.Portal>
|
||||
</Dialog.Trigger>
|
||||
</Dialog.Root>
|
||||
</div>
|
||||
{events[0].content && <Content data={events[0]} />}
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
|
@ -1,30 +1,12 @@
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
import { Content } from '@components/note/content';
|
||||
|
||||
import * as Dialog from '@radix-ui/react-dialog';
|
||||
import dynamic from 'next/dynamic';
|
||||
import { memo } from 'react';
|
||||
|
||||
const Modal = dynamic(() => import('@components/note/modal'), {
|
||||
ssr: false,
|
||||
loading: () => <></>,
|
||||
});
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
export const Single = memo(function Single({ event }: { event: any }) {
|
||||
return (
|
||||
<Dialog.Root>
|
||||
<Dialog.Trigger asChild>
|
||||
<div className="flex h-min min-h-min w-full cursor-pointer select-text flex-col border-b border-zinc-800 py-4 px-6 hover:bg-zinc-800">
|
||||
<Content data={event} />
|
||||
</div>
|
||||
</Dialog.Trigger>
|
||||
<Dialog.Portal>
|
||||
<Dialog.Overlay className="fixed inset-0 bg-black bg-opacity-30 backdrop-blur-sm data-[state=open]:animate-overlayShow" />
|
||||
<Dialog.Content className="fixed inset-0 overflow-y-auto">
|
||||
<Modal event={event} />
|
||||
</Dialog.Content>
|
||||
</Dialog.Portal>
|
||||
</Dialog.Root>
|
||||
<div className="flex h-min min-h-min w-full cursor-pointer select-text flex-col border-b border-zinc-800 py-4 px-6 hover:bg-zinc-800">
|
||||
<Content data={event} />
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
@ -15,19 +15,11 @@ import { Virtuoso } from 'react-virtuoso';
|
||||
export default function Page() {
|
||||
const { db }: any = useContext(DatabaseContext);
|
||||
const [data, setData] = useState([]);
|
||||
const [reload, setReload] = useState(false);
|
||||
|
||||
const limit = useRef(30);
|
||||
const offset = useRef(0);
|
||||
|
||||
useEffect(() => {
|
||||
const getData = async () => {
|
||||
const result = await db.select(`SELECT * FROM cache_notes ORDER BY created_at DESC LIMIT ${limit.current}`);
|
||||
setData(result);
|
||||
};
|
||||
|
||||
getData().catch(console.error);
|
||||
}, [db]);
|
||||
|
||||
const loadMore = useCallback(async () => {
|
||||
offset.current += limit.current;
|
||||
// next query
|
||||
@ -49,6 +41,15 @@ export default function Page() {
|
||||
[data]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const getData = async () => {
|
||||
const result = await db.select(`SELECT * FROM cache_notes ORDER BY created_at DESC LIMIT ${limit.current}`);
|
||||
setData(result);
|
||||
};
|
||||
|
||||
getData().catch(console.error);
|
||||
}, [db, reload]);
|
||||
|
||||
const computeItemKey = useCallback(
|
||||
(index: string | number) => {
|
||||
return data[index].id;
|
||||
@ -58,7 +59,7 @@ export default function Page() {
|
||||
|
||||
return (
|
||||
<div className="h-full w-full">
|
||||
<NoteConnector />
|
||||
<NoteConnector setReload={setReload} />
|
||||
<Virtuoso
|
||||
data={data}
|
||||
itemContent={ItemContent}
|
||||
|
Loading…
Reference in New Issue
Block a user