Add some additional examples

examples/directory/src/get-user.js

@@ -0,0 +1,11 @@
+export const getUser = async (id) => {
+  const response = await fetch(
+    `https://jsonplaceholder.typicode.com/users/${id}`,
+  );
+
+  if (!response.ok) {
+    throw new Error('Failed to fetch user');
+  }
+
+  return response.json();
+};

examples/directory/src/mocks/handlers.js

@@ -0,0 +1,5 @@
+import { http, HttpResponse } from 'msw';
+
+// Hint: https://jsonplaceholder.typicode.com/users/:id
+
+export const handlers = [];

examples/directory/src/mocks/server.js

@@ -0,0 +1,4 @@
+import { setupServer } from 'msw/node';
+import { handlers } from './handlers';
+
+export const server = setupServer(...handlers);

examples/directory/src/mocks/tasks.json

@@ -0,0 +1,16 @@
+[
+  {
+    "id": "test-1",
+    "title": "Get a Phone Charger",
+    "completed": true,
+    "createdAt": "2024-09-19T08:30:00.711Z",
+    "lastModified": "2024-09-19T08:30:00.711Z"
+  },
+  {
+    "id": "test-2",
+    "title": "Charge Your Phone",
+    "completed": false,
+    "createdAt": "2024-09-19T08:31:00.261Z",
+    "lastModified": "2024-09-19T08:31:00.261Z"
+  }
+]

examples/directory/src/user.jsx

@@ -0,0 +1,44 @@
+import { useEffect, useState } from 'react';
+import { getUser } from './get-user';
+
+export const User = ({ id }) => {
+  const [user, setUser] = useState(null);
+
+  useEffect(() => {
+    getUser(id).then(setUser);
+  }, [setUser]);
+
+  if (!user) {
+    return <p>Loading…</p>;
+  }
+
+  return (
+    <article data-testid={`user-${id}`}>
+      <h2>{user.name}</h2>
+      <table>
+        <tbody>
+          <tr>
+            <th>Company</th>
+            <td>{user.company.name}</td>
+          </tr>
+          <tr>
+            <th>Username</th>
+            <td>{user.username}</td>
+          </tr>
+          <tr>
+            <th>Email</th>
+            <td>{user.email}</td>
+          </tr>
+          <tr>
+            <th>Phone</th>
+            <td>{user.phone}</td>
+          </tr>
+          <tr>
+            <th>Website</th>
+            <td>{user.website}</td>
+          </tr>
+        </tbody>
+      </table>
+    </article>
+  );
+};

examples/directory/src/user.test.jsx

@@ -0,0 +1,10 @@
+import { screen, render } from '@testing-library/react';
+import { User } from './user';
+
+it.skip('should render a user', async () => {
+  // This calls an API. That's not great. We should mock it.
+  const id = 1;
+  render(<User id={id} />);
+
+  expect(user).toBeInTheDocument();
+});