implement trollboard UI (#1301)

* implement trollboard UI * remove unneeded code * add link to user * user link in leaderboard
2026-08-20 12:00:32 +08:00 · 2023-02-08 13:49:00 +09:00
parent 59dbfea48f
commit a46e4a2bb1
13 changed files with 389 additions and 85 deletions
@@ -0,0 +1,57 @@
+import { Box, Card, CardBody, Heading, Tab, TabList, TabPanel, TabPanels, Tabs } from "@chakra-ui/react";
+import Head from "next/head";
+import { useTranslation } from "next-i18next";
+export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props";
+import { AdminArea } from "src/components/AdminArea";
+import { getAdminLayout } from "src/components/Layout";
+import { TrollboardTable } from "src/components/LeaderboardTable/TrollboardTable";
+import { TrollboardTimeFrame } from "src/types/Trollboard";
+
+const Leaderboard = () => {
+  const { t } = useTranslation(["leaderboard", "common"]);
+  return (
+    <>
+      <Head>
+        <title>{`Trollboard - ${t("common:title")}`}</title>
+        <meta name="description" content="Admin Trollboard" charSet="UTF-8" />
+      </Head>
+      <AdminArea>
+        <Box display="flex" flexDirection="column">
+          <Heading fontSize="2xl" fontWeight="bold" pb="4">
+            {t("leaderboard")}
+          </Heading>
+          <Card>
+            <CardBody>
+              <Tabs isFitted isLazy>
+                <TabList mb={4}>
+                  <Tab>{t("daily")}</Tab>
+                  <Tab>{t("weekly")}</Tab>
+                  <Tab>{t("monthly")}</Tab>
+                  <Tab>{t("overall")}</Tab>
+                </TabList>
+                <TabPanels>
+                  <TabPanel p="0">
+                    <TrollboardTable timeFrame={TrollboardTimeFrame.day} limit={100} rowPerPage={20} />
+                  </TabPanel>
+                  <TabPanel p="0">
+                    <TrollboardTable timeFrame={TrollboardTimeFrame.week} limit={100} rowPerPage={20} />
+                  </TabPanel>
+                  <TabPanel p="0">
+                    <TrollboardTable timeFrame={TrollboardTimeFrame.month} limit={100} rowPerPage={20} />
+                  </TabPanel>
+                  <TabPanel p="0">
+                    <TrollboardTable timeFrame={TrollboardTimeFrame.total} limit={100} rowPerPage={20} />
+                  </TabPanel>
+                </TabPanels>
+              </Tabs>
+            </CardBody>
+          </Card>
+        </Box>
+      </AdminArea>
+    </>
+  );
+};
+
+Leaderboard.getLayout = getAdminLayout;
+
+export default Leaderboard;
@@ -0,0 +1,13 @@
+import { withRole } from "src/lib/auth";
+import { createApiClient } from "src/lib/oasst_client_factory";
+import { TrollboardTimeFrame } from "src/types/Trollboard";
+
+export default withRole("admin", async (req, res, token) => {
+  const client = await createApiClient(token);
+
+  const trollboard = await client.fetch_trollboard(req.query.time_frame as TrollboardTimeFrame, {
+    limit: req.query.limit as unknown as number,
+  });
+
+  return res.status(200).json(trollboard);
+});