update user screen

2023-08-25 09:50:04 +07:00
parent b2df8ae320
commit 92d49c306b
12 changed files with 357 additions and 272 deletions
--- a/src/app/space/components/widgets/network.tsx
+++ b/src/app/space/components/widgets/network.tsx
@@ -1,7 +1,6 @@
 import { NDKEvent, NDKFilter, NDKKind } from '@nostr-dev-kit/ndk';
 import { useInfiniteQuery } from '@tanstack/react-query';
 import { useVirtualizer } from '@tanstack/react-virtual';
-import { destr } from 'destr';
 import { useCallback, useEffect, useMemo, useRef } from 'react';

 import { useStorage } from '@libs/storage/provider';
@@ -31,9 +30,6 @@ export function NetworkWidget() {
        return await db.getAllEvents(30, pageParam);
      },
      getNextPageParam: (lastPage) => lastPage.nextCursor,
-      refetchOnWindowFocus: false,
-      refetchOnReconnect: false,
-      refetchOnMount: false,
    });

  const dbEvents = useMemo(
@@ -130,25 +126,29 @@ export function NetworkWidget() {
        since: db.account.last_login_at ?? Math.floor(Date.now() / 1000),
      };

-      sub(filter, async (event) => {
-        let root: string;
-        let reply: string;
-        if (event.tags?.[0]?.[0] === 'e' && !event.tags?.[0]?.[3]) {
-          root = event.tags[0][1];
-        } else {
-          root = event.tags.find((el) => el[3] === 'root')?.[1];
-          reply = event.tags.find((el) => el[3] === 'reply')?.[1];
-        }
-        await db.createEvent(
-          event.id,
-          destr(event),
-          event.pubkey,
-          event.kind,
-          root,
-          reply,
-          event.created_at
-        );
-      });
+      sub(
+        filter,
+        async (event) => {
+          let root: string;
+          let reply: string;
+          if (event.tags?.[0]?.[0] === 'e' && !event.tags?.[0]?.[3]) {
+            root = event.tags[0][1];
+          } else {
+            root = event.tags.find((el) => el[3] === 'root')?.[1];
+            reply = event.tags.find((el) => el[3] === 'reply')?.[1];
+          }
+          await db.createEvent(
+            event.id,
+            JSON.stringify(event),
+            event.pubkey,
+            event.kind,
+            root,
+            reply,
+            event.created_at
+          );
+        },
+        false // don't close sub on eose
+      );
    }
  }, []);

--- a/src/app/users/components/profile.tsx
+++ b/src/app/users/components/profile.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';

-import { UserMetadata } from '@app/users/components/metadata';
+import { UserStats } from '@app/users/components/stats';

 import { useStorage } from '@libs/storage/provider';

@@ -49,67 +49,85 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
    }
  }, [status]);

