Ajout HOC WithForm

frontend/src/components/UserForm.js

@@ -1,118 +1,77 @@
-import { useState, useEffect } from 'react';
+import { useEffect } from 'react';
+import { WithForm } from './WithForm';
 
-const defaultData = {
+export function UserForm({ form, onSubmit }) {
- username: '',
- password: '',
- passwordVerification: ''
-};
-
-const defaultErrors = {
-  username: { hasError: false, message: '' },
-  password: { hasError: false, message: '' },
-  passwordVerification: { hasError: false, message: '' },
-};
-
-export function UserForm({ data = defaultData, errors = defaultErrors, onSubmit }) {
-
-	const validators = {
-		username: (value, formData) => {
-			if (value === "") return  { hasError: true, message: 'Le nom d\'utilisateur ne peut pas être vide !' }
-			return { hasError: false, message: '' };
-		},
-		password: (value, formData) => {
-			if (value === "") return  { hasError: true, message: 'Le mot de passe ne peut pas être vide !' }
-			if (value !== formData.passwordVerification) return  { hasError: true, message: 'Vos deux mots de passe sont différents !' }
-			return { hasError: false, message: '' };
-		},
-		passwordVerification: (value, formData) => {
-			if (value !== formData.password) return  { hasError: true, message: 'Vos deux mots de passe sont différents !' }
-			return { hasError: false, message: '' };
-		}
-	};
-	
-	const [ formErrors, setFormErrors ] = useState({ ...defaultErrors, ...errors });
-	const [ formData, setFormData ] = useState({ ...defaultData, ...data });
 
 	useEffect(() => {
-		setFormErrors(formErrors => {
+		console.log(form.valid, form.submitted);
-			return { ...formErrors, ...errors };
+		if (form.valid && form.submitted) onSubmit(form.data);
-		});
+	}, [form.valid, form.submitted]);
-	}, [errors]);
-
-	useEffect(() => {
-		setFormData(formData => {
-			return { ...formData, ...data };
-		});
-	}, [data]);
-
-
-	const hasFormErrors = Object.values(formErrors).reduce((hasFormErrors, fieldError) => {
-		return hasFormErrors || fieldError.hasError;
-	}, false);
-	const { username, password, passwordVerification } = formData;
-	
-	const onInputChange = evt => {
-		const name = evt.target.name;
-		const value = evt.target.value;
-		setFormData(formData => {
-			return { ...formData, [name]: value };
-		});
-	}
-
-	useEffect(() => {
-		Object.keys(formData).forEach(name => {
-			if (typeof validators[name] !== 'function') return;
-			const value = formData[name];
-			const result = validators[name](value, formData);
-			setFormErrors(formErrors => {
-				return { ...formErrors, [name]: result };
-			});
-		});
-	}, [formData]);
-
-	const dispatchSubmit = evt => {
-		evt.preventDefault();
-		if (hasFormErrors) return;
-		if (typeof onSubmit === 'function') onSubmit(formData); 
-	};
 
 	return (
-		<form className="form" onSubmit={dispatchSubmit}>
+		<form className="form" onSubmit={form.onSubmit}>
 			<div className="field">
 				<label className="label" htmlFor="username">Nom d'utilisateur</label>
 				<div className="control">
-					<input className={`input ${formErrors.username.hasError ? 'is-danger' : ''}`} type="text" name="username" value={username} onChange={onInputChange} />
+					<input className={`input ${form.hasError('username') ? 'is-danger' : ''}`} type="text" 
+						name="username" value={form.field('username', '')}
+						onChange={form.onChange('username')} />
 				</div>
 			{ 
-				formErrors.username.hasError ?
+				form.hasError('username') ?
-				<p className="help is-danger">{formErrors.username.message}</p>
+				<p className="help is-danger">{form.error('username')}</p>
 				: null
 			}
 			</div>
 			<div className="field">
 				<label className="label" htmlFor="password">Mot de passe</label>
 				<div className="control">
-					<input  className={`input ${formErrors.password.hasError ? 'is-danger' : ''}`} type="password" name="password" autoComplete='new-password' value={password} onChange={onInputChange} />
+					<input  className={`input ${form.hasError('password') ? 'is-danger' : ''}`} 
+						type="password" name="password" 
+						autoComplete='new-password' 
+						value={form.field('password', '')} 
+						onChange={form.onChange('password')} />
 				</div>
 			{ 
-				formErrors.password.hasError ?
+				form.hasError('password') ?
-				<p className="help is-danger">{formErrors.password.message}</p>
+				<p className="help is-danger">{form.error('password')}</p>
 				: null
 			}
 			</div>
 			<div className="field">
 				<label className="label" htmlFor="passwordVerification">Mot de passe (vérification)</label>
 				<div className="control">
-					<input  className={`input ${formErrors.passwordVerification.hasError ? 'is-danger' : ''}`} type="password" name="passwordVerification" autoComplete='new-password' value={passwordVerification} 
+					<input  className={`input ${form.hasError('passwordVerification') ? 'is-danger' : ''}`} 
-						onChange={onInputChange} />
+						type="password" name="passwordVerification" 
+						autoComplete='new-password' 
+						value={form.field('passwordVerification', '')} 
+						onChange={form.onChange('passwordVerification')} />
 				</div>
 			{ 
-				formErrors.passwordVerification.hasError ?
+				form.hasError('passwordVerification') ?
-				<p className="help is-danger">{formErrors.passwordVerification.message}</p>
+				<p className="help is-danger">{form.error('passwordVerification')}</p>
 				: null
 			}
 			</div>
-			<button type="submit" disabled={hasFormErrors} className="button">Envoyer</button>
+			<button type="submit" disabled={!form.valid} className="button">Envoyer</button>
 		</form>
 	);
 };
