From 93d0fcb596bcba9f0e0f486233272d8596b121c2 Mon Sep 17 00:00:00 2001
From: thiago <thiagolinog8@gmail.com>
Date: Tue, 18 Jun 2024 15:24:27 -0300
Subject: [PATCH] use svelte #wait api

---
 .../2-fetch-data/svelte4/App.svelte           | 26 ++++++++++---------
 .../2-fetch-data/svelte4/useFetchUsers.js     | 24 -----------------
 .../2-fetch-data/svelte5/App.svelte           | 26 ++++++++++---------
 .../svelte5/useFetchUsers.svelte.js           | 25 ------------------
 4 files changed, 28 insertions(+), 73 deletions(-)
 delete mode 100644 content/7-webapp-features/2-fetch-data/svelte4/useFetchUsers.js
 delete mode 100644 content/7-webapp-features/2-fetch-data/svelte5/useFetchUsers.svelte.js

diff --git a/content/7-webapp-features/2-fetch-data/svelte4/App.svelte b/content/7-webapp-features/2-fetch-data/svelte4/App.svelte
index 3cf115bf..339c3eec 100644
--- a/content/7-webapp-features/2-fetch-data/svelte4/App.svelte
+++ b/content/7-webapp-features/2-fetch-data/svelte4/App.svelte
@@ -1,23 +1,25 @@
 <script>
-  import useFetchUsers from "./useFetchUsers";
-
-  const { isLoading, error, data: users } = useFetchUsers();
+  async function fetchUsers() {
+    const response = await fetch("https://randomuser.me/api/?results=3");
+    const { results: users } = await response.json();
+    return users;
+  }
 </script>
 
-{#if $isLoading}
+{#await fetchUsers()}
   <p>Fetching users...</p>
-{:else if $error}
-  <p>An error occurred while fetching users</p>
-{:else if $users}
+{:then users}
   <ul>
-    {#each $users as user}
+    {#each users as { picture, name }}
       <li>
-        <img src={user.picture.thumbnail} alt="user" />
+        <img src={picture.thumbnail} alt="user" />
         <p>
-          {user.name.first}
-          {user.name.last}
+          {name.first}
+          {name.last}
         </p>
       </li>
     {/each}
   </ul>
-{/if}
+{:catch}
+  <p>An error occurred while fetching users</p>
+{/await}
diff --git a/content/7-webapp-features/2-fetch-data/svelte4/useFetchUsers.js b/content/7-webapp-features/2-fetch-data/svelte4/useFetchUsers.js
deleted file mode 100644
index c7ae324e..00000000
--- a/content/7-webapp-features/2-fetch-data/svelte4/useFetchUsers.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import { writable } from "svelte/store";
-
-export default function useFetchUsers() {
-  const data = writable();
-  const error = writable();
-  const isLoading = writable(false);
-
-  async function fetchData() {
-    isLoading.set(true);
-    try {
-      const response = await fetch("https://randomuser.me/api/?results=3");
-      const { results: users } = await response.json();
-      data.set(users);
-      error.set();
-    } catch (err) {
-      data.set();
-      error.set(err);
-    }
-    isLoading.set(false);
-  }
-  fetchData();
-
-  return { isLoading, error, data };
-}
diff --git a/content/7-webapp-features/2-fetch-data/svelte5/App.svelte b/content/7-webapp-features/2-fetch-data/svelte5/App.svelte
index 92c0aea6..339c3eec 100644
--- a/content/7-webapp-features/2-fetch-data/svelte5/App.svelte
+++ b/content/7-webapp-features/2-fetch-data/svelte5/App.svelte
@@ -1,23 +1,25 @@
 <script>
-  import useFetchUsers from "./useFetchUsers.svelte.js";
-
-  const response = useFetchUsers();
+  async function fetchUsers() {
+    const response = await fetch("https://randomuser.me/api/?results=3");
+    const { results: users } = await response.json();
+    return users;
+  }
 </script>
 
-{#if response.isLoading}
+{#await fetchUsers()}
   <p>Fetching users...</p>
-{:else if response.error}
-  <p>An error occurred while fetching users</p>
-{:else if response.users}
+{:then users}
   <ul>
-    {#each response.users as user}
+    {#each users as { picture, name }}
       <li>
-        <img src={user.picture.thumbnail} alt="user" />
+        <img src={picture.thumbnail} alt="user" />
         <p>
-          {user.name.first}
-          {user.name.last}
+          {name.first}
+          {name.last}
         </p>
       </li>
     {/each}
   </ul>
-{/if}
+{:catch}
+  <p>An error occurred while fetching users</p>
+{/await}
diff --git a/content/7-webapp-features/2-fetch-data/svelte5/useFetchUsers.svelte.js b/content/7-webapp-features/2-fetch-data/svelte5/useFetchUsers.svelte.js
deleted file mode 100644
index 90621017..00000000
--- a/content/7-webapp-features/2-fetch-data/svelte5/useFetchUsers.svelte.js
+++ /dev/null
@@ -1,25 +0,0 @@
-class UsersResponse {
-  users = $state();
-  error = $state();
-  isLoading = $state(false);
-}
-
-export default function useFetchUsers() {
-  const resp = new UsersResponse();
-
-  async function fetchData() {
-    resp.isLoading = true;
-    try {
-      const response = await fetch("https://randomuser.me/api/?results=3");
-      resp.users = (await response.json()).results;
-      resp.error = undefined;
-    } catch (err) {
-      resp.error = err;
-      resp.users = undefined;
-    }
-    resp.isLoading = false;
-  }
-
-  fetchData();
-  return resp;
-}