From 4e4978cb8a92c6bf56570206b268e0e835a0ece8 Mon Sep 17 00:00:00 2001
From: Steve Kinney <hello@stevekinney.net>
Date: Wed, 2 Oct 2024 04:34:56 -0500
Subject: [PATCH] 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            |  4 ++--
 examples/task-list/server/index.js         |  2 +-
 examples/task-list/src/components/task.jsx |  9 ++++++---
 examples/task-list/src/mocks/handlers.js   | 14 ++++++++++++++
 examples/task-list/src/mocks/server.js     |  4 ++++
 examples/task-list/src/mocks/tasks.json    | 16 ++++++++++++++++
 6 files changed, 43 insertions(+), 6 deletions(-)
 create mode 100644 examples/task-list/src/mocks/handlers.js
 create mode 100644 examples/task-list/src/mocks/server.js
 create mode 100644 examples/task-list/src/mocks/tasks.json

diff --git a/examples/task-list/package.json b/examples/task-list/package.json
index ffbe6b5..a9dcfc2 100644
--- a/examples/task-list/package.json
+++ b/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",
diff --git a/examples/task-list/server/index.js b/examples/task-list/server/index.js
index 6132537..cb88ff3 100644
--- a/examples/task-list/server/index.js
+++ b/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;
diff --git a/examples/task-list/src/components/task.jsx b/examples/task-list/src/components/task.jsx
index bfb825f..333ba78 100644
--- a/examples/task-list/src/components/task.jsx
+++ b/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>
diff --git a/examples/task-list/src/mocks/handlers.js b/examples/task-list/src/mocks/handlers.js
new file mode 100644
index 0000000..d57e063
--- /dev/null
+++ b/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 = [];
diff --git a/examples/task-list/src/mocks/server.js b/examples/task-list/src/mocks/server.js
new file mode 100644
index 0000000..e52fee0
--- /dev/null
+++ b/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);
diff --git a/examples/task-list/src/mocks/tasks.json b/examples/task-list/src/mocks/tasks.json
new file mode 100644
index 0000000..97d4600
--- /dev/null
+++ b/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"
+  }
+]