Merge pull request #87 from Nosto/hooks-folder

Move hooks to hooks folder

src/components/Nosto404.tsx

@@ -1,5 +1,4 @@
-import { useNostoContext } from "./context"
-import { useNostoApi } from "../utils/hooks"
+import { useNostoContext, useNostoApi } from "../hooks"
 
 /**
  * You can personalise your cart and checkout pages by using the `Nosto404` component.

src/components/NostoCategory.tsx

@@ -1,5 +1,4 @@
-import { useNostoContext } from "./context"
-import { useNostoApi } from "../utils/hooks"
+import { useNostoContext, useNostoApi } from "../hooks"
 
 /**
  * You can personalise your category and collection pages by using the NostoCategory component.

src/components/NostoCheckout.tsx

@@ -1,5 +1,4 @@
-import { useNostoContext } from "./context"
-import { useNostoApi } from "../utils/hooks"
+import { useNostoContext, useNostoApi } from "../hooks"
 
 /**
  * You can personalise your cart and checkout pages by using the NostoCheckout component.

src/components/NostoHome.tsx

@@ -1,5 +1,4 @@
-import { useNostoContext } from "./context"
-import { useNostoApi } from "../utils/hooks"
+import { useNostoContext, useNostoApi } from "../hooks"
 
 /**
  * The `NostoHome` component must be used to personalise the home page. The component does not require any props.

src/components/NostoOrder.tsx

@@ -1,7 +1,6 @@
 import { Order } from "../types"
-import { useNostoContext } from "./context"
+import { useNostoContext, useNostoApi } from "../hooks"
 import { snakeize } from "../utils/snakeize"
-import { useNostoApi } from "../utils/hooks"
 
 /**
  * You can personalise your order-confirmation/thank-you page by using the `NostoOrder` component.

src/components/NostoOther.tsx

@@ -1,5 +1,4 @@
-import { useNostoContext } from "./context"
-import { useNostoApi } from "../utils/hooks"
+import { useNostoContext, useNostoApi } from "../hooks"
 
 /**
  * You can personalise your miscellaneous pages by using the NostoOther component.

src/components/NostoProduct.tsx

@@ -1,5 +1,4 @@
-import { useNostoContext } from "./context"
-import { useNostoApi } from "../utils/hooks"
+import { useNostoContext, useNostoApi } from "../hooks"
 import { Product } from "../types"
 
 /**

src/components/NostoProvider.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, isValidElement, useState, useRef } from "react"
-import { NostoContext } from "./context"
+import { NostoContext } from "../context"
 import { createRoot, Root } from "react-dom/client"
 import { NostoClient, Recommendation } from "../types"
 
@@ -88,6 +88,7 @@ export default function NostoProvider(props: NostoProviderProps) {
 
   // custom hook for rendering campaigns (CSR/SSR):
   const [pageType, setPageType] = useState("")
+
   function useRenderCampaigns(type: string = "") {
     const placementRefs = useRef<Record<string, Root>>({})
     useEffect(() => {
@@ -130,6 +131,7 @@ export default function NostoProvider(props: NostoProviderProps) {
         }
       }
     }
+
     return { renderCampaigns, pageTypeUpdated }
   }
 

src/components/NostoSearch.tsx

@@ -1,5 +1,4 @@
-import { useNostoContext } from "./context"
-import { useNostoApi } from "../utils/hooks"
+import { useNostoContext, useNostoApi } from "../hooks"
 
 /**
  * You can personalise your search pages by using the NostoSearch component.

src/components/NostoSession.tsx

@@ -1,7 +1,6 @@
-import { useNostoContext } from "./context"
+import { useNostoContext, useDeepCompareEffect } from "../hooks"
 import { Cart, Customer } from "../types"
 import { snakeize } from "../utils/snakeize"
-import { useDeepCompareEffect } from "../utils/hooks"
 
 /**
  * Nosto React requires that you pass it the details of current cart contents and the details of the currently logged-in customer, if any, on every route change.

src/components/index.ts

@@ -8,7 +8,4 @@ export { default as NostoOrder } from "./NostoOrder"
 export { default as NostoHome } from "./NostoHome"
 export { default as NostoPlacement } from "./NostoPlacement"
 export { default as NostoProvider } from "./NostoProvider"
-
-export { NostoContext, useNostoContext } from "./context"
-export type { NostoContextType } from "./context"
 export { default as NostoSession } from "./NostoSession"

src/components/context.ts → src/context.ts

@@ -1,5 +1,5 @@
-import { createContext, useContext } from "react"
-import { NostoClient, Recommendation, RenderMode } from "../types"
+import { createContext } from "react"
+import { NostoClient, Recommendation, RenderMode } from "./types"
 
 type AnyFunction = (...args: unknown[]) => unknown
 
@@ -39,17 +39,3 @@ export const NostoContext = createContext<NostoContextType>({
   },
 })
 
-/**
- * A hook that allows you to access the NostoContext and retrieve Nosto-related data from it in React components.
- *
- * @group Essential Functions
- */
-export function useNostoContext(): NostoContextType {
-  const context = useContext(NostoContext)
-
-  if (!context) {
-    throw new Error("No nosto context found")
-  }
-
-  return context
-}

