mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-19 11:43:30 +00:00
update chat
This commit is contained in:
parent
f751c1f18f
commit
12e28edad3
46
src/app/chat/components/item.tsx
Normal file
46
src/app/chat/components/item.tsx
Normal file
@ -0,0 +1,46 @@
|
||||
import { DEFAULT_AVATAR } from '@lume/stores/constants';
|
||||
import { usePageContext } from '@lume/utils/hooks/usePageContext';
|
||||
import { useProfile } from '@lume/utils/hooks/useProfile';
|
||||
import { shortenKey } from '@lume/utils/shortenKey';
|
||||
|
||||
import { twMerge } from 'tailwind-merge';
|
||||
|
||||
export default function ChatsListItem({ pubkey }: { pubkey: string }) {
|
||||
const pageContext = usePageContext();
|
||||
|
||||
const searchParams: any = pageContext.urlParsed.search;
|
||||
const pagePubkey = searchParams.pubkey;
|
||||
|
||||
const { user, isError, isLoading } = useProfile(pubkey);
|
||||
|
||||
return (
|
||||
<>
|
||||
{isError && <div>error</div>}
|
||||
{isLoading && !user ? (
|
||||
<div className="inline-flex items-center gap-2 rounded-md px-2.5 py-1.5">
|
||||
<div className="relative h-5 w-5 shrink-0 animate-pulse rounded bg-zinc-800"></div>
|
||||
<div>
|
||||
<div className="h-2.5 w-full animate-pulse truncate rounded bg-zinc-800 text-sm font-medium"></div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<a
|
||||
href={`/app/chat?pubkey=${pubkey}`}
|
||||
className={twMerge(
|
||||
'inline-flex items-center gap-2 rounded-md px-2.5 py-1.5 hover:bg-zinc-900',
|
||||
pagePubkey === pubkey ? 'dark:bg-zinc-900 dark:text-zinc-100 hover:dark:bg-zinc-800' : ''
|
||||
)}
|
||||
>
|
||||
<div className="relative h-5 w-5 shrink-0 rounded">
|
||||
<img src={user.picture || DEFAULT_AVATAR} alt={pubkey} className="h-5 w-5 rounded bg-white object-cover" />
|
||||
</div>
|
||||
<div>
|
||||
<h5 className="truncate text-sm font-medium text-zinc-400">
|
||||
{user.display_name || user.name || shortenKey(pubkey)}
|
||||
</h5>
|
||||
</div>
|
||||
</a>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
36
src/app/chat/components/list.tsx
Normal file
36
src/app/chat/components/list.tsx
Normal file
@ -0,0 +1,36 @@
|
||||
import ChatsListItem from '@lume/app/chat/components/item';
|
||||
import ChatsListSelfItem from '@lume/app/chat/components/self';
|
||||
import { useActiveAccount } from '@lume/utils/hooks/useActiveAccount';
|
||||
import { getChats } from '@lume/utils/storage';
|
||||
|
||||
import useSWR from 'swr';
|
||||
|
||||
const fetcher = ([, account]) => getChats(account);
|
||||
|
||||
export default function ChatsList() {
|
||||
const { account, isLoading, isError } = useActiveAccount();
|
||||
const { data: chats, error }: any = useSWR(!isLoading && !isError && account ? ['chats', account] : null, fetcher);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-px">
|
||||
<>
|
||||
<ChatsListSelfItem />
|
||||
{error && <div>failed to fetch</div>}
|
||||
{!chats ? (
|
||||
<>
|
||||
<div className="inline-flex items-center gap-2 rounded-md px-2.5 py-1.5">
|
||||
<div className="relative h-5 w-5 shrink-0 animate-pulse rounded bg-zinc-800"></div>
|
||||
<div className="h-3 w-full animate-pulse bg-zinc-800"></div>
|
||||
</div>
|
||||
<div className="inline-flex items-center gap-2 rounded-md px-2.5 py-1.5">
|
||||
<div className="relative h-5 w-5 shrink-0 animate-pulse rounded bg-zinc-800"></div>
|
||||
<div className="h-3 w-full animate-pulse bg-zinc-800"></div>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
chats.map((item: { pubkey: string }) => <ChatsListItem key={item.pubkey} pubkey={item.pubkey} />)
|
||||
)}
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
}
|
51
src/app/chat/components/self.tsx
Normal file
51
src/app/chat/components/self.tsx
Normal file
@ -0,0 +1,51 @@
|
||||
import { DEFAULT_AVATAR } from '@lume/stores/constants';
|
||||
import { useActiveAccount } from '@lume/utils/hooks/useActiveAccount';
|
||||
import { usePageContext } from '@lume/utils/hooks/usePageContext';
|
||||
import { shortenKey } from '@lume/utils/shortenKey';
|
||||
|
||||
import { twMerge } from 'tailwind-merge';
|
||||
|
||||
export default function ChatsListSelfItem() {
|
||||
const pageContext = usePageContext();
|
||||
|
||||
const searchParams: any = pageContext.urlParsed.search;
|
||||
const pagePubkey = searchParams.pubkey;
|
||||
|
||||
const { account, isLoading, isError } = useActiveAccount();
|
||||
const profile = account ? JSON.parse(account.metadata) : null;
|
||||
|
||||
return (
|
||||
<>
|
||||
{isError && <div>error</div>}
|
||||
{isLoading && !account ? (
|
||||
<div className="inline-flex items-center gap-2 rounded-md px-2.5 py-1.5">
|
||||
<div className="relative h-5 w-5 shrink-0 animate-pulse rounded bg-zinc-800"></div>
|
||||
<div>
|
||||
<div className="h-2.5 w-full animate-pulse truncate rounded bg-zinc-800 text-sm font-medium"></div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<a
|
||||
href={`/app/chat?pubkey=${account.pubkey}`}
|
||||
className={twMerge(
|
||||
'inline-flex items-center gap-2 rounded-md px-2.5 py-1.5 hover:bg-zinc-900',
|
||||
pagePubkey === account.pubkey ? 'dark:bg-zinc-900 dark:text-zinc-100 hover:dark:bg-zinc-800' : ''
|
||||
)}
|
||||
>
|
||||
<div className="relative h-5 w-5 shrink-0 rounded">
|
||||
<img
|
||||
src={profile?.picture || DEFAULT_AVATAR}
|
||||
alt={account.pubkey}
|
||||
className="h-5 w-5 rounded bg-white object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h5 className="truncate text-sm font-medium text-zinc-400">
|
||||
{profile?.display_name || profile?.name || shortenKey(account.pubkey)} (you)
|
||||
</h5>
|
||||
</div>
|
||||
</a>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
@ -31,11 +31,13 @@ export function Page() {
|
||||
kinds: [4],
|
||||
authors: [key],
|
||||
'#p': [account.pubkey],
|
||||
limit: 20,
|
||||
},
|
||||
{
|
||||
kinds: [4],
|
||||
authors: [account.pubkey],
|
||||
'#p': [key],
|
||||
limit: 20,
|
||||
},
|
||||
],
|
||||
FULL_RELAYS,
|
||||
|
@ -3,7 +3,7 @@ import { NoteBase } from '@lume/app/newsfeed/components/note/base';
|
||||
import { Placeholder } from '@lume/app/newsfeed/components/note/placeholder';
|
||||
import { NoteQuoteRepost } from '@lume/app/newsfeed/components/note/quoteRepost';
|
||||
import { hasNewerNoteAtom } from '@lume/stores/note';
|
||||
import { countTotalNotes, getNotes } from '@lume/utils/storage';
|
||||
import { getNotes } from '@lume/utils/storage';
|
||||
|
||||
import { useInfiniteQuery } from '@tanstack/react-query';
|
||||
import { useVirtualizer } from '@tanstack/react-virtual';
|
||||
@ -14,13 +14,6 @@ import { useEffect, useRef } from 'react';
|
||||
const ITEM_PER_PAGE = 20;
|
||||
const TIME = Math.floor(Date.now() / 1000);
|
||||
|
||||
let totalNotes = 0;
|
||||
|
||||
if (typeof window !== 'undefined') {
|
||||
const result = await countTotalNotes();
|
||||
totalNotes = result.total;
|
||||
}
|
||||
|
||||
export function Page() {
|
||||
const [hasNewerNote] = useAtom(hasNewerNoteAtom);
|
||||
|
||||
@ -29,7 +22,7 @@ export function Page() {
|
||||
queryFn: async ({ pageParam = 0 }) => {
|
||||
return await getNotes(TIME, ITEM_PER_PAGE, pageParam);
|
||||
},
|
||||
getNextPageParam: (lastPage) => (lastPage.nextCursor <= totalNotes ? lastPage.nextCursor : 'undefined'),
|
||||
getNextPageParam: (lastPage) => lastPage.nextCursor,
|
||||
});
|
||||
|
||||
const allRows = data ? data.pages.flatMap((d: { data: any }) => d.data) : [];
|
||||
|
@ -1,4 +1,5 @@
|
||||
import ChannelsList from '@lume/app/channel/components/list';
|
||||
import ChatsList from '@lume/app/chat/components/list';
|
||||
import ActiveLink from '@lume/shared/activeLink';
|
||||
|
||||
import { Disclosure } from '@headlessui/react';
|
||||
@ -76,7 +77,9 @@ export default function Navigation() {
|
||||
</div>
|
||||
<h3 className="text-[11px] font-bold uppercase tracking-widest text-zinc-600">Chats</h3>
|
||||
</Disclosure.Button>
|
||||
<Disclosure.Panel></Disclosure.Panel>
|
||||
<Disclosure.Panel>
|
||||
<ChatsList />
|
||||
</Disclosure.Panel>
|
||||
</div>
|
||||
)}
|
||||
</Disclosure>
|
||||
|
Loading…
Reference in New Issue
Block a user