feat(add params to markallread): add params to mark all read, support…

packages/client-graphql/src/inbox/__tests__/mark-all-read.spec.ts

@@ -21,7 +21,7 @@ describe("trackEvent", () => {
       Array [
         "https://inbox.courier.com/q",
         Object {
-          "body": "{\\"query\\":\\"mutation TrackEvent {\\\\n  markAllRead\\\\n}\\\\n\\",\\"operationName\\":\\"TrackEvent\\",\\"variables\\":{}}",
+          "body": "{\\"query\\":\\"mutation TrackEvent($params: MarkAllAsReadParamsInput) {\\\\n  markAllRead(params: $params)\\\\n}\\\\n\\",\\"operationName\\":\\"TrackEvent\\",\\"variables\\":{\\"params\\":{}}}",
           "headers": Object {
             "content-type": "application/json",
             "x-courier-client-key": "CLIENT_KEY",

packages/client-graphql/src/inbox/mark-all-read.ts

@@ -1,12 +1,16 @@
 import { Client } from "urql";
 
 export const MARK_ALL_READ = `
-  mutation TrackEvent {
-    markAllRead
+  mutation TrackEvent($params: MarkAllAsReadParamsInput) {
+    markAllRead(params: $params)
   } 
 `;
 
-export type MarkAllRead = () => Promise<
+export interface IMarkAllAsReadParams {
+  tags?: string[];
+}
+
+export type MarkAllRead = (params?: IMarkAllAsReadParams) => Promise<
   | {
       markAllRead: boolean;
     }
@@ -15,12 +19,14 @@ export type MarkAllRead = () => Promise<
 
 export const markAllRead =
   (client?: Client): MarkAllRead =>
-  async () => {
+  async (params: IMarkAllAsReadParams = {}) => {
     if (!client) {
       return Promise.resolve(undefined);
     }
 
-    const results = await client.mutation(MARK_ALL_READ).toPromise();
+    const results = await client
+      .mutation(MARK_ALL_READ, { params })
+      .toPromise();
     const markAllRead = results?.data?.markAllRead;
 
     return {

packages/components/README.md

@@ -209,8 +209,6 @@ interface IInboxState = {
   from?: number;
   isLoading?: boolean;
   isOpen?: boolean;
-  lastMarkedAllRead?: number;
-  lastMessagesFetched?: number;
   messages?: Array<T>;
   pinned?: Array<T>;
   startCursor?: string;

packages/react-hooks/src/inbox/__tests__/reducer.spec.ts

@@ -26,7 +26,7 @@ import {
 
 import { INBOX_NEW_MESSAGE, newMessage } from "../actions/new-message";
 
-import { INBOX_MARK_ALL_READ, markAllRead } from "../actions/mark-all-read";
+import { INBOX_MARK_ALL_READ, markAllReadDone } from "../actions/mark-all-read";
 
 import {
   INBOX_MARK_MESSAGE_OPENED,
@@ -185,7 +185,6 @@ describe("inbox reducer", () => {
         expect(state).toEqual({
           ...initialState,
           isLoading: false,
-          lastMessagesFetched: mockDate,
           messages: [mockGraphMessage],
           pinned: [],
           searchParams: {
@@ -216,7 +215,6 @@ describe("inbox reducer", () => {
 
         expect(state).toEqual({
           ...initialState,
-          lastMessagesFetched: mockDate,
           messages: [mockGraphMessage, mockGraphMessage2],
           isLoading: false,
           searchParams: {
@@ -339,13 +337,13 @@ describe("inbox reducer", () => {
           unreadMessageCount: 2,
           messages: [mockGraphMessage, mockGraphMessage],
         },
-        markAllRead()
+        markAllReadDone()
       );
 
       expect(state).toEqual({
         ...initialState,
         unreadMessageCount: 0,
-        lastMarkedAllRead: mockDate,
+        markingAllAsRead: false,
         messages: [
           {
             ...mockGraphMessage,

packages/react-hooks/src/inbox/actions/mark-all-read.ts

@@ -1,5 +1,8 @@
+import { IGetInboxMessagesParams } from "@trycourier/client-graphql";
+
 export type MarkAllRead = {
   type: "inbox/MARK_ALL_READ";
+  payload?: IGetInboxMessagesParams;
 };
 
 export type MarkAllReadPending = {
@@ -12,18 +15,22 @@ export type MarkAllReadError = {
 
 export type MarkAllReadDone = {
   type: "inbox/MARK_ALL_READ/DONE";
-  payload: {
+  payload?: {
     ids: string[];
   };
+  meta?: IGetInboxMessagesParams;
 };
 
 export const INBOX_MARK_ALL_READ = "inbox/MARK_ALL_READ";
 export const INBOX_MARK_ALL_READ_PENDING = "inbox/MARK_ALL_READ/PENDING";
 export const INBOX_MARK_ALL_READ_DONE = "inbox/MARK_ALL_READ/DONE";
 export const INBOX_MARK_ALL_READ_ERROR = "inbox/MARK_ALL_READ/ERROR";
 
-export const markAllRead = (): MarkAllRead => ({
+export const markAllRead = (
+  payload?: IGetInboxMessagesParams
+): MarkAllRead => ({
   type: INBOX_MARK_ALL_READ,
+  payload,
 });
 
 export const markAllReadPending = (): MarkAllReadPending => ({
@@ -39,7 +46,7 @@ interface MarkAllReadDonePayload {
 }
 
 export const markAllReadDone = (
-  payload: MarkAllReadDonePayload
+  payload?: MarkAllReadDonePayload
 ): MarkAllReadDone => ({
   type: INBOX_MARK_ALL_READ_DONE,
   payload,

packages/react-hooks/src/inbox/middleware.ts

@@ -1,18 +1,26 @@
-import { resetLastFetched } from "./actions/reset-last-fetched";
 import {
   fetchUnreadMessageCount,
   fetchUnreadMessageCountDone,
   fetchUnreadMessageCountPending,
   INBOX_FETCH_UNREAD_MESSAGE_COUNT,
 } from "./actions/fetch-unread-message-count";
 
+import { INBOX_MARK_ALL_READ_DONE } from "./actions/mark-all-read";
+
 export default (api) => (store) => (next) => async (action) => {
   const state = store.getState();
 
   switch (action.type) {
-    //case "root/PAGE_VISIBLE":
+    case INBOX_MARK_ALL_READ_DONE: {
+      if (action.meta) {
+        store.dispatch(fetchUnreadMessageCount());
+      }
+
+      next(action);
+      break;
+    }
+
     case "root/WS_RECONNECTED": {
-      store.dispatch(resetLastFetched());
       store.dispatch(fetchUnreadMessageCount());
       break;
     }

packages/react-hooks/src/inbox/reducer.ts

@@ -4,14 +4,17 @@ import { IInbox } from "./types";
 import { InboxInit, INBOX_INIT } from "./actions/init";
 import { InboxSetView, INBOX_SET_VIEW } from "./actions/set-view";
 import { ToggleInbox, INBOX_TOGGLE } from "./actions/toggle-inbox";
-import { MarkAllRead, INBOX_MARK_ALL_READ } from "./actions/mark-all-read";
+import {
+  INBOX_MARK_ALL_READ_DONE,
+  MarkAllReadDone,
+  MarkAllReadPending,
+  MarkAllReadError,
+  INBOX_MARK_ALL_READ_PENDING,
+  INBOX_MARK_ALL_READ_ERROR,
+} from "./actions/mark-all-read";
 import { NewMessage, INBOX_NEW_MESSAGE } from "./actions/new-message";
 import { UnpinMessage, INBOX_UNPIN_MESSAGE } from "./actions/unpin-message";
 
-import {
-  ResetLastFetched,
-  INBOX_RESET_LAST_FETCHED,
-} from "./actions/reset-last-fetched";
 import { AddTag, INBOX_ADD_TAG } from "./actions/add-tag";
 import { RemoveTag, INBOX_REMOVE_TAG } from "./actions/remove-tag";
 
@@ -59,14 +62,15 @@ type InboxAction =
   | FetchUnreadMessageCountDone
   | InboxInit
   | InboxSetView
-  | MarkAllRead
+  | MarkAllReadPending
+  | MarkAllReadError
+  | MarkAllReadDone
   | MarkMessageArchived
   | MarkMessageOpened
   | MarkMessageRead
   | MarkMessageUnread
   | NewMessage
   | RemoveTag
-  | ResetLastFetched
   | ToggleInbox
   | UnpinMessage;
 
@@ -156,13 +160,6 @@ export default (state: IInbox = initialState, action?: InboxAction): IInbox => {
       };
     }
 
-    case INBOX_RESET_LAST_FETCHED: {
-      return {
-        ...state,
-        lastMessagesFetched: undefined,
-      };
-    }
-
     case INBOX_FETCH_MESSAGES_DONE: {
       const newMessages = action.payload?.appendMessages
         ? [...(state?.messages ?? []), ...(action.payload?.messages ?? [])]
@@ -172,7 +169,6 @@ export default (state: IInbox = initialState, action?: InboxAction): IInbox => {
         ...state,
         isLoading: false,
         searchParams: action.meta.searchParams,
-        lastMessagesFetched: new Date().getTime(),
         messages: newMessages as IInboxMessagePreview[],
         pinned: action.payload?.appendMessages
           ? state.pinned
@@ -386,7 +382,32 @@ export default (state: IInbox = initialState, action?: InboxAction): IInbox => {
       };
     }
 
-    case INBOX_MARK_ALL_READ: {
+    case INBOX_MARK_ALL_READ_DONE: {
+      const markAllAsReadDone = action as MarkAllReadDone;
+      if (markAllAsReadDone.meta) {
+        const handleMarkRead = (message) => {
+          const tags = markAllAsReadDone?.meta?.tags;
+          const hasTags = message?.tags?.some((t) => tags?.includes(t));
+
+          if (hasTags) {
+            message.read = new Date().toISOString();
+          }
+
+          return message;
+        };
+
+        const newPinned = state.pinned?.map(handleMarkRead);
+        const newMessages = state.messages?.map(handleMarkRead);
+
+        // we had params so we rely on the middleware to refetch count
+        return {
+          ...state,
+          messages: newMessages,
+          pinned: newPinned,
+          markingAllAsRead: false,
+        };
+      }
+
       const unreadMessageCount = 0;
 
       const handleMarkRead = (message) => {
@@ -401,10 +422,24 @@ export default (state: IInbox = initialState, action?: InboxAction): IInbox => {
 
       return {
         ...state,
-        lastMarkedAllRead: new Date().getTime(),
         messages: newMessages,
         pinned: newPinned,
         unreadMessageCount,
+        markingAllAsRead: false,
+      };
+    }
+
+    case INBOX_MARK_ALL_READ_ERROR: {
+      return {
+        ...state,
+        markingAllAsRead: false,
+      };
+    }
+
+    case INBOX_MARK_ALL_READ_PENDING: {
+      return {
+        ...state,
+        markingAllAsRead: true,
       };
     }
   }

packages/react-hooks/src/inbox/types.ts

@@ -7,8 +7,7 @@ export interface IInbox<T = IInboxMessagePreview> {
   from?: number;
   isLoading?: boolean;
   isOpen?: boolean;
-  lastMarkedAllRead?: number;
-  lastMessagesFetched?: number;
+  markingAllAsRead?: boolean;
   messages?: Array<T>;
   onEvent?: OnEvent;
   searchParams?: IGetInboxMessagesParams;

packages/react-hooks/src/inbox/use-inbox-actions.ts

@@ -9,11 +9,10 @@ import { IInbox } from "./types";
 import { IGetInboxMessagesParams, Inbox } from "@trycourier/client-graphql";
 
 import { initInbox } from "./actions/init";
-import { markAllRead } from "./actions/mark-all-read";
+import { markAllReadDone } from "./actions/mark-all-read";
 import { markMessageArchived } from "./actions/mark-message-archived";
 import { markMessageRead } from "./actions/mark-message-read";
 import { markMessageUnread } from "./actions/mark-message-unread";
-import { resetLastFetched } from "./actions/reset-last-fetched";
 import { setView } from "./actions/set-view";
 import { toggleInbox } from "./actions/toggle-inbox";
 import { unpinMessage } from "./actions/unpin-message";
@@ -35,13 +34,12 @@ export interface IInboxActions {
   fetchMessages: (params?: IFetchMessagesParams) => void;
   getUnreadMessageCount: (params?: IGetInboxMessagesParams) => void;
   init: (inbox?: IInbox) => void;
-  markAllAsRead: (fromWS?: boolean) => void;
+  markAllAsRead: (params?: IGetInboxMessagesParams, fromWS?: boolean) => void;
   markMessageArchived: (messageId: string, fromWS?: boolean) => Promise<void>;
   markMessageOpened: (messageId: string, fromWS?: boolean) => Promise<void>;
   markMessageRead: (messageId: string, fromWS?: boolean) => Promise<void>;
   markMessageUnread: (messageId: string, fromWS?: boolean) => Promise<void>;
   newMessage: (transportMessage: IInboxMessagePreview) => void;
-  resetLastFetched: () => void;
   setView: (view: string | "preferences") => void;
   toggleInbox: (isOpen?: boolean) => void;
   unpinMessage: (messageId: string, fromWS?: boolean) => Promise<void>;
@@ -135,9 +133,6 @@ const useInboxActions = (): IInboxActions => {
 
   return {
     init: handleInit,
-    resetLastFetched: () => {
-      dispatch(resetLastFetched());
-    },
     toggleInbox: (isOpen?: boolean) => {
       dispatch(toggleInbox(isOpen));
     },
@@ -166,15 +161,21 @@ const useInboxActions = (): IInboxActions => {
       });
     },
     getUnreadMessageCount: handleGetUnreadMessageCount,
-    markAllAsRead: async (fromWS) => {
-      dispatch(markAllRead());
+    markAllAsRead: async (params, fromWS) => {
       if (!fromWS) {
-        await inboxClient.markAllRead();
+        dispatch({
+          meta: params,
+          payload: () => inboxClient.markAllRead(params),
+          type: "inbox/MARK_ALL_READ",
+        });
+      } else {
+        dispatch(markAllReadDone());
       }
 
       if (onEvent) {
         onEvent({
           event: "mark-all-read",
+          data: params as Record<string, unknown>,
         });
       }
     },

packages/react-hooks/src/inbox/use-inbox.ts

@@ -51,7 +51,7 @@ const useInbox = (): IInbox<IInboxMessagePreview> & IInboxActions => {
         }
 
         if (data.event === "mark-all-read") {
-          actions.markAllAsRead(true);
+          actions.markAllAsRead({}, true);
         }
 
         if (!data?.messageId) {