feat: support book tag

Okabe-Rintarou-0 · Jul 30, 2024 · 8c9ff75 · 8c9ff75
1 parent dde215c
commit 8c9ff75
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 15 deletions.
diff --git a/src/components/book_details.jsx b/src/components/book_details.jsx
@@ -1,4 +1,4 @@
-import { Button, Col, Image, Row, Space } from "antd";
+import { Button, Col, Image, Row, Space, Tag } from "antd";
 import { Divider, Typography } from 'antd';
 import { ExclamationCircleOutlined } from '@ant-design/icons'
 
@@ -18,6 +18,8 @@ export default function BookDetails({ book, onAddCartItem }) {
                         {`作者：${book.author}`}
                         <Divider type="vertical" />
                         {`销量：${book.sales}`}
+                        <Divider type="vertical" />
+                        标签：{book.tags.map(t => <Tag>{t.name}</Tag>)}
                     </Paragraph>
                 </Space>
                 <Divider orientation="left">作品简介</Divider>

diff --git a/src/page/home.jsx b/src/page/home.jsx
@@ -1,51 +1,77 @@
-import { Card, Space } from "antd";
+import { Card, Col, Row, Select, Space, Tag } from "antd";
 import { PrivateLayout } from "../components/layout";
 import BookList from "../components/book_list";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useSearchParams } from "react-router-dom";
-import { searchBooks } from "../service/book";
+import { getAllBookTags, searchBooks } from "../service/book";
+import { TagOutlined } from "@ant-design/icons";
 
 import { Input } from 'antd';
 const { Search } = Input;
 
 export default function HomePage() {
     const [books, setBooks] = useState([]);
     const [totalPage, setTotalPage] = useState(0);
-
+    const [selectedTag, setSelectedTag] = useState("");
+    const [tags, setTags] = useState([]);
     const [searchParams, setSearchParams] = useSearchParams();
     const keyword = searchParams.get("keyword") || "";
     const pageIndex = searchParams.get("pageIndex") != null ? Number.parseInt(searchParams.get("pageIndex")) : 0;
     const pageSize = searchParams.get("pageSize") != null ? Number.parseInt(searchParams.get("pageSize")) : 10;
+    const searchRef = useRef(null);
 
     useEffect(() => {
         const getBooks = async () => {
-            let pagedBooks = await searchBooks(keyword, pageIndex, pageSize);
+            let pagedBooks = await searchBooks(selectedTag, keyword, pageIndex, pageSize);
             let books = pagedBooks.items;
             let totalPage = pagedBooks.total;
             setBooks(books);
             setTotalPage(totalPage);
         };
         getBooks();
-    }, [keyword, pageIndex, pageSize])
+    }, [selectedTag, keyword, pageIndex, pageSize]);
+
+    useEffect(() => {
+        getAllBookTags().then(setTags);
+    }, []);
 
     const handleSearch = (keyword) => {
         setSearchParams({
-            "keyword": keyword,
-            "pageIndex": 0,
-            "pageSize": 10
+            keyword,
+            pageIndex: 0,
+            pageSize: 10
         });
     };
 
     const handlePageChange = (page) => {
-        setSearchParams({ ...searchParams, pageIndex: page - 1 });
+        setSearchParams({ keyword, pageIndex: page - 1, pageSize });
     }
 
+    const handleSelectTag = (tag) => {
+        setSelectedTag(tag);
+        setSearchParams({ keyword, pageIndex: 0, pageSize });
+        searchRef.current?.focus();
+    };
+
     return <PrivateLayout>
         <Card className="card-container">
             <Space direction="vertical" size="large" style={{ width: "100%" }}>
-                <Search placeholder="输入关键字" onSearch={handleSearch} enterButton size="large" />
+                <Row justify={"center"} gutter={10}>
+                    <Col span={8}>
+                        <Search ref={searchRef} placeholder="输入关键字" onSearch={handleSearch} enterButton size="large" />
+                    </Col>
+                    <Col span={2}>
+                        <Select size="large" style={{ width: "100%" }} placeholder={<Space><TagOutlined />标签</Space>}
+                            options={tags.map(tag => ({
+                                label: <Tag>{tag}</Tag>,
+                                value: tag
+                            }))}
+                            onChange={handleSelectTag}
+                        />
+                    </Col>
+                </Row>
                 <BookList books={books} pageSize={pageSize} total={totalPage * pageSize} current={pageIndex + 1} onPageChange={handlePageChange} />
             </Space>
         </Card>
-    </PrivateLayout>
+    </PrivateLayout >
 }
diff --git a/src/service/book.js b/src/service/book.js
@@ -1,7 +1,9 @@
 import { DUMMY_RESPONSE, PREFIX, getJson, post } from "./common";
 
-export async function searchBooks(keyword, pageIndex, pageSize) {
-    const url = `${PREFIX}/books?keyword=${keyword}&pageIndex=${pageIndex}&pageSize=${pageSize}`;
+export async function searchBooks(tag, keyword, pageIndex, pageSize) {
+    tag = encodeURIComponent(tag);
+    keyword = encodeURIComponent(keyword);
+    const url = `${PREFIX}/books?tag=${tag}&keyword=${keyword}&pageIndex=${pageIndex}&pageSize=${pageSize}`;
     let books;
     try {
         books = await getJson(url);
@@ -15,6 +17,18 @@ export async function searchBooks(keyword, pageIndex, pageSize) {
     return books;
 }
 
+export async function getAllBookTags() {
+    const url = `${PREFIX}/book/tags`;
+    let tags;
+    try {
+        tags = await getJson(url);
+    } catch (e) {
+        console.log(e);
+        tags = [];
+    }
+    return tags;
+}
+
 export async function getBookById(id) {
     const url = `${PREFIX}/book/${id}`;
     let book;