实现对订阅操作

src/api/subscibe.ts

@@ -28,7 +28,7 @@ const add = async (mid: string | number): Promise<UperAsJsonWhileAdd> => {
 };
 
 const del = async (id: string): Promise<void> => {
-  await request.del(`/sub/delSubscribe:${id}`);
+  await request.del(`/sub/delSubscribe/${id}`);
 };
 
 const updateRead = async (id: string): Promise<UperAsJsonWhileAdd> => {

src/components/Uper.tsx

@@ -3,22 +3,79 @@ import {
   CardContent,
   Typography,
   CardActionArea,
+  Button,
+  Card,
+  ClickAwayListener,
 } from "@material-ui/core";
 import { Add } from "@material-ui/icons";
 import React from "react";
 import { useHistory } from "react-router-dom";
 import subscibe from "../api/subscibe";
 import { UperAsJsonWhileGet } from "../api/types/UperAsJson";
 import useAxiosErrorHandler from "../hooks/useAxiosErrorHandler";
+import useMySnackbar from "../hooks/useMySnackbar";
 import { useAppDispatch, useAppSelector } from "../hooks/useTypedRedux";
-import { initNewVideos } from "../reducer/newVideoReducer";
+import { addNewVideos, initNewVideos } from "../reducer/newVideoReducer";
 import { RootState } from "../reducer/reducerCombiner";
+import { initUpers } from "../reducer/uperReducer";
 import MyCard from "./MyCard";
 
-const Uper = ({ uper }: { uper: UperAsJsonWhileGet }) => {
+const CustomButton = ({
+  children,
+  onClick,
+}: {
+  children: JSX.Element | string;
+  onClick: (
+    e: React.MouseEvent<HTMLButtonElement, MouseEvent>
+  ) => void | Promise<void>;
+}) => {
+  return (
+    <Grid item>
+      <Button variant="outlined" onClick={onClick} style={{ height: 32 }}>
+        {children}
+      </Button>
+    </Grid>
+  );
+};
+
+const UperInfo = ({
+  uper,
+  setOver,
+}: {
+  uper: UperAsJsonWhileGet;
+  setOver: React.Dispatch<React.SetStateAction<boolean>>;
+}) => {
+  return (
+    <Card style={{ minHeight: 100 }}>
+      <CardActionArea
+        onClick={() => {
+          setOver(true);
+        }}
+        style={{ minHeight: 100 }}
+      >
+        <CardContent>
+          <Grid container justify="center">
+            <Typography variant="h5" align="center">
+              {uper.card.name}
+            </Typography>
+          </Grid>
+        </CardContent>
+      </CardActionArea>
+    </Card>
+  );
+};
+
+const UperAction = ({
+  uper,
+  setOver,
+}: {
+  uper: UperAsJsonWhileGet;
+  setOver: React.Dispatch<React.SetStateAction<boolean>>;
+}) => {
   const dispatch = useAppDispatch();
   const handleErr = useAxiosErrorHandler();
-  const handleClick = async (
+  const snackbar = useMySnackbar();
+  const handleReaded = async (
     e: React.MouseEvent<HTMLButtonElement, MouseEvent>
   ) => {
     e.preventDefault();
@@ -29,15 +86,71 @@ const Uper = ({ uper }: { uper: UperAsJsonWhileGet }) => {
         handleErr(e);
       });
   };
+
+  const handleDelete = async (
+    e: React.MouseEvent<HTMLButtonElement, MouseEvent>
+  ) => {
+    e.preventDefault();
+    await subscibe.del(uper.id);
+    snackbar.info("删除成功");
+    dispatch(initNewVideos())
+      .unwrap()
+      .catch((e) => {
+        handleErr(e);
+      });
+    dispatch(initUpers())
+      .unwrap()
+      .catch((e) => {
+        handleErr(e);
+      });
+  };
+
+  const handleUpdate = async (
+    e: React.MouseEvent<HTMLButtonElement, MouseEvent>
+  ) => {
+    e.preventDefault();
+    const { updates } = await subscibe.updateVideos(uper.id);
+    snackbar.success(`${uper.card.name} 新增 ${updates} 条视频`);
+    dispatch(addNewVideos(uper.id))
+      .unwrap()
+      .catch((err) => {
+        handleErr(err);
+      });
+  };
   return (
-    <Grid item>
-      <MyCard>
-        <CardActionArea onClick={handleClick}>
-          <CardContent>
-            <Typography variant="h4">{uper.card.name}</Typography>
-          </CardContent>
-        </CardActionArea>
-      </MyCard>
+    <ClickAwayListener
+      onClickAway={() => {
+        setOver(false);
+      }}
+    >
+      <Card raised style={{ minHeight: 100 }}>
+        <CardContent style={{ padding: 0 }}>
+          <Grid
+            container
+            justify="center"
+            alignItems="center"
+            spacing={1}
+            style={{ minHeight: 100 }}
+          >
+            <CustomButton onClick={handleReaded}>已读</CustomButton>
+            <CustomButton onClick={handleDelete}>删除</CustomButton>
+            <CustomButton onClick={handleUpdate}>更新</CustomButton>
+          </Grid>
+        </CardContent>
+      </Card>
+    </ClickAwayListener>
+  );
+};
+
+const Uper = ({ uper }: { uper: UperAsJsonWhileGet }) => {
+  const [over, setOver] = React.useState(false);
+  return (
+    <Grid item xs={12} md={4} lg={2}>
+      {over ? (
+        <UperAction uper={uper} setOver={setOver} />
+      ) : (
+        <UperInfo uper={uper} setOver={setOver} />
+      )}
     </Grid>
   );
 };

src/pages/LoginPage.tsx

@@ -21,7 +21,7 @@ const LoginPage = (): JSX.Element => {
   const [username, setUsername] = React.useState<string>("");
   const [name, setName] = React.useState<string>("");
   const [password, setPassword] = React.useState<string>("");
-  const [islogin, setIslogin] = React.useState<boolean>(false);
+  const [islogin, setIsLogin] = React.useState<boolean>(true);
   const history = useHistory();
   const handleErr = useAxiosErrorHandler();
 
@@ -88,7 +88,7 @@ const LoginPage = (): JSX.Element => {
                       checked={islogin}
                       color="primary"
                       onChange={(event) => {
-                        setIslogin(event.target.checked);
+                        setIsLogin(event.target.checked);
                       }}
                     />
                   </Grid>
@@ -101,6 +101,7 @@ const LoginPage = (): JSX.Element => {
                   variant="outlined"
                   type="username"
                   label="用户名"
+                  autoComplete="username"
                   value={username}
                   onChange={(event) => setUsername(event.target.value)}
                 />
@@ -110,8 +111,8 @@ const LoginPage = (): JSX.Element => {
                   <TextField
                     fullWidth
                     variant="outlined"
-                    type="username"
                     label="昵称"
+                    autoComplete="nickname"
                     value={name}
                     onChange={(event) => setName(event.target.value)}
                   />
@@ -123,6 +124,7 @@ const LoginPage = (): JSX.Element => {
                   variant="outlined"
                   type="password"
                   label="密码"
+                  autoComplete={islogin ? "current-password" : "new-password"}
                   value={password}
                   onChange={(event) => setPassword(event.target.value)}
                 />

src/reducer/newVideoReducer.ts

@@ -13,6 +13,14 @@ export const initNewVideos = createAsyncThunk(
   }
 );
 
+export const addNewVideos = createAsyncThunk(
+  "newVideo/addNewVideos",
+  async (id: string) => {
+    const newVideos = await subscibe.getUpdates(id);
+    return newVideos;
+  }
+);
+
 export const newVideoSlice = createSlice({
   name: "newVideo",
   initialState,
@@ -24,9 +32,10 @@ export const newVideoSlice = createSlice({
   extraReducers: (builder) => {
     builder.addCase(initNewVideos.pending, () => []);
     builder.addCase(initNewVideos.fulfilled, (state, action) => {
-      action.payload.forEach((newVideo) => {
-        state.push(newVideo);
-      });
+      state.push(...action.payload);
+    });
+    builder.addCase(addNewVideos.fulfilled, (state, action) => {
+      state.push(...action.payload);
     });
   },
 });