Refactor

src/app/input-form.tsx

@@ -1,123 +0,0 @@
-import {ActionDispatch, FormEvent, useState} from 'react';
-import {
-    Action,
-    actionLoadedMaze,
-    actionLoadingFailed,
-    actionStartedLoading,
-    actionToggledShowSolution
-} from "./state/action.ts";
-import styles from "./input-form.module.scss";
-import "./input-form.scss";
-import {State} from "@/app/state/state.ts";
-import {
-    ValidatingInputNumberField,
-    ValidatingInputRegExpField,
-    ValidatorFunction
-} from "@/app/validating-input-field.tsx";
-
-export default function InputForm({state, dispatch}: {
-    state: State,
-    dispatch: ActionDispatch<[Action]>
-}) {
-    const [width, setWidth] = useState(10);
-    const [height, setHeight] = useState(10);
-    const [id, setId] = useState<string>();
-    const [algorithm, setAlgorithm] = useState('wilson');
-
-    const handleSubmit = (e: FormEvent) => {
-        e.preventDefault();
-        dispatch(actionStartedLoading());
-        dispatch(actionToggledShowSolution(false));
-        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 => {
-                dispatch(actionLoadedMaze(result));
-            })
-            .catch(reason => {
-                console.error("Failed to fetch maze data.", reason);
-                dispatch(actionLoadingFailed(reason));
-            });
-    };
-    const validateSizeInput: ValidatorFunction<string, number> = value => {
-        const numberValue = Number(value);
-        if (isNaN(numberValue) || "" === value || (Math.floor(numberValue) !== numberValue)) {
-            return {
-                valid: false,
-                message: "Must be an integer greater than 1."
-            };
-        }
-        if (numberValue < 1) {
-            return {
-                valid: false,
-                message: "Must be greater than 1."
-            };
-        }
-        return {
-            valid: true,
-            value: numberValue
-        };
-    };
-    return (
-        <form onSubmit={handleSubmit}>
-            <div className={styles.inputform}>
-                <ValidatingInputNumberField id={"width"}
-                                            label={"Width"}
-                                            value={width}
-                                            constraints={{
-                                                min: 2
-                                            }}
-                                            validatorFn={validateSizeInput}
-                                            disabled={state.loading}
-                                            onChange={setWidth}
-                />
-                <ValidatingInputNumberField id={"height"}
-                                            label={"Height"}
-                                            value={height}
-                                            constraints={{
-                                                min: 2
-                                            }}
-                                            validatorFn={validateSizeInput}
-                                            disabled={state.loading}
-                                            onChange={setHeight}
-                />
-                {/*<ValidatingInputBigIntField id={"id"}*/}
-                {/*                            label={"ID (optional)"}*/}
-                {/*                            value={id}*/}
-                {/*                            validatorFn={validateIdInput}*/}
-                {/*                            disabled={state.loading}*/}
-                {/*                            onChange={setId}*/}
-                {/*                            constraints={{*/}
-                {/*                                min: -9223372036854775808n,*/}
-                {/*                                max: 9223372036854775807n*/}
-                {/*                            }}*/}
-                {/*/>*/}
-                <ValidatingInputRegExpField id={"id"}
-                                            label={"ID (optional)"}
-                                            value={id}
-                                            disabled={state.loading}
-                                            onChange={setId}
-                                            constraints={[
-                                                /^[0-9a-fA-F]{0,16}$/
-                                            ]}
-                                            placeholder={"Hex-Number (without 0x prefix)"}
-                />
-                <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>
-    );
-}