feat: add local and global newsfeeds

2024-09-29 16:30:55 +00:00 · 2024-03-07 15:39:43 +07:00 · 2024-03-07 15:39:43 +07:00 · a4fdcfdf0b
commit a4fdcfdf0b
parent 25d07303a3
8 changed files with 298 additions and 134 deletions
--- a/apps/desktop2/src/routes/$account/home.lazy.tsx
+++ b/apps/desktop2/src/routes/$account/home.lazy.tsx
@ -1,133 +0,0 @@
-import { RepostNote } from "@/components/repost";
-import { Suggest } from "@/components/suggest";
-import { TextNote } from "@/components/text";
-import { useArk } from "@lume/ark";
-import {
-  LoaderIcon,
-  ArrowRightCircleIcon,
-  RefreshIcon,
-  InfoIcon,
-} from "@lume/icons";
-import { Event, Kind } from "@lume/types";
-import { EmptyFeed } from "@lume/ui";
-import { FETCH_LIMIT } from "@lume/utils";
-import { useInfiniteQuery } from "@tanstack/react-query";
-import { createLazyFileRoute } from "@tanstack/react-router";
-import { Virtualizer } from "virtua";
-
-export const Route = createLazyFileRoute("/$account/home")({
-  component: Home,
-});
-
-function Home() {
-  const ark = useArk();
-  const currentDate = new Date().toLocaleString("default", {
-    weekday: "long",
-    month: "long",
-    day: "numeric",
-  });
-
-  const { account } = Route.useParams();
-  const {
-    data,
-    hasNextPage,
-    isLoading,
-    isRefetching,
-    isFetchingNextPage,
-    fetchNextPage,
-    refetch,
-  } = useInfiniteQuery({
-    queryKey: ["local_newsfeed", account],
-    initialPageParam: 0,
-    queryFn: async ({ pageParam }: { pageParam: number }) => {
-      const events = await ark.get_events(
-        "local",
-        FETCH_LIMIT,
-        pageParam,
-        true,
-      );
-      return events;
-    },
-    getNextPageParam: (lastPage) => {
-      const lastEvent = lastPage?.at(-1);
-      if (!lastEvent) return;
-      return lastEvent.created_at - 1;
-    },
-    select: (data) => data?.pages.flatMap((page) => page),
-    refetchOnWindowFocus: false,
-  });
-
-  const renderItem = (event: Event) => {
-    if (!event) return;
-    switch (event.kind) {
-      case Kind.Repost:
-        return <RepostNote key={event.id} event={event} />;
-      default:
-        return <TextNote key={event.id} event={event} />;
-    }
-  };
-
-  return (
-    <div className="flex flex-col gap-3">
-      <div className="mx-auto flex h-12 w-full max-w-xl shrink-0 items-center justify-between border-b border-neutral-100 dark:border-neutral-900">
-        <h3 className="text-sm font-medium uppercase leading-tight text-neutral-600 dark:text-neutral-400">
-          {currentDate}
-        </h3>
-        <div className="flex items-center gap-3">
-          <button
-            type="button"
-            onClick={() => refetch()}
-            className="text-neutral-700 hover:text-blue-500 dark:text-neutral-300"
-          >
-            <RefreshIcon className="size-4" />
-          </button>
-        </div>
-      </div>
-      <div className="mx-auto flex w-full max-w-xl flex-1 flex-col">
-        <div className="flex-1">
-          {isLoading || isRefetching ? (
-            <div className="flex h-20 w-full flex-col items-center justify-center gap-1">
-              <LoaderIcon className="size-5 animate-spin" />
-            </div>
-          ) : !data.length ? (
-            <div className="flex flex-col gap-3">
-              <div className="flex items-center gap-2 rounded-xl bg-neutral-100 p-3 dark:bg-neutral-900">
-                <InfoIcon className="size-5" />
-                <p>
-                  Empty newsfeed. Or you can go to{" "}
-                  <a href="" className="text-blue-500 hover:text-blue-600">
-                    Discover
-                  </a>
-                </p>
-              </div>
-              <Suggest />
-            </div>
-          ) : (
-            <Virtualizer overscan={3}>
-              {data.map((item) => renderItem(item))}
-            </Virtualizer>
-          )}
-          <div className="flex h-20 items-center justify-center">
-            {hasNextPage ? (
-              <button
-                type="button"
-                onClick={() => fetchNextPage()}
-                disabled={!hasNextPage || isFetchingNextPage}
-                className="inline-flex h-12 w-36 items-center justify-center gap-2 rounded-full bg-neutral-100 px-3 font-medium hover:bg-neutral-200 focus:outline-none dark:bg-neutral-900 dark:hover:bg-neutral-800"
-              >
-                {isFetchingNextPage ? (
-                  <LoaderIcon className="size-5 animate-spin" />
-                ) : (
-                  <>
-                    <ArrowRightCircleIcon className="size-5" />
-                    Load more
-                  </>
-                )}
-              </button>
-            ) : null}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
--- a/apps/desktop2/src/routes/$account/home.tsx
+++ b/apps/desktop2/src/routes/$account/home.tsx
@ -0,0 +1,68 @@
+import { GlobalIcon, LocalIcon, RefreshIcon } from "@lume/icons";
+import { cn } from "@lume/utils";
+import { useQueryClient } from "@tanstack/react-query";
+import { Link } from "@tanstack/react-router";
+import { Outlet, createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/$account/home")({
+  component: Screen,
+});
+
+function Screen() {
+  const queryClient = useQueryClient();
+  const { account } = Route.useParams();
+
+  const refresh = async () => {
+    const queryKey = `${window.location.pathname.split("/").at(-1)}_newsfeed`;
+    await queryClient.refetchQueries({ queryKey: [queryKey, account] });
+  };
+
+  return (
+    <div>
+      <div className="mx-auto mb-4 flex h-16 w-full max-w-xl shrink-0 items-center justify-between border-b border-neutral-100 dark:border-neutral-900">
+        <div className="flex items-center gap-2">
+          <Link to="/$account/home/local">
+            {({ isActive }) => (
+              <div
+                className={cn(
+                  "inline-flex items-center justify-center gap-2 rounded-full px-4 py-2 text-sm leading-tight hover:bg-neutral-100 dark:hover:bg-neutral-900",
+                  isActive
+                    ? "bg-neutral-100 font-semibold text-neutral-900 hover:bg-neutral-200 dark:bg-neutral-900 dark:text-neutral-100 dark:hover:bg-neutral-800"
+                    : "text-neutral-600 dark:text-neutral-400",
+                )}
+              >
+                <LocalIcon className="size-4" />
+                Local
+              </div>
+            )}
+          </Link>
+          <Link to="/$account/home/global">
+            {({ isActive }) => (
+              <div
+                className={cn(
+                  "inline-flex items-center justify-center gap-2 rounded-full px-4 py-2 text-sm leading-tight hover:bg-neutral-100 dark:hover:bg-neutral-900",
+                  isActive
+                    ? "bg-neutral-100 font-semibold text-neutral-900 hover:bg-neutral-200 dark:bg-neutral-900 dark:text-neutral-100 dark:hover:bg-neutral-800"
+                    : "text-neutral-600 dark:text-neutral-400",
+                )}
+              >
+                <GlobalIcon className="size-4" />
+                Global
+              </div>
+            )}
+          </Link>
+        </div>
+        <div className="flex items-center gap-3">
+          <button
+            type="button"
+            onClick={refresh}
+            className="text-neutral-700 hover:text-blue-500 dark:text-neutral-300"
+          >
+            <RefreshIcon className="size-4" />
+          </button>
+        </div>
+      </div>
+      <Outlet />
+    </div>
+  );
+}
--- a/apps/desktop2/src/routes/$account/home/global.lazy.tsx
+++ b/apps/desktop2/src/routes/$account/home/global.lazy.tsx
@ -0,0 +1,91 @@
+import { RepostNote } from "@/components/repost";
+import { Suggest } from "@/components/suggest";
+import { TextNote } from "@/components/text";
+import { useArk } from "@lume/ark";
+import { LoaderIcon, ArrowRightCircleIcon, InfoIcon } from "@lume/icons";
+import { Event, Kind } from "@lume/types";
+import { FETCH_LIMIT } from "@lume/utils";
+import { useInfiniteQuery } from "@tanstack/react-query";
+import { createLazyFileRoute } from "@tanstack/react-router";
+import { Virtualizer } from "virtua";
+
+export const Route = createLazyFileRoute("/$account/home/global")({
+  component: Screen,
+});
+
+function Screen() {
+  const ark = useArk();
+  const { account } = Route.useParams();
+  const {
+    data,
+    hasNextPage,
+    isLoading,
+    isRefetching,
+    isFetchingNextPage,
+    fetchNextPage,
+  } = useInfiniteQuery({
+    queryKey: ["global_newsfeed", account],
+    initialPageParam: 0,
+    queryFn: async ({ pageParam }: { pageParam: number }) => {
+      const events = await ark.get_events(
+        "global",
+        FETCH_LIMIT,
+        pageParam,
+        true,
+      );
+      return events;
+    },
+    getNextPageParam: (lastPage) => {
+      const lastEvent = lastPage?.at(-1);
+      if (!lastEvent) return;
+      return lastEvent.created_at - 1;
+    },
+    select: (data) => data?.pages.flatMap((page) => page),
+    refetchOnWindowFocus: false,
+  });
+
+  const renderItem = (event: Event) => {
+    if (!event) return;
+    switch (event.kind) {
+      case Kind.Repost:
+        return <RepostNote key={event.id} event={event} />;
+      default:
+        return <TextNote key={event.id} event={event} />;
+    }
+  };
+
+  return (
+    <div className="mx-auto flex w-full max-w-xl flex-1 flex-col">
+      <div className="flex-1">
+        {isLoading || isRefetching ? (
+          <div className="flex h-20 w-full flex-col items-center justify-center gap-1">
+            <LoaderIcon className="size-5 animate-spin" />
+          </div>
+        ) : (
+          <Virtualizer overscan={3}>
+            {data.map((item) => renderItem(item))}
+          </Virtualizer>
+        )}
+        <div className="flex h-20 items-center justify-center">
+          {hasNextPage ? (
+            <button
+              type="button"
+              onClick={() => fetchNextPage()}
+              disabled={!hasNextPage || isFetchingNextPage}
+              className="inline-flex h-12 w-36 items-center justify-center gap-2 rounded-full bg-neutral-100 px-3 font-medium hover:bg-neutral-200 focus:outline-none dark:bg-neutral-900 dark:hover:bg-neutral-800"
+            >
+              {isFetchingNextPage ? (
+                <LoaderIcon className="size-5 animate-spin" />
+              ) : (
+                <>
+                  <ArrowRightCircleIcon className="size-5" />
+                  Load more
+                </>
+              )}
+            </button>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/apps/desktop2/src/routes/$account/home/local.lazy.tsx
+++ b/apps/desktop2/src/routes/$account/home/local.lazy.tsx
@ -0,0 +1,108 @@
+import { RepostNote } from "@/components/repost";
+import { Suggest } from "@/components/suggest";
+import { TextNote } from "@/components/text";
+import { useArk } from "@lume/ark";
+import { LoaderIcon, ArrowRightCircleIcon, InfoIcon } from "@lume/icons";
+import { Event, Kind } from "@lume/types";
+import { FETCH_LIMIT } from "@lume/utils";
+import { useInfiniteQuery } from "@tanstack/react-query";
+import { Link } from "@tanstack/react-router";
+import { createLazyFileRoute } from "@tanstack/react-router";
+import { Virtualizer } from "virtua";
+
+export const Route = createLazyFileRoute("/$account/home/local")({
+  component: Screen,
+});
+
+function Screen() {
+  const ark = useArk();
+  const { account } = Route.useParams();
+  const {
+    data,
+    hasNextPage,
+    isLoading,
+    isRefetching,
+    isFetchingNextPage,
+    fetchNextPage,
+  } = useInfiniteQuery({
+    queryKey: ["local_newsfeed", account],
+    initialPageParam: 0,
+    queryFn: async ({ pageParam }: { pageParam: number }) => {
+      const events = await ark.get_events(
+        "local",
+        FETCH_LIMIT,
+        pageParam,
+        true,
+      );
+      return events;
+    },
+    getNextPageParam: (lastPage) => {
+      const lastEvent = lastPage?.at(-1);
+      if (!lastEvent) return;
+      return lastEvent.created_at - 1;
+    },
+    select: (data) => data?.pages.flatMap((page) => page),
+    refetchOnWindowFocus: false,
+  });
+
+  const renderItem = (event: Event) => {
+    if (!event) return;
+    switch (event.kind) {
+      case Kind.Repost:
+        return <RepostNote key={event.id} event={event} />;
+      default:
+        return <TextNote key={event.id} event={event} />;
+    }
+  };
+
+  return (
+    <div className="mx-auto flex w-full max-w-xl flex-1 flex-col">
+      <div className="flex-1">
+        {isLoading || isRefetching ? (
+          <div className="flex h-20 w-full flex-col items-center justify-center gap-1">
+            <LoaderIcon className="size-5 animate-spin" />
+          </div>
+        ) : !data.length ? (
+          <div className="flex flex-col gap-3">
+            <div className="flex items-center gap-2 rounded-xl bg-neutral-100 p-3 dark:bg-neutral-900">
+              <InfoIcon className="size-5" />
+              <p>
+                Empty newsfeed. Or you can go to{" "}
+                <Link
+                  to="/$account/home/global"
+                  className="text-blue-500 hover:text-blue-600"
+                >
+                  Global Newsfeed
+                </Link>
+              </p>
+            </div>
+            <Suggest />
+          </div>
+        ) : (
+          <Virtualizer overscan={3}>
+            {data.map((item) => renderItem(item))}
+          </Virtualizer>
+        )}
+        <div className="flex h-20 items-center justify-center">
+          {hasNextPage ? (
+            <button
+              type="button"
+              onClick={() => fetchNextPage()}
+              disabled={!hasNextPage || isFetchingNextPage}
+              className="inline-flex h-12 w-36 items-center justify-center gap-2 rounded-full bg-neutral-100 px-3 font-medium hover:bg-neutral-200 focus:outline-none dark:bg-neutral-900 dark:hover:bg-neutral-800"
+            >
+              {isFetchingNextPage ? (
+                <LoaderIcon className="size-5 animate-spin" />
+              ) : (
+                <>
+                  <ArrowRightCircleIcon className="size-5" />
+                  Load more
+                </>
+              )}
+            </button>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/apps/desktop2/src/routes/index.tsx
+++ b/apps/desktop2/src/routes/index.tsx
@ -50,7 +50,7 @@ function Screen() {
    const loadAccount = await ark.load_selected_account(npub);
    if (loadAccount) {
      navigate({
-        to: "/$account/home",
+        to: "/$account/home/local",
        params: { account: npub },
        replace: true,
      });
--- a/packages/icons/index.ts
+++ b/packages/icons/index.ts
@ -116,3 +116,5 @@ export * from "./src/arrowUp";
 export * from "./src/arrowUpSquare";
 export * from "./src/arrowDown";
 export * from "./src/link";
+export * from "./src/local";
+export * from "./src/global";
--- a/packages/icons/src/global.tsx
+++ b/packages/icons/src/global.tsx
@ -0,0 +1,14 @@
+export function GlobalIcon(props: JSX.IntrinsicElements["svg"]) {
+  return (
+    <svg width="24" height="24" fill="none" viewBox="0 0 24 24" {...props}>
+      <path
+        fill="currentColor"
+        d="M12 2a1 1 0 0 0 0 2 8 8 0 0 1 8 8 1 1 0 0 0 2 0c0-5.523-4.477-10-10-10Z"
+      />
+      <path
+        fill="currentColor"
+        d="M12 5a1 1 0 0 0 0 2 5 5 0 0 1 5 5 1 1 0 0 0 2 0 7 7 0 0 0-7-7ZM7.39 6.977a2.9 2.9 0 0 0-2.258-.857c-.83.064-1.632.52-2.065 1.38-1.89 3.749-1.27 8.44 1.862 11.571 3.132 3.132 7.822 3.751 11.57 1.862a2.494 2.494 0 0 0 1.38-2.066 2.9 2.9 0 0 0-.856-2.258L12.914 12.5l.793-.793a1 1 0 0 0-1.414-1.414l-.793.793-4.11-4.11Z"
+      />
+    </svg>
+  );
+}
--- a/packages/icons/src/local.tsx
+++ b/packages/icons/src/local.tsx
@ -0,0 +1,14 @@
+export function LocalIcon(props: JSX.IntrinsicElements["svg"]) {
+  return (
+    <svg width="24" height="24" fill="none" viewBox="0 0 24 24" {...props}>
+      <path
+        fill="currentColor"
+        d="M11.19 2.413a.996.996 0 0 0-.19.603V17a1 1 0 1 0 2 0v-6.426l5.504-3.21a1 1 0 0 0 0-1.728l-5.987-3.492a.995.995 0 0 0-1.007-.016.993.993 0 0 0-.32.285Z"
+      />
+      <path
+        fill="currentColor"
+        d="M8.19 15.346a1 1 0 1 0-.38-1.964c-1.552.3-2.928.773-3.945 1.398C2.89 15.38 2 16.282 2 17.5c0 .858.45 1.566 1.03 2.099.58.532 1.361.965 2.244 1.308C7.044 21.596 9.423 22 12 22s4.956-.404 6.726-1.093c.883-.343 1.665-.776 2.244-1.308.58-.533 1.03-1.241 1.03-2.099 0-1.218-.89-2.12-1.865-2.72-1.017-.625-2.393-1.098-3.945-1.398a1 1 0 1 0-.38 1.964c1.412.273 2.535.681 3.278 1.138.784.482.912.86.912 1.016 0 .11-.053.322-.384.627-.332.305-.868.626-1.614.916-1.487.578-3.608.957-6.002.957-2.394 0-4.515-.379-6.002-.957-.746-.29-1.282-.611-1.614-.916C4.053 17.822 4 17.609 4 17.5c0-.155.128-.534.912-1.016.743-.457 1.866-.865 3.278-1.138Z"
+      />
+    </svg>
+  );
+}