feat: remove summary chart

closes #747

packages/app/config/default.json

@@ -15,7 +15,6 @@
     "subscriptions": true,
     "deck": true,
     "zapPool": true,
-    "notificationGraph": true,
     "communityLeaders": true,
     "nostrAddress": true,
     "pushNotifications": true

packages/app/config/iris.json

@@ -15,7 +15,6 @@
     "subscriptions": true,
     "deck": true,
     "zapPool": true,
-    "notificationGraph": false,
     "communityLeaders": true
   },
   "defaultPreferences": {

packages/app/config/meku.json

@@ -15,7 +15,6 @@
     "subscriptions": false,
     "deck": false,
     "zapPool": false,
-    "notificationGraph": true,
     "communityLeaders": false,
     "nostrAddress": false,
     "pushNotifications": true

packages/app/config/nostr.json

@@ -15,7 +15,6 @@
     "subscriptions": false,
     "deck": false,
     "zapPool": false,
-    "notificationGraph": true,
     "communityLeaders": false,
     "nostrAddress": false,
     "pushNotifications": false

packages/app/custom.d.ts

@@ -57,7 +57,6 @@ declare const CONFIG: {
     subscriptions: boolean;
     deck: boolean;
     zapPool: boolean;
-    notificationGraph: boolean;
     communityLeaders: boolean;
     nostrAddress: boolean;
     pushNotifications: boolean;

packages/app/src/Pages/Notifications/NotificationChart.tsx

@@ -1,179 +0,0 @@
-import { unixNow, unwrap } from "@snort/shared";
-import { EventKind, TaggedNostrEvent } from "@snort/system";
-import classNames from "classnames";
-import { useMemo, useState } from "react";
-import { FormattedMessage } from "react-intl";
-import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
-
-import { AsyncIcon } from "@/Components/Button/AsyncIcon";
-import Icon from "@/Components/Icons/Icon";
-import TabSelectors, { Tab } from "@/Components/TabSelectors/TabSelectors";
-import { orderAscending } from "@/Utils";
-import { Day } from "@/Utils/Const";
-import { formatShort } from "@/Utils/Number";
-
-interface StatSlot {
-  time: string;
-  reactions: number;
-  reposts: number;
-  quotes: number;
-  mentions: number;
-  zaps: number;
-}
-
-const enum NotificationSummaryPeriod {
-  Daily,
-  Weekly,
-}
-
-const enum NotificationSummaryFilter {
-  Reactions = 1,
-  Reposts = 2,
-  Mentions = 4,
-  Zaps = 8,
-  All = 255,
-}
-
-export default function NotificationSummary({ evs }: { evs: Array<TaggedNostrEvent> }) {
-  const [period, setPeriod] = useState(NotificationSummaryPeriod.Daily);
-  const [filter, setFilter] = useState(NotificationSummaryFilter.All);
-
-  const periodTabs = [
-    {
-      value: NotificationSummaryPeriod.Daily,
-      text: <FormattedMessage defaultMessage="Daily" />,
-    },
-    {
-      value: NotificationSummaryPeriod.Weekly,
-      text: <FormattedMessage defaultMessage="Weekly" />,
-    },
-  ] as Array<Tab>;
-
-  const hasFlag = (v: number, f: NotificationSummaryFilter) => {
-    return (v & f) > 0;
-  };
-
-  const getWeek = (d: Date) => {
-    const onejan = new Date(d.getFullYear(), 0, 1);
-    const today = new Date(d.getFullYear(), d.getMonth(), d.getDate());
-    const dayOfYear = (today.getTime() - onejan.getTime() + 86400000) / 86400000;
-    return Math.ceil(dayOfYear / 7);
-  };
-
-  const stats = useMemo(() => {
-    return orderAscending(evs)
-      .filter(a => (period === NotificationSummaryPeriod.Daily ? a.created_at > unixNow() - 14 * Day : true))
-      .reduce(
-        (acc, v) => {
-          const date = new Date(v.created_at * 1000);
-          const key =
-            period === NotificationSummaryPeriod.Daily
-              ? `${date.getMonth() + 1}/${date.getDate()}`
-              : getWeek(date).toString();
-          acc[key] ??= {
-            time: key,
-            reactions: 0,
-            reposts: 0,
-            quotes: 0,
-            mentions: 0,
-            zaps: 0,
-          };
-
-          if (v.kind === EventKind.Reaction) {
-            acc[key].reactions++;
-          } else if (v.kind === EventKind.Repost) {
-            acc[key].reposts++;
-          } else if (v.kind === EventKind.ZapReceipt) {
-            acc[key].zaps++;
-          }
-          if (v.kind === EventKind.TextNote) {
-            acc[key].mentions++;
-          }
-
-          return acc;
-        },
-        {} as Record<string, StatSlot>,
-      );
-  }, [evs, period]);
-
-  if (evs.length === 0) return;
-
-  const filterIcon = (f: NotificationSummaryFilter, icon: string, iconActiveClass: string) => {
-    const active = hasFlag(filter, f);
-    return (
-      <AsyncIcon
-        className={classNames("button-icon-sm transparent", { active, [iconActiveClass]: active })}
-        onClick={() => setFilter(v => v ^ f)}
-        name={""}
-        iconName={icon}
-      />
-    );
-  };
-
-  return (
-    <div className="flex flex-col g12 p bb">
-      <div className="flex justify-between">
-        <h2>
-          <FormattedMessage defaultMessage="Summary" />
-        </h2>
-        <div className="flex items-center g8">
-          {filterIcon(NotificationSummaryFilter.Reactions, "heart-solid", "text-heart")}
-          {filterIcon(NotificationSummaryFilter.Zaps, "zap-solid", "text-zap")}
-          {filterIcon(NotificationSummaryFilter.Reposts, "reverse-left", "text-repost")}
-          {filterIcon(NotificationSummaryFilter.Mentions, "at-sign", "text-mention")}
-        </div>
-      </div>
-      <TabSelectors
-        tabs={periodTabs}
-        tab={unwrap(periodTabs.find(a => a.value === period))}
-        setTab={t => setPeriod(t.value)}
-      />
-      <div>
-        <ResponsiveContainer height={200}>
-          <BarChart data={Object.values(stats)} margin={{ left: 0, right: 0 }} style={{ userSelect: "none" }}>
-            <XAxis dataKey="time" />
-            <YAxis />
-            {hasFlag(filter, NotificationSummaryFilter.Reactions) && (
-              <Bar dataKey="reactions" fill="var(--heart)" stackId="" />
-            )}
-            {hasFlag(filter, NotificationSummaryFilter.Reposts) && (
-              <Bar dataKey="reposts" fill="var(--repost)" stackId="" />
-            )}
-            {hasFlag(filter, NotificationSummaryFilter.Mentions) && (
-              <Bar dataKey="mentions" fill="var(--mention)" stackId="" />
-            )}
-            {hasFlag(filter, NotificationSummaryFilter.Zaps) && <Bar dataKey="zaps" fill="var(--zap)" stackId="" />}
-            <Tooltip
-              cursor={{ fill: "rgba(255,255,255,0.2)" }}
-              content={({ active, payload }) => {
-                if (active && payload && payload.length) {
-                  return (
-                    <div className="summary-tooltip">
-                      <div className="flex flex-col g12">
-                        <Icon name="heart-solid" className="text-heart" />
-                        {formatShort(payload.find(a => a.name === "reactions")?.value as number)}
-                      </div>
-                      <div className="flex flex-col g12">
-                        <Icon name="zap-solid" className="text-zap" />
-                        {formatShort(payload.find(a => a.name === "zaps")?.value as number)}
-                      </div>
-                      <div className="flex flex-col g12">
-                        <Icon name="reverse-left" className="text-repost" />
-                        {formatShort(payload.find(a => a.name === "reposts")?.value as number)}
-                      </div>
-                      <div className="flex flex-col g12">
-                        <Icon name="at-sign" className="text-mention" />
-                        {formatShort(payload.find(a => a.name === "mentions")?.value as number)}
-                      </div>
-                    </div>
-                  );
-                }
-                return null;
-              }}
-            />
-          </BarChart>
-        </ResponsiveContainer>
-      </div>
-    </div>
-  );
-}

packages/app/src/Pages/Notifications/Notifications.tsx

@@ -1,11 +1,12 @@
 import "./Notifications.css";
 
 import { unwrap } from "@snort/shared";
-import { NostrEvent, NostrLink, TaggedNostrEvent } from "@snort/system";
+import { EventKind, NostrEvent, NostrLink, TaggedNostrEvent } from "@snort/system";
-import { lazy, Suspense, useEffect, useMemo, useState } from "react";
+import classNames from "classnames";
+import { useEffect, useMemo, useState } from "react";
 
+import { AsyncIcon } from "@/Components/Button/AsyncIcon";
 import { AutoLoadMore } from "@/Components/Event/LoadMore";
-import PageSpinner from "@/Components/PageSpinner";
 import { useNotificationsView } from "@/Feed/WorkerRelayView";
 import useLogin from "@/Hooks/useLogin";
 import useModeration from "@/Hooks/useModeration";
@@ -13,13 +14,21 @@ import { markNotificationsRead } from "@/Utils/Login";
 
 import { getNotificationContext } from "./getNotificationContext";
 import { NotificationGroup } from "./NotificationGroup";
-const NotificationGraph = lazy(() => import("@/Pages/Notifications/NotificationChart"));
+
+const enum NotificationSummaryFilter {
+  Reactions = 1,
+  Reposts = 2,
+  Mentions = 4,
+  Zaps = 8,
+  All = 255,
+}
 
 export default function NotificationsPage({ onClick }: { onClick?: (link: NostrLink) => void }) {
   const login = useLogin();
   const { isMuted } = useModeration();
   const groupInterval = 3600 * 6;
   const [limit, setLimit] = useState(100);
+  const [filter, setFilter] = useState(NotificationSummaryFilter.All);
 
   useEffect(() => {
     markNotificationsRead(login);
@@ -27,6 +36,22 @@ export default function NotificationsPage({ onClick }: { onClick?: (link: NostrL
 
   const notifications = useNotificationsView();
 
+  const hasFlag = (v: number, f: NotificationSummaryFilter) => {
+    return (v & f) > 0;
+  };
+
+  const filterIcon = (f: NotificationSummaryFilter, icon: string, iconActiveClass: string) => {
+    const active = hasFlag(filter, f);
+    return (
+      <AsyncIcon
+        className={classNames("button-icon-sm transparent", { active, [iconActiveClass]: active })}
+        onClick={() => setFilter(v => v ^ f)}
+        name={""}
+        iconName={icon}
+      />
+    );
+  };
+
   const timeKey = (ev: NostrEvent) => {
     const onHour = ev.created_at - (ev.created_at % groupInterval);
     return onHour.toString();
@@ -36,18 +61,28 @@ export default function NotificationsPage({ onClick }: { onClick?: (link: NostrL
     return notifications
       .sort((a, b) => (a.created_at > b.created_at ? -1 : 1))
       .slice(0, limit)
-      .filter(a => !isMuted(a.pubkey) && a.tags.some(b => b[0] === "p" && b[1] === login.publicKey));
+      .filter(a => !isMuted(a.pubkey) && a.tags.some(b => b[0] === "p" && b[1] === login.publicKey))
-  }, [notifications, login.publicKey, limit]);
+      .filter(a => {
+        if (a.kind === EventKind.TextNote) {
+          return hasFlag(filter, NotificationSummaryFilter.Mentions);
+        } else if (a.kind === EventKind.Reaction) {
+          return hasFlag(filter, NotificationSummaryFilter.Reactions);
+        } else if (a.kind === EventKind.Repost) {
+          return hasFlag(filter, NotificationSummaryFilter.Reposts);
+        } else if (a.kind === EventKind.ZapReceipt) {
+          return hasFlag(filter, NotificationSummaryFilter.Zaps);
+        }
+        return true;
+      });
+  }, [notifications, login.publicKey, limit, filter]);
 
   const timeGrouped = useMemo(() => {
     return myNotifications.reduce((acc, v) => {
-      const key = `${timeKey(v)}:${getNotificationContext(v as TaggedNostrEvent)?.encode(CONFIG.eventLinkPrefix)}:${
+      const key = `${timeKey(v)}:${getNotificationContext(v)?.encode()}:${v.kind}`;
-        v.kind
-      }`;
       if (acc.has(key)) {
-        unwrap(acc.get(key)).push(v as TaggedNostrEvent);
+        unwrap(acc.get(key)).push(v);
       } else {
-        acc.set(key, [v as TaggedNostrEvent]);
+        acc.set(key, [v]);
       }
       return acc;
     }, new Map<string, Array<TaggedNostrEvent>>());
@@ -56,11 +91,16 @@ export default function NotificationsPage({ onClick }: { onClick?: (link: NostrL
   return (
     <>
       <div className="main-content">
-        {CONFIG.features.notificationGraph && (
+        <div className="flex justify-between items-center mx-1">
-          <Suspense fallback={<PageSpinner />}>
+          <div></div>
-            <NotificationGraph evs={notifications} />
+          <div className="flex items-center g8">
-          </Suspense>
+            {filterIcon(NotificationSummaryFilter.Reactions, "heart-solid", "text-heart")}
-        )}
+            {filterIcon(NotificationSummaryFilter.Zaps, "zap-solid", "text-zap")}
+            {filterIcon(NotificationSummaryFilter.Reposts, "repeat", "text-repost")}
+            {filterIcon(NotificationSummaryFilter.Mentions, "at-sign", "text-mention")}
+          </div>
+        </div>
+
         {login.publicKey &&
           [...timeGrouped.entries()].map(([k, g]) => <NotificationGroup key={k} evs={g} onClick={onClick} />)}
 

packages/app/src/lang.json

@@ -53,9 +53,6 @@
   "/Xf4UW": {
     "defaultMessage": "Send anonymous usage metrics"
   },
-  "/clOBU": {
-    "defaultMessage": "Weekly"
-  },
   "/d6vEc": {
     "defaultMessage": "Make your profile easier to find and share"
   },
@@ -1024,9 +1021,6 @@
   "RoOyAh": {
     "defaultMessage": "Relays"
   },
-  "RrCui3": {
-    "defaultMessage": "Summary"
-  },
   "Rs4kCE": {
     "defaultMessage": "Bookmark"
   },
@@ -2105,8 +2099,5 @@
   },
   "zvCDao": {
     "defaultMessage": "Automatically show latest notes"
-  },
-  "zxvhnE": {
-    "defaultMessage": "Daily"
   }
 }

packages/app/src/translations/en.json

@@ -17,7 +17,6 @@
   "/JE/X+": "Account Support",
   "/T7HId": "HTTP File Storage Integration",
   "/Xf4UW": "Send anonymous usage metrics",
-  "/clOBU": "Weekly",
   "/d6vEc": "Make your profile easier to find and share",
   "/ioUrF": "From File",
   "/n5KSF": "{n} ms",
@@ -339,7 +338,6 @@
   "RhDAoS": "Are you sure you want to delete {id}",
   "RmxSZo": "Data Vending Machines",
   "RoOyAh": "Relays",
-  "RrCui3": "Summary",
   "Rs4kCE": "Bookmark",
   "SFuk1v": "Permissions",
   "SLZGPn": "Enter a pin to encrypt your private key, you must enter this pin every time you open {site}.",
@@ -698,6 +696,5 @@
   "zi9MdS": "Chess (PGN)",
   "zm6qS1": "{n} mins to read",
   "zonsdq": "Failed to load LNURL service",
-  "zvCDao": "Automatically show latest notes",
+  "zvCDao": "Automatically show latest notes"
-  "zxvhnE": "Daily"
 }