feat(add and remove tags): allow adding and removing tags

rileylnapier · rileylnapier · commit 48d9ce553ae3 · 2024-04-01T17:40:15.000-07:00
diff --git a/packages/client-graphql/src/inbox/index.ts b/packages/client-graphql/src/inbox/index.ts
@@ -18,6 +18,7 @@ export default (
     | ICourierClientJWTParams
     | { client?: Client }
 ): {
+  addTag: TrackEvent;
   getInboxCount: GetInboxCount;
   getMessage: message.GetInboxMessage;
   getMessageLists: messageLists.GetInboxMessageLists;
@@ -27,6 +28,7 @@ export default (
   markOpened: TrackEvent;
   markRead: TrackEvent;
   markUnread: TrackEvent;
+  removeTag: TrackEvent;
   trackClick: TrackEvent;
   unpinMessage: TrackEvent;
 } => {
@@ -35,6 +37,8 @@ export default (
   });
 
   return {
+    addTag: trackEvent(client)("addTag"),
+    removeTag: trackEvent(client)("removeTag"),
     getInboxCount: getInboxCount(client),
     getMessage: message.getInboxMessage(client),
     getMessageLists: messageLists.getMessageLists(client),
diff --git a/packages/client-graphql/src/inbox/track-event.ts b/packages/client-graphql/src/inbox/track-event.ts
@@ -1,6 +1,15 @@
 import { Client } from "urql";
 
-type EventType = "read" | "unread" | "archive" | "opened" | "clicked" | "unpin";
+type EventType =
+  | "addTag"
+  | "archive"
+  | "clicked"
+  | "opened"
+  | "read"
+  | "removeTag"
+  | "unpin"
+  | "unread";
+
 export const getTrackEventQuery = (eventType: EventType) => `
   mutation TrackEvent(
     $messageId: String!
@@ -9,6 +18,15 @@ export const getTrackEventQuery = (eventType: EventType) => `
   }
 `;
 
+export const getTagMutation = (eventType: EventType) => `
+  mutation TrackEvent(
+    $messageId: String!
+    $tag: String!
+  ) {
+    ${eventType}(messageId: $messageId, tag: $tag)
+  }
+`;
+
 export const getTrackEventQueryWithTrackingId = (eventType: EventType) => `
   mutation TrackEvent(
     $messageId: String!
@@ -28,18 +46,47 @@ export type TrackEvent = (messageId: string) => Promise<
 export const trackEvent =
   (client?: Client) =>
   (eventType: EventType): TrackEvent =>
-  async (messageId: string, trackingId?: string) => {
+  async (messageId: string, data?: Record<string, unknown>) => {
     if (!client) {
       return Promise.resolve(undefined);
     }
 
-    const QUERY =
-      eventType === "clicked"
-        ? getTrackEventQueryWithTrackingId(eventType)
-        : getTrackEventQuery(eventType);
+    const params = (() => {
+      switch (eventType) {
+        case "clicked": {
+          return {
+            mutation: getTrackEventQueryWithTrackingId(eventType),
+            variables: {
+              messageId,
+              trackingId: data?.trackingId,
+            },
+          };
+        }
+
+        case "addTag":
+        case "removeTag": {
+          return {
+            mutation: getTagMutation(eventType),
+            variables: {
+              messageId,
+              tag: data?.tag,
+            },
+          };
+        }
+
+        default: {
+          return {
+            mutation: getTrackEventQuery(eventType),
+            variables: {
+              messageId,
+            },
+          };
+        }
+      }
+    })();
 
     const results = await client
-      .mutation(QUERY, { messageId, trackingId })
+      .mutation(params.mutation, params.variables)
       .toPromise();
     const status = results?.data?.[eventType];
 
diff --git a/packages/components/src/index.html b/packages/components/src/index.html
@@ -271,19 +271,32 @@
       };*/
 
       window.courierConfig = {
+        /*
+        STAGING CONFIG
+        
         inboxApiUrl:
-          "https://3rjq5oe9b1.execute-api.us-east-1.amazonaws.com/dev/q",
+          "https://4rq7n8hhjd.execute-api.us-east-1.amazonaws.com/staging/q",
         apiUrl:
-          "https://rubmz24skk.execute-api.us-east-1.amazonaws.com/dev/client/q",
+          "https://yubmnstah4.execute-api.us-east-1.amazonaws.com/staging/client/q",
         wsOptions: {
-          url: "wss://20en15n3ng.execute-api.us-east-1.amazonaws.com/dev",
+          url: "wss://icnrz8ttcf.execute-api.us-east-1.amazonaws.com/staging",
         },
-        clientKey: "ZDJmNTVhMWQtYmZjMS00ODg0LThhMjQtZDg0ZDg5ZTlhN2Ri",
-        // JWT SMOKEY
-        //clientKey: "YzQzMGM3OGYtYzQ2NC00NTdjLThkM2QtNWIwYzI4OTdmYmE5",
-        //userId: "smokey12345",
+        clientKey: "MWIxZTk1M2YtMGViYi00N2FkLWJlYWItZjU3OWJkNjA2ZWIx=",
+        userId: "smokey12345",*/
+        //authorization: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzY29wZSI6InVzZXJfaWQ6MDB1ZDZjZGRlY1VSaEhybWkzNTcgaW5ib3g6cmVhZDptZXNzYWdlcyBpbmJveDp3cml0ZTpldmVudHMiLCJ0ZW5hbnRfc2NvcGUiOiJwdWJsaXNoZWQvdGVzdCIsInRlbmFudF9pZCI6ImJiNjAyNDM5LTI2MmYtNGRlZS1iNDExLTNiZjdmMjM5NDYyMS90ZXN0IiwiYWNjb3VudF9pZCI6IjAxRkdTN1hWVDlBSEo4OE43QVpCMDE5UUdaIiwiaWF0IjoxNzEwNDYyMjg5LCJqdGkiOiJmMTc3NWJlMi1hNzVhLTQxNDktYjNhMC02YjA0MjdhNzg0NjQifQ.8FwrFCKPyFP1MCIH8kWBWfWCUUGDyP5w4oYuQGPWGtY",
 
-        userId: "70f6a4f4-2907-4518-b8f3-b9cfab224764",
+        //userId: "70f6a4f4-2907-4518-b8f3-b9cfab224764",
+
+        // rileydev config
+        inboxApiUrl:
+          "https://3gbm33p3pe.execute-api.us-east-1.amazonaws.com/dev/q",
+        apiUrl:
+          "https://ln3nzc1ca8.execute-api.us-east-1.amazonaws.com/dev/client/q",
+        wsOptions: {
+          url: "wss://p46x8j3l88.execute-api.us-east-1.amazonaws.com/dev",
+        },
+        clientKey: "NDBmYTEyODAtNjg0Ni00YjYwLTlkZjktNGE3M2RkMWM4ZWIw",
+        userId: "ed633018-217c-4b2d-a2e9-0548f0955bdc",
         components: {
           inbox: {
             appendTo: "#test",
diff --git a/packages/components/src/index.tsx b/packages/components/src/index.tsx
@@ -107,9 +107,6 @@ const initCourier = (courierConfig?: ICourierConfig) => {
     return;
   }
 
-  if (!userId || !clientKey) {
-    return;
-  }
   const existingCourierRoot =
     document.getElementsByTagName("courier-root")?.[0];
 
diff --git a/packages/react-hooks/src/inbox/actions/add-tag.ts b/packages/react-hooks/src/inbox/actions/add-tag.ts
@@ -0,0 +1,17 @@
+export type AddTag = {
+  type: "inbox/ADD_TAG";
+  payload: {
+    tag: string;
+    messageId: string;
+  };
+};
+
+export const INBOX_ADD_TAG = "inbox/ADD_TAG";
+
+export const addTag = (messageId: string, tag: string): AddTag => ({
+  type: INBOX_ADD_TAG,
+  payload: {
+    tag,
+    messageId,
+  },
+});
diff --git a/packages/react-hooks/src/inbox/actions/remove-tag.ts b/packages/react-hooks/src/inbox/actions/remove-tag.ts
@@ -0,0 +1,17 @@
+export type RemoveTag = {
+  type: "inbox/REMOVE_TAG";
+  payload: {
+    tag: string;
+    messageId: string;
+  };
+};
+
+export const INBOX_REMOVE_TAG = "inbox/REMOVE_TAG";
+
+export const removeTag = (messageId: string, tag: string): RemoveTag => ({
+  type: INBOX_REMOVE_TAG,
+  payload: {
+    tag,
+    messageId,
+  },
+});
diff --git a/packages/react-hooks/src/inbox/reducer.ts b/packages/react-hooks/src/inbox/reducer.ts
@@ -12,6 +12,9 @@ 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";
+
 import {
   MarkMessageArchived,
   INBOX_MARK_MESSAGE_ARCHIVED,
@@ -49,6 +52,7 @@ export const initialState: IInbox = {
 };
 
 type InboxAction =
+  | AddTag
   | FetchMessagesDone
   | FetchMessagesError
   | FetchMessagesPending
@@ -61,6 +65,7 @@ type InboxAction =
   | MarkMessageRead
   | MarkMessageUnread
   | NewMessage
+  | RemoveTag
   | ResetLastFetched
   | ToggleInbox
   | UnpinMessage;
@@ -249,6 +254,55 @@ export default (state: IInbox = initialState, action?: InboxAction): IInbox => {
       };
     }
 
+    case INBOX_ADD_TAG: {
+      const handleAddTag = (message: IInboxMessagePreview) => {
+        if (message.messageId === action.payload.messageId) {
+          const tags = message.tags ?? [];
+          if (!tags.includes(action.payload.tag)) {
+            tags.push(action.payload.tag);
+          }
+          return {
+            ...message,
+            tags,
+          };
+        }
+
+        return message;
+      };
+
+      const newPinned = state.pinned?.map(handleAddTag);
+      const newMessages = state.messages?.map(handleAddTag);
+
+      return {
+        ...state,
+        pinned: newPinned,
+        messages: newMessages,
+      };
+    }
+
+    case INBOX_REMOVE_TAG: {
+      const handleRemoveTag = (message: IInboxMessagePreview) => {
+        if (message.messageId === action.payload.messageId) {
+          const tags = message?.tags?.filter((t) => t !== action.payload.tag);
+          return {
+            ...message,
+            tags,
+          };
+        }
+
+        return message;
+      };
+
+      const newPinned = state.pinned?.map(handleRemoveTag);
+      const newMessages = state.messages?.map(handleRemoveTag);
+
+      return {
+        ...state,
+        pinned: newPinned,
+        messages: newMessages,
+      };
+    }
+
     case INBOX_UNPIN_MESSAGE: {
       const pinned = state.pinned ?? [];
       const messageToUnpin = pinned?.find((p) => {
diff --git a/packages/react-hooks/src/inbox/use-inbox-actions.ts b/packages/react-hooks/src/inbox/use-inbox-actions.ts
@@ -19,6 +19,8 @@ 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";
+import { addTag } from "./actions/add-tag";
+import { removeTag } from "./actions/remove-tag";
 
 import { useEffect } from "react";
 import { markMessageOpened } from "./actions/mark-message-opened";
@@ -44,6 +46,12 @@ export interface IInboxActions {
   setView: (view: string | "preferences") => void;
   toggleInbox: (isOpen?: boolean) => void;
   unpinMessage: (messageId: string, fromWS?: boolean) => Promise<void>;
+  addTag: (messageId: string, tag: string, fromWS?: boolean) => Promise<void>;
+  removeTag: (
+    messageId: string,
+    tag: string,
+    fromWS?: boolean
+  ) => Promise<void>;
   trackClick: (messageId: string, trackingId: string) => Promise<void>;
 }
 
@@ -242,6 +250,40 @@ const useInboxActions = (): IInboxActions => {
         });
       }
     },
+    addTag: async (messageId, tag, fromWS) => {
+      dispatch(addTag(messageId, tag));
+      if (!fromWS) {
+        await inboxClient.addTag(messageId, { tag });
+      }
+
+      if (onEvent) {
+        onEvent({
+          event: "add-tag",
+          message: allMessages.find((m) => m.messageId === messageId),
+          messageId,
+          data: {
+            tag,
+          },
+        });
+      }
+    },
+    removeTag: async (messageId, tag, fromWS) => {
+      dispatch(removeTag(messageId, tag));
+      if (!fromWS) {
+        await inboxClient.removeTag(messageId, { tag });
+      }
+
+      if (onEvent) {
+        onEvent({
+          event: "remove-tag",
+          message: allMessages.find((m) => m.messageId === messageId),
+          messageId,
+          data: {
+            tag,
+          },
+        });
+      }
+    },
     unpinMessage: async (messageId, fromWS) => {
       dispatch(unpinMessage(messageId));
       if (!fromWS) {
diff --git a/packages/react-provider/src/transports/types.ts b/packages/react-provider/src/transports/types.ts
@@ -33,6 +33,7 @@ export interface IInboxMessagePreview {
   data?: Record<string, any>;
   /** ISO 8601 date the message was read */
   read?: string;
+  tags?: string[];
   title?: string;
   trackingIds?: {
     openTrackingId?: string;
diff --git a/packages/react-provider/src/types.ts b/packages/react-provider/src/types.ts
@@ -18,6 +18,7 @@ export type OnEvent = (eventParams: {
   messageId?: string;
   message?: IInboxMessagePreview;
   event: EventType;
+  data?: Record<string, unknown>;
 }) => void;
 
 export interface PinDetails {
@@ -64,13 +65,15 @@ export interface Brand {
 }
 
 export type EventType =
-  | "mark-all-read"
-  | "read"
-  | "unread"
+  | "add-tag"
   | "archive"
-  | "opened"
   | "click"
-  | "unpin";
+  | "mark-all-read"
+  | "opened"
+  | "read"
+  | "remove-tag"
+  | "unpin"
+  | "unread";
 
 export interface ThemeVariables {
   background?: string;

Original file line number	Diff line number	Diff line change
`@@ -107,9 +107,6 @@ const initCourier = (courierConfig?: ICourierConfig) => {`
`107`	`107`	`return;`
`108`	`108`	`}`
`109`	`109`
`110`		`- if (!userId \|\| !clientKey) {`
`111`		`- return;`
`112`		`- }`
`113`	`110`	`const existingCourierRoot =`
`114`	`111`	`document.getElementsByTagName("courier-root")?.[0];`
`115`	`112`