codytseng
1 year ago
31 changed files with 1076 additions and 96 deletions
@ -0,0 +1,24 @@
@@ -0,0 +1,24 @@
|
||||
import { Button } from '@renderer/components/ui/button' |
||||
import { Search } from 'lucide-react' |
||||
import { useState } from 'react' |
||||
import { useTranslation } from 'react-i18next' |
||||
import { SearchDialog } from '../SearchDialog' |
||||
|
||||
export default function RefreshButton({ |
||||
variant = 'titlebar' |
||||
}: { |
||||
variant?: 'titlebar' | 'sidebar' |
||||
}) { |
||||
const { t } = useTranslation() |
||||
const [open, setOpen] = useState(false) |
||||
|
||||
return ( |
||||
<> |
||||
<Button variant={variant} size={variant} onClick={() => setOpen(true)} title={t('Search')}> |
||||
<Search /> |
||||
{variant === 'sidebar' && <div>{t('Search')}</div>} |
||||
</Button> |
||||
<SearchDialog open={open} setOpen={setOpen} /> |
||||
</> |
||||
) |
||||
} |
||||
@ -0,0 +1,160 @@
@@ -0,0 +1,160 @@
|
||||
import { SecondaryPageLink } from '@renderer/PageManager' |
||||
import { Avatar, AvatarFallback, AvatarImage } from '@renderer/components/ui/avatar' |
||||
import { |
||||
CommandDialog, |
||||
CommandInput, |
||||
CommandItem, |
||||
CommandList |
||||
} from '@renderer/components/ui/command' |
||||
import { useSearchProfiles } from '@renderer/hooks' |
||||
import { toNote, toNoteList, toProfile, toProfileList } from '@renderer/lib/link' |
||||
import { generateImageByPubkey } from '@renderer/lib/pubkey' |
||||
import { useRelaySettings } from '@renderer/providers/RelaySettingsProvider' |
||||
import { TProfile } from '@renderer/types' |
||||
import { Hash, Notebook, UserRound } from 'lucide-react' |
||||
import { nip19 } from 'nostr-tools' |
||||
import { Dispatch, useEffect, useMemo, useState } from 'react' |
||||
import { useTranslation } from 'react-i18next' |
||||
|
||||
export function SearchDialog({ open, setOpen }: { open: boolean; setOpen: Dispatch<boolean> }) { |
||||
const { t } = useTranslation() |
||||
const [input, setInput] = useState('') |
||||
const [debouncedInput, setDebouncedInput] = useState(input) |
||||
const { profiles } = useSearchProfiles(debouncedInput, 10) |
||||
|
||||
const list = useMemo(() => { |
||||
const search = input.trim() |
||||
if (!search) return |
||||
|
||||
if (/^[0-9a-f]{64}$/.test(search)) { |
||||
return ( |
||||
<> |
||||
<NoteItem id={search} onClick={() => setOpen(false)} /> |
||||
<ProfileIdItem id={search} onClick={() => setOpen(false)} /> |
||||
</> |
||||
) |
||||
} |
||||
|
||||
try { |
||||
let id = search |
||||
if (id.startsWith('nostr:')) { |
||||
id = id.slice(6) |
||||
} |
||||
const { type } = nip19.decode(id) |
||||
if (['nprofile', 'npub'].includes(type)) { |
||||
return <ProfileIdItem id={id} onClick={() => setOpen(false)} /> |
||||
} |
||||
if (['nevent', 'naddr', 'note'].includes(type)) { |
||||
return <NoteItem id={id} onClick={() => setOpen(false)} /> |
||||
} |
||||
} catch { |
||||
// ignore
|
||||
} |
||||
|
||||
return ( |
||||
<> |
||||
<NormalItem search={search} onClick={() => setOpen(false)} /> |
||||
<HashtagItem search={search} onClick={() => setOpen(false)} /> |
||||
{profiles.map((profile) => ( |
||||
<ProfileItem key={profile.pubkey} profile={profile} onClick={() => setOpen(false)} /> |
||||
))} |
||||
{profiles.length >= 10 && ( |
||||
<SecondaryPageLink to={toProfileList({ search })} onClick={() => setOpen(false)}> |
||||
<CommandItem onClick={() => setOpen(false)} className="text-center"> |
||||
<div className="font-semibold">{t('Show more...')}</div> |
||||
</CommandItem> |
||||
</SecondaryPageLink> |
||||
)} |
||||
</> |
||||
) |
||||
}, [input, profiles]) |
||||
|
||||
useEffect(() => { |
||||
const handler = setTimeout(() => { |
||||
setDebouncedInput(input) |
||||
}, 500) |
||||
|
||||
return () => { |
||||
clearTimeout(handler) |
||||
} |
||||
}, [input]) |
||||
|
||||
return ( |
||||
<CommandDialog open={open} onOpenChange={setOpen}> |
||||
<CommandInput value={input} onValueChange={setInput} /> |
||||
<CommandList>{list}</CommandList> |
||||
</CommandDialog> |
||||
) |
||||
} |
||||
|
||||
function NormalItem({ search, onClick }: { search: string; onClick?: () => void }) { |
||||
const { searchableRelayUrls } = useRelaySettings() |
||||
|
||||
if (searchableRelayUrls.length === 0) { |
||||
return null |
||||
} |
||||
|
||||
return ( |
||||
<SecondaryPageLink to={toNoteList({ search })} onClick={onClick}> |
||||
<CommandItem> |
||||
<Notebook className="text-muted-foreground" /> |
||||
<div className="font-semibold">{search}</div> |
||||
</CommandItem> |
||||
</SecondaryPageLink> |
||||
) |
||||
} |
||||
|
||||
function HashtagItem({ search, onClick }: { search: string; onClick?: () => void }) { |
||||
const hashtag = search.match(/[\p{L}\p{N}\p{M}]+/u)?.[0].toLowerCase() |
||||
return ( |
||||
<SecondaryPageLink to={toNoteList({ hashtag })} onClick={onClick}> |
||||
<CommandItem value={`hashtag-${hashtag}`}> |
||||
<Hash className="text-muted-foreground" /> |
||||
<div className="font-semibold">{hashtag}</div> |
||||
</CommandItem> |
||||
</SecondaryPageLink> |
||||
) |
||||
} |
||||
|
||||
function NoteItem({ id, onClick }: { id: string; onClick?: () => void }) { |
||||
return ( |
||||
<SecondaryPageLink to={toNote(id)} onClick={onClick}> |
||||
<CommandItem> |
||||
<Notebook className="text-muted-foreground" /> |
||||
<div className="font-semibold truncate">{id}</div> |
||||
</CommandItem> |
||||
</SecondaryPageLink> |
||||
) |
||||
} |
||||
|
||||
function ProfileIdItem({ id, onClick }: { id: string; onClick?: () => void }) { |
||||
return ( |
||||
<SecondaryPageLink to={toProfile(id)} onClick={onClick}> |
||||
<CommandItem> |
||||
<UserRound className="text-muted-foreground" /> |
||||
<div className="font-semibold truncate">{id}</div> |
||||
</CommandItem> |
||||
</SecondaryPageLink> |
||||
) |
||||
} |
||||
|
||||
function ProfileItem({ profile, onClick }: { profile: TProfile; onClick?: () => void }) { |
||||
return ( |
||||
<SecondaryPageLink to={toProfile(profile.pubkey)} onClick={onClick}> |
||||
<CommandItem> |
||||
<div className="flex gap-2"> |
||||
<Avatar> |
||||
<AvatarImage src={profile.avatar} alt={profile.username} /> |
||||
<AvatarFallback> |
||||
<img src={generateImageByPubkey(profile.pubkey)} alt={profile.username} /> |
||||
</AvatarFallback> |
||||
</Avatar> |
||||
<div> |
||||
<div className="font-semibold">{profile.username}</div> |
||||
<div className="line-clamp-1 text-muted-foreground">{profile.about}</div> |
||||
</div> |
||||
</div> |
||||
</CommandItem> |
||||
</SecondaryPageLink> |
||||
) |
||||
} |
||||
@ -0,0 +1,22 @@
@@ -0,0 +1,22 @@
|
||||
import FollowButton from '@renderer/components/FollowButton' |
||||
import Nip05 from '@renderer/components/Nip05' |
||||
import UserAvatar from '@renderer/components/UserAvatar' |
||||
import Username from '@renderer/components/Username' |
||||
import { useFetchProfile } from '@renderer/hooks' |
||||
|
||||
export default function UserItem({ pubkey }: { pubkey: string }) { |
||||
const { profile } = useFetchProfile(pubkey) |
||||
const { nip05, about } = profile || {} |
||||
|
||||
return ( |
||||
<div className="flex gap-2 items-start"> |
||||
<UserAvatar userId={pubkey} className="shrink-0" /> |
||||
<div className="w-full overflow-hidden"> |
||||
<Username userId={pubkey} className="font-semibold truncate" skeletonClassName="h-4" /> |
||||
<Nip05 nip05={nip05} pubkey={pubkey} /> |
||||
<div className="truncate text-muted-foreground text-sm">{about}</div> |
||||
</div> |
||||
<FollowButton pubkey={pubkey} /> |
||||
</div> |
||||
) |
||||
} |
||||
@ -0,0 +1,143 @@
@@ -0,0 +1,143 @@
|
||||
import { type DialogProps } from '@radix-ui/react-dialog' |
||||
import { Command as CommandPrimitive } from 'cmdk' |
||||
import { Search } from 'lucide-react' |
||||
import * as React from 'react' |
||||
|
||||
import { Dialog, DialogContent } from '@renderer/components/ui/dialog' |
||||
import { ScrollArea } from '@renderer/components/ui/scroll-area' |
||||
import { cn } from '@renderer/lib/utils' |
||||
|
||||
const Command = React.forwardRef< |
||||
React.ElementRef<typeof CommandPrimitive>, |
||||
React.ComponentPropsWithoutRef<typeof CommandPrimitive> |
||||
>(({ className, ...props }, ref) => ( |
||||
<CommandPrimitive |
||||
ref={ref} |
||||
className={cn( |
||||
'flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', |
||||
className |
||||
)} |
||||
{...props} |
||||
/> |
||||
)) |
||||
Command.displayName = CommandPrimitive.displayName |
||||
|
||||
const CommandDialog = ({ children, ...props }: DialogProps) => { |
||||
return ( |
||||
<Dialog {...props}> |
||||
<DialogContent className="overflow-hidden p-0 shadow-lg top-4 translate-y-0 data-[state=closed]:slide-out-to-top-0 data-[state=open]:slide-in-from-top-0"> |
||||
<Command |
||||
shouldFilter={false} |
||||
className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5" |
||||
> |
||||
{children} |
||||
</Command> |
||||
</DialogContent> |
||||
</Dialog> |
||||
) |
||||
} |
||||
|
||||
const CommandInput = React.forwardRef< |
||||
React.ElementRef<typeof CommandPrimitive.Input>, |
||||
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input> |
||||
>(({ className, ...props }, ref) => ( |
||||
<div className="flex items-center border-b px-3" cmdk-input-wrapper=""> |
||||
<Search className="mr-2 h-4 w-4 shrink-0 opacity-50" /> |
||||
<CommandPrimitive.Input |
||||
ref={ref} |
||||
className={cn( |
||||
'flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 pr-6', |
||||
className |
||||
)} |
||||
{...props} |
||||
/> |
||||
</div> |
||||
)) |
||||
|
||||
CommandInput.displayName = CommandPrimitive.Input.displayName |
||||
|
||||
const CommandList = React.forwardRef< |
||||
React.ElementRef<typeof CommandPrimitive.List>, |
||||
React.ComponentPropsWithoutRef<typeof CommandPrimitive.List> |
||||
>(({ className, ...props }, ref) => ( |
||||
<ScrollArea className="max-h-[80vh]"> |
||||
<CommandPrimitive.List ref={ref} className={cn('overflow-x-hidden', className)} {...props} /> |
||||
</ScrollArea> |
||||
)) |
||||
|
||||
CommandList.displayName = CommandPrimitive.List.displayName |
||||
|
||||
const CommandEmpty = React.forwardRef< |
||||
React.ElementRef<typeof CommandPrimitive.Empty>, |
||||
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty> |
||||
>((props, ref) => ( |
||||
<CommandPrimitive.Empty ref={ref} className="py-6 text-center text-sm" {...props} /> |
||||
)) |
||||
|
||||
CommandEmpty.displayName = CommandPrimitive.Empty.displayName |
||||
|
||||
const CommandGroup = React.forwardRef< |
||||
React.ElementRef<typeof CommandPrimitive.Group>, |
||||
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group> |
||||
>(({ className, ...props }, ref) => ( |
||||
<CommandPrimitive.Group |
||||
ref={ref} |
||||
className={cn( |
||||
'overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground', |
||||
className |
||||
)} |
||||
{...props} |
||||
/> |
||||
)) |
||||
|
||||
CommandGroup.displayName = CommandPrimitive.Group.displayName |
||||
|
||||
const CommandSeparator = React.forwardRef< |
||||
React.ElementRef<typeof CommandPrimitive.Separator>, |
||||
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator> |
||||
>(({ className, ...props }, ref) => ( |
||||
<CommandPrimitive.Separator |
||||
ref={ref} |
||||
className={cn('-mx-1 h-px bg-border', className)} |
||||
{...props} |
||||
/> |
||||
)) |
||||
CommandSeparator.displayName = CommandPrimitive.Separator.displayName |
||||
|
||||
const CommandItem = React.forwardRef< |
||||
React.ElementRef<typeof CommandPrimitive.Item>, |
||||
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item> |
||||
>(({ className, ...props }, ref) => ( |
||||
<CommandPrimitive.Item |
||||
ref={ref} |
||||
className={cn( |
||||
"relative flex cursor-pointer gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", |
||||
className |
||||
)} |
||||
{...props} |
||||
/> |
||||
)) |
||||
|
||||
CommandItem.displayName = CommandPrimitive.Item.displayName |
||||
|
||||
const CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => { |
||||
return ( |
||||
<span |
||||
className={cn('ml-auto text-xs tracking-widest text-muted-foreground', className)} |
||||
{...props} |
||||
/> |
||||
) |
||||
} |
||||
CommandShortcut.displayName = 'CommandShortcut' |
||||
|
||||
export { |
||||
Command, |
||||
CommandDialog, |
||||
CommandEmpty, |
||||
CommandGroup, |
||||
CommandInput, |
||||
CommandItem, |
||||
CommandList, |
||||
CommandSeparator, |
||||
CommandShortcut |
||||
} |
||||
@ -0,0 +1,23 @@
@@ -0,0 +1,23 @@
|
||||
import client from '@renderer/services/client.service' |
||||
import { TRelayInfo } from '@renderer/types' |
||||
import { useEffect, useState } from 'react' |
||||
|
||||
export function useFetchRelayInfos(urls: string[]) { |
||||
const [relayInfos, setRelayInfos] = useState<(TRelayInfo | undefined)[]>([]) |
||||
|
||||
useEffect(() => { |
||||
const fetchRelayInfos = async () => { |
||||
if (urls.length === 0) return |
||||
try { |
||||
const relayInfos = await client.fetchRelayInfos(urls) |
||||
setRelayInfos(relayInfos) |
||||
} catch (err) { |
||||
console.error(err) |
||||
} |
||||
} |
||||
|
||||
fetchRelayInfos() |
||||
}, [JSON.stringify(urls)]) |
||||
|
||||
return relayInfos |
||||
} |
||||
@ -0,0 +1,24 @@
@@ -0,0 +1,24 @@
|
||||
export function useSearchParams() { |
||||
const searchParams = new URLSearchParams(window.location.search) |
||||
|
||||
return { |
||||
searchParams, |
||||
get: (key: string) => searchParams.get(key), |
||||
set: (key: string, value: string) => { |
||||
searchParams.set(key, value) |
||||
window.history.replaceState( |
||||
null, |
||||
'', |
||||
`${window.location.pathname}?${searchParams.toString()}` |
||||
) |
||||
}, |
||||
delete: (key: string) => { |
||||
searchParams.delete(key) |
||||
window.history.replaceState( |
||||
null, |
||||
'', |
||||
`${window.location.pathname}?${searchParams.toString()}` |
||||
) |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,39 @@
@@ -0,0 +1,39 @@
|
||||
import { useRelaySettings } from '@renderer/providers/RelaySettingsProvider' |
||||
import client from '@renderer/services/client.service' |
||||
import { TProfile } from '@renderer/types' |
||||
import { useEffect, useState } from 'react' |
||||
|
||||
export function useSearchProfiles(search: string, limit: number) { |
||||
const { searchableRelayUrls } = useRelaySettings() |
||||
const [isFetching, setIsFetching] = useState(true) |
||||
const [error, setError] = useState<Error | null>(null) |
||||
const [profiles, setProfiles] = useState<TProfile[]>([]) |
||||
|
||||
useEffect(() => { |
||||
const fetchProfiles = async () => { |
||||
setIsFetching(true) |
||||
setProfiles([]) |
||||
if (searchableRelayUrls.length === 0) { |
||||
setIsFetching(false) |
||||
return |
||||
} |
||||
try { |
||||
const profiles = await client.fetchProfiles(searchableRelayUrls, { |
||||
search, |
||||
limit |
||||
}) |
||||
if (profiles) { |
||||
setProfiles(profiles) |
||||
} |
||||
} catch (err) { |
||||
setError(err as Error) |
||||
} finally { |
||||
setIsFetching(false) |
||||
} |
||||
} |
||||
|
||||
fetchProfiles() |
||||
}, [searchableRelayUrls, search, limit]) |
||||
|
||||
return { isFetching, error, profiles } |
||||
} |
||||
@ -1,18 +0,0 @@
@@ -1,18 +0,0 @@
|
||||
import NoteList from '@renderer/components/NoteList' |
||||
import SecondaryPageLayout from '@renderer/layouts/SecondaryPageLayout' |
||||
import { useRelaySettings } from '@renderer/providers/RelaySettingsProvider' |
||||
import NotFoundPage from '../NotFoundPage' |
||||
|
||||
export default function HashtagPage({ id }: { id?: string }) { |
||||
const { relayUrls } = useRelaySettings() |
||||
if (!id) { |
||||
return <NotFoundPage /> |
||||
} |
||||
const hashtag = id.toLowerCase() |
||||
|
||||
return ( |
||||
<SecondaryPageLayout titlebarContent={`# ${hashtag}`}> |
||||
<NoteList key={hashtag} filter={{ '#t': [hashtag] }} relayUrls={relayUrls} /> |
||||
</SecondaryPageLayout> |
||||
) |
||||
} |
||||
@ -0,0 +1,40 @@
@@ -0,0 +1,40 @@
|
||||
import NoteList from '@renderer/components/NoteList' |
||||
import { useSearchParams } from '@renderer/hooks' |
||||
import SecondaryPageLayout from '@renderer/layouts/SecondaryPageLayout' |
||||
import { useRelaySettings } from '@renderer/providers/RelaySettingsProvider' |
||||
import { Filter } from 'nostr-tools' |
||||
import { useMemo } from 'react' |
||||
import { useTranslation } from 'react-i18next' |
||||
|
||||
export default function NoteListPage() { |
||||
const { t } = useTranslation() |
||||
const { relayUrls, searchableRelayUrls } = useRelaySettings() |
||||
const { searchParams } = useSearchParams() |
||||
const [title, filter] = useMemo<[string, Filter] | [undefined, undefined]>(() => { |
||||
const hashtag = searchParams.get('t') |
||||
if (hashtag) { |
||||
return [`# ${hashtag}`, { '#t': [hashtag] }] |
||||
} |
||||
const search = searchParams.get('s') |
||||
if (search) { |
||||
return [`${t('search')}: ${search}`, { search }] |
||||
} |
||||
return [undefined, undefined] |
||||
}, [searchParams]) |
||||
|
||||
if (!filter || (filter.search && searchableRelayUrls.length === 0)) { |
||||
return ( |
||||
<SecondaryPageLayout titlebarContent={title}> |
||||
<div className="text-center text-sm text-muted-foreground"> |
||||
{t('The relays you are connected to do not support search')} |
||||
</div> |
||||
</SecondaryPageLayout> |
||||
) |
||||
} |
||||
|
||||
return ( |
||||
<SecondaryPageLayout titlebarContent={title}> |
||||
<NoteList key={title} filter={filter} relayUrls={relayUrls} /> |
||||
</SecondaryPageLayout> |
||||
) |
||||
} |
||||
@ -0,0 +1,89 @@
@@ -0,0 +1,89 @@
|
||||
import UserItem from '@renderer/components/UserItem' |
||||
import { useSearchParams } from '@renderer/hooks' |
||||
import SecondaryPageLayout from '@renderer/layouts/SecondaryPageLayout' |
||||
import { useRelaySettings } from '@renderer/providers/RelaySettingsProvider' |
||||
import client from '@renderer/services/client.service' |
||||
import dayjs from 'dayjs' |
||||
import { Filter } from 'nostr-tools' |
||||
import { useEffect, useMemo, useRef, useState } from 'react' |
||||
import { useTranslation } from 'react-i18next' |
||||
|
||||
const LIMIT = 50 |
||||
|
||||
export default function ProfileListPage() { |
||||
const { t } = useTranslation() |
||||
const { searchParams } = useSearchParams() |
||||
const { relayUrls, searchableRelayUrls } = useRelaySettings() |
||||
const [until, setUntil] = useState<number>(() => dayjs().unix()) |
||||
const [hasMore, setHasMore] = useState<boolean>(true) |
||||
const [pubkeySet, setPubkeySet] = useState(new Set<string>()) |
||||
const observer = useRef<IntersectionObserver | null>(null) |
||||
const bottomRef = useRef<HTMLDivElement>(null) |
||||
const filter = useMemo(() => { |
||||
const f: Filter = { until } |
||||
const search = searchParams.get('s') |
||||
if (search) { |
||||
f.search = search |
||||
} |
||||
return f |
||||
}, [searchParams, until]) |
||||
const urls = useMemo(() => { |
||||
return filter.search ? searchableRelayUrls : relayUrls |
||||
}, [relayUrls, searchableRelayUrls, filter]) |
||||
const title = useMemo(() => { |
||||
return filter.search ? `${t('search')}: ${filter.search}` : t('all users') |
||||
}, [filter]) |
||||
|
||||
useEffect(() => { |
||||
if (!hasMore) return |
||||
const options = { |
||||
root: null, |
||||
rootMargin: '10px', |
||||
threshold: 1 |
||||
} |
||||
|
||||
observer.current = new IntersectionObserver((entries) => { |
||||
if (entries[0].isIntersecting && hasMore) { |
||||
loadMore() |
||||
} |
||||
}, options) |
||||
|
||||
if (bottomRef.current) { |
||||
observer.current.observe(bottomRef.current) |
||||
} |
||||
|
||||
return () => { |
||||
if (observer.current && bottomRef.current) { |
||||
observer.current.unobserve(bottomRef.current) |
||||
} |
||||
} |
||||
}, [filter, hasMore]) |
||||
|
||||
async function loadMore() { |
||||
if (urls.length === 0) { |
||||
return setHasMore(false) |
||||
} |
||||
const profiles = await client.fetchProfiles(urls, { ...filter, limit: LIMIT }) |
||||
const newPubkeySet = new Set<string>() |
||||
profiles.forEach((profile) => { |
||||
if (!pubkeySet.has(profile.pubkey)) { |
||||
newPubkeySet.add(profile.pubkey) |
||||
} |
||||
}) |
||||
setPubkeySet((prev) => new Set([...prev, ...newPubkeySet])) |
||||
setHasMore(profiles.length >= LIMIT) |
||||
const lastProfileCreatedAt = profiles[profiles.length - 1].created_at |
||||
setUntil(lastProfileCreatedAt ? lastProfileCreatedAt - 1 : 0) |
||||
} |
||||
|
||||
return ( |
||||
<SecondaryPageLayout titlebarContent={title}> |
||||
<div className="space-y-2"> |
||||
{Array.from(pubkeySet).map((pubkey, index) => ( |
||||
<UserItem key={`${index}-${pubkey}`} pubkey={pubkey} /> |
||||
))} |
||||
{hasMore && <div ref={bottomRef} />} |
||||
</div> |
||||
</SecondaryPageLayout> |
||||
) |
||||
} |
||||
Loading…
Reference in new issue