From d1706e438bf63af40bd26e304478ee120214c4f4 Mon Sep 17 00:00:00 2001 From: yanyongyu Date: Thu, 30 Dec 2021 12:50:30 +0800 Subject: [PATCH] :construction: add store pagination --- nonebot/drivers/quart.py | 2 +- website/package.json | 1 + website/src/components/Driver.tsx | 31 +++++++++++++++++++++--- website/src/components/Paginate.tsx | 29 ++++++++++++++++++++-- website/src/libs/{store.tsx => store.ts} | 0 website/src/pages/index.tsx | 25 ++++++++++--------- yarn.lock | 5 ++++ 7 files changed, 75 insertions(+), 18 deletions(-) rename website/src/libs/{store.tsx => store.ts} (100%) diff --git a/nonebot/drivers/quart.py b/nonebot/drivers/quart.py index c9fccf26..a8330044 100644 --- a/nonebot/drivers/quart.py +++ b/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 diff --git a/website/package.json b/website/package.json index fe001205..7b4fb2f3 100644 --- a/website/package.json +++ b/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": { diff --git a/website/src/components/Driver.tsx b/website/src/components/Driver.tsx index 71b7f4f7..fb8971ec 100644 --- a/website/src/components/Driver.tsx +++ b/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 ( <> -
+
setFilter(event.target.value)} /> + +
+
+ +
+
+ {currentDrivers.map((driver, index) => ( +

{driver.name}

+ ))} +
+
+
-
{filteredDrivers.toString()}
); } diff --git a/website/src/components/Paginate.tsx b/website/src/components/Paginate.tsx index 935fe4f9..3fd1c4a9 100644 --- a/website/src/components/Paginate.tsx +++ b/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): JSX.Element { + const onPageChange = useCallback( + (selectedItem: { selected: number }) => { + setPage(selectedItem.selected); + }, + [setPage] + ); + + return ( + + ); } diff --git a/website/src/libs/store.tsx b/website/src/libs/store.ts similarity index 100% rename from website/src/libs/store.tsx rename to website/src/libs/store.ts diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx index d900b931..b7aafd77 100644 --- a/website/src/pages/index.tsx +++ b/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")} @@ -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")} diff --git a/yarn.lock b/yarn.lock index 5f32dbea..45533adf 100644 --- a/yarn.lock +++ b/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"