From e1d098a0bab7999115d38fc78c675da2057067dc Mon Sep 17 00:00:00 2001
From: Victor Bruce <victorbruce82@gmail.com>
Date: Tue, 4 Mar 2025 21:43:11 +0000
Subject: [PATCH 1/2] test: use msw to mock fetching of users

---
 src/App.tsx              |  4 +++-
 src/mocks/handlers.ts    |  2 +-
 src/pages/Home/index.tsx | 25 +++++++++++++++++++++++++
 3 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 7945b6d..87db0d8 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -3,7 +3,9 @@ import HomePage from "./pages/Home";
 
 function App() {
   return (
-    <HomePage />
+    <div>
+      <HomePage />
+    </div>
   );
 }
 
diff --git a/src/mocks/handlers.ts b/src/mocks/handlers.ts
index 84a44a0..fac034f 100644
--- a/src/mocks/handlers.ts
+++ b/src/mocks/handlers.ts
@@ -2,7 +2,7 @@ import { http, HttpResponse } from "msw";
 
 /* handlers: what ever request you want to mock you need an handler. interception  */
 export const handlers = [
-  http.get("/resource", ({ request }) => {
+  http.get("/api/users", ({ request }) => {
     return HttpResponse.json([
       { id: 1, name: "John Doe", email: "johndoe@gmail.com" },
       { id: 2, name: "Smith Williams", email: "smithwilliams@gmail.com" },
diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
index a5f0ef1..d00baba 100644
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -1,7 +1,22 @@
 import { motion } from "framer-motion";
+import { useEffect, useState } from "react";
 import { Link } from "react-router";
 
+interface User {
+  id: number;
+  name: string;
+  email: string;
+}
+
 const HomePage = () => {
+  const [users, setUsers] = useState<User[]>([]);
+
+  useEffect(() => {
+    fetch("/api/users")
+      .then((response) => response.json())
+      .then((data) => setUsers(data));
+  }, []);
+
   return (
     <div className="h-screen w-full flex flex-col justify-center items-center">
       <motion.h1
@@ -25,6 +40,16 @@ const HomePage = () => {
       >
         Learn more
       </Link>
+      <div className="mt-8">
+        <h3 className="mb-4">Mock Service Worker Example:</h3>
+        <ul className="flex flex-col gap-2">
+          {users.map((user) => (
+            <li key={user.id}>
+              {user.name} | {user.email}
+            </li>
+          ))}
+        </ul>
+      </div>
     </div>
   );
 };

From 2c11801572af4b8882682b7c837ad8c990f49ef9 Mon Sep 17 00:00:00 2001
From: Victor Bruce <victorbruce82@gmail.com>
Date: Tue, 4 Mar 2025 21:46:13 +0000
Subject: [PATCH 2/2] fix: handle fetch error

---
 src/pages/Home/index.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
index d00baba..0637e14 100644
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -14,7 +14,10 @@ const HomePage = () => {
   useEffect(() => {
     fetch("/api/users")
       .then((response) => response.json())
-      .then((data) => setUsers(data));
+      .then((data) => setUsers(data))
+      .catch((error) => {
+        console.error(error);
+      });
   }, []);
 
   return (