Fix endpoint setting stuff

src/App.tsx

@@ -1,5 +1,4 @@
-import { Alert, Grow, IconButton, Rating, Typography } from "@mui/material";
-import SettingsIcon from "@mui/icons-material/Settings";
+import { Alert, Grow, Rating, Typography } from "@mui/material";
 import "./App.css";
 import ButtonRow, { ActionProps } from "./components/ButtonRow";
 import ReviewField, { ReviewFieldProps } from "./components/ReviewField";
@@ -39,7 +38,7 @@ function App() {
   };
 
   const showThenHide = async () => {
-    await fetch(endpoint, {
+    await fetch(endpoint ? `${endpoint}/post` : "http://localhost:8080/post", {
       method: "POST",
       body: JSON.stringify({
         rating: rating,
@@ -90,7 +89,7 @@ function App() {
   const info = <Alert severity="info">{infoText}</Alert>;
 
   const alert = <Alert severity="error">{alertText}</Alert>;
-  const [endpoint, setEndpoint] = useState("");
+  const [endpoint, setEndpoint] = useState(JSON.parse(localStorage.getItem("apiEndpoint")!) || "");
 
   return (
     <>
@@ -109,6 +108,7 @@ function App() {
           size="large"
           value={rating}
           onChange={(event, newRating) => {
+            event
             setNewRating(newRating);
           }}
         />

src/components/EndpointDialong.tsx

@@ -8,7 +8,7 @@ import {
   TextField,
 } from "@mui/material";
 import SettingsIcon from "@mui/icons-material/Settings";
-import React, { FormEvent, useState } from "react";
+import React, { useState } from "react";
 
 export interface EndpointDialogProps {
   endpoint: [string, React.Dispatch<React.SetStateAction<string>>];
@@ -30,9 +30,19 @@ const EndpointDialog = ({ endpoint }: EndpointDialogProps) => {
     setErrorText("");
   };
 
-  const setEndpoint = (newEndpoint: any) => {
-    endpoint[1](newEndpoint);
-  };
+  const showTheError = () => {
+    setErrorText("Please enter a valid URL.");
+    setError(true);
+  }
+  
+  const closeTheError = () => {
+    setErrorText("");
+    setError(false);
+  }
+
+  const isValidEndpoint = () => {
+    return endpoint[0].startsWith("http://") || endpoint[0].startsWith("https://");
+  }
 
   return (
     <>
@@ -43,29 +53,6 @@ const EndpointDialog = ({ endpoint }: EndpointDialogProps) => {
       <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>
@@ -73,7 +60,15 @@ const EndpointDialog = ({ endpoint }: EndpointDialogProps) => {
             required
             name="endpointBox"
             type="endpointBox"
-            placeholder={endpoint[0]}
+            value={endpoint[0]}
+            onChange={({ target }) => {
+              endpoint[1](target.value);
+
+              isValidEndpoint()
+                ? closeTheError()
+                : showTheError();
+            }}
+            placeholder={!endpoint[0] ? "http://localhost:8080" : ""}
             error={error}
             helperText={errorText}
           />
@@ -81,7 +76,11 @@ const EndpointDialog = ({ endpoint }: EndpointDialogProps) => {
         <DialogActions>
           <Button onClick={closeSettings}>Close</Button>
 
-          <Button type="submit">Set</Button>
+          <Button onClick={() => {
+            isValidEndpoint()
+              ? closeSettings()! && closeTheError()
+              : showTheError();
+          }}>Set</Button>
         </DialogActions>
       </Dialog>
     </>