src/hooks/index.ts

@@ -0,0 +1,3 @@
+export { useDeepCompareEffect } from "./useDeepCompareEffect"
+export { useNostoApi } from "./useNostoApi"
+export { useNostoContext } from "./useNostoContext"

src/hooks/useDeepCompareEffect.ts

@@ -0,0 +1,21 @@
+import { useEffect, useRef, useMemo } from "react"
+import { deepCompare } from "../utils/compare"
+
+export function useDeepCompareEffect(
+  callback: Parameters<typeof useEffect>[0],
+  dependencies: Parameters<typeof useEffect>[1]
+): ReturnType<typeof useEffect> {
+  return useEffect(callback, useDeepCompareMemoize(dependencies))
+}
+
+function useDeepCompareMemoize<T>(value: T) {
+  const ref = useRef<T>(value);
+  const signalRef = useRef<number>(0)
+
+  if (!deepCompare(value, ref.current)) {
+    ref.current = value
+    signalRef.current += 1
+  }
+
+  return useMemo(() => ref.current, [signalRef.current])
+}

src/hooks/useNostoApi.ts

@@ -0,0 +1,22 @@
+import { useEffect } from "react"
+import { useNostoContext } from "./useNostoContext"
+import { NostoClient } from "../types"
+import { useDeepCompareEffect } from "./useDeepCompareEffect"
+
+export function useNostoApi(
+  cb: (api: NostoClient) => void,
+  deps?: React.DependencyList,
+  flags?: { deep?: boolean }
+): void {
+  const { clientScriptLoaded, currentVariation, responseMode } = useNostoContext()
+  const useEffectFn = flags?.deep ? useDeepCompareEffect : useEffect
+
+  useEffectFn(() => {
+    if (clientScriptLoaded) {
+      window.nostojs(api => {
+        api.defaultSession().setVariation(currentVariation!).setResponseMode(responseMode)
+        cb(api)
+      })
+    }
+  }, [clientScriptLoaded, currentVariation, responseMode, ...(deps ?? [])])
+}

src/hooks/useNostoContext.ts

@@ -0,0 +1,18 @@
+import { useContext } from "react"
+import { NostoContext, NostoContextType } from "../context"
+
+/**
+ * A hook that allows you to access the NostoContext and retrieve Nosto-related data from it in React components.
+ *
+ * @group Essential Functions
+ */
+export function useNostoContext(): NostoContextType {
+    const context = useContext(NostoContext)
+
+    if (!context) {
+      throw new Error("No nosto context found")
+    }
+
+    return context
+  }
+

src/index.ts

@@ -1,2 +1,4 @@
 export type { Cart, Customer, Product, Order, Recommendation } from "./types"
 export * from "./components"
+export { NostoContext, type NostoContextType } from "./context"
+export { useNostoContext } from "./hooks/useNostoContext"