simple-review-client/src/App.tsx

import { Alert, Collapse, Rating, Typography } from "@mui/material";
import "./App.css";
import ButtonRow, { ActionProps } from "./components/ButtonRow";
import ReviewField, { ReviewFieldProps } from "./components/ReviewField";
import { useState } from "react";

function App() {
  const [rating, setNewRating] = useState<number | null>(0);
  const [showAlert, changeAlert] = useState(false);
  const [alertText, changeAlertText] = useState("");

  const fields: ReviewFieldProps[] = [
    {
      name: "Name",
      dynamicState: useState("")
    },
    {
      name: "Title",
      dynamicState: useState("")
    },
    {
      name: "Content",
      dynamicState: useState("")
    }
  ];

  const clearValues = () => {
    fields.forEach((field) => {
      field.dynamicState[1]("");
    });

    setNewRating(null);
  }

  const showThenHide = async () => {
    const response = await fetch("http://localhost:8080/post", {
      method: "POST",
      body: JSON.stringify({
        rating: rating,
        username: fields[0].dynamicState[0],
        title: fields[1].dynamicState[0],
        content: fields[2].dynamicState[0]
      })
    }).then((response) => response.json());

    response.error ? changeAlertText(`${response.error.type}: ${response.error.message}`) : changeAlertText(`Success: ${response.message}`);

    if (showAlert) {
      return;
    }

    changeAlert(true);

    setTimeout(() => {
      changeAlert(false);
    }, 3000);
  }

  const buttons: ActionProps[] = [
    {
      name: "Clear",
      type: "outlined",
      action: clearValues
    },
    {
      name: "Submit",
      type: "contained",
      action: showThenHide
    },
  ];

  const alert = (
    <Alert severity="info">
      {alertText}
    </Alert>
  );

  return (
    <>
      <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} />

      <br />

      <ButtonRow buttons={buttons} />

      <br />

      <Collapse in={showAlert}>
        {alert}
      </Collapse>
    </>
  );
}

export default App;