refactor(make actions better): make actions work with all actions, no…

…t just init
trycourier · Nov 30, 2023 · 00eead7 · 00eead7
1 parent 99152d9
commit 00eead7
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 28 deletions.
diff --git a/packages/components/src/components/CourierSdk.tsx b/packages/components/src/components/CourierSdk.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from "react";
+import React, { useEffect } from "react";
 import { useCourier } from "@trycourier/react-provider";
 import { useInbox, usePreferences } from "@trycourier/react-hooks";
 
@@ -8,13 +8,7 @@ export const CourierSdk: React.FunctionComponent<{
     toast: boolean;
     preferences: boolean;
   };
-}> = ({ activeComponents, children }) => {
-  const ref = useRef({
-    inbox: false,
-    toast: false,
-    preferences: false,
-  });
-
+}> = ({ children }) => {
   const courier = useCourier();
   const inbox = useInbox();
   const preferences = usePreferences();
@@ -51,23 +45,5 @@ export const CourierSdk: React.FunctionComponent<{
     };
   }, [courier]);
 
-  useEffect(() => {
-    for (const component of Object.keys(activeComponents)) {
-      const typedComponent = component as "inbox" | "toast";
-
-      if (!courier[typedComponent] || ref.current[typedComponent]) {
-        continue;
-      }
-
-      const initActions =
-        window?.courier?.__actions?.[`${typedComponent}/init`] ?? [];
-      for (const initAction of initActions) {
-        initAction();
-      }
-
-      ref.current[typedComponent] = true;
-    }
-  }, [courier?.inbox, courier?.toast, activeComponents]);
-
   return <>{children}</>;
 };
diff --git a/packages/components/src/index.html b/packages/components/src/index.html
@@ -13,6 +13,15 @@
       }
     </style>
     <script type="text/javascript">
+      window.courierAsyncInit = () => {
+        window.courier.on(
+          "preferences/FETCH_PREFERENCE_PAGE/DONE",
+          (payload) => {
+            console.log("FETCH_PREFERENCE_PAGE", payload);
+          }
+        );
+      };
+
       const fontWeights = {
         thin: 200,
         normal: 400,

diff --git a/packages/components/src/index.tsx b/packages/components/src/index.tsx
@@ -12,11 +12,24 @@ import { InboxProps } from "@trycourier/react-inbox";
 import { ToastProps } from "@trycourier/react-toast";
 import { UsePreferences } from "@trycourier/react-hooks";
 
+const middleware = () => (next) => (action) => {
+  const _action =
+    window?.courier?.__actions?.[action.type.toLowerCase()] ??
+    window?.courier?.__actions?.[action.type] ??
+    [];
+
+  for (const __a of _action) {
+    __a(action.payload);
+  }
+
+  next(action);
+};
+
 declare global {
   interface Window {
     courier: {
       __actions: {
-        [action: string]: Array<() => void>;
+        [action: string]: Array<(payload: any) => void>;
       };
       toast?: {
         mergeConfig?: (config: ToastProps) => void;
@@ -111,6 +124,7 @@ const initCourier = (courierConfig?: ICourierConfig) => {
       userId={userId}
       userSignature={userSignature}
       wsOptions={wsOptions}
+      middleware={[middleware]}
     >
       <CourierComponents />
     </CourierProvider>,

diff --git a/packages/react-provider/src/index.tsx b/packages/react-provider/src/index.tsx
@@ -107,7 +107,7 @@ export const CourierProvider: React.FunctionComponent<
     userId,
   });
 
-  const middleware = [..._middleware, ...defaultMiddleware];
+  const middleware = [...defaultMiddleware, ..._middleware];
   const useReducer = useCallback(
     createReducer<any, Partial<ICourierContext>>(...middleware),
     [_middleware]