feat-frontend (#54)

Reviewed-on: PostGuard/Canon#54
This commit is contained in:
ichirinko 2024-04-25 00:14:45 +08:00
parent 447a791793
commit b4a6632018

View File

@ -1,4 +1,15 @@
import {Box, Button, Card, CardActionArea, Drawer, Stack, Typography} from "@mui/material"; import {
Box,
Button,
Card,
CardActionArea,
Dialog, DialogActions,
DialogContent, DialogContentText,
DialogTitle,
Drawer,
Stack,
Typography
} from "@mui/material";
import createClient from "openapi-fetch"; import createClient from "openapi-fetch";
import * as openapi from "../openapi"; import * as openapi from "../openapi";
import {useEffect, useState} from "react"; import {useEffect, useState} from "react";
@ -12,6 +23,7 @@ const client = createClient<openapi.paths>();
// @ts-expect-error ... // @ts-expect-error ...
export function HistoryPage({state, setState}) { export function HistoryPage({state, setState}) {
const [data, setData] = useState<OutputIntf[]>([]); const [data, setData] = useState<OutputIntf[]>([]);
const [deleteDialog, setDeleteDialog] = useState(false);
const navigate = useNavigate(); const navigate = useNavigate();
useEffect(() => { useEffect(() => {
@ -25,8 +37,7 @@ export function HistoryPage({state, setState}) {
} }
} }
}).then((response) => { }).then((response) => {
if (response !== undefined) { if (response!==undefined && response.data !== undefined) {
// @ts-expect-error ...
setData(response.data) setData(response.data)
} }
}); });
@ -42,17 +53,27 @@ export function HistoryPage({state, setState}) {
const deleteHistory = async () => { const deleteHistory = async () => {
await client.DELETE("/api/Compiler") await client.DELETE("/api/Compiler")
.then((res) => { .then((res) => {
if(res.response.status === 204) { if (res.response.status === 204) {
enqueueSnackbar("删除缓存成功", {variant: "success", anchorOrigin: {vertical: 'bottom', horizontal: 'right'}}); enqueueSnackbar("删除缓存成功", {
variant: "success",
anchorOrigin: {vertical: 'bottom', horizontal: 'right'}
});
navigate('/'); navigate('/');
} else { } else {
enqueueSnackbar("删除缓存失败", {variant: "error", anchorOrigin: {vertical: 'bottom', horizontal: 'right'}}); enqueueSnackbar("删除缓存失败", {
variant: "error",
anchorOrigin: {vertical: 'bottom', horizontal: 'right'}
});
} }
} }
); );
} }
const onDeleteDialogClose = () => {
setDeleteDialog(false);
};
return <> return <>
<Drawer <Drawer
anchor={"right"} anchor={"right"}
@ -68,7 +89,6 @@ export function HistoryPage({state, setState}) {
return <Card key={index} return <Card key={index}
sx={{width: "100%", height: "auto"}}> sx={{width: "100%", height: "auto"}}>
<CardActionArea onClick={() => { <CardActionArea onClick={() => {
console.log(item.id)
navigate(`/${item.id}`) navigate(`/${item.id}`)
}}> }}>
<Box sx={{padding: "5%"}}> <Box sx={{padding: "5%"}}>
@ -83,9 +103,39 @@ export function HistoryPage({state, setState}) {
) )
} }
</Stack> </Stack>
<Button sx={{width: "20rem"}} onClick={deleteHistory} size={"large"}> <Button sx={{width: "20rem"}}
onClick={() => setDeleteDialog(true)}
size={"large"}>
</Button> </Button>
<Dialog
open={deleteDialog}
onClose={onDeleteDialogClose}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">
{"是否清除历史记录?"}
</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
!
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={onDeleteDialogClose} autoFocus></Button>
<Button onClick={() => {
deleteHistory().then(
() => {
onDeleteDialogClose();
toggleDrawerClose()
}
)
}}>
</Button>
</DialogActions>
</Dialog>
</Drawer> </Drawer>
</> </>
} }