Squashed commit of the following:

commit bfeb85e018267cd709cb8a3f4a072ed1c1e8a0e7
Author: Steve Kinney <hello@stevekinney.net>
Date:   Wed Oct 2 04:34:37 2024 -0500

    Remove solution

commit 8c740cf91bf10043f5740716dffdf80f142f16d5
Author: Steve Kinney <hello@stevekinney.net>
Date:   Wed Oct 2 04:32:42 2024 -0500

    Complete MSW example

commit 0a646ca6e16460b94174dadf629cdd9866c9f33b
Author: Steve Kinney <hello@stevekinney.net>
Date:   Wed Oct 2 04:25:06 2024 -0500

    Minor tweaks to Task List

examples/task-list/package.json

@@ -24,11 +24,11 @@
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
+    "@types/body-parser": "^1.19.5",
+    "@types/express": "^4.17.21",
     "@types/react": "^18.3.6",
     "@types/react-dom": "^18.3.0",
     "@types/testing-library__jest-dom": "^5.14.9",
-    "@types/body-parser": "^1.19.5",
-    "@types/express": "^4.17.21",
     "@types/uuid": "^10.0.0",
     "@vitejs/plugin-react": "^4.3.1",
     "@vitest/ui": "^2.1.1",

examples/task-list/server/index.js

@@ -56,7 +56,7 @@ app.delete('/api/tasks/:id', (req, res) => {
     return res.status(404).json({ message: 'Task not found' });
   }
 
-  res.status(204).send(); // No content to send back
+  res.sendStatus(204); // No content to send back
 });
 
 const PORT = process.env.PORT || 3000;

examples/task-list/src/components/task.jsx

@@ -3,7 +3,10 @@ import { DateTime } from './date-time';
 
 export const Task = memo(({ task, updateTask, removeTask }) => {
   return (
-    <li className="block space-y-2 border-x border-t border-slate-300 bg-white p-4 first:rounded-t-md last:rounded-b-md last:border-b dark:border-slate-700">
+    <li
+      className="block space-y-2 border-x border-t border-slate-300 bg-white p-4 first:rounded-t-md last:rounded-b-md last:border-b dark:border-slate-700 dark:bg-slate-950"
+      data-testid={`task-${task.id}`}
+    >
       <header className="flex flex-row items-center gap-4">
         <label htmlFor={`toggle-${task.id}`} className="sr-only">
           Completed?
@@ -19,12 +22,12 @@ export const Task = memo(({ task, updateTask, removeTask }) => {
         <button
           className="button-small button-destructive button-ghost"
           onClick={() => removeTask(task.id)}
-          aria-label='Remove Task'
+          aria-label="Remove Task"
         >
           ❌
         </button>
       </header>
-      <div className="flex flex-col sm:flex-row gap-1 sm:gap-4">
+      <div className="flex flex-col gap-1 sm:flex-row sm:gap-4">
         <DateTime date={task.createdAt} title="Created" />
         <DateTime date={task.lastModified} title="Modified" />
       </div>

examples/task-list/src/mocks/handlers.js

@@ -0,0 +1,14 @@
+import { http, HttpResponse } from 'msw';
+import tasks from './tasks.json';
+
+let id = 3;
+
+const createTask = (title) => ({
+  id: `${id++}`,
+  title,
+  completed: false,
+  createdAt: new Date('02-29-2024').toISOString(),
+  lastModified: new Date('02-29-2024').toISOString(),
+});
+
+export const handlers = [];

examples/task-list/src/mocks/server.js

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

examples/task-list/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"
+  }
+]