From f6bcc74531b995e676f267c655606dc5c5c37d23 Mon Sep 17 00:00:00 2001
From: Ellie Croce <ellie@infinite.red>
Date: Fri, 15 Nov 2024 08:17:41 -0800
Subject: [PATCH] fix: add missing code removal and update to latest ignite
 boilerplate code (#181)

---
 docs/recipes/Zustand.md | 36 +++++++++++++++++++++++-------------
 1 file changed, 23 insertions(+), 13 deletions(-)

diff --git a/docs/recipes/Zustand.md b/docs/recipes/Zustand.md
index fae87272..d5d6fce9 100644
--- a/docs/recipes/Zustand.md
+++ b/docs/recipes/Zustand.md
@@ -89,7 +89,7 @@ export interface AuthenticationStoreSnapshot extends SnapshotOut<typeof Authenti
 
 </details>
 
-MobX-State-Tree models declare the data type, initial values, derived values, and actions all in one.  
+MobX-State-Tree models declare the data type, initial values, derived values, and actions all in one.
 Zustand takes a "barebones" approach and defines a store as a basic state object with data and actions co-located.
 
 Create a new file `app/store/AuthenticationStore.ts` and convert the model to Zustand to look like this:
@@ -535,7 +535,19 @@ const episodeStore = useEpisodeStore();
 ```
 
 ```diff
-<Toggle
+useEffect(() => {
+      ;(async function load() {
+        setIsLoading(true)
+        await episodeStore.fetchEpisodes()
+        setIsLoading(false)
+      })()
+--    }, [episodeStore])
+++    }, [])
+
+```
+
+```diff
+<Switch
   value={episodeStore.favoritesOnly}
   onValueChange={() =>
 --  episodeStore.setProp("favoritesOnly", !episodeStore.favoritesOnly)
@@ -554,7 +566,7 @@ const parsedTitleAndSubtitle = getParsedTitleAndSubtitle(episode);
 
 ```diff
  <Text
-  style={$metadataText}
+  style={themed($metadataText)}
   size="xxs"
 --accessibilityLabel={episode.datePublished.accessibilityLabel}
 ++accessibilityLabel={datePublished.accessibilityLabel}
@@ -647,21 +659,19 @@ We added the `persist` middleware and created `_hasHydrated` property & action t
 
 ...
 
-const [areFontsLoaded] = useFonts(customFontsToLoad)
+const [areFontsLoaded, fontLoadError] = useFonts(customFontsToLoad)
+
+-const { rehydrated } = useInitialRootStore(() => {
+-   setTimeout(hideSplashScreen, 500)
+-})
 
--useEffect(() => {
--  hideSplashScreen()
--}, [])
 
-+const hasHydrated = useStore((state) => state._hasHydrated)
++const rehydrated = useStore((state) => state._hasHydrated)
 +useEffect(() => {
-+  if (hasHydrated) {
++  if (rehydrated) {
 +    setTimeout(hideSplashScreen, 500)
 +  }
-+}, [hasHydrated])
-
--if (!isNavigationStateRestored || !areFontsLoaded) return null
-+if (!hasHydrated || !isNavigationStateRestored || !areFontsLoaded) return null
++}, [rehydrated])
 
 ```