From 4be1e9eb4a435e5821d5ee24441a529881607f79 Mon Sep 17 00:00:00 2001
From: Cody Partington <94301860+CodyCodes95@users.noreply.github.com>
Date: Mon, 1 Jan 2024 00:29:34 +1100
Subject: [PATCH] fix(docs): errors and types fix for URL state example (#2218)

* Update connect-to-state-with-url-hash.md

Resolved a few errors and type errors in the persist and create state with URL example:

1. createJsonStorage not being called in storageOptions resulting in a type error.
2. Correct hook not being exported
3. Moved the creation of initial state inline to get the correct types passed from create/persist.
4. Used state type as generic for persist.

* yarn prettier run

* Update docs/guides/connect-to-state-with-url-hash.md

Better name for state in setter

Co-authored-by: Danilo Britto <dbritto.dev@gmail.com>

* prettier run

---------

Co-authored-by: Danilo Britto <dbritto.dev@gmail.com>
Co-authored-by: Daishi Kato <dai-shi@users.noreply.github.com>
---
 docs/guides/connect-to-state-with-url-hash.md | 41 +++++++++++--------
 1 file changed, 25 insertions(+), 16 deletions(-)

diff --git a/docs/guides/connect-to-state-with-url-hash.md b/docs/guides/connect-to-state-with-url-hash.md
index 56de432e6d..d006e6ec18 100644
--- a/docs/guides/connect-to-state-with-url-hash.md
+++ b/docs/guides/connect-to-state-with-url-hash.md
@@ -71,10 +71,10 @@ const persistentStorage: StateStorage = {
     if (getUrlSearch()) {
       const searchParams = new URLSearchParams(getUrlSearch())
       const storedValue = searchParams.get(key)
-      return JSON.parse(storedValue)
+      return JSON.parse(storedValue as string)
     } else {
       // Otherwise, we should load from localstorage or alternative storage
-      return JSON.parse(localStorage.getItem(key))
+      return JSON.parse(localStorage.getItem(key) as string)
     }
   },
   setItem: (key, newValue): void => {
@@ -82,7 +82,7 @@ const persistentStorage: StateStorage = {
     if (getUrlSearch()) {
       const searchParams = new URLSearchParams(getUrlSearch())
       searchParams.set(key, JSON.stringify(newValue))
-      window.history.replaceState(null, null, `?${searchParams.toString()}`)
+      window.history.replaceState(null, '', `?${searchParams.toString()}`)
     }
 
     localStorage.setItem(key, JSON.stringify(newValue))
@@ -94,24 +94,33 @@ const persistentStorage: StateStorage = {
   },
 }
 
-let localAndUrlStore = (set) => ({
-  typesOfFish: [],
-  addTypeOfFish: (fishType) =>
-    set((state) => ({ typesOfFish: [...state.typesOfFish, fishType] })),
-
-  numberOfBears: 0,
-  setNumberOfBears: (newNumber) =>
-    set((state) => ({ numberOfBears: newNumber })),
-})
+type LocalAndUrlStore = {
+  typesOfFish: string[]
+  addTypeOfFish: (fishType: string) => void
+  numberOfBears: number
+  setNumberOfBears: (newNumber: number) => void
+}
 
-let storageOptions = {
+const storageOptions = {
   name: 'fishAndBearsStore',
-  storage: persistentStorage,
+  storage: createJSONStorage<LocalAndUrlStore>(() => persistentStorage),
 }
 
-const useLocalAndUrlStore = create(persist(localAndUrlStore, storageOptions))
+const useLocalAndUrlStore = create(
+  persist<LocalAndUrlStore>(
+    (set) => ({
+      typesOfFish: [],
+      addTypeOfFish: (fishType) =>
+        set((state) => ({ typesOfFish: [...state.typesOfFish, fishType] })),
+
+      numberOfBears: 0,
+      setNumberOfBears: (numberOfBears) => set(() => ({ numberOfBears })),
+    }),
+    storageOptions,
+  ),
+)
 
-export default localAndUrlStore
+export default useLocalAndUrlStore
 ```
 
 When generating the URL from a component, you can call buildShareableUrl: