From f23b725c81f800615ea63331e097c1b1760e2bf4 Mon Sep 17 00:00:00 2001
From: heimoshuiyu <heimoshuiyu@gmail.com>
Date: Sun, 22 May 2022 17:06:40 +0800
Subject: [PATCH] react-window

---
 package-lock.json |  38 +++++++++++++++++-
 package.json      |   3 +-
 pages/time.js     | 100 ++++++++++++++++++++--------------------------
 3 files changed, 83 insertions(+), 58 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 86cb094..0bf4b4f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,7 +15,8 @@
         "better-sqlite3": "^7.5.0",
         "next": "12.1.2",
         "react": "^17.0.2",
-        "react-dom": "^17.0.2"
+        "react-dom": "^17.0.2",
+        "react-window": "^1.8.7"
       },
       "devDependencies": {
         "eslint": "8.12.0",
@@ -2996,6 +2997,11 @@
         "node": ">=10"
       }
     },
+    "node_modules/memoize-one": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmmirror.com/memoize-one/-/memoize-one-5.2.1.tgz",
+      "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmmirror.com/merge2/-/merge2-1.4.1.tgz",
@@ -3561,6 +3567,22 @@
         "react-dom": ">=16.6.0"
       }
     },
+    "node_modules/react-window": {
+      "version": "1.8.7",
+      "resolved": "https://registry.npmmirror.com/react-window/-/react-window-1.8.7.tgz",
+      "integrity": "sha512-JHEZbPXBpKMmoNO1bNhoXOOLg/ujhL/BU4IqVU9r8eQPcy5KQnGHIHDRkJ0ns9IM5+Aq5LNwt3j8t3tIrePQzA==",
+      "dependencies": {
+        "@babel/runtime": "^7.0.0",
+        "memoize-one": ">=3.1.1 <6"
+      },
+      "engines": {
+        "node": ">8.0.0"
+      },
+      "peerDependencies": {
+        "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/readable-stream": {
       "version": "2.3.7",
       "resolved": "https://registry.npmmirror.com/readable-stream/-/readable-stream-2.3.7.tgz",
@@ -6445,6 +6467,11 @@
         "yallist": "^4.0.0"
       }
     },
+    "memoize-one": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmmirror.com/memoize-one/-/memoize-one-5.2.1.tgz",
+      "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
+    },
     "merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmmirror.com/merge2/-/merge2-1.4.1.tgz",
@@ -6878,6 +6905,15 @@
         "prop-types": "^15.6.2"
       }
     },
+    "react-window": {
+      "version": "1.8.7",
+      "resolved": "https://registry.npmmirror.com/react-window/-/react-window-1.8.7.tgz",
+      "integrity": "sha512-JHEZbPXBpKMmoNO1bNhoXOOLg/ujhL/BU4IqVU9r8eQPcy5KQnGHIHDRkJ0ns9IM5+Aq5LNwt3j8t3tIrePQzA==",
+      "requires": {
+        "@babel/runtime": "^7.0.0",
+        "memoize-one": ">=3.1.1 <6"
+      }
+    },
     "readable-stream": {
       "version": "2.3.7",
       "resolved": "https://registry.npmmirror.com/readable-stream/-/readable-stream-2.3.7.tgz",
diff --git a/package.json b/package.json
index 992ad31..abebb12 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,8 @@
     "better-sqlite3": "^7.5.0",
     "next": "12.1.2",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "react-window": "^1.8.7"
   },
   "devDependencies": {
     "eslint": "8.12.0",
diff --git a/pages/time.js b/pages/time.js
index edad8c3..39a2d97 100644
--- a/pages/time.js
+++ b/pages/time.js
@@ -9,15 +9,13 @@ import {
   DialogTitle,
   DialogContent,
   DialogActions,
+  List,
+  ListItem,
+  ListItemText,
   Typography,
   TextField,
-  TableContainer,
-  Table,
-  TableHead,
-  TableRow,
-  TableCell,
-  TableBody,
 } from "@mui/material";
+import { FixedSizeList } from "react-window";
 import { useEffect, useState } from "react";
 import { useRouter } from "next/router";
 import config from "../next.config";
@@ -330,56 +328,46 @@ export default function Time(props) {
           服务器负载 (QPS): {stats.apiqps}
         </Typography>
       </Box>
-      <TableContainer>
-        <Table>
-          <TableHead>
-            <TableRow>
-              <TableCell>名称</TableCell>
-              <TableCell>时间段</TableCell>
-              <TableCell>操作</TableCell>
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {ranges.map((range) => (
-              <TableRow key={range.id}>
-                <TableCell>{range.name}</TableCell>
-                <TableCell>{range.range}</TableCell>
-                <TableCell>
-                  <Button
-                    sx={{
-                      userSelect: "none",
-                    }}
-                    disabled={range.username !== ""}
-                    variant="contained"
-                    color="primary"
-                    onClick={() => updateUsername(range.id, props.username)}
-                  >
-                    {range.username ? range.username : "抢！"}
-                  </Button>
-                  {isAdmin() && (
-                    <>
-                      <Button
-                        variant="contained"
-                        color="secondary"
-                        onClick={() => setModifyTime(range)}
-                      >
-                        修改
-                      </Button>
-                      <Button
-                        variant="contained"
-                        color="secondary"
-                        onClick={() => deleteRange(range.id)}
-                      >
-                        删除
-                      </Button>
-                    </>
-                  )}
-                </TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </TableContainer>
+
+    <Box sx={{
+      height: "100%",
+    }}>
+      <FixedSizeList
+        height={500}
+        width={"100%"}
+        itemSize={50}
+        itemData={ranges}
+        itemCount={ranges.length}
+        innerElementType={List}
+        style={{
+          maxWidth: "29rem",
+        }}
+      >
+        {({ index, style, data }) => {
+          const range = data[index];
+          return (
+            <ListItem style={style} key={index}>
+              <Button
+                sx={{
+                  userSelect: "none",
+                    mx: "1rem",
+                }}
+                disabled={range.username !== ""}
+                variant="contained"
+                color="primary"
+                onClick={() => updateUsername(range.id, props.username)}
+              >
+                {range.username ? range.username : "抢！"}
+              </Button>
+              <ListItemText>
+                {range.name} {range.range}
+              </ListItemText>
+            </ListItem>
+          );
+        }}
+      </FixedSizeList>
+    </Box>
+
       <Snackbar
         open={snackbarError}
         autoHideDuration={1000}