fix: notification avatar overflow

refactor: sort notification group avatar by WoT score
This commit is contained in:
2024-01-26 10:53:50 +00:00
parent f10ad6dd53
commit 22863a289d
5 changed files with 83 additions and 73 deletions

View File

@ -1,22 +1,18 @@
import "./Notifications.css";
import { unwrap } from "@snort/shared";
import { EventKind, NostrEvent, NostrLink, NostrPrefix, TaggedNostrEvent } from "@snort/system";
import { useEventFeed } from "@snort/system-react";
import { NostrEvent, NostrLink, TaggedNostrEvent } from "@snort/system";
import { lazy, Suspense, useEffect, useMemo } from "react";
import { ShowMoreInView } from "@/Components/Event/ShowMore";
import { LiveEvent } from "@/Components/LiveStream/LiveEvent";
import PageSpinner from "@/Components/PageSpinner";
import Text from "@/Components/Text/Text";
import ProfilePreview from "@/Components/User/ProfilePreview";
import { useNotificationsView } from "@/Feed/WorkerRelayView";
import useLogin from "@/Hooks/useLogin";
import useModeration from "@/Hooks/useModeration";
import { orderDescending } from "@/Utils";
import { markNotificationsRead } from "@/Utils/Login";
import { notificationContext } from "./notificationContext";
import { getNotificationContext } from "./getNotificationContext";
import { NotificationGroup } from "./NotificationGroup";
const NotificationGraph = lazy(() => import("@/Pages/Notifications/NotificationChart"));
@ -44,9 +40,8 @@ export default function NotificationsPage({ onClick }: { onClick?: (link: NostrL
const timeGrouped = useMemo(() => {
return myNotifications.reduce((acc, v) => {
const key = `${timeKey(v)}:${notificationContext(v as TaggedNostrEvent)?.encode(CONFIG.eventLinkPrefix)}:${
v.kind
}`;
const key = `${timeKey(v)}:${getNotificationContext(v as TaggedNostrEvent)?.encode(CONFIG.eventLinkPrefix)}:${v.kind
}`;
if (acc.has(key)) {
unwrap(acc.get(key)).push(v as TaggedNostrEvent);
} else {
@ -67,31 +62,8 @@ export default function NotificationsPage({ onClick }: { onClick?: (link: NostrL
{login.publicKey &&
[...timeGrouped.entries()].map(([k, g]) => <NotificationGroup key={k} evs={g} onClick={onClick} />)}
<ShowMoreInView onClick={() => {}} />
<ShowMoreInView onClick={() => { }} />
</div>
</>
);
}
export function NotificationContext({ link, onClick }: { link: NostrLink; onClick: () => void }) {
const ev = useEventFeed(link);
if (link.type === NostrPrefix.PublicKey) {
return <ProfilePreview pubkey={link.id} actions={<></>} />;
}
if (!ev) return;
if (ev.kind === EventKind.LiveEvent) {
return <LiveEvent ev={ev} />;
}
return (
<Text
id={ev.id}
content={ev.content}
tags={ev.tags}
creator={ev.pubkey}
truncate={120}
disableLinkPreview={true}
className="content"
onClick={onClick}
/>
);
}