From 7d16e31f67cddbd834a0f7f573b7c43c0dc7c17a Mon Sep 17 00:00:00 2001 From: lixiang810 <14120445+lixiang810@users.noreply.github.com> Date: Thu, 15 Jul 2021 12:27:28 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=9E=E7=8E=B0=E5=AF=B9=E8=AE=A2=E9=98=85?= =?UTF-8?q?=E6=93=8D=E4=BD=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/subscibe.ts | 2 +- src/components/Uper.tsx | 135 ++++++++++++++++++++++++++++++--- src/pages/LoginPage.tsx | 8 +- src/reducer/newVideoReducer.ts | 15 +++- 4 files changed, 142 insertions(+), 18 deletions(-) diff --git a/src/api/subscibe.ts b/src/api/subscibe.ts index 35f6660..200d51d 100644 --- a/src/api/subscibe.ts +++ b/src/api/subscibe.ts @@ -28,7 +28,7 @@ const add = async (mid: string | number): Promise => { }; const del = async (id: string): Promise => { - await request.del(`/sub/delSubscribe:${id}`); + await request.del(`/sub/delSubscribe/${id}`); }; const updateRead = async (id: string): Promise => { diff --git a/src/components/Uper.tsx b/src/components/Uper.tsx index 9a7ef69..5151297 100644 --- a/src/components/Uper.tsx +++ b/src/components/Uper.tsx @@ -3,6 +3,9 @@ import { CardContent, Typography, CardActionArea, + Button, + Card, + ClickAwayListener, } from "@material-ui/core"; import { Add } from "@material-ui/icons"; import React from "react"; @@ -10,15 +13,69 @@ 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 + ) => void | Promise; +}) => { + return ( + + + + ); +}; + +const UperInfo = ({ + uper, + setOver, +}: { + uper: UperAsJsonWhileGet; + setOver: React.Dispatch>; +}) => { + return ( + + { + setOver(true); + }} + style={{ minHeight: 100 }} + > + + + + {uper.card.name} + + + + + + ); +}; + +const UperAction = ({ + uper, + setOver, +}: { + uper: UperAsJsonWhileGet; + setOver: React.Dispatch>; +}) => { const dispatch = useAppDispatch(); const handleErr = useAxiosErrorHandler(); - const handleClick = async ( + const snackbar = useMySnackbar(); + const handleReaded = async ( e: React.MouseEvent ) => { e.preventDefault(); @@ -29,15 +86,71 @@ const Uper = ({ uper }: { uper: UperAsJsonWhileGet }) => { handleErr(e); }); }; + + const handleDelete = async ( + e: React.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 + ) => { + 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 ( - - - - - {uper.card.name} - - - + { + setOver(false); + }} + > + + + + 已读 + 删除 + 更新 + + + + + ); +}; + +const Uper = ({ uper }: { uper: UperAsJsonWhileGet }) => { + const [over, setOver] = React.useState(false); + return ( + + {over ? ( + + ) : ( + + )} ); }; diff --git a/src/pages/LoginPage.tsx b/src/pages/LoginPage.tsx index 7ce6dc3..6e05706 100644 --- a/src/pages/LoginPage.tsx +++ b/src/pages/LoginPage.tsx @@ -21,7 +21,7 @@ const LoginPage = (): JSX.Element => { const [username, setUsername] = React.useState(""); const [name, setName] = React.useState(""); const [password, setPassword] = React.useState(""); - const [islogin, setIslogin] = React.useState(false); + const [islogin, setIsLogin] = React.useState(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); }} /> @@ -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 => { 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)} /> diff --git a/src/reducer/newVideoReducer.ts b/src/reducer/newVideoReducer.ts index c010912..f41261f 100644 --- a/src/reducer/newVideoReducer.ts +++ b/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); }); }, });