+
+const validators = {
+	username: (value, formData) => {
+		if (!value) return  { hasError: true, message: 'Le nom d\'utilisateur ne peut pas être vide !' }
+		return { hasError: false, message: '' };
+	},
+	password: (value, formData) => {
+		if (!value) return  { hasError: true, message: 'Le mot de passe ne peut pas être vide !' }
+		if (value !== formData.passwordVerification) return  { hasError: true, message: 'Vos deux mots de passe sont différents !' }
+		return { hasError: false, message: '' };
+	},
+	passwordVerification: (value, formData) => {
+		if (value !== formData.password) return  { hasError: true, message: 'Vos deux mots de passe sont différents !' }
+		return { hasError: false, message: '' };
+	}
+};
+
+export const ExtendedUserForm = WithForm(validators)(UserForm);

frontend/src/components/WithForm.js

@@ -0,0 +1,73 @@
+import { useState, useEffect } from 'react';
+
+export function WithForm(validators) {
+
+    return function(Component) {
+      
+        return function WithFormWrapper(props) {
+            
+            const [ formData, setFormData ] = useState({});
+            const [ formErrors, setFormErrors ] = useState({});
+            const [ submitted, setSubmitted ] = useState(false);
+
+            const validateField = (name) => {
+                if (typeof validators[name] !== 'function') return;
+                const value = formData[name];
+                const result = validators[name](value, formData);
+                setFormErrors(formErrors => {
+                    return { ...formErrors, [name]: result };
+                });
+            }
+
+            useEffect(() => {
+            	Object.keys(formData).forEach(validateField);
+            }, [formData]);
+
+            useEffect(() => {
+            	setSubmitted(false);
+            }, [submitted]);
+
+            const form = {
+                field: (name, defaultValue) => {
+                    return name in formData ? formData[name] : defaultValue;
+                },
+                
+                onChange: (name) => {
+                    return (evt) => {
+                        const value = evt.target.value;
+                        setFormData(formData => {
+                            return { ...formData, [name]: value };
+                        });
+                    };
+                },
+                
+                hasError: (name) => {
+                    return name in formErrors ? formErrors[name].hasError : false; 
+                },
+                
+                error: (name) => {
+                    return name in formErrors ? formErrors[name].message : ''; 
+                },
+
+                onSubmit: (evt) => {
+                    evt.preventDefault();
+                    Object.keys(validators).forEach(validateField);
+                    setSubmitted(true);
+                },
+
+                valid: !Object.values(formErrors).reduce((hasErrors, fieldError) => {
+                    return hasErrors || fieldError.hasError;
+                }, false),
+
+                data: { ...formData },
+                errors: { ...formErrors },
+                submitted,
+
+            };
+
+            return <Component form={form} {...props} />;
+        };
+    }
+}
+
+// connect(mapStateToProps)(MyComponent)

frontend/src/pages/home.js

@@ -1,13 +1,13 @@
 import React from 'react'
 import Page from './page';
-import { UserForm } from '../components/UserForm';
+import { ExtendedUserForm as UserForm } from '../components/UserForm';
 
 export default class HomePage extends React.PureComponent {
 
 
   render() {
   	const onUserFormSubmit = formData => {
-		console.log(formData);
+		  console.log(formData);
   	};
     return (
         <Page title="home">