feat(better middleware): better way to control where your middleware will fire

Author: rileylnapier

packages/components/src/index.tsx

@@ -48,7 +48,7 @@ declare global {
         setConfig?: (config: InboxProps) => void;
         config?: any;
       };
-      preferences?: UsePreferences | {};
+      preferences?: UsePreferences;
       transport?: any;
       brand?: Brand;
       renewSession?: (token: string) => void;
@@ -127,7 +127,10 @@ const initCourier = (courierConfig?: ICourierConfig) => {
       brandId={brandId}
       clientKey={clientKey}
       inboxApiUrl={inboxApiUrl}
-      middleware={[middleware]}
+      applyMiddleware={(defaultMiddleware) => [
+        ...defaultMiddleware,
+        middleware,
+      ]}
       onMessage={onMessage}
       onRouteChange={onRouteChange}
       tenantId={tenantId}

packages/react-provider/src/index.tsx

@@ -34,8 +34,8 @@ import {
 } from "./transports/types";
 import reducer, { registerReducer as _registerReducer } from "./reducer";
 import defaultMiddleware, {
-  registerMiddleware as _registerMiddleware,
   Middleware,
+  registerMiddleware as _registerMiddleware,
 } from "./middleware";
 import useCourierActions from "./hooks/use-courier-actions";
 import { usePageVisible } from "./hooks/use-page-visible";
@@ -103,7 +103,7 @@ export const CourierProvider: React.FunctionComponent<
   localStorage = typeof window !== "undefined"
     ? window?.localStorage
     : undefined,
-  middleware: _middleware = [],
+  applyMiddleware,
   onMessage,
   onRouteChange,
   transport: _transport,
@@ -130,10 +130,17 @@ export const CourierProvider: React.FunctionComponent<
     userId,
   });
 
-  const middleware = [...defaultMiddleware, ..._middleware];
+  const middleware = useMemo(() => {
+    if (!applyMiddleware) {
+      return defaultMiddleware;
+    }
+
+    return applyMiddleware(defaultMiddleware);
+  }, [applyMiddleware]);
+
   const useReducer = useCallback(
     createReducer<any, Partial<ICourierContext>>(...middleware),
-    [_middleware]
+    [middleware]
   );
 
   const transport =
@@ -170,7 +177,6 @@ export const CourierProvider: React.FunctionComponent<
     clientSourceId,
     inboxApiUrl,
     localStorage,
-    middleware,
     onRouteChange,
     tenantId,
     transport,

packages/react-provider/src/types.ts

@@ -86,19 +86,19 @@ export interface ProviderTheme {
   variables?: ThemeVariables;
 }
 export interface ICourierProviderProps {
-  tenantId?: string;
   apiUrl?: string;
+  applyMiddleware?: (defaultMiddleware: any) => any[];
   authorization?: string;
   brand?: Brand;
-  theme?: ProviderTheme;
   brandId?: string;
   clientKey?: string;
   id?: string;
   inboxApiUrl?: string;
   localStorage?: Storage;
-  middleware?: any;
   onMessage?: Interceptor;
   onRouteChange?: (route: string) => void;
+  tenantId?: string;
+  theme?: ProviderTheme;
   transport?: CourierTransport | Transport;
   userId?: string;
   userSignature?: string;

packages/storybook/stories/inbox/2.0.stories.tsx

@@ -5,8 +5,6 @@ import { CourierProvider } from "@trycourier/react-provider";
 import { Inbox } from "@trycourier/react-inbox";
 
 import mockMiddleware from "./mock-middleware";
-import { Authentication } from "../getting-started/index.stories";
-
 const API_URL = process.env.API_URL || "";
 const INBOX_API_URL = process.env.INBOX_API_URL || "";
 const CLIENT_KEY = process.env.CLIENT_KEY || "";
@@ -142,7 +140,9 @@ export const Version2 = () => {
 }} />\n\`\`\``}</ReactMarkdown>
         </div>
         <CourierProvider
-          middleware={[mockMiddleware]}
+          applyMiddleware={(defaultMiddleware) => {
+            return [mockMiddleware, ...defaultMiddleware];
+          }}
           wsOptions={{
             url: process.env.WS_URL,
           }}
@@ -175,7 +175,8 @@ export const Loading = () => {
 }} />\n\`\`\``}</ReactMarkdown>
         </div>
         <CourierProvider
