port to react and better error handling in backend

1 files changed, 33 insertions, 0 deletions

diff --git a/client/src/Components/Form.js b/client/src/Components/Form.js
new file mode 100644
index 0000000..4d10f98
--- /dev/null
+++ b/client/src/Components/Form.js
@@ -0,0 +1,33 @@
+import React, {useState} from 'react';
+import Button from './Button';
+import isURL from "validator/lib/isURL";
+
+function Form(props) {
+    const [state, setState] = useState({value: '', valid: false});
+
+    const handleSubmit = () => {
+        if (state.valid) {
+            props.addRequest(state.value);
+        }
+    };
+
+    const handleChange = (e) => {
+        const userInput = e.target.value;
+        const valid = isURL('https://' + userInput);
+        setState({value: userInput, valid: valid});
+    };
+
+    return (
+        <form id="form" onSubmit={(e) => e.preventDefault()}>
+            <div className={"input-group" + (state.valid ? "" : " disabled")}>
+                <div className={"input-container" + (state.valid ? "" : " border-r-none")}>
+                    <span className="input-field-text">https://</span>
+                    <input className="input-field" required onChange={handleChange}/>
+                </div>
+                <Button valid={state.valid} submit={handleSubmit}/>
+            </div>
+        </form>
+    )
+}
+
+export default Form;
\ No newline at end of file