feat: add frontend/nextjs

Author: tianheg

frontend/nextjs/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

frontend/nextjs/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

frontend/nextjs/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

frontend/nextjs/app/books/bookform.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import type React from "react";
+import { useState } from "react";
+import { Button, Form, Input, Space } from "antd";
+
+interface BookFormProps {
+  onSave: (bookData: { name: string; url: string }) => void;
+  onCancel: () => void;
+  initialData?: { name: string; url: string };
+}
+
+const BookForm: React.FC<BookFormProps> = ({
+  onSave,
+  onCancel,
+  initialData,
+}) => {
+  const [name, setName] = useState(initialData?.name || "");
+  const [url, setUrl] = useState(initialData?.url || "");
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    onSave({ name, url });
+  };
+
+  return (
+    <Form onFinish={handleSubmit} className="book-form">
+      <h2>{initialData ? "Edit" : "Add"} Book</h2>
+
+      <Form.Item
+        label="Name"
+        name="name"
+        rules={[{ required: true, message: "Please enter a name" }]}
+      >
+        <Input />
+      </Form.Item>
+
+      <Form.Item
+        label="Url"
+        name="url"
+        rules={[{ required: true, message: "Please enter a url" }]}
+      >
+        <Input />
+      </Form.Item>
+
+    </Form>
+  );
+};
+
+export default BookForm;

frontend/nextjs/app/books/page.tsx

@@ -0,0 +1,165 @@
+"use client";
+import React, { useState, useEffect } from "react";
+import { Input, List, Pagination, Modal, Spin } from "antd";
+import { PlusOutlined } from "@ant-design/icons";
+import BookForm from "./bookform";
+
+interface Book {
+  id: number;
+  name: string;
+  url: string;
+}
+
+async function getData() {
+  const res = await fetch("http://localhost:3000/books");
+  if (!res.ok) {
+    throw new Error("Failed to fetch data");
+  }
+  return res.json();
+}
+
+const BookList = () => {
+  const [books, setBooks] = useState<Book[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(20);
+  const [editingBook, setEditingBook] = useState<Book | null>(null);
+  const [editing, setEditing] = useState(false);
+  const [showAddBookForm, setShowAddBookForm] = useState(false);
+  const handleAddBook = () => {
+    setShowAddBookForm(true);
+  };
+  const saveBookData = async (bookData) => {
+    try {
+      const res = await fetch("http://localhost:3000/books", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(bookData),
+      });
+      if (!res.ok) {
+        throw new Error("Failed to add book");
+      }
+      const newBook = await res.json();
+      setBooks((prevBooks) => [...prevBooks, newBook]);
+      setShowAddBookForm(false); // Close the form/modal on success
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  useEffect(() => {
+    const fetchBooks = async () => {
+      try {
+        const data = await getData();
+        setBooks(data.data);
+        setLoading(false);
+      } catch (error) {
+        console.error(error);
+        setLoading(false);
+      }
+    };
+    fetchBooks();
+  }, []);
+
+  const currentBooks = books.slice(
+    (currentPage - 1) * pageSize,
+    currentPage * pageSize,
+  );
+  const handlePageChange = (page, pageSize) => {
+    setCurrentPage(page);
+    setPageSize(pageSize);
+  };
+  const handleEdit = (book: Book) => {
+    setEditingBook(book);
+    setEditing(true);
+  };
+
+  const handleSave = async () => {
+    if (!editingBook) return;
+    try {
+      const res = await fetch(`http://localhost:3000/books/${editingBook.id}`, {
+        method: "PUT",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(editingBook),
+      });
+      if (!res.ok) {
+        throw new Error("Failed to update book");
+      }
+      setBooks((prevBooks) =>
+        prevBooks.map((b) => (b.id === editingBook.id ? editingBook : b)),
+      );
+      setEditingBook(null);
+      setEditing(false);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  const handleCancel = () => {
+    setEditingBook(null);
+    setEditing(false);
+  };
+
+  return (
+    <main className="flex min-h-screen flex-col items-center justify-between p-24">
+      <h1>Books</h1>
+      <button onClick={handleAddBook} className="add-book-button">
+        <PlusOutlined />
+      </button>
+      <Modal open={showAddBookForm} onCancel={() => setShowAddBookForm(false)} okText="Save">
+        <BookForm
+          onSave={saveBookData}
+          onCancel={() => setShowAddBookForm(false)}
+        />
+      </Modal>
+
+      {loading ? (
+        <Spin size="large" fullscreen />
+      ) : (
+        <List
+          bordered
+          pagination={{
+            current: currentPage,
+            pageSize,
+            total: books.length,
+            responsive: true,
+            showSizeChanger: true,
+            size: "small",
+            onChange: handlePageChange,
+          }}
+          dataSource={books}
+          renderItem={(book: Book) => (
+            <List.Item key={book.id} onClick={() => handleEdit(book)}>
+              {editing && editingBook?.id === book.id ? (
+                <Modal
+                  title="Edit Book"
+                  open={editing && editingBook?.id === book.id}
+                  onOk={handleSave}
+                  onCancel={(e) => {
+                    e.stopPropagation(); // Prevent event bubbling
+                    handleCancel();
+                  }}
+                >
+                  <Input
+                    value={editingBook.name}
+                    onChange={(e) =>
+                      setEditingBook({ ...editingBook, name: e.target.value })
+                    }
+                  />
+                </Modal>
+              ) : (
+                book.name
+              )}
+            </List.Item>
+          )}
+        />
+      )}
+    </main>
+  );
+};
+
+export default BookList;

frontend/nextjs/app/favicon.ico

@@ -0,0 +1,29 @@
+:root {
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 214, 219, 220;
+  --background-end-rgb: 255, 255, 255;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0;
+  }
+}
+
+body {
+  color: rgb(var(--foreground-rgb));
+  background: linear-gradient(
+      to bottom,
+      transparent,
+      rgb(var(--background-end-rgb))
+    )
+    rgb(var(--background-start-rgb));
+}
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+}

frontend/nextjs/app/globals.css

@@ -0,0 +1,25 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+// import "./globals.css";
+import { AntdRegistry } from "@ant-design/nextjs-registry";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "lifebook",
+  description: "Record things in my life",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="zh">
+      <body className={inter.className}>
+        <AntdRegistry>{children}</AntdRegistry>
+      </body>
+    </html>
+  );
+}

frontend/nextjs/app/layout.tsx

@@ -0,0 +1,32 @@
+import { List } from "antd";
+import Link from "next/link";
+import BookList from "./books/page";
+
+interface Book {
+  id: number;
+  name: string;
+  url: string;
+}
+
+async function getData() {
+  const res = await fetch("http://localhost:3000/books");
+  if (!res.ok) {
+    throw new Error("Failed to fetch data");
+  }
+  return res.json();
+}
+
+export default async function Home() {
+  const books = await getData();
+
+  return (
+    <main className="flex min-h-screen flex-col items-center justify-between p-24">
+      <h1>Home</h1>
+
+      <List>
+        <Link href="/books">Books</Link>
+        <BookList books={books} />
+      </List>
+    </main>
+  );
+}