feat: dec 09

react/src/App.tsx

···
 import { posts } from "./lib/post";
 import { BlogPostList } from "./components/BlogPostList";
 import { Link } from "react-router";
+import { useState } from "react";
 
 export function App() {
+  const [searchBarDisplay, displaySearchBar] = useState(false);
   return (
     <>
       <title>Posts</title>
       <div className="w-screen p-5 flex flex-col items-center gap-10">
+        <nav className="flex justify-between items-center w-full sticky top-0">
+          <h1 className="text-3xl font-bold text-left">Blog App</h1>
+          {searchBarDisplay ? (
+            <>
+              <input
+                type="text"
+                placeholder="Search..."
+                className="border border-gray-300 rounded px-2 py-1"
+                onChange={(e) => {
+                  // Implement search functionality here
+                }}
+              />
+              <button
+                className="bg-blue-500 hover:bg-blue-700 text-white w-full font-bold py-2 px-4 rounded cursor-pointer text-center"
+                onClick={() => displaySearchBar(false)}
+              >
+                Close
+              </button>
+            </>
+          ) : (
+            <button
+              className="bg-blue-500 hover:bg-blue-700 text-white w-full font-bold py-2 px-4 rounded cursor-pointer text-center"
+              onClick={() => displaySearchBar(true)}
+            >
+              Search
+            </button>
+          )}
+          <div className="flex w-full justify-end items-center">
+            <Link to="/post" className="w-1/3">
+              <div className="bg-blue-500 hover:bg-blue-700 text-white w-full font-bold py-2 px-4 rounded cursor-pointer text-center">
+                New Post
+              </div>
+            </Link>
+          </div>
+        </nav>
         <div className="flex flex-col gap-4 md:grid md:grid-cols-3 items-center justify-between w-full">
-          <h1 className="text-5xl font-bold md:col-start-2 text-center w-full">
-            Posts
-          </h1>
           <div className="flex w-full justify-end items-center">
+            <h1 className="text-5xl font-bold text-center">Posts</h1>
             <Link to="/post" className="w-1/3">
               <div className="bg-blue-500 hover:bg-blue-700 text-white w-full font-bold py-2 px-4 rounded cursor-pointer text-center">
                 New Post

server/index.ts

···
 import express from "express";
+import { readFile, writeFile, exists } from "fs/promises";
 
 const app = express();
 const port = process.env["NODE_PORT"] ?? 5173;
 
-app.get("/fast", (req, res) => {
-  res.send("Fast response!");
+interface Task {
+  id: string;
+  title: string;
+  completed: boolean;
+}
+
+const getTasks: () => Promise<Task[]> = async () => {
+  if (!(await exists("tasks.json"))) {
+    await writeFile("tasks.json", JSON.stringify([]));
+  }
+  const file = await readFile("tasks.json", "utf-8");
+  if (file.length === 0) {
+    return [];
+  }
+  return JSON.parse(file);
+};
+
+const updateTask = async (task: Task): Promise<void> => {
+  const tasks = await getTasks();
+  const index = tasks.findIndex((t) => t.id === task.id);
+  if (index !== -1) {
+    tasks[index] = task;
+  } else {
+    tasks.push(task);
+  }
+  await writeFile("tasks.json", JSON.stringify(tasks));
+};
+
+const removeTask = async (id: string): Promise<void> => {
+  const tasks = await getTasks();
+  const index = tasks.findIndex((t) => t.id === id);
+  if (index !== -1) {
+    tasks.splice(index, 1);
+    await writeFile("tasks.json", JSON.stringify(tasks));
+  }
+};
+
+app.use(express.json());
+
+app.get("/tasks", async (_req, res) => {
+  res.json(await getTasks());
+});
+
+app.post("/tasks", async (req, res) => {
+  if (!(typeof req.body.title === "string")) {
+    res.status(400).send("Invalid title");
+    return;
+  }
+  const newTask = {
+    id: Math.random().toString(16).substring(2, 8),
+    title: req.body.title,
+    completed: false,
+  };
+  await updateTask(newTask);
+  res.json(newTask).status(201);
+});
+
+app.get("/tasks/:id", async (req, res) => {
+  const task = (await getTasks()).find((t) => t.id === req.params.id);
+  if (!task) {
+    res.status(404).send("Task not found");
+  } else {
+    res.json(task);
+  }
+});
+
+app.put("/tasks/:id", async (req, res) => {
+  const task = (await getTasks()).find((t) => t.id === req.params.id);
+  if (!task) {
+    res.status(404).send("Task not found");
+  } else {
+    const missing = [];
+    if (req.body.title === undefined) missing.push("title");
+    if (req.body.completed === undefined) missing.push("completed");
+    if (missing.length > 0) {
+      res
+        .status(400)
+        .send(
+          `Missing field${missing.length > 1 ? "s" : ""}: ${missing.join(", ")}`,
+        );
+    }
+    const badTypes = [];
+    if (!(typeof req.body.title === "string")) badTypes.push("title");
+    if (!(typeof req.body.completed === "boolean")) badTypes.push("completed");
+    if (badTypes.length > 0) {
+      res
+        .status(400)
+        .send(
+          `Invalid type${badTypes.length > 1 ? "s" : ""}: ${badTypes.join(", ")}`,
+        );
+      return;
+    }
+    task.title = req.body.title ?? task.title;
+    task.completed = req.body.completed ?? task.completed;
+    await updateTask(task);
+    res.json(task);
+  }
+});
+
+app.patch("/tasks/:id", async (req, res) => {
+  const task = (await getTasks()).find((t) => t.id === req.params.id);
+  if (!task) {
+    res.status(404).send("Task not found");
+  } else {
+    const badTypes = [];
+    if (
+      Object.keys(req.body).includes("title") &&
+      !(typeof req.body.title === "string")
+    )
+      badTypes.push("title");
+    if (
+      Object.keys(req.body).includes("completed") &&
+      !(typeof req.body.completed === "boolean")
+    )
+      badTypes.push("completed");
+    if (badTypes.length > 0) {
+      res
+        .status(400)
+        .send(
+          `Invalid type${badTypes.length > 1 ? "s" : ""}: ${badTypes.join(", ")}`,
+        );
+      return;
+    }
+    task.title = req.body.title ?? task.title;
+    task.completed = req.body.completed ?? task.completed;
+    await updateTask(task);
+    res.json(task);
+  }
 });
 
-app.get("/slow", (req, res) => {
-  console.log("Slow task start");
-  const t = Date.now();
-  setTimeout(() => {
-    let f = Date.now();
-    console.log(`Slow task finished in ${f - t}`);
-    res.send(`Slow response after ${f - t} ms`);
-  }, 5000);
+app.delete("/tasks/:id", async (req, res) => {
+  const task = (await getTasks()).find((t) => t.id === req.params.id);
+  if (!task) {
+    res.status(404).send("Task not found");
+  } else {
+    await removeTask(task.id);
+    res.status(204).send();
+  }
 });
 
 app.listen(port, () => {

server/tasks.json

···
+[{"id":"2d516f","title":"","completed":4},{"id":"a4ec84","title":"","completed":4},{"id":"a667ea","title":"","completed":4},{"id":"b4d420","title":"4e4tta475aj","completed":false}]