notifications: add and emit viewnotificationsfeed event

client/CLIENT_EVENTS.md

@@ -150,6 +150,7 @@ createComment.error
 - <a href="#viewNewComments">viewNewComments</a>
 - <a href="#viewNewCommentsNetwork">viewNewCommentsNetwork</a>
 - <a href="#viewNewRepliesNetwork">viewNewRepliesNetwork</a>
+- <a href="#viewNotificationsFeed">viewNotificationsFeed</a>
 
 ### Events
 - <a id="addACommentButton">**addACommentButton**</a>: This event is emitted when the viewer clicks the add a comment button in alternate oldest view.
@@ -729,4 +730,10 @@ createComment.error
       };
   }
   ```
+- <a id="viewNotificationsFeed">**viewNotificationsFeed**</a>: This event is emitted when the viewer clicks to view their notifications feed.
+  ```ts
+  {
+      userID?: string | undefined;
+  }
+  ```
 <!-- END docs:events -->

client/src/core/client/stream/events.ts

@@ -458,6 +458,13 @@ export const ViewConversationEvent = createViewerEvent<{
   commentID: string;
 }>("viewConversation");
 
+/**
+ * This event is emitted when the viewer clicks to view their notifications feed.
+ */
+export const ViewNotificationsFeedEvent = createViewerEvent<{
+  userID?: string;
+}>("viewNotificationsFeedEvent");
+
 /**
  * This event is emitted when the viewer clicks
  * on a username which shows the user popover.

client/src/core/client/stream/tabs/Notifications/NotificationsPaginator.tsx

@@ -3,11 +3,13 @@ import cn from "classnames";
 import React, {
   FunctionComponent,
   useCallback,
+  useEffect,
   useMemo,
   useState,
 } from "react";
 import { graphql, RelayPaginationProp } from "react-relay";
 
+import { useViewerEvent } from "coral-framework/lib/events";
 import {
   useLocal,
   useRefetch,
@@ -19,6 +21,7 @@ import {
 } from "coral-framework/schema";
 import CLASSES from "coral-stream/classes";
 import Spinner from "coral-stream/common/Spinner";
+import { ViewNotificationsFeedEvent } from "coral-stream/events";
 import { Flex } from "coral-ui/components/v2";
 import { Button } from "coral-ui/components/v3";
 
@@ -40,6 +43,13 @@ interface Props {
 
 const NotificationsPaginator: FunctionComponent<Props> = (props) => {
   const [disableLoadMore, setDisableLoadMore] = useState(false);
+  const emitViewNotificationsFeedEvent = useViewerEvent(
+    ViewNotificationsFeedEvent
+  );
+
+  useEffect(() => {
+    emitViewNotificationsFeedEvent({ userID: props.viewerID });
+  }, []);
 
   const [{ hasNewNotifications }, setLocal] =
     useLocal<NotificationsPaginatorLocal>(graphql`