Prettier

src/App.tsx

@@ -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);
       })
-    })
+      .catch((err) => {
-    .then(async (response) => {
+        changeAlertText(err.toString());
-      const result = await response.json();
 
-      changeInfoText(result.error ? `${result.error.type}: ${result.error.message}` : `Success: ${result.message}`);
+        changeAlert(true);
 
-      changeInfo(true);
+        setTimeout(() => {
-
+          changeAlert(false);
-      setTimeout(() => {
+        }, 2500);
-        changeInfo(false);
+      });
-      }, 2000);
+  };
-    })
-    .catch((err) => {
-      changeAlertText(err.toString());
-      
-      changeAlert(true);
-
-      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 = (
+  const info = <Alert severity="info">{infoText}</Alert>;
-    <Alert severity="info">
-      {infoText}
-    </Alert>
-  );
 
-  const alert = (
+  const alert = <Alert severity="error">{alertText}</Alert>;
-    <Alert severity="error">
-      {alertText}
-    </Alert>
-  );
 
   return (
     <>
-      <Typography variant="h3">
+      <Typography variant="h3">Simple Review Client</Typography>
-        Simple Review Client
-      </Typography>
 
       <br />
 
-      <Rating 
+      <Rating
         name="review-rating"
         precision={0.5}
         size="large"

src/components/ButtonRow.tsx

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

src/components/ReviewField.tsx

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