[C-2565] Mark All As Read (#35)

trycourier · Apr 8, 2021 · 9e8da06 · 9e8da06
1 parent d22f907
commit 9e8da06
Show file tree

Hide file tree

Showing 18 changed files with 160 additions and 74 deletions.
diff --git a/.husky/.gitignore b/.husky/.gitignore
@@ -0,0 +1 @@
+_
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx pretty-quick --staged
diff --git a/.prettierrc b/.prettierrc
@@ -1,6 +1,5 @@
 {
-  "disableLanguages": ["html", "ejs", "javascript", "css"],
   "trailingComma": "es5",
   "tabWidth": 2,
   "arrowParens": "always"
-}
+}
diff --git a/package.json b/package.json
@@ -8,7 +8,7 @@
     "lerna": "lerna",
     "lerna:version": "lerna version --no-push --no-git-tag-version",
     "lerna:publish": "lerna publish from-package --yes --no-verify-access",
-    "postinstall": "lerna bootstrap && yarn build",
+    "postinstall": "lerna bootstrap && yarn build && husky install",
     "build": "lerna run build --stream && yarn types",
     "build:components": "lerna run build:components --stream",
     "analyze:components": "yarn run build && ANALYZE=true lerna run build:components --scope @trycourier/components --stream",
@@ -66,10 +66,12 @@
     "eslint-plugin-react": "^7.20.0",
     "eslint-plugin-react-hooks": "^4.0.2",
     "fetch-mock": "^9.11.0",
+    "husky": "^6.0.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^26.6.3",
     "jest-styled-components": "^7.0.3",
     "lerna": "^4.0.0",
+    "pretty-quick": "^3.1.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "rimraf": "^3.0.2",

