diff --git a/client/CLIENT_EVENTS.md b/client/CLIENT_EVENTS.md index e5dcfaaf24..8b35595540 100644 --- a/client/CLIENT_EVENTS.md +++ b/client/CLIENT_EVENTS.md @@ -150,6 +150,7 @@ createComment.error - viewNewComments - viewNewCommentsNetwork - viewNewRepliesNetwork +- viewNotificationsFeed ### Events - **addACommentButton**: This event is emitted when the viewer clicks the add a comment button in alternate oldest view. @@ -729,4 +730,10 @@ createComment.error }; } ``` +- **viewNotificationsFeed**: This event is emitted when the viewer clicks to view their notifications feed. + ```ts + { + userID?: string | undefined; + } + ``` diff --git a/client/src/core/client/stream/events.ts b/client/src/core/client/stream/events.ts index fd2e41c712..f01b4b9cc3 100644 --- a/client/src/core/client/stream/events.ts +++ b/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. diff --git a/client/src/core/client/stream/tabs/Notifications/NotificationsPaginator.tsx b/client/src/core/client/stream/tabs/Notifications/NotificationsPaginator.tsx index 641b002cef..7a42e7d8f4 100644 --- a/client/src/core/client/stream/tabs/Notifications/NotificationsPaginator.tsx +++ b/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) => { const [disableLoadMore, setDisableLoadMore] = useState(false); + const emitViewNotificationsFeedEvent = useViewerEvent( + ViewNotificationsFeedEvent + ); + + useEffect(() => { + emitViewNotificationsFeedEvent({ userID: props.viewerID }); + }, []); const [{ hasNewNotifications }, setLocal] = useLocal(graphql`