notifications grouping by event

src/js/components/feed/Feed.tsx

@@ -31,7 +31,13 @@ function mapEventsToMedia(events: any[]): ImageOrVideo[] {
   });
 }
 
+const DEFAULT_FETCH_EVENTS = (options) => {
+  const { events, loadMore } = useSubscribe(options);
+  return { events, loadMore };
+};
+
 const Feed = (props: FeedProps) => {
+  const fetchEvents = props.fetchEvents || DEFAULT_FETCH_EVENTS;
   const feedTopRef = useRef<HTMLDivElement>(null);
   const { showDisplayAs, filterOptions, emptyMessage } = props;
   if (!filterOptions || filterOptions.length === 0) {
@@ -60,7 +66,7 @@ const Feed = (props: FeedProps) => {
     [mutedUsers, filterOption],
   );
 
-  const { events, loadMore } = useSubscribe({
+  const { events, loadMore } = fetchEvents({
     filter: filterOption.filter,
     filterFn,
     sinceLastOpened: false,

src/js/components/feed/types.ts

@@ -1,4 +1,4 @@
-import { Filter } from 'nostr-tools';
+import { Event, Filter } from 'nostr-tools';
 
 import { EventComponentProps } from '@/components/events/EventComponent';
 
@@ -7,6 +7,10 @@ export type FeedProps = {
   showDisplayAs?: boolean;
   filterFn?: (event: any) => boolean;
   emptyMessage?: string;
+  fetchEvents?: (opts: any) => {
+    events: Event[];
+    loadMore: () => void;
+  };
 };
 
 export type DisplayAs = 'feed' | 'grid';
@@ -19,6 +23,6 @@ export type ImageOrVideo = {
 export type FilterOption = {
   name: string;
   filter: Filter;
-  filterFn?: (event: any) => boolean;
+  filterFn?: (event: Event) => boolean;
   eventProps?: Partial<EventComponentProps>;
 };

src/js/views/feeds/Notifications.tsx

@@ -1,5 +1,6 @@
 import { debounce } from 'lodash';
 
+import Events from '@/nostr/Events';
 import Key from '@/nostr/Key';
 
 import Feed from '../../components/feed/Feed';
@@ -45,6 +46,12 @@ export default class Notifications extends View {
             eventProps: { fullWidth: false },
           },
         ]}
+        fetchEvents={() => {
+          return {
+            events: Events.notifications.eventIds.map((id) => Events.db.by('id', id)),
+            loadMore: () => {},
+          };
+        }}
       />
     );
   }