some auth refactoring

src/actions/auth.js

@@ -21,7 +21,7 @@ export const auth = payload => {
     return async dispatch => {
         dispatch(authRequest());
         try {
-            const { data } = await axios.post("http://subdomain.entony.fs.a-level.com.ua/api/auth/login", payload);
+            const { data } = await axios.post("https://api-clinics.herokuapp.com/api/v1/auth/login", payload);
             console.log('data',data)
             dispatch(authRequestSuccess(data));
         } catch (error){
@@ -50,7 +50,7 @@ export const register = payload => {
         dispatch(registerRequest());
         try {
             const { data } = await axios.post(
-                "http://subdomain.entony.fs.a-level.com.ua/api/auth/register",
+                "https://api-clinics.herokuapp.com/api/v1/auth/register",
                 payload
             );
            

src/components/hooks/useForm.js

@@ -0,0 +1,85 @@
+import { useState } from "react";
+
+export const useForm = initialValues => {
+	const [form, setFormProp] = useState(initialValues);
+
+	const validator = (rules, value, allForm) => {
+		const valid = Object.keys(rules).reduce((prev, elem) => {
+			if (prev) return true
+			const check = rules[elem].cb(value, allForm[rules[elem].match])
+			if (!prev && check) return check
+
+			return false
+		}, false)
+
+		return valid;
+	};
+
+	const onChangeHandler = e => {
+		const { name, value } = e.target;
+
+		setFormProp(prevState => {
+			const values = Object.keys(prevState.form).reduce((prev, elem) => {
+				if (elem === name) return prev.concat(value);
+				return prev.concat(prevState.form[elem].value);
+			}, []);
+
+			return {
+				...prevState,
+				form: {
+					...prevState.form,
+					[name]: {
+						...prevState.form[name],
+						value
+					}
+				},
+				validForm: values.some(value => value)
+			};
+		});
+	};
+
+	const focusEvent = e => {
+		const { name } = e.target;
+
+		setFormProp(prevState => ({
+			...prevState,
+			form: {
+				...prevState.form,
+				[name]: {
+					...prevState.form[name],
+					touch: true
+				}
+			}
+		}));
+	};
+
+	const blurEvent = e => {
+		const { name, value } = e.target;
+
+		const prevValues = Object.keys(form.form).reduce((prev, elem) => {
+			return { ...prev, [elem]: elem === name ? value : form.form[elem].value };
+		}, {});
+
+		setFormProp(prevState => {
+			const valid = validator(prevState.form[name].validation, value, prevValues);
+			return {
+				...prevState,
+				form: {
+					...prevState.form,
+					[name]: {
+						...prevState.form[name],
+						fail: value ? valid : true
+					}
+				}
+			};
+		});
+	};
+
+	const returnAllValues = () => {
+		return Object.keys(form.form).reduce((prev, elem) => {
+			return { ...prev, [elem]: form.form[elem].value };
+		}, {});
+	};
+
+	return [form, { onChangeHandler, returnAllValues, focusEvent, blurEvent }];
+};

src/components/signIn.js

@@ -1,179 +1,47 @@
-import React, { Component } from 'react';
-
-import Input from './input';
-import Button from './buttons/button';
-
-class SignIn extends Component {
-    state = { 
-        form: {
-            email: {
-                id: 1,
-                name: 'email',
-                type: 'email',
-                label: 'Email',
-                validation: {
-                    requred: {
-                        cb: v => v.trim() === ""
-                    }
-                },
-                fail: false,
-                touch: false,
-                value: ''
-            },
-            password: {
-                id: 2,
-                name: 'password',
-                type: 'password',
-                label: 'Password',
-                validation: {
-                    requred: {
-                        cb: v => v.trim() === ""
-                    },
-                    minL: {
-                        cb: v => v.trim().length < 6
-                    }
-                },
-                fail: false,
-                touch: false,
-                value: ''
-            }
-        },
-        validForm: false
-     };
-
-     componentDidMount(){
-        this.loadJS("https://apis.google.com/js/platform.js?onload=init");
-     }
-
-     loadJS = src => {
-		const body = window.document.getElementsByTagName("body")[0];
-		const ref = body.getElementsByTagName("script")[0];
-
-		const script = window.document.createElement("script");
-		script.src = src;
-		script.async = true;
-		script.defer = true;
-		script.onload = () => {
-			window.gapi.load("auth2", () => {
-				console.log("success");
-			});
-		};
-		ref.parentNode.insertBefore(script, ref);
-    };
-    
-    googleAuth = () => {
-		const ga = window.gapi.auth2.init({
-			client_id: '1018884941403-cd6ilegbhitova86k4i7k89eqldpatfj.apps.googleusercontent.com'
-		});
-
-		ga.signIn().then(info => {
-			const { Zi } = info;
-			fetch("http://subdomain.entony.fs.a-level.com.ua/api/auth/google", {
-				method: "POST",
-				headers: {
-					"Content-Type": "application/json"
-				},
-				body: JSON.stringify({ access_token: Zi.access_token })
-			})
-				.then(res => res.json())
-				.then(res => console.log("res", res))
-				.catch(err => console.log(err.response));
-		});
-    };
-    
-    instaAuth = () => {
-        
-    }
-    
-     validator = (rules,value) => {
-         const { required, minL } = rules;
-
-         let valid = true;
-         if(required){
-             valid = value.trim() === '' && valid;
-         }
-
-         if(minL){
-             valid = value.trim().length < minL && valid;
-         }
-
-         return valid
-     };
-
-     submit = e => {
-         e.preventDefault();
-
-         const values = Object.keys(this.state.form).reduce((prev,elem) => {
-             return {...prev, [elem]: this.state.form[elem].value };
-         }, {});
-
-         this.props.submitHandler(values);
-     };
-
-     onChangeHandler = e => {
-         const { name, value } = e.target;
-
-         this.setState(prevState => {
-             const values = Object.keys(prevState.form).reduce((prev, elem) => {
-                 if (elem === name) return prev.concat(value);
-                 return prev.concat(prevState.form[elem].value);
-             },[]);
-
-             return {
-                 ...prevState,
-                 form: {
-                     ...prevState.form,
-                     [name]: {
-                         ...prevState.form[name],
-                         value,
-                         touch: true,
-                         fail: this.validator(prevState.form[name].validation, value)
-                     }
-                 },
-                 validForm: values.some(value => value)
-             };
-         });
-     };
-
-    render() { 
-        const { form, validForm } = this.state;
-        const { error } = this.props;
-        
-        return (
-                <div className="auth__auth-box">
-                    <form onSubmit={this.submit} className="auth__auth-form">
-                        {Object.keys(form).map(input_name => {
-                            return (
-                                <Input 
-                                    key={form[input_name].id}
-                                    id={form[input_name].id}
-                                    value={form[input_name].value}
-                                    name={form[input_name].name}
-                                    type={form[input_name].type}
-                                    fail={form[input_name].fail}
-                                    touch={form[input_name].touch}
-                                    label={form[input_name].label}
-                                    onChange={this.onChangeHandler}
-                                />
-                          );
-                     })}
-                    {error && <p className='auth__error-auth-text'>{error}</p>}
-                     <div className="auth__control-box">
-                         <Button className='auth__submit-btn'
-                            disabled={!validForm}
-                            type='submit'
-                            text='Sign In'/>
-                    </div>
-                 </form>
-                 <div className="auth__google-auth">
-                    <Button 
-                        type="button" 
-                        text='Sign in with Google' 
-                        onClick={this.googleAuth}/>
-                </div>
-             </div> 
-         );
-    }
-}
- 
-export default SignIn;
+import React from "react";
+
+import { useForm } from "./hooks/useForm";
+import Input from "./input";
+
+import Button from "./button";
+import { logInForm } from "../utils/formFields";
+
+export const SignInForm = ({ error, submitHandler }) => {
+	const [form, { onChangeHandler, returnAllValues, focusEvent, blurEvent }] = useForm(logInForm);
+
+	const submit = e => {
+		e.preventDefault();
+		const values = returnAllValues();
+
+		submitHandler(values);
+	};
+
+	return (
+		<div className="auth__auth-box">
+			<form onSubmit={submit} className="auth__auth-form">
+				{Object.keys(form.form).map(input_name => {
+					return (
+						<Input
+							key={form.form[input_name].id}
+							id={form.form[input_name].id}
+							value={form.form[input_name].value}
+							name={form.form[input_name].name}
+							type={form.form[input_name].type}
+							fail={form.form[input_name].fail}
+							touch={form.form[input_name].touch}
+							label={form.form[input_name].label}
+							onChange={onChangeHandler}
+							onFocus={focusEvent}
+							onBlur={blurEvent}
+							autoComplete="off"
+						/>
+					);
+				})}
+				{error && <p className="auth__error-auth-text">{error}</p>}
+				<div className="auth__control-box">
+					<Button disabled={!form.validForm} className="auth__submit-btn" type="submit" text="Log In" />
+				</div>
+			</form>
+		</div>
+	);
+};

src/components/signUp.js

@@ -1,173 +1,48 @@
-import React, { Component } from 'react';
-
-import Input from './input';
-import Button from './buttons/button';
-
-class SignUp extends Component {
-    state = {
-        form: {
-            email: {
-                id: 1,
-                name: 'email',
-                type: 'email',
-                label: 'Email',
-                validation: {
-                    required: true
-                },
-                fail: false,
-                touch: false,
-                value: ''
-            },
-            firstName: {
-                id: 2,
-                name: 'firstName',
-                type: 'text',
-                label: 'First Name',
-                validation: {
-                    required: true
-                },
-                fail: false,
-                touch: false,
-                value: ''
-            },
-            lastName: {
-                id: 3,
-                name: 'lastName',
-                type: 'text',
-                label: 'Last Name',
-                validation: {
-                    required: true
-                },
-                fail: false,
-                touch: false,
-                value: ''
-            },
-            // phone: {
-            //     id: 4,
-            //     name: 'phone',
-            //     type: 'phone',
-            //     label: 'Phone',
-            //     validation: {
-            //         required: true
-            //     },
-            //     fail: false,
-            //     touch: false,
-            //     value: ''
-            // },
-            password: {
-                id: 5,
-                name: 'password',
-                type: 'password',
-                label: 'Password',
-                validation: {
-                    required: true,
-                    minL: 6
-                },
-                fail: false,
-                touch: false,
-                value: ''
-            },
-            confirmPassword: {
-                id: 6,
-                name: 'confirmPassword',
-                type: 'password',
-                label: 'Confirm Password',
-                validation: {
-                    required: true,
-                    minL: 6,
-                    match: 'password'
-                },
-                fail: false,
-                touch: false,
-                value: ''
-            }
-        },
-        validForm: false 
-    }
-
-    validator = (rules,value) => {
-        const { required, minL } = rules;
-
-        let valid = true;
-        if(required){
-            valid = value.trim() === '' && valid;
-        }
-
-        if(minL){
-            valid = value.trim().length < minL && valid;
-        }
-
-        return valid
-    };
-
-    submit = e => {
-        e.preventDefault();
-
-        const values = Object.keys(this.state.form).reduce((prev,elem) => {
-            return {...prev, [elem]: this.state.form[elem].value };
-        }, {});
-
-        this.props.submitHandler(values);
-    };
-
-    onChangeHandler = e => {
-        const { name, value } = e.target;
-
-        this.setState(prevState => {
-            const values = Object.keys(prevState.form).reduce((prev, elem) => {
-                if (elem === name) return prev.concat(value);
-                return prev.concat(prevState.form[elem].value);
-            },[]);
-
-            return {
-                ...prevState,
-                form: {
-                    ...prevState.form,
-                    [name]: {
-                        ...prevState.form[name],
-                        value,
-                        touch: true,
-                        fail: this.validator(prevState.form[name].validation, value)
-                    }
-                },
-                validForm: values.some(value => value)
-            };
-        });
-    };
-
-    render() { 
-        const { form, validForm } = this.state;
-        const { error, successRegister } = this.props;
-
-        return ( 
-            <div>
-                <form onSubmit={this.submit} className="auth__auth-form">
-                        {Object.keys(form).map(input_name => {
-                            return (
-                                <Input 
-                                    key={form[input_name].id}
-                                    id={form[input_name].id}
-                                    value={form[input_name].value}
-                                    name={form[input_name].name}
-                                    type={form[input_name].type}
-                                    fail={form[input_name].fail}
-                                    touch={form[input_name].touch}
-                                    label={form[input_name].label}
-                                    onChange={this.onChangeHandler}
-                                />
-                          );
-                     })}
-                    {successRegister && <p className="auth_success-auth-text">{successRegister}</p>}
-                    {error && <p className='auth__error-auth-text'>{error}</p>}
-                     <div className="auth__control-box">
-                         <Button className='auth__submit-btn'
-                            disabled={!validForm}
-                            type='submit'
-                            text='Sign Up'/>
-                    </div>
-                 </form>
-            </div> );
-    }
-}
- 
-export default SignUp;
+import React from "react";
+
+import { signUpForm } from "../utils/formFields";
+import { useForm } from "./hooks/useForm";
+
+import Input from "./input";
+import Button from "./button";
+
+export const SignUpForm = ({ submitHandler, error, successRegister }) => {
+	const [form, { onChangeHandler, returnAllValues, focusEvent, blurEvent }] = useForm(signUpForm);
+
+	const submit = e => {
+		e.preventDefault();
+		const values = returnAllValues();
+
+		submitHandler(values);
+	};
+
+	return (
+		<div>
+			<form onSubmit={submit} className="auth__auth-form">
+				{Object.keys(form.form).map(input_name => {
+					return (
+						<Input
+							key={form.form[input_name].id}
+							id={form.form[input_name].id}
+							value={form.form[input_name].value}
+							name={form.form[input_name].name}
+							type={form.form[input_name].type}
+							fail={form.form[input_name].fail}
+							touch={form.form[input_name].touch}
+							label={form.form[input_name].label}
+							onChange={onChangeHandler}
+							onFocus={focusEvent}
+							onBlur={blurEvent}
+							autoComplete="off"
+						/>
+					);
+				})}
+				{successRegister && <p className="auth__success-auth-text">{successRegister}</p>}
+				{error && <p className="auth__error-auth-text">{error}</p>}
+				<div className="auth__control-box">
+					<Button disabled={!form.validForm} className="auth__submit-btn" type="submit" text="Log In" />
+				</div>
+			</form>
+		</div>
+	);
+};

src/containers/auth.js

@@ -4,8 +4,8 @@ import { Redirect } from 'react-router-dom';
 
 import { auth, register } from '../actions/auth';
 
-import SignUpForm from '../components/signUp';
-import SignInForm from '../components/signIn';
+import {SignUpForm} from '../components/signUp';
+import {SignInForm} from '../components/signIn';
 import Loader from '../components/loader';
 
 class Auth extends Component {

src/utils/formFields.js

@@ -0,0 +1,139 @@
+export const logInForm = {
+	form: {
+		email: {
+			id: 1,
+			name: "email",
+			type: "email",
+			label: "Email",
+			validation: {
+				requred: {
+					cb: v => v.trim() === ""
+				}
+			},
+			fail: false,
+			touch: false,
+			value: ""
+		},
+		password: {
+			id: 2,
+			name: "password",
+			type: "password",
+			label: "Password",
+			validation: {
+				requred: {
+					cb: v => v.trim() === ""
+				},
+				minL: {
+					cb: v => v.trim().length < 6
+				}
+			},
+			fail: false,
+			touch: false,
+			value: ""
+		}
+	},
+	validForm: false
+};
+
+export const signUpForm = {
+	form: {
+		email: {
+			id: 1,
+			name: "email",
+			type: "email",
+			label: "Email",
+			validation: {
+				requred: {
+					cb: v => v.trim() === ""
+				}
+			},
+			fail: false,
+			touch: false,
+			value: ""
+		},
+		firstName: {
+			id: 2,
+			type: "text",
+			name: "firstName",
+			label: "First Name",
+			validation: {
+				requred: {
+					cb: v => v.trim() === ""
+				},
+				regExp: {
+					cb: v => !/^\w/.test(v)
+				}
+			},
+			fail: false,
+			touch: false,
+			value: ""
+		},
+		lastName: {
+			id: 3,
+			type: "text",
+			name: "lastName",
+			label: "Last Name",
+			validation: {
+				requred: {
+					cb: v => v.trim() === ""
+				}
+			},
+			fail: false,
+			touch: false,
+			value: ""
+		},
+		phone: {
+			id: 4,
+			type: "number",
+			name: "phone",
+			label: "Phone",
+			validation: {
+				requred: {
+					cb: v => v.trim() === ""
+				}
+			},
+			fail: false,
+			touch: false,
+			value: ""
+		},
+		password: {
+			id: 5,
+			name: "password",
+			type: "password",
+			label: "Password",
+			validation: {
+				requred: {
+					cb: v => v.trim() === ""
+				},
+				minL: {
+					cb: v => v.trim().length < 6
+				}
+			},
+			fail: false,
+			touch: false,
+			value: ""
+		},
+		confirmPassword: {
+			id: 6,
+			name: "confirmPassword",
+			type: "password",
+			label: "Confirm Password",
+			validation: {
+				requred: {
+					cb: v => v.trim() === ""
+				},
+				minL: {
+					cb: v => v.trim().length < 6
+				},
+				match: {
+					match: "password",
+					cb: (v, m) => v !== m
+				}
+			},
+			fail: false,
+			touch: false,
+			value: ""
+		}
+	},
+	validForm: false
+};