Make endpoint configurable

src/App.tsx

@@ -1,8 +1,10 @@
-import { Alert, Grow, Rating, Typography } from "@mui/material";
+import { Alert, Grow, IconButton, Rating, Typography } from "@mui/material";
+import SettingsIcon from "@mui/icons-material/Settings";
 import "./App.css";
 import ButtonRow, { ActionProps } from "./components/ButtonRow";
 import ReviewField, { ReviewFieldProps } from "./components/ReviewField";
 import { useState } from "react";
+import EndpointDialog from "./components/EndpointDialong";
 
 function App() {
   const [rating, setNewRating] = useState<number | null>(0);
@@ -37,7 +39,7 @@ function App() {
   };
 
   const showThenHide = async () => {
-    await fetch("http://localhost:8080/post", {
+    await fetch(endpoint, {
       method: "POST",
       body: JSON.stringify({
         rating: rating,
@@ -88,41 +90,50 @@ function App() {
   const info = <Alert severity="info">{infoText}</Alert>;
 
   const alert = <Alert severity="error">{alertText}</Alert>;
+  const [endpoint, setEndpoint] = useState("");
 
   return (
     <>
-      <Typography variant="h3">Simple Review Client</Typography>
+      <div id="settings">
+        <EndpointDialog endpoint={[endpoint, setEndpoint]} />
+      </div>
 
-      <br />
+      <div id="app">
+        <Typography variant="h3">Simple Review Client</Typography>
 
-      <Rating
-        name="review-rating"
-        precision={0.5}
-        size="large"
-        value={rating}
-        onChange={(event, newRating) => {
-          setNewRating(newRating);
-        }}
-      />
+        <br />
 
-      <br />
-      <br />
+        <Rating
+          name="review-rating"
+          precision={0.5}
+          size="large"
+          value={rating}
+          onChange={(event, newRating) => {
+            setNewRating(newRating);
+          }}
+        />
 
-      <ReviewField fields={fields} />
+        <br />
+        <br />
 
-      <br />
+        <ReviewField fields={fields} />
 
-      <ButtonRow buttons={buttons} />
+        <br />
 
-      <br />
+        <ButtonRow buttons={buttons} />
 
-      <Grow in={showAlert} mountOnEnter unmountOnExit>
-        {alert}
-      </Grow>
+        <br />
 
-      <Grow in={showInfo} mountOnEnter unmountOnExit>
-        {info}
-      </Grow>
+        <div id="alert-box">
+          <Grow in={showAlert} mountOnEnter unmountOnExit>
+            {alert}
+          </Grow>
+
+          <Grow in={showInfo} mountOnEnter unmountOnExit>
+            {info}
+          </Grow>
+        </div>
+      </div>
     </>
   );
 }

src/components/EndpointDialong.tsx

@@ -0,0 +1,91 @@
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  IconButton,
+  TextField,
+} from "@mui/material";
+import SettingsIcon from "@mui/icons-material/Settings";
+import React, { FormEvent, useState } from "react";
+
+export interface EndpointDialogProps {
+  endpoint: [string, React.Dispatch<React.SetStateAction<string>>];
+}
+
+const EndpointDialog = ({ endpoint }: EndpointDialogProps) => {
+  const [open, setOpen] = useState(false);
+  const [error, setError] = useState(false);
+  const [errorText, setErrorText] = useState("");
+
+  const openSettings = () => {
+    setOpen(true);
+  };
+
+  const closeSettings = () => {
+    setOpen(false);
+
+    setError(false);
+    setErrorText("");
+  };
+
+  const setEndpoint = (newEndpoint: any) => {
+    endpoint[1](newEndpoint);
+  };
+
+  return (
+    <>
+      <IconButton aria-label="settings" onClick={openSettings}>
+        <SettingsIcon />
+      </IconButton>
+
+      <Dialog
+        open={open}
+        onClose={closeSettings}
+        PaperProps={{
+          component: "form",
+          onSubmit: (event: FormEvent<HTMLFormElement>) => {
+            setError(false);
+            setErrorText("");
+
+            event.preventDefault();
+            const formData = new FormData(event.currentTarget);
+            const json = Object.fromEntries(formData.entries());
+
+            // @ts-ignore
+            if (
+              json.endpointBox.includes("http") ||
+              json.endpointBox.includes("https")
+            ) {
+              setEndpoint(json.endpointBox);
+              closeSettings();
+            } else {
+              setError(true);
+              setErrorText("Please enter a valid endpoint.");
+            }
+          },
+        }}
+      >
+        <DialogTitle>Endpoint URL</DialogTitle>
+        <DialogContent>
+          <TextField
+            required
+            name="endpointBox"
+            type="endpointBox"
+            placeholder={endpoint[0]}
+            error={error}
+            helperText={errorText}
+          />
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={closeSettings}>Close</Button>
+
+          <Button type="submit">Set</Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  );
+};
+
+export default EndpointDialog;

src/index.css

@@ -16,11 +16,25 @@
 body {
   margin: 0;
   display: flex;
+}
+
+#app {
+  display: flexbox;
   place-items: center;
   min-width: 320px;
   min-height: 100vh;
 }
 
+#settings {
+  text-align: right;
+}
+
+#alert-box {
+  text-align: center;
+  height: 50px;
+  min-width: 600px;
+}
+
 @media (prefers-color-scheme: light) {
   :root {
     /*color: #213547;*/