Add Brand ID To Provider Config (#38)

trycourier · Apr 13, 2021 · 4763a14 · 4763a14
1 parent 2f81759
commit 4763a14
Show file tree

Hide file tree

Showing 12 changed files with 123 additions and 76 deletions.
diff --git a/packages/react-inbox/__tests__/Inbox.spec.tsx b/packages/react-inbox/__tests__/Inbox.spec.tsx
@@ -12,7 +12,7 @@ function renderInboxComponent(props?: Partial<InboxProps>) {
   };
 
   return render(
-    <CourierProvider>
+    <CourierProvider clientKey="1232132123" userId="12312312">
       <Inbox {...defaultProps} {...props} />
     </CourierProvider>
   );

diff --git a/packages/react-inbox/src/components/Inbox/index.tsx b/packages/react-inbox/src/components/Inbox/index.tsx
@@ -75,8 +75,6 @@ const Inbox: React.FunctionComponent<InboxProps> = (props) => {
   const { clientKey, userId, brand } = courierContext;
   useMessageCount();
   const inbox = useInbox();
-  const { init: initInbox } = inbox;
-
   const tippyProps: TippyProps = {
     trigger: props.trigger ?? "click",
     placement: props.placement ?? "right",
@@ -95,29 +93,26 @@ const Inbox: React.FunctionComponent<InboxProps> = (props) => {
 
       if (localStorageState) {
         try {
-          initInbox({
-            ...JSON.parse(localStorageState),
-            config: props,
-          });
-          return;
+          const { messages, unreadMessageCount } = JSON.parse(
+            localStorageState
+          );
+          inbox.init({ messages, unreadMessageCount, config: props });
         } catch (ex) {
           console.log("error", ex);
-          // do nothing
         }
+      } else {
+        inbox.init({
+          config: props,
+        });
       }
     }
-
-    initInbox({
-      config: props,
-    });
   }, [props, clientKey, userId]);
 
   useEffect(() => {
     localStorage.setItem(
       `${clientKey}/${userId}/inbox`,
       JSON.stringify({
         messages: inbox.messages,
-        config: inbox.config,
         unreadMessageCount: inbox.unreadMessageCount,
       })
     );

diff --git a/packages/react-inbox/src/components/Message/index.tsx b/packages/react-inbox/src/components/Message/index.tsx
@@ -87,14 +87,14 @@ const Message: React.FunctionComponent<MessageProps> = ({
         showMarkAsRead && {
           label: MESSAGE_LABELS.MARK_AS_READ,
           onClick: () => {
-            markMessageRead(messageId, readTrackingId);
+            markMessageRead(messageId, readTrackingId || "");
           },
         },
 
         showMarkAsUnread && {
           label: MESSAGE_LABELS.MARK_AS_UNREAD,
           onClick: () => {
-            markMessageUnread(messageId, unreadTrackingId);
+            markMessageUnread(messageId, unreadTrackingId || "");
           },
         },
       ].filter(Boolean),

diff --git a/packages/react-inbox/src/constants.ts b/packages/react-inbox/src/constants.ts
@@ -2,3 +2,18 @@ export const MESSAGE_LABELS = {
   MARK_AS_READ: "Mark as Read",
   MARK_AS_UNREAD: "Mark as Unread",
 };
+
+export const DEFAULT_TABS = [
+  {
+    id: "unread",
+    label: "Unread",
+    filter: {
+      isRead: false,
+    },
+  },
+  {
+    id: "all",
+    label: "All Messages",
+    filter: {},
+  },
+];
diff --git a/packages/react-inbox/src/hooks/use-inbox.ts b/packages/react-inbox/src/hooks/use-inbox.ts
@@ -1,54 +1,46 @@
-import { useEffect, useCallback } from "react";
+import { useEffect } from "react";
 import { useCourier, useTrackEvent } from "@trycourier/react-provider";
 import useMessages from "~/hooks/use-messages";
+import { DEFAULT_TABS } from "~/constants";
 
 export default () => {
   const { fetch: fetchMessages } = useMessages();
   const { dispatch, inbox, transport } = useCourier();
-
   const { trackEvent, batchTrackEvent } = useTrackEvent();
-
-  const newMessage = useCallback(
-    (payload) => {
-      dispatch({
-        type: "inbox/NEW_MESSAGE",
-        payload,
-      });
-    },
-    [dispatch]
-  );
+  const {
+    messages,
+    config,
+    currentTab,
+    isLoading,
+    startCursor,
+    unreadMessageCount,
+  } = inbox || {};
 
   useEffect(() => {
     transport?.listen({
       id: "inbox-listener",
       listener: (courierEvent) => {
-        newMessage(courierEvent?.data);
+        dispatch({
+          type: "inbox/NEW_MESSAGE",
+          payload: courierEvent?.data,
+        });
       },
     });
-  }, [newMessage, transport]);
+  }, [transport]);
 
   return {
-    ...inbox,
-
+    messages: messages || [],
+    config,
+    currentTab,
+    isLoading,
+    startCursor,
+    unreadMessageCount,
     init: (payload) => {
       payload = {
         ...payload,
         config: {
           ...payload.config,
-          tabs: payload.config.tabs ?? [
-            {
-              id: "unread",
-              label: "Unread",
-              filter: {
-                isRead: false,
-              },
-            },
-            {
-              id: "all",
-              label: "All Messages",
-              filter: {},
-            },
-          ],
+          tabs: payload.config.tabs ?? DEFAULT_TABS,
         },
       };
 

diff --git a/packages/react-provider/src/actions/brand.ts b/packages/react-provider/src/actions/brand.ts
@@ -0,0 +1,23 @@
+const GET_BRAND = `
+query GetBrand($brandId: String!) {
+  brand(brandId: $brandId) {
+    settings {
+        colors {
+            primary
+        }
+    }
+}
+}
+`;
+
+export const getBrand = async (client, brandId) => {
+  const results = await client
+    .query(GET_BRAND, {
+      brandId,
+    })
+    .toPromise();
+  const primaryColor = results?.data?.brand?.settings?.colors?.primary;
+  return {
+    primaryColor,
+  };
+};
diff --git a/packages/react-provider/src/hooks/use-graphql-client.ts b/packages/react-provider/src/hooks/use-graphql-client.ts
@@ -1,10 +1,7 @@
 import { useMemo } from "react";
 import { createClient } from "urql";
-import useCourier from "./use-courier";
-
-export default () => {
-  const { clientKey, userId, userSignature, apiUrl } = useCourier();
 
+export default ({ clientKey, userId, userSignature, apiUrl }) => {
   const client = useMemo(() => {
     return createClient({
       url: `${

diff --git a/packages/react-provider/src/index.tsx b/packages/react-provider/src/index.tsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useMemo } from "react";
 import createReducer from "react-use/lib/factory/createReducer";
 import { Provider } from "urql";
+import { Client } from "@urql/core";
 import * as types from "./types";
 
 import useGraphQlClient from "./hooks/use-graphql-client";
@@ -10,6 +11,7 @@ import * as TransportTypes from "./transports/types";
 import reducer, { registerReducer as _registerReducer } from "./reducer";
 
 import middleware from "./middleware";
+import { getBrand } from "./actions/brand";
 
 export * from "./transports";
 export * from "./hooks";
@@ -23,21 +25,25 @@ export const CourierContext = React.createContext<ICourierContext | undefined>(
   undefined
 );
 
-const GraphQLProvider: React.FunctionComponent = ({ children }) => {
-  const client = useGraphQlClient();
+const GraphQLProvider: React.FunctionComponent<{ client: Client }> = ({
+  children,
+  client,
+}) => {
   return <Provider value={client}>{children}</Provider>;
 };
 
 export const CourierProvider: React.FunctionComponent<ICourierContext> = ({
   apiUrl,
   brand,
+  brandId,
   children,
   clientKey,
   transport,
   userId,
   userSignature,
   wsUrl,
 }) => {
+  const client = useGraphQlClient({ clientKey, userId, userSignature, apiUrl });
   transport = useMemo(() => {
     if (transport) {
       return transport;
@@ -52,29 +58,37 @@ export const CourierProvider: React.FunctionComponent<ICourierContext> = ({
       wsUrl,
     });
   }, [transport, clientKey, wsUrl]);
-
   const [state, dispatch] = useReducer(reducer, {
     apiUrl,
     brand,
+    brandId,
     clientKey,
     transport,
     userId,
     userSignature,
   });
 
   useEffect(() => {
-    dispatch({
-      type: "root/INIT",
-      payload: {
-        apiUrl,
-        brand,
-        clientKey,
-        transport,
-        userId,
-        userSignature,
-      },
-    });
-  }, [apiUrl, brand, clientKey, transport, userId, userSignature]);
+    if (clientKey && userId) {
+      dispatch({
+        type: "root/INIT",
+        payload: {
+          apiUrl,
+          brandId,
+          clientKey,
+          transport,
+          userId,
+          userSignature,
+        },
+      });
+      if (brandId) {
+        dispatch({
+          type: "root/GET_BRAND",
+          payload: () => getBrand(client, brandId),
+        });
+      }
+    }
+  }, [apiUrl, clientKey, transport, userId, userSignature, brandId]);
 
   useEffect(() => {
     if (!transport || !userId) {
@@ -88,15 +102,14 @@ export const CourierProvider: React.FunctionComponent<ICourierContext> = ({
       courierTransport.unsubscribe(userId);
     };
   }, [transport, userId]);
-
   return (
     <CourierContext.Provider
       value={{
         ...(state as any),
         dispatch,
       }}
     >
-      <GraphQLProvider>{children}</GraphQLProvider>
+      <GraphQLProvider client={client}>{children}</GraphQLProvider>
     </CourierContext.Provider>
   );
 };
diff --git a/packages/react-provider/src/reducer.ts b/packages/react-provider/src/reducer.ts
@@ -33,6 +33,13 @@ const rootReducer = (state, action) => {
         transport: action.payload.transport,
         userId: action.payload.userId,
         userSignature: action.payload.userSignature,
+        brandId: action.payload.brandId,
+      };
+    }
+    case "root/GET_BRAND/DONE": {
+      return {
+        ...state,
+        brand: action.payload,
       };
     }
 

diff --git a/packages/react-provider/src/types.ts b/packages/react-provider/src/types.ts
@@ -1,4 +1,12 @@
 import { Transport } from "./transports";
+
+interface Brand {
+  primaryColor?: string;
+  icons?: {
+    message?: string;
+    bell?: string;
+  };
+}
 export interface ICourierContext {
   apiUrl?: string;
   clientKey?: string;
@@ -7,11 +15,6 @@ export interface ICourierContext {
   userId?: string;
   userSignature?: string;
   wsUrl?: string;
-  brand?: {
-    primaryColor?: string;
-    icons?: {
-      message?: string;
-      bell?: string;
-    };
-  };
+  brandId?: string;
+  brand?: Brand;
 }
diff --git a/packages/react-provider/src/ws.ts b/packages/react-provider/src/ws.ts
@@ -66,7 +66,9 @@ export class WS {
   }
 
   send(message: { [key: string]: any }): void {
-    this.connection?.send(JSON.stringify(message));
+    if (this.connected) {
+      this.connection?.send(JSON.stringify(message));
+    }
   }
 
   unsubscribe(channel: string, event: string, clientKey: string): void {
@@ -89,7 +91,6 @@ export class WS {
       return;
     }
 
-    this.connection.onopen = this.onConnectionOpen.bind(this);
     this.connection.onmessage = this.onMessage.bind(this);
   }
 }
diff --git a/packages/storybook/stories/react-inbox/with-toast.stories.tsx b/packages/storybook/stories/react-inbox/with-toast.stories.tsx
@@ -52,6 +52,7 @@ export function Default() {
         clientKey={clientKey}
         userId={userId}
         transport={courierTransport}
+        brandId={process.env.BRAND_ID || ""}
       >
         <Toast />
         <Inbox title="Inbox" />