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,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 = (
+  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 />
 

src/components/ReviewField.tsx

@@ -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>
   );