🚧 add store pagination

nonebot/drivers/quart.py

@@ -43,7 +43,7 @@ def catch_closed(func):
     async def decorator(*args, **kwargs):
         try:
             return await func(*args, **kwargs)
-        except asyncio.CancelledError as e:
+        except asyncio.CancelledError:
             raise WebSocketClosed(1000)
 
     return decorator

website/package.json

@@ -33,6 +33,7 @@
     "react-color": "^2.19.3",
     "react-dom": "^17.0.1",
     "react-paginate": "^8.1.0",
+    "react-use-pagination": "^2.0.1",
     "url-loader": "^4.1.1"
   },
   "devDependencies": {

website/src/components/Driver.tsx

@@ -1,23 +1,48 @@
 import React from "react";
+import { usePagination } from "react-use-pagination";
 
 import drivers from "../../static/drivers.json";
 import { useFilteredObjs } from "../libs/store";
+import Paginate from "./Paginate";
 
-export default function Driver() {
+export default function Driver(): JSX.Element {
   const {
     filter,
     setFilter,
     filteredObjs: filteredDrivers,
   } = useFilteredObjs(drivers);
+
+  const props = usePagination({
+    totalItems: filteredDrivers.length,
+    initialPageSize: 10,
+  });
+  const { startIndex, endIndex } = props;
+  const currentDrivers = filteredDrivers.slice(startIndex, endIndex);
+
   return (
     <>
-      <div>
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-4 px-4">
         <input
+          className="w-full px-4 py-2 border rounded-full bg-light-nonepress-100 dark:bg-dark-nonepress-100"
           value={filter}
+          placeholder="搜索驱动器"
           onChange={(event) => setFilter(event.target.value)}
         />
+        <button className="w-full rounded bg-hero text-white" disabled>
+          发布驱动器
+        </button>
+      </div>
+      <div className="grid grid-cols-1 p-4">
+        <Paginate {...props} />
+      </div>
+      <div>
+        {currentDrivers.map((driver, index) => (
+          <p key={index}>{driver.name}</p>
+        ))}
+      </div>
+      <div className="grid grid-cols-1 p-4">
+        <Paginate {...props} />
       </div>
-      <div>{filteredDrivers.toString()}</div>
     </>
   );
 }

website/src/components/Paginate.tsx

@@ -1,5 +1,30 @@
+import React, { useCallback } from "react";
 import ReactPaginate from "react-paginate";
+import { usePagination } from "react-use-pagination";
 
-export function usePagination() {
-  return {};
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+export default function Paginate({
+  totalPages,
+  setPage,
+}: ReturnType<typeof usePagination>): JSX.Element {
+  const onPageChange = useCallback(
+    (selectedItem: { selected: number }) => {
+      setPage(selectedItem.selected);
+    },
+    [setPage]
+  );
+
+  return (
+    <nav role="navigation" aria-label="Pagination Navigation">
+      <ReactPaginate
+        pageCount={totalPages}
+        onPageChange={onPageChange}
+        containerClassName="w-full m-w-full inline-flex justify-center align-center m-0 pl-0 list-none"
+        breakLabel={<FontAwesomeIcon icon="ellipsis-h" />}
+        previousLabel={<FontAwesomeIcon icon="chevron-left" />}
+        nextLabel={<FontAwesomeIcon icon="chevron-right" />}
+      ></ReactPaginate>
+    </nav>
+  );
 }

website/src/pages/index.tsx

@@ -10,31 +10,31 @@ import styles from "../css/index.module.css";
 
 export default function Home() {
   const firstFeature: Feature = {
-    title: "开发",
-    tagline: "fast to code",
-    description: "仅需两步，即可开始编写你的机器人",
+    title: "开箱即用",
+    tagline: "out of box",
+    description: "使用 NB-CLI 快速构建属于你的机器人",
   } as const;
   const secondFeatures = [
     {
-      title: "插件",
-      tagline: "build bot with plugins",
+      title: "插件系统",
+      tagline: "plugin system",
       description: "插件化开发，模块化管理",
     },
     {
-      title: "跨平台",
-      tagline: "write once run everywhere",
+      title: "跨平台支持",
+      tagline: "cross-platform support",
       description: "支持多种平台，以及多样的事件响应方式",
     },
   ] as const;
   const thirdFeatures = [
     {
-      title: "异步",
+      title: "异步开发",
       tagline: "asynchronous first",
       description: "异步优先式开发，提高运行效率",
     },
     {
       title: "依赖注入",
-      tagline: "bultin dependency injection system",
+      tagline: "builtin dependency injection system",
       description: "简单清晰的依赖注入系统，内置依赖函数减少用户代码",
     },
   ];
@@ -60,8 +60,9 @@ export default function Home() {
               "[?] What do you want to do?",
               "❯ Create a New Project",
               "  Run the Bot in Current Folder",
-              "  Create a New NoneBot Plugin",
-              "  List All Published Plugins",
+              "  Driver ->",
+              "  Adapter ->",
+              "  Plugin ->",
               "  ...",
             ].join("\n")}
           </CodeBlock>
@@ -153,7 +154,7 @@ export default function Home() {
                 "# 通过依赖注入获得命令名以及参数",
                 "@matcher.handle()",
                 "async def handler(cmd = Command(), arg = CommandArg()) -> None:",
-                "    await matcher.send()",
+                "    await matcher.finish()",
               ].join("\n")}
             </CodeBlock>
           </HeroFeature>

yarn.lock

@@ -6372,6 +6372,11 @@ react-side-effect@^2.1.0:
   resolved "https://registry.npm.taobao.org/react-side-effect/download/react-side-effect-2.1.1.tgz#66c5701c3e7560ab4822a4ee2742dee215d72eb3"
   integrity sha1-ZsVwHD51YKtIIqTuJ0Le4hXXLrM=
 
+react-use-pagination@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.npmmirror.com/react-use-pagination/download/react-use-pagination-2.0.1.tgz#debc6322cd3f14a4cdf082d913f7736d5cbed170"
+  integrity sha1-3rxjIs0/FKTN8ILZE/dzbVy+0XA=
+
 react@^17.0.1:
   version "17.0.2"
   resolved "https://registry.npmmirror.com/react/download/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"