reya/lume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add relay feeds

Browse Source
This commit is contained in:
reya
2024-11-01 09:25:12 +07:00
parent aa4f21a869
commit 18e1ac0e6c
15 changed files with 510 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/columns/_layout/discover-relays.lazy.tsx
+154
View File
@@ -0,0 +1,154 @@
import { commands } from "@/commands.gen";
import { Spinner, User } from "@/components";
import { LumeWindow } from "@/system";
import type { NostrEvent } from "@/types";
import { ArrowDown } from "@phosphor-icons/react";
import * as ScrollArea from "@radix-ui/react-scroll-area";
import { useInfiniteQuery } from "@tanstack/react-query";
import { createLazyFileRoute } from "@tanstack/react-router";
import { type RefObject, useCallback, useRef } from "react";
import { Virtualizer } from "virtua";
export const Route = createLazyFileRoute("/columns/_layout/discover-relays")({
component: Screen,
});
function Screen() {
const {
isLoading,
isError,
error,
isFetchingNextPage,
hasNextPage,
fetchNextPage,
data,
} = useInfiniteQuery({
queryKey: ["discover-relays"],
initialPageParam: 0,
queryFn: async ({ pageParam }: { pageParam: number }) => {
const until = pageParam > 0 ? pageParam.toString() : null;
const res = await commands.getAllRelays(until);
if (res.status === "ok") {
const data: NostrEvent[] = res.data.map((item) => JSON.parse(item));
return data;
} else {
throw new Error(res.error);
}
},
getNextPageParam: (lastPage) => {
const lastEvent = lastPage.at(-1);
if (lastEvent) {
return lastEvent.created_at - 1;
}
},
select: (data) => data?.pages.flat(),
refetchOnWindowFocus: false,
refetchOnReconnect: false,
refetchOnMount: false,
});
const ref = useRef<HTMLDivElement>(null);
const renderItem = useCallback(
(item: NostrEvent) => {
return (
<div
key={item.id}
className="mb-3 flex flex-col rounded-xl overflow-hidden bg-white dark:bg-neutral-800/50 shadow-lg shadow-primary dark:ring-1 dark:ring-neutral-800"
>
<div className="flex flex-col gap-2 p-2">
{item.tags.map((tag) =>
tag[1]?.startsWith("wss://") ? (
<div
key={tag[1]}
className="group px-3 flex items-center justify-between h-11 rounded-lg bg-neutral-100 dark:bg-neutral-800"
>
<div className="flex-1 truncate select-text text-sm font-medium">
{tag[1]}
</div>
<button
type="button"
onClick={() =>
LumeWindow.openColumn({
name: tag[1],
label: `relays_${tag[1].replace(/[^\w\s]/gi, "")}`,
url: `/columns/relays/${encodeURIComponent(tag[1])}`,
})
}
className="hidden h-6 w-24 shrink-0 group-hover:inline-flex items-center justify-center gap-1 text-xs font-semibold rounded-full bg-neutral-200 dark:bg-neutral-700 hover:bg-blue-500 hover:text-white"
>
View event
</button>
</div>
) : null,
)}
</div>
<div className="p-2 flex items-center">
<User.Provider pubkey={item.pubkey}>
<User.Root className="inline-flex items-center gap-2">
<User.Avatar className="size-7 rounded-full" />
<User.Name className="text-xs font-medium" />
</User.Root>
</User.Provider>
</div>
</div>
);
},
[data],
);
return (
<ScrollArea.Root
type={"scroll"}
scrollHideDelay={300}
className="overflow-hidden size-full"
>
<ScrollArea.Viewport ref={ref} className="relative h-full px-3 pb-3">
<Virtualizer scrollRef={ref as unknown as RefObject<HTMLElement>}>
{isLoading ? (
<div className="inline-flex items-center gap-1.5">
<Spinner className="size-4" />
Loading...
</div>
) : isError ? (
<div className="mb-3 flex flex-col items-center justify-center h-16 w-full rounded-xl overflow-hidden bg-neutral-200/50 dark:bg-neutral-800/50">
<p className="text-center">{error?.message ?? "Error"}</p>
</div>
) : !data?.length ? (
<div className="mb-3 flex flex-col items-center justify-center h-16 w-full rounded-xl overflow-hidden bg-neutral-200/50 dark:bg-neutral-800/50">
<p className="text-center">Empty.</p>
</div>
) : (
data?.map((item) => renderItem(item))
)}
{hasNextPage ? (
<button
type="button"
onClick={() => fetchNextPage()}
disabled={isFetchingNextPage || isLoading}
className="h-11 w-full px-3 flex items-center justify-center gap-1.5 bg-neutral-200/50 hover:bg-neutral-200 rounded-full text-sm font-medium text-blue-600 dark:hover:bg-neutral-800 dark:bg-neutral-800/50 dark:text-blue-400"
>
{isFetchingNextPage ? (
<Spinner className="size-4" />
) : (
<>
<ArrowDown className="size-4" />
Load more
</>
)}
</button>
) : null}
</Virtualizer>
</ScrollArea.Viewport>
<ScrollArea.Scrollbar
className="flex select-none touch-none p-0.5 duration-[160ms] ease-out data-[orientation=vertical]:w-2"
orientation="vertical"
>
<ScrollArea.Thumb className="flex-1 bg-black/10 dark:bg-white/10 rounded-full relative before:content-[''] before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full before:min-w-[44px] before:min-h-[44px]" />
</ScrollArea.Scrollbar>
<ScrollArea.Corner className="bg-transparent" />
</ScrollArea.Root>
);
}
src/routes/columns/_layout/groups.$id.lazy.tsx
+1 -1
View File
@@ -26,7 +26,7 @@ export function Screen() {
hasNextPage,
fetchNextPage,
} = useInfiniteQuery({
queryKey: ["events", "groups", params.id],
queryKey: ["groups", params.id],
initialPageParam: 0,
queryFn: async ({ pageParam }: { pageParam: number }) => {
const until = pageParam > 0 ? pageParam.toString() : null;
src/routes/columns/_layout/interests.$id.lazy.tsx
+1 -1
View File
@@ -26,7 +26,7 @@ export function Screen() {
hasNextPage,
fetchNextPage,
} = useInfiniteQuery({
queryKey: ["events", "hashtags", params.id],
queryKey: ["hashtags", params.id],
initialPageParam: 0,
queryFn: async ({ pageParam }: { pageParam: number }) => {
const tags = hashtags.map((tag) => tag.toLowerCase().replace("#", ""));
src/routes/columns/_layout/launchpad.$id.lazy.tsx
+18 -2
View File
@@ -42,7 +42,7 @@ function Screen() {
function Newsfeeds() {
const { id } = Route.useParams();
const { isLoading, isError, error, data, refetch, isRefetching } = useQuery({
queryKey: ["others", "newsfeeds", id],
queryKey: ["newsfeeds", id],
queryFn: async () => {
const res = await commands.getAllNewsfeeds(id);
@@ -204,7 +204,7 @@ function Newsfeeds() {
function Interests() {
const { id } = Route.useParams();
const { isLoading, isError, error, data, refetch, isRefetching } = useQuery({
queryKey: ["others", "interests", id],
queryKey: ["interests", id],
queryFn: async () => {
const res = await commands.getAllInterests(id);
@@ -399,6 +399,22 @@ function Core() {
Add
</button>
</div>
<div className="px-3 flex items-center justify-between h-11 rounded-lg bg-neutral-100 dark:bg-neutral-800">
<div className="text-sm font-medium">Relays</div>
<button
type="button"
onClick={() =>
LumeWindow.openColumn({
name: "Relays",
label: "relays",
url: "/columns/discover-relays",
})
}
className="h-6 w-16 inline-flex items-center justify-center gap-1 text-xs font-semibold rounded-full bg-neutral-200 dark:bg-neutral-700 hover:bg-blue-500 hover:text-white"
>
Add
</button>
</div>
{data?.map((column) => (
<div
key={column.label}
src/routes/columns/_layout/newsfeed.$id.lazy.tsx
+2 -15
View File
@@ -7,8 +7,7 @@ import { ArrowDown } from "@phosphor-icons/react";
import * as ScrollArea from "@radix-ui/react-scroll-area";
import { useInfiniteQuery } from "@tanstack/react-query";
import { createLazyFileRoute } from "@tanstack/react-router";
import { listen } from "@tauri-apps/api/event";
import { type RefObject, useCallback, useEffect, useRef } from "react";
import { type RefObject, useCallback, useRef } from "react";
import { Virtualizer } from "virtua";
export const Route = createLazyFileRoute("/columns/_layout/newsfeed/$id")({
@@ -18,7 +17,7 @@ export const Route = createLazyFileRoute("/columns/_layout/newsfeed/$id")({
export function Screen() {
const contacts = Route.useLoaderData();
const search = Route.useSearch();
const { queryClient } = Route.useRouteContext();
const {
data,
isLoading,
@@ -83,18 +82,6 @@ export function Screen() {
[data],
);
useEffect(() => {
const unlisten = listen("synchronized", async () => {
await queryClient.refetchQueries({
queryKey: ["events", "newsfeed", search.label],
});
});
return () => {
unlisten.then((f) => f());
};
}, []);
return (
<ScrollArea.Root
type={"scroll"}
src/routes/columns/_layout/relays.$url.lazy.tsx
+144
View File
@@ -0,0 +1,144 @@
import { commands } from "@/commands.gen";
import { toLumeEvents } from "@/commons";
import { RepostNote, Spinner, TextNote } from "@/components";
import type { LumeEvent } from "@/system";
import { Kind } from "@/types";
import { ArrowDown } from "@phosphor-icons/react";
import * as ScrollArea from "@radix-ui/react-scroll-area";
import { useInfiniteQuery } from "@tanstack/react-query";
import { createLazyFileRoute } from "@tanstack/react-router";
import { type RefObject, useCallback, useRef } from "react";
import { Virtualizer } from "virtua";
export const Route = createLazyFileRoute("/columns/_layout/relays/$url")({
component: Screen,
});
export function Screen() {
const { url } = Route.useParams();
const {
data,
isLoading,
isFetching,
isFetchingNextPage,
hasNextPage,
fetchNextPage,
} = useInfiniteQuery({
queryKey: ["relays", url],
initialPageParam: 0,
queryFn: async ({ pageParam }: { pageParam: number }) => {
const until = pageParam > 0 ? pageParam.toString() : null;
const relay = decodeURIComponent(url);
const res = await commands.getAllEventsFrom(relay, until);
if (res.status === "error") {
throw new Error(res.error);
}
return toLumeEvents(res.data);
},
getNextPageParam: (lastPage) => {
const lastEvent = lastPage.at(-1);
if (lastEvent) {
return lastEvent.created_at - 1;
}
},
select: (data) => data?.pages.flat(),
});
const ref = useRef<HTMLDivElement>(null);
const renderItem = useCallback(
(event: LumeEvent) => {
if (!event) {
return;
}
switch (event.kind) {
case Kind.Repost: {
const repostId = event.repostId;
return (
<RepostNote
key={repostId + event.id}
event={event}
className="border-b-[.5px] border-neutral-300 dark:border-neutral-700"
/>
);
}
default:
return (
<TextNote
key={event.id}
event={event}
className="border-b-[.5px] border-neutral-300 dark:border-neutral-700"
/>
);
}
},
[data],
);
return (
<ScrollArea.Root
type={"scroll"}
scrollHideDelay={300}
className="overflow-hidden size-full px-3"
>
<ScrollArea.Viewport
ref={ref}
className="relative h-full bg-white dark:bg-neutral-800 rounded-t-xl shadow shadow-neutral-300/50 dark:shadow-none border-[.5px] border-neutral-300 dark:border-neutral-700"
>
<Virtualizer scrollRef={ref as unknown as RefObject<HTMLElement>}>
{isFetching && !isLoading && !isFetchingNextPage ? (
<div className="z-50 fixed top-0 left-0 w-full h-14 flex items-center justify-center px-3">
<div className="w-max h-8 pl-2 pr-3 inline-flex items-center justify-center gap-1.5 rounded-full shadow-lg text-sm font-medium text-white bg-black dark:text-black dark:bg-white">
<Spinner className="size-4" />
Getting new notes...
</div>
</div>
) : null}
{isLoading ? (
<div className="flex items-center justify-center w-full h-16 gap-2">
<Spinner className="size-4" />
<span className="text-sm font-medium">Loading...</span>
</div>
) : !data?.length ? (
<div className="mb-3 flex items-center justify-center h-20 text-sm">
🎉 Yo. You're catching up on all latest notes.
</div>
) : (
data.map((item) => renderItem(item))
)}
{hasNextPage ? (
<div>
<button
type="button"
onClick={() => fetchNextPage()}
disabled={isFetchingNextPage || isLoading}
className="inline-flex items-center justify-center w-full gap-2 px-3 text-sm font-medium text-blue-500 h-11 focus:outline-none"
>
{isFetchingNextPage ? (
<Spinner className="size-4" />
) : (
<>
<ArrowDown className="size-4" />
Load more
</>
)}
</button>
</div>
) : null}
</Virtualizer>
</ScrollArea.Viewport>
<ScrollArea.Scrollbar
className="flex select-none touch-none p-0.5 duration-[160ms] ease-out data-[orientation=vertical]:w-2"
orientation="vertical"
>
<ScrollArea.Thumb className="flex-1 bg-black/10 dark:bg-white/10 rounded-full relative before:content-[''] before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full before:min-w-[44px] before:min-h-[44px]" />
</ScrollArea.Scrollbar>
<ScrollArea.Corner className="bg-transparent" />
</ScrollArea.Root>
);
}