2024-08-28 23:58:32 -04:00
|
|
|
import { Alert, Grow, Rating, Slide, Typography } from "@mui/material";
|
2024-08-28 12:36:52 -04:00
|
|
|
import "./App.css";
|
|
|
|
import ButtonRow, { ActionProps } from "./components/ButtonRow";
|
2024-08-28 23:19:21 -04:00
|
|
|
import ReviewField, { ReviewFieldProps } from "./components/ReviewField";
|
|
|
|
import { useState } from "react";
|
2024-08-28 12:36:52 -04:00
|
|
|
|
|
|
|
function App() {
|
2024-08-28 23:19:21 -04:00
|
|
|
const [rating, setNewRating] = useState<number | null>(0);
|
|
|
|
const [showAlert, changeAlert] = useState(false);
|
|
|
|
const [alertText, changeAlertText] = useState("");
|
|
|
|
|
2024-08-28 23:58:32 -04:00
|
|
|
const [showInfo, changeInfo] = useState(false);
|
|
|
|
const [infoText, changeInfoText] = useState("");
|
|
|
|
|
2024-08-28 23:19:21 -04:00
|
|
|
const fields: ReviewFieldProps[] = [
|
|
|
|
{
|
|
|
|
name: "Name",
|
|
|
|
dynamicState: useState("")
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: "Title",
|
|
|
|
dynamicState: useState("")
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: "Content",
|
2024-08-29 16:59:56 -04:00
|
|
|
dynamicState: useState(""),
|
|
|
|
expandable: true
|
2024-08-28 23:19:21 -04:00
|
|
|
}
|
|
|
|
];
|
|
|
|
|
|
|
|
const clearValues = () => {
|
|
|
|
fields.forEach((field) => {
|
|
|
|
field.dynamicState[1]("");
|
|
|
|
});
|
|
|
|
|
|
|
|
setNewRating(null);
|
|
|
|
}
|
|
|
|
|
|
|
|
const showThenHide = async () => {
|
2024-08-28 23:30:07 -04:00
|
|
|
await fetch("http://localhost:8080/post", {
|
2024-08-28 23:19:21 -04:00
|
|
|
method: "POST",
|
|
|
|
body: JSON.stringify({
|
|
|
|
rating: rating,
|
|
|
|
username: fields[0].dynamicState[0],
|
|
|
|
title: fields[1].dynamicState[0],
|
|
|
|
content: fields[2].dynamicState[0]
|
|
|
|
})
|
2024-08-28 23:30:07 -04:00
|
|
|
})
|
2024-08-28 23:58:32 -04:00
|
|
|
.then(async (response) => {
|
|
|
|
const result = await response.json();
|
2024-08-28 23:19:21 -04:00
|
|
|
|
2024-08-28 23:58:32 -04:00
|
|
|
changeInfoText(result.error ? `${result.error.type}: ${result.error.message}` : `Success: ${result.message}`);
|
2024-08-28 23:19:21 -04:00
|
|
|
|
2024-08-28 23:58:32 -04:00
|
|
|
changeInfo(true);
|
2024-08-28 23:19:21 -04:00
|
|
|
|
2024-08-28 23:58:32 -04:00
|
|
|
setTimeout(() => {
|
|
|
|
changeInfo(false);
|
|
|
|
}, 2000);
|
|
|
|
})
|
|
|
|
.catch((err) => {
|
|
|
|
changeAlertText(err.toString());
|
|
|
|
|
2024-08-28 23:30:07 -04:00
|
|
|
changeAlert(true);
|
2024-08-28 23:19:21 -04:00
|
|
|
|
2024-08-28 23:30:07 -04:00
|
|
|
setTimeout(() => {
|
|
|
|
changeAlert(false);
|
|
|
|
}, 2500);
|
2024-08-28 23:58:32 -04:00
|
|
|
});
|
2024-08-28 23:19:21 -04:00
|
|
|
}
|
|
|
|
|
2024-08-28 12:36:52 -04:00
|
|
|
const buttons: ActionProps[] = [
|
|
|
|
{
|
2024-08-28 23:19:21 -04:00
|
|
|
name: "Clear",
|
2024-08-28 12:36:52 -04:00
|
|
|
type: "outlined",
|
2024-08-28 23:19:21 -04:00
|
|
|
action: clearValues
|
2024-08-28 12:36:52 -04:00
|
|
|
},
|
|
|
|
{
|
|
|
|
name: "Submit",
|
|
|
|
type: "contained",
|
2024-08-28 23:19:21 -04:00
|
|
|
action: showThenHide
|
2024-08-28 12:36:52 -04:00
|
|
|
},
|
|
|
|
];
|
|
|
|
|
2024-08-28 23:58:32 -04:00
|
|
|
const info = (
|
2024-08-28 23:19:21 -04:00
|
|
|
<Alert severity="info">
|
2024-08-28 23:58:32 -04:00
|
|
|
{infoText}
|
|
|
|
</Alert>
|
|
|
|
);
|
|
|
|
|
|
|
|
const alert = (
|
|
|
|
<Alert severity="error">
|
2024-08-28 23:19:21 -04:00
|
|
|
{alertText}
|
|
|
|
</Alert>
|
|
|
|
);
|
|
|
|
|
2024-08-28 12:36:52 -04:00
|
|
|
return (
|
|
|
|
<>
|
2024-08-28 23:19:21 -04:00
|
|
|
<Typography variant="h3">
|
|
|
|
Simple Review Client
|
|
|
|
</Typography>
|
|
|
|
|
|
|
|
<br />
|
|
|
|
|
|
|
|
<Rating
|
|
|
|
name="review-rating"
|
|
|
|
precision={0.5}
|
|
|
|
size="large"
|
|
|
|
value={rating}
|
|
|
|
onChange={(event, newRating) => {
|
|
|
|
setNewRating(newRating);
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
|
|
|
|
<br />
|
|
|
|
<br />
|
|
|
|
|
|
|
|
<ReviewField fields={fields} />
|
2024-08-28 12:36:52 -04:00
|
|
|
|
|
|
|
<br />
|
|
|
|
|
|
|
|
<ButtonRow buttons={buttons} />
|
2024-08-28 23:19:21 -04:00
|
|
|
|
|
|
|
<br />
|
|
|
|
|
2024-08-28 23:58:32 -04:00
|
|
|
<Grow in={showAlert} mountOnEnter unmountOnExit>
|
2024-08-28 23:19:21 -04:00
|
|
|
{alert}
|
2024-08-28 23:36:16 -04:00
|
|
|
</Grow>
|
2024-08-28 23:58:32 -04:00
|
|
|
|
|
|
|
<Grow in={showInfo} mountOnEnter unmountOnExit>
|
|
|
|
{info}
|
|
|
|
</Grow>
|
2024-08-28 12:36:52 -04:00
|
|
|
</>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
export default App;
|