Fix broken Fetch Data Svelte 5 component (#204)

* Fix broken Fetch Data Svelte 5 component

Also simplify the code by using state fields.

* Fix misspelling of "occurred" in several components

content/7-webapp-features/2-fetch-data/angular/users.component.ts

@@ -10,7 +10,7 @@ import { UserService } from "./user.service";
 
       <ng-template #errorTpl>
         <p *ngIf="vm.error; else usersListTpl">
-          An error occured while fetching users
+          An error occurred while fetching users
         </p>
       </ng-template>
 

content/7-webapp-features/2-fetch-data/marko/App.marko

@@ -3,7 +3,7 @@
     <p>Fetching users...</p>
   </@placeholder>
   <@catch|error|>
-    <p>An error occured while fetching users</p>
+    <p>An error occurred while fetching users</p>
   </@catch>
   <@then|{ results: users }|>
     <ul>

content/7-webapp-features/2-fetch-data/mithril/App.js

@@ -16,7 +16,7 @@ export default function App() {
         "",
         isLoading && m("p", "Fetching users..."),
         error
-          ? m("p", "An error occured while fetching users")
+          ? m("p", "An error occurred while fetching users")
           : users.map((user) =>
               m(
                 "li",

content/7-webapp-features/2-fetch-data/react/App.jsx

@@ -8,7 +8,7 @@ export default function App() {
       {isLoading ? (
         <p>Fetching users...</p>
       ) : error ? (
-        <p>An error occured while fetching users</p>
+        <p>An error occurred while fetching users</p>
       ) : (
         users && (
           <ul>

content/7-webapp-features/2-fetch-data/svelte4/App.svelte

@@ -7,7 +7,7 @@
 {#if $isLoading}
   <p>Fetching users...</p>
 {:else if $error}
-  <p>An error occured while fetching users</p>
+  <p>An error occurred while fetching users</p>
 {:else if $users}
   <ul>
     {#each $users as user}

content/7-webapp-features/2-fetch-data/svelte5/App.svelte

@@ -1,13 +1,13 @@
 <script>
-  import useFetchUsers from "./useFetchUsers";
+  import useFetchUsers from "./useFetchUsers.svelte.js";
 
   const response = useFetchUsers();
 </script>
 
 {#if response.isLoading}
   <p>Fetching users...</p>
 {:else if response.error}
-  <p>An error occured while fetching users</p>
+  <p>An error occurred while fetching users</p>
 {:else if response.users}
   <ul>
     {#each response.users as user}

content/7-webapp-features/2-fetch-data/svelte5/useFetchUsers.svelte.js

@@ -0,0 +1,25 @@
+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;
+}