Kieran/snort
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

extract ProfileTab from ProfilePage

Browse Source
This commit is contained in:
Martti Malmi 2023-10-06 13:13:49 +03:00
parent 585f031ce1
commit e949708cec
4 changed files with 172 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
packages/app/src/Pages/ProfilePage.css → packages/app/src/Pages/Profile/ProfilePage.css
View File

170
packages/app/src/Pages/ProfilePage.tsx → packages/app/src/Pages/Profile/ProfilePage.tsx
View File

@ -6,8 +6,6 @@ import {
encodeTLV, encodeTLV,
encodeTLVEntries, encodeTLVEntries,
EventKind, EventKind,
HexKey,
NostrLink,
NostrPrefix, NostrPrefix,
TLVEntryType, TLVEntryType,
tryParseNostrLink, tryParseNostrLink,
@ -16,22 +14,14 @@ import { LNURL } from "@snort/shared";
import { useUserProfile } from "@snort/system-react"; import { useUserProfile } from "@snort/system-react";
import { findTag, getReactions, unwrap } from "SnortUtils"; import { findTag, getReactions, unwrap } from "SnortUtils";
import { formatShort } from "Number";
import Note from "Element/Event/Note"; import Note from "Element/Event/Note";
import Bookmarks from "Element/Bookmarks";
import RelaysMetadata from "Element/Relay/RelaysMetadata";
import { Tab, TabElement } from "Element/Tabs"; import { Tab, TabElement } from "Element/Tabs";
import Icon from "Icons/Icon"; import Icon from "Icons/Icon";
import useMutedFeed from "Feed/MuteList"; import useMutedFeed from "Feed/MuteList";
import useRelaysFeed from "Feed/RelaysFeed";
import usePinnedFeed from "Feed/PinnedFeed"; import usePinnedFeed from "Feed/PinnedFeed";
import useBookmarkFeed from "Feed/BookmarkFeed";
import useFollowersFeed from "Feed/FollowersFeed";
import useFollowsFeed from "Feed/FollowsFeed"; import useFollowsFeed from "Feed/FollowsFeed";
import useProfileBadges from "Feed/BadgesFeed"; import useProfileBadges from "Feed/BadgesFeed";
import useModeration from "Hooks/useModeration"; import useModeration from "Hooks/useModeration";
import useZapsFeed from "Feed/ZapsFeed";
import { default as ZapElement } from "Element/Event/Zap";
import FollowButton from "Element/User/FollowButton"; import FollowButton from "Element/User/FollowButton";
import { parseId, hexToBech32 } from "SnortUtils"; import { parseId, hexToBech32 } from "SnortUtils";
import Avatar from "Element/User/Avatar"; import Avatar from "Element/User/Avatar";
@ -57,59 +47,16 @@ import useLogin from "Hooks/useLogin";
import { ZapTarget } from "Zapper"; import { ZapTarget } from "Zapper";
import { useStatusFeed } from "Feed/StatusFeed"; import { useStatusFeed } from "Feed/StatusFeed";
import messages from "./messages"; import messages from "../messages";
import { SpotlightMediaModal } from "Element/Deck/SpotlightMedia"; import { SpotlightMediaModal } from "Element/Deck/SpotlightMedia";
import ProfileTab, {
const NOTES = 0; BookMarksTab,
const REACTIONS = 1; FollowersTab,
const FOLLOWERS = 2; FollowsTab,
const FOLLOWS = 3; ProfileTabType,
const ZAPS = 4; RelaysTab,
const MUTED = 5; ZapsProfileTab
const BLOCKED = 6; } from "Pages/Profile/ProfileTab";
const RELAYS = 7;
const BOOKMARKS = 8;
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>
);
}
function FollowersTab({ id }: { id: HexKey }) {
const followers = useFollowersFeed(id);
return <FollowsList pubkeys={followers} showAbout={true} className="p" />;
}
function FollowsTab({ id }: { id: HexKey }) {
const follows = useFollowsFeed(id);
return <FollowsList pubkeys={follows} showAbout={true} className="p" />;
}
function RelaysTab({ id }: { id: HexKey }) {
const relays = useRelaysFeed(id);
return <RelaysMetadata relays={relays} />;
}
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)}
/>
);
}
export default function ProfilePage() { export default function ProfilePage() {
const params = useParams(); const params = useParams();
@ -146,89 +93,6 @@ export default function ProfilePage() {
const status = useStatusFeed(showStatus ? id : undefined, true); const status = useStatusFeed(showStatus ? id : undefined, true);
// tabs // tabs
const ProfileTab = {
Notes: {
text: (
<>
<Icon name="pencil" size={16} />
<FormattedMessage defaultMessage="Notes" />
</>
),
value: NOTES,
},
Reactions: {
text: (
<>
<Icon name="reaction" size={16} />
<FormattedMessage defaultMessage="Reactions" />
</>
),
value: REACTIONS,
},
Followers: {
text: (
<>
<Icon name="user-v2" size={16} />
<FormattedMessage defaultMessage="Followers" />
</>
),
value: FOLLOWERS,
},
Follows: {
text: (
<>
<Icon name="stars" size={16} />
<FormattedMessage defaultMessage="Follows" />
</>
),
value: FOLLOWS,
},
Zaps: {
text: (
<>
<Icon name="zap-solid" size={16} />
<FormattedMessage defaultMessage="Zaps" />
</>
),
value: ZAPS,
},
Muted: {
text: (
<>
<Icon name="mute" size={16} />
<FormattedMessage defaultMessage="Muted" />
</>
),
value: MUTED,
},
Blocked: {
text: (
<>
<Icon name="block" size={16} />
<FormattedMessage defaultMessage="Blocked" />
</>
),
value: BLOCKED,
},
Relays: {
text: (
<>
<Icon name="wifi" size={16} />
<FormattedMessage defaultMessage="Relays" />
</>
),
value: RELAYS,
},
Bookmarks: {
text: (
<>
<Icon name="bookmark-solid" size={16} />
<FormattedMessage defaultMessage="Bookmarks" />
</>
),
value: BOOKMARKS,
},
} as { [key: string]: Tab };
const [tab, setTab] = useState<Tab>(ProfileTab.Notes); const [tab, setTab] = useState<Tab>(ProfileTab.Notes);
const optionalTabs = [ProfileTab.Zaps, ProfileTab.Relays, ProfileTab.Bookmarks, ProfileTab.Muted].filter(a => const optionalTabs = [ProfileTab.Zaps, ProfileTab.Relays, ProfileTab.Bookmarks, ProfileTab.Muted].filter(a =>
unwrap(a), unwrap(a),
@ -369,7 +233,7 @@ export default function ProfilePage() {
if (!id) return null; if (!id) return null;
switch (tab.value) { switch (tab.value) {
case NOTES: case ProfileTabType.NOTES:
return ( return (
<> <>
{pinned {pinned
@ -399,29 +263,29 @@ export default function ProfilePage() {
/> />
</> </>
); );
case ZAPS: { case ProfileTabType.ZAPS: {
return <ZapsProfileTab id={id} />; return <ZapsProfileTab id={id} />;
} }
case FOLLOWS: { case ProfileTabType.FOLLOWS: {
if (isMe) { if (isMe) {
return <FollowsList pubkeys={follows} showFollowAll={!isMe} showAbout={false} className="p" />; return <FollowsList pubkeys={follows} showFollowAll={!isMe} showAbout={false} className="p" />;
} else { } else {
return <FollowsTab id={id} />; return <FollowsTab id={id} />;
} }
} }
case FOLLOWERS: { case ProfileTabType.FOLLOWERS: {
return <FollowersTab id={id} />; return <FollowersTab id={id} />;
} }
case MUTED: { case ProfileTabType.MUTED: {
return <MutedList pubkeys={muted} />; return <MutedList pubkeys={muted} />;
} }
case BLOCKED: { case ProfileTabType.BLOCKED: {
return <BlockList />; return <BlockList />;
} }
case RELAYS: { case ProfileTabType.RELAYS: {
return <RelaysTab id={id} />; return <RelaysTab id={id} />;
} }
case BOOKMARKS: { case ProfileTabType.BOOKMARKS: {
return <BookMarksTab id={id} />; return <BookMarksTab id={id} />;
} }
} }

154
packages/app/src/Pages/Profile/ProfileTab.tsx Normal file
View File

@ -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;

2
packages/app/src/index.tsx
View File

@ -24,7 +24,7 @@ import { IntlProvider } from "IntlProvider";
import { unwrap } from "SnortUtils"; import { unwrap } from "SnortUtils";
import Layout from "Pages/Layout"; import Layout from "Pages/Layout";
import LoginPage from "Pages/LoginPage"; import LoginPage from "Pages/LoginPage";
import ProfilePage from "Pages/ProfilePage"; import ProfilePage from "Pages/Profile/ProfilePage";
import { RootRoutes, RootTabRoutes } from "Pages/Root"; import { RootRoutes, RootTabRoutes } from "Pages/Root";
import NotificationsPage from "Pages/Notifications"; import NotificationsPage from "Pages/Notifications";
import SettingsPage, { SettingsRoutes } from "Pages/SettingsPage"; import SettingsPage, { SettingsRoutes } from "Pages/SettingsPage";