diff --git a/src/App.tsx b/src/App.tsx index d025d7a..66b2ebf 100644 --- a/src/App.tsx +++ b/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 = {infoText}; const alert = {alertText}; - 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); }} /> diff --git a/src/components/EndpointDialong.tsx b/src/components/EndpointDialong.tsx index a8df60f..7f2542f 100644 --- a/src/components/EndpointDialong.tsx +++ b/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>]; @@ -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) => { ) => { - 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."); - } - }, - }} > Endpoint URL @@ -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) => { - +