From a32177dd0fffd005f857cff160e534b4244b0ec0 Mon Sep 17 00:00:00 2001
From: Delirium <nikita@openreplay.com>
Date: Tue, 16 Apr 2024 14:33:02 +0200
Subject: [PATCH] fix ui: update zustand doc (#2095)

---
 .../Integrations/ZustandDoc/ZustandDoc.js     | 39 ++++++++++++-------
 1 file changed, 24 insertions(+), 15 deletions(-)

diff --git a/frontend/app/components/Client/Integrations/ZustandDoc/ZustandDoc.js b/frontend/app/components/Client/Integrations/ZustandDoc/ZustandDoc.js
index 37aa1f879..c77f68780 100644
--- a/frontend/app/components/Client/Integrations/ZustandDoc/ZustandDoc.js
+++ b/frontend/app/components/Client/Integrations/ZustandDoc/ZustandDoc.js
@@ -31,51 +31,60 @@ const ZustandDoc = (props) => {
                         <Highlight className="js">
                             {`import create from "zustand";
 import Tracker from '@openreplay/tracker';
-import trackerZustand from '@openreplay/tracker-zustand';
+import trackerZustand, { StateLogger } from '@openreplay/tracker-zustand';
 
 
 const tracker = new Tracker({
   projectKey: ${projectKey},
 });
 
-const zustandPlugin = tracker.use(trackerZustand())
-// store name, optional
-// randomly generated if undefined
-const bearStoreLogger = zustandPlugin('bear_store')
+// as per https://docs.pmnd.rs/zustand/guides/typescript#middleware-that-doesn't-change-the-store-type
+// cast type to new one
+// but this seems to not be required and everything is working as is
+const zustandPlugin = tracker.use(trackerZustand()) as unknown as StateLogger
 
 
 const useBearStore = create(
-  bearStoreLogger((set: any) => ({
+  zustandPlugin((set: any) => ({
     bears: 0,
     increasePopulation: () => set((state: any) => ({ bears: state.bears + 1 })),
     removeAllBears: () => set({ bears: 0 }),
-  }))
-)`}
+  }),
+    // store name is optional
+    // and is randomly generated if undefined
+  'bear_store'
+  )
+)
+`}
                         </Highlight>
                     }
                     second={
                         <Highlight className="js">
                             {`import create from "zustand";
 import Tracker from '@openreplay/tracker/cjs';
-import trackerZustand from '@openreplay/tracker-zustand/cjs';
+import trackerZustand, { StateLogger } from '@openreplay/tracker-zustand/cjs';
 
 
 const tracker = new Tracker({
   projectKey: ${projectKey},
 });
 
-const zustandPlugin = tracker.use(trackerZustand())
-// store name, optional
-// randomly generated if undefined
-const bearStoreLogger = zustandPlugin('bear_store')
+// as per https://docs.pmnd.rs/zustand/guides/typescript#middleware-that-doesn't-change-the-store-type
+// cast type to new one
+// but this seems to not be required and everything is working as is
+const zustandPlugin = tracker.use(trackerZustand()) as unknown as StateLogger
 
 
 const useBearStore = create(
-  bearStoreLogger((set: any) => ({
+  zustandPlugin((set: any) => ({
     bears: 0,
     increasePopulation: () => set((state: any) => ({ bears: state.bears + 1 })),
     removeAllBears: () => set({ bears: 0 }),
-  }))
+  }),
+    // store name is optional
+    // and is randomly generated if undefined
+  'bear_store'
+  )
 )`}
                         </Highlight>
                     }