extract ProfileTab from ProfilePage

2023-10-06 13:13:49 +03:00
parent 585f031ce1
commit e949708cec
4 changed files with 172 additions and 154 deletions
--- a/packages/app/src/Pages/Profile/ProfileTab.tsx
+++ b/packages/app/src/Pages/Profile/ProfileTab.tsx
@ -0,0 +1,154 @@
+import useZapsFeed from "../../Feed/ZapsFeed";
+import FormattedMessage from "../../Element/FormattedMessage";
+import messages from "../messages";
+import {formatShort} from "../../Number";
+import useFollowersFeed from "../../Feed/FollowersFeed";
+import FollowsList from "../../Element/User/FollowListBase";
+import useFollowsFeed from "../../Feed/FollowsFeed";
+import useRelaysFeed from "../../Feed/RelaysFeed";
+import RelaysMetadata from "../../Element/Relay/RelaysMetadata";
+import useBookmarkFeed from "../../Feed/BookmarkFeed";
+import Bookmarks from "../../Element/Bookmarks";
+import Icon from "../../Icons/Icon";
+import {Tab} from "../../Element/Tabs";
+import {EventKind, HexKey, NostrLink, NostrPrefix} from "@snort/system";
+import { default as ZapElement } from "Element/Event/Zap";
+
+export enum ProfileTabType {
+  NOTES = 0,
+  REACTIONS = 1,
+  FOLLOWERS = 2,
+  FOLLOWS = 3,
+  ZAPS = 4,
+  MUTED = 5,
+  BLOCKED = 6,
+  RELAYS = 7,
+  BOOKMARKS = 8,
+}
+
+export function ZapsProfileTab({ id }: { id: HexKey }) {
+  const zaps = useZapsFeed(new NostrLink(NostrPrefix.PublicKey, id));
+  const zapsTotal = zaps.reduce((acc, z) => acc + z.amount, 0);
+  return (
+    <div className="main-content">
+      <h2 className="p">
+        <FormattedMessage {...messages.Sats} values={{ n: formatShort(zapsTotal) }} />
+      </h2>
+      {zaps.map(z => (
+        <ZapElement showZapped={false} zap={z} />
+      ))}
+    </div>
+  );
+}
+
+export function FollowersTab({ id }: { id: HexKey }) {
+  const followers = useFollowersFeed(id);
+  return <FollowsList pubkeys={followers} showAbout={true} className="p" />;
+}
+
+export function FollowsTab({ id }: { id: HexKey }) {
+  const follows = useFollowsFeed(id);
+  return <FollowsList pubkeys={follows} showAbout={true} className="p" />;
+}
+
+export function RelaysTab({ id }: { id: HexKey }) {
+  const relays = useRelaysFeed(id);
+  return <RelaysMetadata relays={relays} />;
+}
+
+export function BookMarksTab({ id }: { id: HexKey }) {
+  const bookmarks = useBookmarkFeed(id);
+  return (
+    <Bookmarks
+      pubkey={id}
+      bookmarks={bookmarks.filter(e => e.kind === EventKind.TextNote)}
+      related={bookmarks.filter(e => e.kind !== EventKind.TextNote)}
+    />
+  );
+}
+
+const ProfileTab = {
+    Notes: {
+      text: (
+        <>
+          <Icon name="pencil" size={16} />
+          <FormattedMessage defaultMessage="Notes" />
+        </>
+      ),
+      value: ProfileTabType.NOTES,
+    },
+    Reactions: {
+      text: (
+        <>
+          <Icon name="reaction" size={16} />
+          <FormattedMessage defaultMessage="Reactions" />
+        </>
+      ),
+      value: ProfileTabType.REACTIONS,
+    },
+    Followers: {
+      text: (
+        <>
+          <Icon name="user-v2" size={16} />
+          <FormattedMessage defaultMessage="Followers" />
+        </>
+      ),
+      value: ProfileTabType.FOLLOWERS,
+    },
+    Follows: {
+      text: (
+        <>
+          <Icon name="stars" size={16} />
+          <FormattedMessage defaultMessage="Follows" />
+        </>
+      ),
+      value: ProfileTabType.FOLLOWS,
+    },
+    Zaps: {
+      text: (
+        <>
+          <Icon name="zap-solid" size={16} />
+          <FormattedMessage defaultMessage="Zaps" />
+        </>
+      ),
+      value: ProfileTabType.ZAPS,
+    },
+    Muted: {
+      text: (
+        <>
+          <Icon name="mute" size={16} />
+          <FormattedMessage defaultMessage="Muted" />
+        </>
+      ),
+      value: ProfileTabType.MUTED,
+    },
+    Blocked: {
+      text: (
+        <>
+          <Icon name="block" size={16} />
+          <FormattedMessage defaultMessage="Blocked" />
+        </>
+      ),
+      value: ProfileTabType.BLOCKED,
+    },
+    Relays: {
+      text: (
+        <>
+          <Icon name="wifi" size={16} />
+          <FormattedMessage defaultMessage="Relays" />
+        </>
+      ),
+      value: ProfileTabType.RELAYS,
+    },
+    Bookmarks: {
+      text: (
+        <>
+          <Icon name="bookmark-solid" size={16} />
+          <FormattedMessage defaultMessage="Bookmarks" />
+        </>
+      ),
+      value: ProfileTabType.BOOKMARKS,
+    },
+  } as { [key: string]: Tab };
+
+export default ProfileTab;