diff --git a/packages/components/src/index.html b/packages/components/src/index.html
@@ -2,9 +2,7 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <title>
-      <%= htmlWebpackPlugin.options.title %>
-    </title>
+    <title><%= htmlWebpackPlugin.options.title %></title>
     <style>
       body {
         cursor: default;
@@ -69,9 +67,7 @@ <h1>Treva Homepage</h1>
       </button>
     </div>
     <div>
-      <button id="notify" onclick="notifyClick()" disabled>
-        Notify
-      </button>
+      <button id="notify" onclick="notifyClick()" disabled>Notify</button>
     </div>
   </body>
 </html>
diff --git a/packages/react-inbox/README.md b/packages/react-inbox/README.md
@@ -106,6 +106,6 @@ function MyComponent() {
 
 ### [Inbox Config](#config)
 
-| Key         | Type             | Description                               |
-| ----------- | ---------------- | ----------------------------------------- |
-| defaultIcon | `string | false` | Default Icon to use if no Icon is present |
+| Key         | Type    | Description |
+| ----------- | ------- | ----------- | ----------------------------------------- |
+| defaultIcon | `string | false`      | Default Icon to use if no Icon is present |
diff --git a/packages/react-inbox/src/components/Message/index.tsx b/packages/react-inbox/src/components/Message/index.tsx
@@ -48,7 +48,7 @@ const Message: React.FunctionComponent<MessageProps> = ({
   const { readTrackingId, unreadTrackingId } = trackingIds || {};
   const { config, markMessageRead, markMessageUnread } = useInbox();
   const renderedIcon = getIcon(icon ?? config?.defaultIcon);
-  const [_, trackEvent] = useTrackEvent();
+  const { trackEvent } = useTrackEvent();
 
   const timeAgo = useMemo(() => {
     if (!created) {
@@ -64,19 +64,20 @@ const Message: React.FunctionComponent<MessageProps> = ({
   const showMarkAsRead = !read && readTrackingId;
   const showMarkAsUnread = read && unreadTrackingId;
   const actions = useMemo(
-    () => [
-      {
-        href: data?.clickAction,
-        label: "View Details",
-        onClick: () => {
-          if (trackingIds?.clickTrackingId) {
-            trackEvent({
-              trackingId: trackingIds?.clickTrackingId,
-            });
-          }
+    () =>
+      [
+        data?.clickAction && {
+          href: data?.clickAction,
+          label: "View Details",
+          onClick: () => {
+            if (trackingIds?.clickTrackingId) {
+              trackEvent({
+                trackingId: trackingIds?.clickTrackingId,
+              });
+            }
+          },
         },
-      },
-    ],
+      ].filter(Boolean),
     [data]
   );
 

diff --git a/packages/react-inbox/src/components/Message/styled.tsx b/packages/react-inbox/src/components/Message/styled.tsx
@@ -8,14 +8,15 @@ export const Container = styled.div(({ theme }) => ({
   padding: "10px 15px",
   backgroundColor: "#F9FAFB",
   alignItems: "center",
-  height: 90,
+  maxHeight: 90,
   borderBottom: "1px solid rgba(203,213,224,.5)",
   "&.read": {
     backgroundColor: "#F7F6F9",
   },
   "&:not(.read):hover": {
     background: "#EDE4ED",
   },
+  scrollSnapAlign: "start",
   ...theme.message?.container,
 }));
 

diff --git a/packages/react-inbox/src/components/Messages/index.tsx b/packages/react-inbox/src/components/Messages/index.tsx
@@ -4,11 +4,12 @@ import { InboxProps } from "../../types";
 import TabBar from "../TabBar";
 import {
   Body,
-  Header,
-  HeaderText,
+  BodyText,
   Empty,
   Footer,
   FooterContent,
+  Header,
+  HeaderText,
 } from "./styled";
 import Loading from "./loading";
 import PaginationEnd from "./PaginationEnd";
@@ -28,6 +29,7 @@ const Messages: React.FunctionComponent<InboxProps> = ({
     messages,
     startCursor,
     unreadMessageCount,
+    markAllAsRead,
   } = useInbox();
 
   const ref = useRef<HTMLDivElement>(null);
@@ -61,7 +63,9 @@ const Messages: React.FunctionComponent<InboxProps> = ({
             {title}
             {unreadMessageCount ? ` (${unreadMessageCount})` : ""}
           </HeaderText>
-          {/*<BodyText style={{ cursor: "pointer" }}>Mark all as read</BodyText>*/}
+          <BodyText onClick={markAllAsRead} style={{ cursor: "pointer" }}>
+            Mark all as read
+          </BodyText>
         </Header>
       )}
       <TabBar />

diff --git a/packages/react-inbox/src/components/Messages/styled.ts b/packages/react-inbox/src/components/Messages/styled.ts
@@ -7,6 +7,7 @@ export const Body = styled.div(({ theme }) => ({
   height: 365,
   flexDirection: "column",
   borderTop: "1px solid rgba(203,213,224,.5)",
+  scrollSnapType: "y proximity",
   ...theme.body,
 }));
 

diff --git a/packages/react-inbox/src/hooks/use-inbox.ts b/packages/react-inbox/src/hooks/use-inbox.ts
@@ -6,7 +6,7 @@ export default () => {
   const { fetch: fetchMessages } = useMessages();
   const { dispatch, inbox, transport } = useCourier();
 
-  const [_, trackEvent] = useTrackEvent();
+  const { trackEvent, batchTrackEvent } = useTrackEvent();
 
   const newMessage = useCallback(
     (payload) => {
@@ -87,29 +87,38 @@ export default () => {
     },
 
     markMessageRead: async (messageId: string, trackingId: string) => {
-      await trackEvent({
-        trackingId,
-      });
-
       dispatch({
         type: "inbox/MARK_MESSAGE_READ",
         payload: {
           messageId,
         },
       });
-    },
-
-    markMessageUnread: async (messageId: string, trackingId: string) => {
       await trackEvent({
         trackingId,
       });
+    },
 
+    markMessageUnread: async (messageId: string, trackingId: string) => {
       dispatch({
         type: "inbox/MARK_MESSAGE_UNREAD",
         payload: {
           messageId,
         },
       });
+      await trackEvent({
+        trackingId,
+      });
+    },
+    markAllAsRead: async () => {
+      const messageIds = inbox.messages.map(({ messageId }) => messageId);
+
+      dispatch({
+        type: "inbox/MARK_ALL_AS_READ",
+      });
+      await batchTrackEvent({
+        eventType: "read",
+        messageIds,
+      });
     },
   };
 };
diff --git a/packages/react-inbox/src/reducer.ts b/packages/react-inbox/src/reducer.ts
@@ -146,6 +146,29 @@ export default (state: InboxState = initialState, action) => {
         ],
       };
     }
+
+    case "inbox/MARK_ALL_AS_READ": {
+      const unreadMessageCount = 0;
+
+      if (state.currentTab?.filter?.isRead === false) {
+        return {
+          ...state,
+          messages: [],
+          unreadMessageCount,
+        };
+      }
+
+      return {
+        ...state,
+        messages: state.messages.map((message) => {
+          return {
+            ...message,
+            read: true,
+          };
+        }),
+        unreadMessageCount,
+      };
+    }
   }
 
   return state;

diff --git a/packages/react-provider/src/hooks/use-track-event.ts b/packages/react-provider/src/hooks/use-track-event.ts
@@ -8,8 +8,18 @@ const TRACK_EVENT = `
   }
 `;
 
+const BATCH_TRACK_EVENT = `
+  mutation BatchTrackEvent($eventType: String!, $messageIds: [String]!) {
+    batchTrackEvent(eventType: $eventType, messageIds: $messageIds) {
+      ids
+    }
+  }
+`;
+
 const useTrackEvent = () => {
-  return useMutation(TRACK_EVENT);
+  const [, trackEvent] = useMutation(TRACK_EVENT);
+  const [, batchTrackEvent] = useMutation(BATCH_TRACK_EVENT);
+  return { trackEvent, batchTrackEvent };
 };
 
 export default useTrackEvent;
diff --git a/packages/react-provider/src/reducer.ts b/packages/react-provider/src/reducer.ts
@@ -25,20 +25,20 @@ const rootReducer = (state, action) => {
   }
 
   switch (action.type) {
-  case "root/INIT": {
-    return {
-      ...state,
-      apiUrl: action.payload.apiUrl,
-      clientKey: action.payload.clientKey,
-      transport: action.payload.transport,
-      userId: action.payload.userId,
-      userSignature: action.payload.userSignature,
-    };
-  }
-
-  default: {
-    return state;
-  }
+    case "root/INIT": {
+      return {
+        ...state,
+        apiUrl: action.payload.apiUrl,
+        clientKey: action.payload.clientKey,
+        transport: action.payload.transport,
+        userId: action.payload.userId,
+        userSignature: action.payload.userSignature,
+      };
+    }
+
+    default: {
+      return state;
+    }
   }
 };
 

diff --git a/packages/react-toast/src/components/Body/index.tsx b/packages/react-toast/src/components/Body/index.tsx
@@ -17,7 +17,7 @@ const ToastBody: React.FunctionComponent<Partial<ICourierToastMessage>> = ({
 }) => {
   const { toastProps } = props as { toastProps: any };
   const [, { config }] = useToast();
-  const [_, trackEvent] = useTrackEvent();
+  const { trackEvent } = useTrackEvent();
 
   const handleOnClickDismiss = useCallback(
     () => toast.dismiss(toastProps.toastId),

diff --git a/packages/react-toast/src/hooks/index.ts b/packages/react-toast/src/hooks/index.ts
@@ -1,33 +1,35 @@
 import {
-  ICourierContext, useCourier, useTrackEvent,
+  ICourierContext,
+  useCourier,
+  useTrackEvent,
 } from "@trycourier/react-provider";
 import { useEffect } from "react";
 import { IToastConfig } from "../types";
 import { UseToast, ToastCaller } from "./types";
 
-
 export const useToast: UseToast = () => {
-  const {
-    toast, clientKey,
-  } = useCourier<{
+  const { toast, clientKey } = useCourier<{
     toast: {
-      toast: ToastCaller,
-      config?: IToastConfig
-    }
+      toast: ToastCaller;
+      config?: IToastConfig;
+    };
   }>();
 
-  return [toast?.toast, {
-    config: toast?.config ?? {},
-    clientKey,
-  }];
+  return [
+    toast?.toast,
+    {
+      config: toast?.config ?? {},
+      clientKey,
+    },
+  ];
 };
 
 export const useListenForTransportEvent = (
   clientKey: string,
   transport: ICourierContext["transport"],
   handleToast
 ) => {
-  const [_, trackEvent] = useTrackEvent();
+  const { trackEvent } = useTrackEvent();
 
   useEffect(() => {
     if (!transport) {

diff --git a/packages/react-toast/src/reducer.ts b/packages/react-toast/src/reducer.ts
@@ -1,18 +1,18 @@
 import { IToastConfig } from "./types";
 
 interface ToastState {
-  config: IToastConfig
+  config: IToastConfig;
 }
 
 export default (state: ToastState, action) => {
   switch (action.type) {
-  case "toast/INIT": {
-    return {
-      ...state,
-      config: action.payload.config,
-      toast: action.payload.toast,
-    };
-  }
+    case "toast/INIT": {
+      return {
+        ...state,
+        config: action.payload.config,
+        toast: action.payload.toast,
+      };
+    }
   }
 
   return state;