snort/packages/app/src/Pages/Profile/ProfileTab.tsx

import { HexKey, NostrLink, NostrPrefix } from "@snort/system";
import { FormattedMessage } from "react-intl";

import { default as ZapElement } from "@/Components/Event/Zap";
import Icon from "@/Components/Icons/Icon";
import RelaysMetadata from "@/Components/Relay/RelaysMetadata";
import { Tab } from "@/Components/Tabs/Tabs";
import Bookmarks from "@/Components/User/Bookmarks";
import FollowsList from "@/Components/User/FollowListBase";
import useFollowersFeed from "@/Feed/FollowersFeed";
import useFollowsFeed from "@/Feed/FollowsFeed";
import useRelaysFeed from "@/Feed/RelaysFeed";
import useZapsFeed from "@/Feed/ZapsFeed";
import { useBookmarkList } from "@/Hooks/useLists";
import { formatShort } from "@/Utils/Number";

import messages from "../messages";

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 (
    <>
      <h2 className="p">
        <FormattedMessage {...messages.Sats} values={{ n: formatShort(zapsTotal) }} />
      </h2>
      {zaps.map(z => (
        <ZapElement key={z.id} showZapped={false} zap={z} />
      ))}
    </>
  );
}

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 = useBookmarkList(id);
  return <Bookmarks pubkey={id} bookmarks={bookmarks} />;
}

const ProfileTab = {
  Notes: {
    text: (
      <>
        <Icon name="pencil" size={16} />
        <FormattedMessage defaultMessage="Notes" id="7+Domh" />
      </>
    ),
    value: ProfileTabType.NOTES,
  },
  Reactions: {
    text: (
      <>
        <Icon name="reaction" size={16} />
        <FormattedMessage defaultMessage="Reactions" id="XgWvGA" />
      </>
    ),
    value: ProfileTabType.REACTIONS,
  },
  Followers: {
    text: (
      <>
        <Icon name="user-v2" size={16} />
        <FormattedMessage defaultMessage="Followers" id="pzTOmv" />
      </>
    ),
    value: ProfileTabType.FOLLOWERS,
  },
  Follows: {
    text: (
      <>
        <Icon name="stars" size={16} />
        <FormattedMessage defaultMessage="Follows" id="IKKHqV" />
      </>
    ),
    value: ProfileTabType.FOLLOWS,
  },
  Zaps: {
    text: (
      <>
        <Icon name="zap-solid" size={16} />
        <FormattedMessage defaultMessage="Zaps" id="OEW7yJ" />
      </>
    ),
    value: ProfileTabType.ZAPS,
  },
  Muted: {
    text: (
      <>
        <Icon name="mute" size={16} />
        <FormattedMessage defaultMessage="Muted" id="HOzFdo" />
      </>
    ),
    value: ProfileTabType.MUTED,
  },
  Blocked: {
    text: (
      <>
        <Icon name="block" size={16} />
        <FormattedMessage defaultMessage="Blocked" id="qUJTsT" />
      </>
    ),
    value: ProfileTabType.BLOCKED,
  },
  Relays: {
    text: (
      <>
        <Icon name="wifi" size={16} />
        <FormattedMessage defaultMessage="Relays" id="RoOyAh" />
      </>
    ),
    value: ProfileTabType.RELAYS,
  },
  Bookmarks: {
    text: (
      <>
        <Icon name="bookmark-solid" size={16} />
        <FormattedMessage defaultMessage="Bookmarks" id="nGBrvw" />
      </>
    ),
    value: ProfileTabType.BOOKMARKS,
  },
} as { [key: string]: Tab };

export default ProfileTab;