@knocklabs/react-core 0.4.0 → 0.5.0-rc.1.0

package/src/modules/feed/hooks/useNotificationStore.ts

@@ -1,44 +1,58 @@
-import { Feed, FeedStoreState } from "@knocklabs/client";
-import * as React from "react";
-import type { DispatchWithoutAction } from "react";
-import create, { StateSelector } from "zustand";
+import { Feed, type FeedStoreState } from "@knocklabs/client";
+import { type StoreApi, type UseBoundStore, useStore } from "zustand";
 
-const useIsomorphicLayoutEffect =
-  typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
-
-// A hook designed to create a `UseBoundStore` instance
-function useCreateNotificationStore(feedClient: Feed) {
-  const useStore = React.useMemo(
-    () => create<FeedStoreState>(feedClient.store),
-    [feedClient],
-  );
-
-  // Warning: this is a hack that will cause any components downstream to re-render
-  // as a result of the store updating.
-  const [, forceUpdate] = React.useReducer((c) => c + 1, 0) as [
-    never,
-    () => void,
-  ];
-
-  useIsomorphicLayoutEffect(() => {
-    const rerender = forceUpdate as DispatchWithoutAction;
-    const unsubscribe = feedClient.store.subscribe(rerender);
-
-    rerender();
-
-    return unsubscribe;
-  }, [feedClient]);
+// A hook designed to create a `UseBoundStore` instance.
+// https://zustand.docs.pmnd.rs/guides/typescript#bounded-usestore-hook-for-vanilla-stores
+function useCreateNotificationStore(
+  feedClient: Feed,
+): UseBoundStore<StoreApi<FeedStoreState>>;
+function useCreateNotificationStore<T, U = T>(
+  feedClient: Feed,
+  externalSelector: (state: FeedStoreState) => U,
+): U;
+/**
+ * Access a Bounded Store instance
+ * Allow passing a selector down from useCreateNotificationStore OR useNotificationStore
+ * We'll favor the the one passed later outside of useCreateNotificationStore instantiation
+ */
+function useCreateNotificationStore<T, U = T>(
+  feedClient: Feed,
+  externalSelector?: (state: FeedStoreState) => U,
+) {
+  const store = useStore(feedClient.store);
 
-  return useStore;
+  return (selector?: (state: FeedStoreState) => U) => {
+    const innerSelector = selector ?? externalSelector;
+    return innerSelector ? innerSelector(store) : store;
+  };
 }
 
-// A hook used to access content *within* the notification store
+/**
+ * A hook used to access content within the notification store.
+ *
+ * A selector can be used to access a subset of the store state.
+ *
+ * @example
+ *
+ * ```ts
+ * const { items, metadata } = useNotificationStore(feedClient, (state) => ({
+ *   items: state.items,
+ *   metadata: state.metadata,
+ * }));
+ * ```
+ */
 function useNotificationStore(
   feedClient: Feed,
-  selector?: StateSelector<FeedStoreState, FeedStoreState>,
+): UseBoundStore<StoreApi<FeedStoreState>>;
+function useNotificationStore<T>(
+  feedClient: Feed,
+  selector: (state: FeedStoreState) => T,
+): T;
+function useNotificationStore<T, U = T>(
+  feedClient: Feed,
+  selector?: (state: FeedStoreState) => U,
 ) {
-  const useStore = useCreateNotificationStore(feedClient);
-  return useStore<FeedStoreState>(selector || feedClient.store.getState);
+  return useCreateNotificationStore(feedClient, selector!);
 }
 
 export { useCreateNotificationStore };