Clear stories notification after visiting stories view

ts/state/ducks/stories.ts

@@ -84,6 +84,7 @@ export type SelectedStoryDataType = {
 // State
 
 export type StoriesStateType = {
+  readonly lastOpenedAtTimestamp: number | undefined;
   readonly openedAtTimestamp: number | undefined;
   readonly replyState?: {
     messageId: string;
@@ -1099,6 +1100,7 @@ export function getEmptyState(
   overrideState: Partial<StoriesStateType> = {}
 ): StoriesStateType {
   return {
+    lastOpenedAtTimestamp: undefined,
     openedAtTimestamp: undefined,
     stories: [],
     ...overrideState,
@@ -1114,6 +1116,9 @@ export function reducer(
 
     return {
       ...state,
+      lastOpenedAtTimestamp: !isShowingStoriesView
+        ? state.openedAtTimestamp || Date.now()
+        : state.lastOpenedAtTimestamp,
       openedAtTimestamp: isShowingStoriesView ? undefined : Date.now(),
       replyState: undefined,
       sendStoryModalData: undefined,

ts/state/selectors/stories.ts

@@ -350,14 +350,16 @@ export const getStories = createSelector(
   }
 );
 
-export const getUnreadStorySenderCount = createSelector(
+export const getStoriesNotificationCount = createSelector(
   getStoriesState,
-  ({ stories }): number => {
+  ({ lastOpenedAtTimestamp, stories }): number => {
     return new Set(
       stories
         .filter(
           story =>
-            story.readStatus === ReadStatus.Unread && !story.deletedForEveryone
+            story.readStatus === ReadStatus.Unread &&
+            !story.deletedForEveryone &&
+            story.timestamp > (lastOpenedAtTimestamp || 0)
         )
         .map(story => story.conversationId)
     ).size;

ts/state/smart/MainHeader.tsx

@@ -17,7 +17,7 @@ import {
 } from '../selectors/user';
 import { getMe } from '../selectors/conversations';
 import { getStoriesEnabled } from '../selectors/items';
-import { getUnreadStorySenderCount } from '../selectors/stories';
+import { getStoriesNotificationCount } from '../selectors/stories';
 
 const mapStateToProps = (state: StateType) => {
   const me = getMe(state);
@@ -32,7 +32,7 @@ const mapStateToProps = (state: StateType) => {
     badge: getPreferredBadgeSelector(state)(me.badges),
     theme: getTheme(state),
     i18n: getIntl(state),
-    unreadStoriesCount: getUnreadStorySenderCount(state),
+    unreadStoriesCount: getStoriesNotificationCount(state),
   };
 };