+  if (!user) return <p>Loading...</p>;
+
  return (
    <>
-      <div className="h-56 w-full bg-white">
-        <img src={user?.banner} alt={'banner'} className="h-full w-full object-cover" />
+      <div className="h-56 w-full">
+        {user.banner ? (
+          <img
+            src={user.banner}
+            alt="user banner"
+            className="h-full w-full object-cover"
+          />
+        ) : (
+          <div className="h-full w-full bg-black/50" />
+        )}
      </div>
-      <div className="-mt-7 w-full px-5">
+      <div className="-mt-7 flex w-full flex-col items-center px-5">
        <Image
-          src={user?.picture || user?.image}
+          src={user.picture || user.image}
          alt={pubkey}
-          className="h-14 w-14 rounded-md ring-2 ring-white/50"
+          className="h-14 w-14 rounded-lg ring-2 ring-black"
        />
-        <div className="mt-2 flex flex-1 flex-col gap-4">
-          <div className="flex items-center gap-16">
+        <div className="mt-2 flex flex-1 flex-col gap-6">
+          <div className="flex flex-col items-center gap-1">
            <div className="inline-flex flex-col gap-1.5">
-              <h5 className="text-lg font-semibold leading-none">
-                {user?.displayName || user?.name || 'No name'}
+              <h5 className="text-center text-xl font-semibold leading-none">
+                {user.display_name || user.displayName || user.name || 'No name'}
              </h5>
-              <span className="max-w-[15rem] truncate text-sm leading-none text-white/50">
-                {user?.nip05 || shortenKey(pubkey)}
+              <span className="max-w-[15rem] truncate text-center leading-none text-white/50">
+                {user.nip05 || user.username || shortenKey(pubkey)}
              </span>
            </div>
-            <div className="inline-flex items-center gap-2">
-              {status === 'loading' ? (
-                <button
-                  type="button"
-                  className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium hover:bg-fuchsia-500"
-                >
-                  Loading...
-                </button>
-              ) : followed ? (
-                <button
-                  type="button"
-                  onClick={() => unfollowUser(pubkey)}
-                  className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium hover:bg-fuchsia-500"
-                >
-                  Unfollow
-                </button>
+            <div className="flex flex-col gap-6">
+              {user.about || user.bio ? (
+                <p className="mt-2 max-w-[500px] select-text break-words text-center text-white">
+                  {user.about || user.bio}
+                </p>
              ) : (
-                <button
-                  type="button"
-                  onClick={() => followUser(pubkey)}
-                  className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium hover:bg-fuchsia-500"
-                >
-                  Follow
-                </button>
+                <></>
              )}
-              <Link
-                to={`/chats/${pubkey}`}
-                className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium hover:bg-fuchsia-500"
-              >
-                Message
-              </Link>
-              <span className="mx-2 inline-flex h-4 w-px bg-white/10" />
-              {db.account.pubkey === pubkey && <EditProfileModal />}
+              <UserStats pubkey={pubkey} />
            </div>
          </div>
-          <div className="flex flex-col gap-8">
-            <p className="mt-2 max-w-[500px] select-text break-words text-white">
-              {user?.about || user?.bio}
-            </p>
-            <UserMetadata pubkey={pubkey} />
+          <div className="inline-flex items-center justify-center gap-2">
+            {status === 'loading' ? (
+              <button
+                type="button"
+                className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium hover:bg-fuchsia-500"
+              >
+                Loading...
+              </button>
+            ) : followed ? (
+              <button
+                type="button"
+                onClick={() => unfollowUser(pubkey)}
+                className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium hover:bg-fuchsia-500"
+              >
+                Unfollow
+              </button>
+            ) : (
+              <button
+                type="button"
+                onClick={() => followUser(pubkey)}
+                className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium hover:bg-fuchsia-500"
+              >
+                Follow
+              </button>
+            )}
+            <Link
+              to={`/chats/${pubkey}`}
+              className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium hover:bg-fuchsia-500"
+            >
+              Message
+            </Link>
+            {db.account.pubkey === pubkey && (
+              <>
+                <span className="mx-2 inline-flex h-4 w-px bg-white/10" />
+                <EditProfileModal />
+              </>
+            )}
          </div>
        </div>
      </div>
--- a/src/app/users/components/metadata.tsx
+++ b/src/app/users/components/metadata.tsx
@@ -1,8 +1,10 @@
 import { useQuery } from '@tanstack/react-query';

+import { LoaderIcon } from '@shared/icons';
+
 import { compactNumber } from '@utils/number';

-export function UserMetadata({ pubkey }: { pubkey: string }) {
+export function UserStats({ pubkey }: { pubkey: string }) {
  const { status, data } = useQuery(['user-metadata', pubkey], async () => {
    const res = await fetch(`https://api.nostr.band/v0/stats/profile/${pubkey}`);
    if (!res.ok) {
@@ -12,24 +14,32 @@ export function UserMetadata({ pubkey }: { pubkey: string }) {
  });

  if (status === 'loading') {
-    return <p>Loading...</p>;
+    return (
+      <div className="flex w-full items-center justify-center">
+        <LoaderIcon className="h-5 w-5 animate-spin text-white" />
+      </div>
+    );
+  }
+
+  if (status === 'error') {
+    return <div className="flex w-full items-center justify-center" />;
  }

  return (
    <div className="flex w-full items-center gap-10">
-      <div className="inline-flex flex-col gap-1">
+      <div className="inline-flex flex-col items-center gap-1">
        <span className="font-semibold leading-none text-white">
          {compactNumber.format(data.stats[pubkey].followers_pubkey_count) ?? 0}
        </span>
        <span className="text-sm leading-none text-white/50">Followers</span>
      </div>
-      <div className="inline-flex flex-col gap-1">
+      <div className="inline-flex flex-col items-center gap-1">
        <span className="font-semibold leading-none text-white">
          {compactNumber.format(data.stats[pubkey].pub_following_pubkey_count) ?? 0}
        </span>
        <span className="text-sm leading-none text-white/50">Following</span>
      </div>
-      <div className="inline-flex flex-col gap-1">
+      <div className="inline-flex flex-col items-center gap-1">
        <span className="font-semibold leading-none text-white">
          {data.stats[pubkey].zaps_received
            ? compactNumber.format(data.stats[pubkey].zaps_received.msats / 1000)
@@ -37,7 +47,7 @@ export function UserMetadata({ pubkey }: { pubkey: string }) {
        </span>
        <span className="text-sm leading-none text-white/50">Zaps received</span>
      </div>
-      <div className="inline-flex flex-col gap-1">
+      <div className="inline-flex flex-col items-center gap-1">
        <span className="font-semibold leading-none text-white">
          {data.stats[pubkey].zaps_sent
            ? compactNumber.format(data.stats[pubkey].zaps_sent.msats / 1000)
--- a/src/app/users/index.tsx
+++ b/src/app/users/index.tsx
@@ -1,38 +1,115 @@
+import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
 import { useQuery } from '@tanstack/react-query';
 import { useVirtualizer } from '@tanstack/react-virtual';
-import { useRef } from 'react';
+import { useCallback, useRef } from 'react';
 import { useParams } from 'react-router-dom';

+import { UserProfile } from '@app/users/components/profile';
+
 import { useNDK } from '@libs/ndk/provider';

-import { NoteSkeleton, TextNote } from '@shared/notes';
+import {
+  ArticleNote,
+  FileNote,
+  NoteSkeleton,
+  NoteWrapper,
+  Repost,
+  TextNote,
+  UnknownNote,
+} from '@shared/notes';

 import { nHoursAgo } from '@utils/date';
-import { LumeEvent } from '@utils/types';
-
-import { UserProfile } from './components/profile';

 export function UserScreen() {
-  const parentRef = useRef();
-
  const { pubkey } = useParams();
  const { ndk } = useNDK();
  const { status, data } = useQuery(['user-feed', pubkey], async () => {
    const events = await ndk.fetchEvents({
-      kinds: [1],
+      kinds: [NDKKind.Text, NDKKind.Repost, NDKKind.Article],
      authors: [pubkey],
      since: nHoursAgo(48),
    });
-    return [...events] as unknown as LumeEvent[];
+    return [...events] as unknown as NDKEvent[];
  });

-  const rowVirtualizer = useVirtualizer({
+  const parentRef = useRef();
+  const virtualizer = useVirtualizer({
    count: data ? data.length : 0,
    getScrollElement: () => parentRef.current,
-    estimateSize: () => 400,
+    estimateSize: () => 650,
+    overscan: 2,
  });
+  const items = virtualizer.getVirtualItems();

-  const itemsVirtualizer = rowVirtualizer.getVirtualItems();
+  // render event match event kind
+  const renderItem = useCallback(
+    (index: string | number) => {
+      const event: NDKEvent = data[index];
+      if (!event) return;
+
+      switch (event.kind) {
+        case NDKKind.Text:
+          return (
+            <div
+              key={event.id + index}
+              data-index={index}
+              ref={virtualizer.measureElement}
+            >
+              <NoteWrapper event={event}>
+                <TextNote event={event} />
+              </NoteWrapper>
+            </div>
+          );
+        case NDKKind.Repost:
+          return (
+            <div
+              key={event.id + index}
+              data-index={index}
+              ref={virtualizer.measureElement}
+            >
+              <Repost key={event.id} event={event} />
+            </div>
+          );
+        case 1063:
+          return (
+            <div
+              key={event.id + index}
+              data-index={index}
+              ref={virtualizer.measureElement}
+            >
+              <NoteWrapper event={event}>
+                <FileNote event={event} />
+              </NoteWrapper>
+            </div>
+          );
+        case NDKKind.Article:
+          return (
+            <div
+              key={event.id + index}
+              data-index={index}
+              ref={virtualizer.measureElement}
+            >
+              <NoteWrapper event={event}>
+                <ArticleNote event={event} />
+              </NoteWrapper>
+            </div>
+          );
+        default:
+          return (
+            <div
+              key={event.id + index}
+              data-index={index}
+              ref={virtualizer.measureElement}
+            >
+              <NoteWrapper event={event}>
+                <UnknownNote event={event} />
+              </NoteWrapper>
+            </div>
+          );
+      }
+    },
+    [data]
+  );

  return (
    <div
@@ -41,53 +118,42 @@ export function UserScreen() {
    >
      <div data-tauri-drag-region className="absolute left-0 top-0 h-11 w-full" />
      <UserProfile pubkey={pubkey} />
-      <div className="mt-8 h-full w-full border-t border-white/5 px-1.5">
-        <div className="flex flex-col justify-start gap-1 px-3 pt-4 text-start">
-          <p className="text-lg font-semibold leading-none text-white">Latest posts</p>
-          <span className="text-sm leading-none text-white/50">48 hours ago</span>
-        </div>
-        <div className="flex h-full max-w-[400px] flex-col justify-between gap-1.5 pb-4 pt-1.5">
+      <div className="mt-6 h-full w-full border-t border-white/5 px-1.5">
+        <h3 className="mb-2 pt-4 text-center text-lg font-semibold leading-none text-white">
+          Latest postrs
+        </h3>
+        <div className="mx-auto flex h-full max-w-[500px] flex-col justify-between gap-1.5 pb-4 pt-1.5">
          {status === 'loading' ? (
            <div className="px-3 py-1.5">
-              <div className="shadow-input rounded-xl bg-white/10">
+              <div className="rounded-xl bg-white/10 px-3 py-3">
                <NoteSkeleton />
              </div>
            </div>
-          ) : itemsVirtualizer.length === 0 ? (
+          ) : items.length === 0 ? (
            <div className="px-3 py-1.5">
              <div className="rounded-xl bg-white/10 px-3 py-6">
                <div className="flex flex-col items-center gap-4">
-                  <p className="text-center text-sm font-medium text-zinc-300">
-                    No new posts in 48 hours ago
+                  <p className="text-center text-sm font-medium text-white">
+                    User doesn&apos;t have any postrs in the last 48 hours.
                  </p>
                </div>
              </div>
            </div>
          ) : (
            <div
-              className="relative w-full"
              style={{
-                height: `${rowVirtualizer.getTotalSize()}px`,
+                position: 'relative',
+                width: '100%',
+                height: `${virtualizer.getTotalSize()}px`,
              }}
            >
              <div
                className="absolute left-0 top-0 w-full"
                style={{
-                  transform: `translateY(${
-                    itemsVirtualizer[0].start - rowVirtualizer.options.scrollMargin
-                  }px)`,
+                  transform: `translateY(${items[0].start}px)`,
                }}
              >
-                {itemsVirtualizer.map((virtualRow) => (
-                  <div
-                    key={virtualRow.key}
-                    data-index={virtualRow.index}
-                    ref={rowVirtualizer.measureElement}
-                  >
-                    <TextNote event={data[virtualRow.index]} />
-                  </div>
-                ))}
-                <div className="h-10" />
+                {items.map((item) => renderItem(item.index))}
              </div>
            </div>
          )}