💥

web/src/components/Home.js

@@ -0,0 +1,109 @@
+import * as React from "react";
+import Layout from "./Layout";
+import {
+  Box,
+  Chip,
+  Button,
+  List,
+  ListItem,
+  ListItemButton,
+  ListItemText,
+  IconButton,
+  TextField,
+  Typography,
+} from "@mui/material";
+import { Delete } from "@mui/icons-material";
+import { UsernameContext } from "./Login";
+import { useNavigate } from "react-router-dom";
+import { get, post, del } from "../fetches";
+
+const Home = () => {
+  const { username, token } = React.useContext(UsernameContext);
+
+  const [timetables, setTimetables] = React.useState([]);
+  const [newTimetableName, setNewTimetableName] = React.useState("");
+  const navigator = useNavigate();
+
+  const fetchData = async () => {
+    const data = await get("/timetables");
+    setTimetables(data.timetables);
+  };
+
+  React.useEffect(() => {
+    fetchData();
+  }, []);
+
+  return (
+    <Layout>
+      {username === "admin" && (
+        <Box
+          sx={{
+            display: "flex",
+          }}
+        >
+          <TextField
+            value={newTimetableName}
+            onChange={(event) => {
+              setNewTimetableName(event.target.value);
+            }}
+            placeholder="班表名"
+          />
+          <Button
+            variant="contained"
+            color="secondary"
+            onClick={async () => {
+              await post("/timetables", {
+                token,
+                newTimetableName,
+              });
+              await fetchData();
+            }}
+          >
+            添加新班表
+          </Button>
+        </Box>
+      )}
+
+      <Typography>选择班表：</Typography>
+
+      <List>
+        {timetables.map(({ id, name, status }) => (
+          <ListItem key={id}>
+            <ListItemButton
+              onClick={() => {
+                navigator(`/timetable/${id}`);
+              }}
+            >
+              <ListItemText
+                sx={{ display: "flex", justifyContent: "space-between" }}
+              >
+                {name}
+                <Chip
+                  label={status ? "招募中" : "未开放"}
+                  sx={{ mx: 5 }}
+                  color={status ? "success" : "default"}
+                />
+              </ListItemText>
+            </ListItemButton>
+            {username === "admin" && (
+              <IconButton
+                onClick={async () => {
+                  console.log(
+                    await del(`/timetables/${id}`, {
+                      token,
+                    })
+                  );
+                  await fetchData();
+                }}
+              >
+                <Delete />
+              </IconButton>
+            )}
+          </ListItem>
+        ))}
+      </List>
+    </Layout>
+  );
+};
+
+export default Home;