This commit is contained in:
powermaker450 2024-08-29 21:00:20 +00:00
parent 4b9ccfd8cc
commit 6db0a17851
3 changed files with 56 additions and 65 deletions

View file

@ -1,4 +1,4 @@
import { Alert, Grow, Rating, Slide, Typography } from "@mui/material";
import { Alert, Grow, Rating, Typography } from "@mui/material";
import "./App.css";
import ButtonRow, { ActionProps } from "./components/ButtonRow";
import ReviewField, { ReviewFieldProps } from "./components/ReviewField";
@ -15,17 +15,17 @@ function App() {
const fields: ReviewFieldProps[] = [
{
name: "Name",
dynamicState: useState("")
dynamicState: useState(""),
},
{
name: "Title",
dynamicState: useState("")
dynamicState: useState(""),
},
{
name: "Content",
dynamicState: useState(""),
expandable: true
}
expandable: true,
},
];
const clearValues = () => {
@ -34,7 +34,7 @@ function App() {
});
setNewRating(null);
}
};
const showThenHide = async () => {
await fetch("http://localhost:8080/post", {
@ -43,13 +43,17 @@ function App() {
rating: rating,
username: fields[0].dynamicState[0],
title: fields[1].dynamicState[0],
content: fields[2].dynamicState[0]
})
content: fields[2].dynamicState[0],
}),
})
.then(async (response) => {
const result = await response.json();
changeInfoText(result.error ? `${result.error.type}: ${result.error.message}` : `Success: ${result.message}`);
changeInfoText(
result.error
? `${result.error.type}: ${result.error.message}`
: `Success: ${result.message}`,
);
changeInfo(true);
@ -66,38 +70,28 @@ function App() {
changeAlert(false);
}, 2500);
});
}
};
const buttons: ActionProps[] = [
{
name: "Clear",
type: "outlined",
action: clearValues
action: clearValues,
},
{
name: "Submit",
type: "contained",
action: showThenHide
action: showThenHide,
},
];
const info = (
<Alert severity="info">
{infoText}
</Alert>
);
const info = <Alert severity="info">{infoText}</Alert>;
const alert = (
<Alert severity="error">
{alertText}
</Alert>
);
const alert = <Alert severity="error">{alertText}</Alert>;
return (
<>
<Typography variant="h3">
Simple Review Client
</Typography>
<Typography variant="h3">Simple Review Client</Typography>
<br />

View file

@ -14,12 +14,10 @@ interface ReviewFieldOpts {
}
const ReviewField = ({ fields }: ReviewFieldOpts) => {
return (
<Box component="form" noValidate autoComplete="off">
<Stack spacing={1}>
{
fields.map((field) => {
{fields.map((field) => {
return (
<TextField
id={field.name}
@ -27,16 +25,15 @@ const ReviewField = ({ fields }: ReviewFieldOpts) => {
label={field.name}
value={field.dynamicState[0]}
multiline={field.expandable ?? false}
onChange={(({ target }) => {
onChange={({ target }) => {
field.dynamicState[1](target.value);
})}
}}
variant={field.variant ?? "outlined"}
helperText={field.help}
autoComplete="off"
/>
)
})
}
);
})}
</Stack>
</Box>
);