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,65 +43,59 @@ 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}`,
);
changeInfo(true);
setTimeout(() => {
changeInfo(false);
}, 2000);
})
})
.then(async (response) => {
const result = await response.json();
.catch((err) => {
changeAlertText(err.toString());
changeInfoText(result.error ? `${result.error.type}: ${result.error.message}` : `Success: ${result.message}`);
changeAlert(true);
changeInfo(true);
setTimeout(() => {
changeInfo(false);
}, 2000);
})
.catch((err) => {
changeAlertText(err.toString());
changeAlert(true);
setTimeout(() => {
changeAlert(false);
}, 2500);
});
}
setTimeout(() => {
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 />
<Rating
<Rating
name="review-rating"
precision={0.5}
size="large"

View file

@ -15,8 +15,8 @@ const ButtonRow = ({ buttons }: ActionButtonProps) => {
return (
<Grid2 container spacing={2}>
{buttons.map((button) => {
return (
<Button
return (
<Button
key={button.name}
variant={button.type}
onClick={button.action}

View file

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