-          middleware={[
+          applyMiddleware={(defaultMiddleware) => [
+            ...defaultMiddleware,
             () => (next) => (action) => {
               if (action.type === "inbox/INIT") {
                 next({
@@ -228,7 +229,8 @@ export const LoadingMore = () => {
 }} />\n\`\`\``}</ReactMarkdown>
         </div>
         <CourierProvider
-          middleware={[
+          applyMiddleware={(defaultMiddleware) => [
+            ...defaultMiddleware,
             () => (next) => (action) => {
               if (action.type === "inbox/INIT") {
                 next({
@@ -282,7 +284,8 @@ export const PaginationEnd = () => {
 }} />\n\`\`\``}</ReactMarkdown>
         </div>
         <CourierProvider
-          middleware={[
+          applyMiddleware={(defaultMiddleware) => [
+            ...defaultMiddleware,
             () => (next) => (action) => {
               if (action.type === "inbox/INIT") {
                 next({
@@ -336,7 +339,8 @@ export const NoCourierFooter = () => {
 }} />\n\`\`\``}</ReactMarkdown>
         </div>
         <CourierProvider
-          middleware={[
+          applyMiddleware={(defaultMiddleware) => [
+            ...defaultMiddleware,
             () => (next) => (action) => {
               if (action.type === "inbox/INIT") {
                 next({
@@ -393,7 +397,8 @@ export const NoMessages = () => {
 }} />\n\`\`\``}</ReactMarkdown>
         </div>
         <CourierProvider
-          middleware={[
+          applyMiddleware={(defaultMiddleware) => [
+            ...defaultMiddleware,
             () => (next) => (action) => {
               if (action.type === "inbox/INIT") {
                 next({
@@ -447,7 +452,8 @@ export const WithPreferences = () => {
 }} />\n\`\`\``}</ReactMarkdown>
         </div>
         <CourierProvider
-          middleware={[
+          applyMiddleware={(defaultMiddleware) => [
+            ...defaultMiddleware,
             () => (next) => (action) => {
               if (action.type === "inbox/FETCH_UNREAD_MESSAGE_COUNT/DONE") {
                 next({

packages/storybook/stories/inbox/hooks.tsx

@@ -22,8 +22,6 @@ import {
 import customHeaderProps from "./custom-header";
 
 // @ts-ignore
-import myCustomInboxString from "!raw-loader!./hooks.tsx";
-import { MyCustomInbox } from "./hooks";
 import mockMiddleware from "./mock-middleware";
 
 const API_URL = process.env.API_URL || "";
@@ -95,7 +93,10 @@ export const ThemeExample = () => {
         )}\n\`\`\``}</ReactMarkdown>
       </div>
       <CourierProvider
-        middleware={[mockMiddleware]}
+        applyMiddleware={(defaultMiddleware) => [
+          mockMiddleware,
+          ...defaultMiddleware,
+        ]}
         clientKey="Y2U3OWI3NGEtY2FhZC00NTFjLTliZDMtMGZkOTVhMmQ0ZWE4"
         userId="Google_108669107033656954156"
       >
@@ -178,36 +179,6 @@ export const RenderPropsExample2 = () => {
   );
 };
 
-export const Hooks = () => {
-  return (
-    <>
-      <div
-        style={{
-          display: "flex",
-          alignItems: "top",
-          justifyContent: "space-between",
-        }}
-      >
-        <div>
-          <ReactMarkdown>{`## Example`}</ReactMarkdown>
-          <ReactMarkdown>{`\`\`\`javascript\n${myCustomInboxString}\n\`\`\``}</ReactMarkdown>
-        </div>
-        <CourierProvider
-          middleware={[mockMiddleware]}
-          wsOptions={{
-            url: process.env.WS_URL,
-          }}
-          apiUrl={API_URL}
-          clientKey={CLIENT_KEY}
-          userId={USER_ID}
-        >
-          <MyCustomInbox />
-        </CourierProvider>
-      </div>
-    </>
-  );
-};
-
 export const CustomLabels = () => {
   return (
     <>
@@ -228,7 +199,10 @@ export const CustomLabels = () => {
 }} />\n\`\`\``}</ReactMarkdown>
         </div>
         <CourierProvider
-          middleware={[mockMiddleware]}
+          applyMiddleware={(defaultMiddleware) => [
+            mockMiddleware,
+            ...defaultMiddleware,
+          ]}
           wsOptions={{
             url: process.env.WS_URL,
           }}

packages/storybook/stories/inbox/index.stories.tsx

@@ -7,7 +7,6 @@ import mockMiddleware from "./mock-middleware";
 const API_URL = process.env.API_URL || "";
 const CLIENT_KEY = process.env.CLIENT_KEY || "";
 const USER_ID = process.env.USER_ID || "";
-const WS_URL = process.env.WS_URL || "";
 
 export default {
   title: "Inbox/Mobile",
@@ -25,7 +24,10 @@ export default {
 export const Mobile = () => {
   return (
     <CourierProvider
-      middleware={[mockMiddleware]}
+      applyMiddleware={(defaultMiddleware) => [
+        mockMiddleware,
+        ...defaultMiddleware,
+      ]}
       wsOptions={{
         url: process.env.WS_URL,
       }}

packages/storybook/stories/inbox/mobile.stories.tsx

@@ -23,6 +23,7 @@ if (typeof window !== "undefined") {
       url: process.env.WS_URL,
     },
     clientKey,
+    clientSourceId: "abc123",
   });
 }