Make endpoint configurable
This commit is contained in:
parent
e13f43609b
commit
732dc82823
61
src/App.tsx
61
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 "./App.css";
|
||||||
import ButtonRow, { ActionProps } from "./components/ButtonRow";
|
import ButtonRow, { ActionProps } from "./components/ButtonRow";
|
||||||
import ReviewField, { ReviewFieldProps } from "./components/ReviewField";
|
import ReviewField, { ReviewFieldProps } from "./components/ReviewField";
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
|
import EndpointDialog from "./components/EndpointDialong";
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
const [rating, setNewRating] = useState<number | null>(0);
|
const [rating, setNewRating] = useState<number | null>(0);
|
||||||
|
@ -37,7 +39,7 @@ function App() {
|
||||||
};
|
};
|
||||||
|
|
||||||
const showThenHide = async () => {
|
const showThenHide = async () => {
|
||||||
await fetch("http://localhost:8080/post", {
|
await fetch(endpoint, {
|
||||||
method: "POST",
|
method: "POST",
|
||||||
body: JSON.stringify({
|
body: JSON.stringify({
|
||||||
rating: rating,
|
rating: rating,
|
||||||
|
@ -88,41 +90,50 @@ function App() {
|
||||||
const info = <Alert severity="info">{infoText}</Alert>;
|
const info = <Alert severity="info">{infoText}</Alert>;
|
||||||
|
|
||||||
const alert = <Alert severity="error">{alertText}</Alert>;
|
const alert = <Alert severity="error">{alertText}</Alert>;
|
||||||
|
const [endpoint, setEndpoint] = useState("");
|
||||||
|
|
||||||
return (
|
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
|
<br />
|
||||||
name="review-rating"
|
|
||||||
precision={0.5}
|
|
||||||
size="large"
|
|
||||||
value={rating}
|
|
||||||
onChange={(event, newRating) => {
|
|
||||||
setNewRating(newRating);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<br />
|
<Rating
|
||||||
<br />
|
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>
|
<br />
|
||||||
{alert}
|
|
||||||
</Grow>
|
|
||||||
|
|
||||||
<Grow in={showInfo} mountOnEnter unmountOnExit>
|
<div id="alert-box">
|
||||||
{info}
|
<Grow in={showAlert} mountOnEnter unmountOnExit>
|
||||||
</Grow>
|
{alert}
|
||||||
|
</Grow>
|
||||||
|
|
||||||
|
<Grow in={showInfo} mountOnEnter unmountOnExit>
|
||||||
|
{info}
|
||||||
|
</Grow>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
91
src/components/EndpointDialong.tsx
Normal file
91
src/components/EndpointDialong.tsx
Normal file
|
@ -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;
|
|
@ -16,11 +16,25 @@
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
#app {
|
||||||
|
display: flexbox;
|
||||||
place-items: center;
|
place-items: center;
|
||||||
min-width: 320px;
|
min-width: 320px;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#settings {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
#alert-box {
|
||||||
|
text-align: center;
|
||||||
|
height: 50px;
|
||||||
|
min-width: 600px;
|
||||||
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: light) {
|
@media (prefers-color-scheme: light) {
|
||||||
:root {
|
:root {
|
||||||
/*color: #213547;*/
|
/*color: #213547;*/
|
||||||
|
|
Loading…
Reference in a new issue