update react

src/app/input-form.tsx

@@ -0,0 +1,110 @@
+import {useState} from 'react';
+import ValidatingInputNumberField from "./validating-input-number-field.tsx";
+import {actionLoadedMaze, actionLoadingFailed, actionStartedLoading} from "./state/action.ts";
+import styles from "./input-form.module.css";
+import "./input-form.css";
+
+export default function InputForm({state, dispatch}) {
+    const [width, setWidth] = useState(10);
+    const [height, setHeight] = useState(10);
+    const [id, setId] = useState(null as number);
+    const [algorithm, setAlgorithm] = useState('wilson');
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        dispatch(actionStartedLoading());
+        const url = `https://manuel.friedli.info/labyrinth/create/json?w=${width}&h=${height}&id=${id || ''}&algorithm=${algorithm}`;
+        fetch(url)
+            .then(response => response.json())
+            // .then(result => new Promise(resolve => setTimeout(resolve, 600, result)))
+            .then(result => {
+                dispatch(actionLoadedMaze(result));
+            })
+            .catch(reason => {
+                console.error("Failed to fetch maze data.", reason);
+                dispatch(actionLoadingFailed(reason));
+            });
+    };
+    const validateWidthHeightInput = value => {
+        if (isNaN(value) || "" === value || (Math.floor(value) !== Number(value))) {
+            return {
+                valid: false,
+                message: "Must be an integer greater than 1.",
+                value
+            };
+        }
+        if (value < 1) {
+            return {
+                valid: false,
+                message: "Must be greater than 1.",
+                value
+            };
+        }
+        return {
+            valid: true,
+            value
+        };
+    };
+    const validateIdInput = value => {
+        // FIXME doesn't handle strings with characters correctly (e.g. "asdf" yields an empty value, due to "type=number").
+        if (isNaN(value) || ("" !== value && ((Math.floor(value) !== Number(value))))) {
+            return {
+                valid: false,
+                message: "Must be empty or an integer",
+                value
+            };
+        }
+        return {
+            valid: true,
+            value
+        }
+    };
+    return (
+        <form onSubmit={handleSubmit}>
+            <div className={styles.inputform}>
+                <ValidatingInputNumberField id={"width"}
+                                            label={"Width"}
+                                            value={width}
+                                            constraints={{
+                                                min: 2
+                                            }}
+                                            validatorFn={validateWidthHeightInput}
+                                            disabled={state.loading}
+                                            onChange={setWidth}
+                />
+                <ValidatingInputNumberField id={"height"}
+                                            label={"Height"}
+                                            value={height}
+                                            constraints={{
+                                                min: 2
+                                            }}
+                                            validatorFn={validateWidthHeightInput}
+                                            disabled={state.loading}
+                                            onChange={setHeight}
+                />
+                <ValidatingInputNumberField id={"id"}
+                                            label={"ID (optional)"}
+                                            value={id}
+                                            validatorFn={validateIdInput}
+                                            disabled={state.loading}
+                                            onChange={setId}
+                />
+                <label htmlFor="algorithm">Algorithm:</label>
+                <select id={"algorithm"}
+                        value={algorithm}
+                        disabled={state.loading}
+                        onChange={e => setAlgorithm(e.target.value)}>
+                    <option value="wilson">Wilson</option>
+                    <option value="random">Random Depth First</option>
+                </select>
+            </div>
+            <button type={"submit"}
+                    disabled={state.loading
+                        || isNaN(width)
+                        || isNaN(height)
+                    }
+                    className={styles.submitbutton}>{state.loading ? "Loading ..." : "Create Maze!"}
+            </button>
+        </form>
+    );
+}