nostr/lume
1
0
Fork 0
mirror of https://github.com/luminous-devs/lume.git synced 2024-09-19 19:46:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

update chat

Browse Source
This commit is contained in:
Ren Amamiya 2023-04-28 16:36:28 +07:00
parent f751c1f18f
commit 12e28edad3
6 changed files with 141 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/app/chat/components/item.tsx Normal file
View 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
View 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
View 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>
)}
</>
);
}

2
src/app/chat/pages/index.page.tsx
View File

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

11
src/app/newsfeed/pages/following/index.page.tsx
View File

@ -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) : [];

5
src/shared/navigation.tsx
View File

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