add useForm

src/actionTypes/actionTypes.js

@@ -40,3 +40,7 @@ export const UPDATE_REQUEST_FAIL = "UPDATE_REQUEST_FAIL";
 export const AUTH_REQUEST = "AUTH_REQUEST";
 export const AUTH_REQUEST_SUCCESS = "AUTH_REQUEST_SUCCESS";
 export const AUTH_REQUEST_FAIL = "AUTH_REQUEST_FAIL";
+
+export const REGISTER_REQUEST = "REGISTER_REQUEST";
+export const REGISTER_REQUEST_SUCCESS = "REGISTER_REQUEST_SUCCESS";
+export const REGISTER_REQUEST_FAIL = "REGISTER_REQUEST_FAIL";

src/actions/auth.js

@@ -27,3 +27,32 @@ export const auth = payload => {
 		}
 	};
 };
+
+const registerRequest = payload => ({
+	type: types.REGISTER_REQUEST,
+	payload
+});
+const registerRequestSuccess = payload => ({
+	type: types.REGISTER_REQUEST_SUCCESS,
+	payload
+});
+const registerRequestFail = payload => ({
+	type: types.REGISTER_REQUEST_FAIL,
+	payload
+});
+
+export const register = payload => {
+	return async dispatch => {
+		dispatch(registerRequest());
+		try {
+			const { data } = await axios.post(
+				"http://subdomain.entony.fs.a-level.com.ua/api/auth/register",
+				payload
+			);
+
+			dispatch(registerRequestSuccess(data));
+		} catch (error) {
+			dispatch(registerRequestFail(error));
+		}
+	};
+};

src/components/HOC/resize.js

@@ -1,5 +1,18 @@
 import React from "react";
 
+// const HOCcomponent = WrapperComponent => {
+// 	// const [data, setData] = React.useState({ w: window.innerWidth, h: window.innerHeight });
+
+// 	// React.useEffect(() => {
+// 	// 	window.addEventListener("resize", resize);
+// 	// 	return () => window.removeEventListener("resize", resize);
+// 	// }, []);
+
+// 	// const resize = e => setData({ w: e.currentTarget.innerWidth, h: e.currentTarget.innerHeight });
+
+// 	return props => <WrapperComponent w={data.w} h={data.h} {...props} />;
+// };
+
 const HOCcomponent = WrapperComponent => {
 	return class extends React.Component {
 		state = {

src/components/auth/auth.js

@@ -1,117 +1,44 @@
-import React, { Component } from "react";
+import React from "react";
 
+import { useForm } from "../hooks/useForm";
 import Input from "../input";
 import Button from "../button/button";
+import { logInForm } from "../../utils/formFields";
 
-export default class AuthForm extends Component {
-	state = {
-		form: {
-			email: {
-				id: 1,
-				name: "email",
-				type: "email",
-				label: "Email",
-				validation: {
-					requred: true
-				},
-				fail: false,
-				touch: false,
-				value: ""
-			},
-			password: {
-				id: 2,
-				name: "password",
-				type: "password",
-				label: "Password",
-				validation: {
-					requred: true,
-					minL: 6
-				},
-				fail: false,
-				touch: false,
-				value: ""
-			}
-		},
-		validForm: false
-	};
-
-	validator = (rules, value) => {
-		const { requred, minL } = rules;
-
-		let valid = true;
-		if (requred) {
-			valid = value.trim() === "" && valid;
-		}
-
-		if (minL) {
-			valid = value.trim().length < minL && valid;
-		}
-
-		return valid;
-	};
+export const AuthForm = ({ error, submitHandler }) => {
+	const [form, { onChangeHandler, returnAllValues, focusEvent, blurEvent }] = useForm(logInForm);
 
-	submit = e => {
+	const 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)
-			};
-		});
+		const values = returnAllValues();
+		submitHandler(values);
 	};
 
-	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 disabled={!validForm} className="auth__submit-btn" type="submit" text="Log In" />
-					</div>
-				</form>
-			</div>
-		);
-	}
-}
+	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}
+						/>
+					);
+				})}
+				{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/auth/register.js

@@ -1,7 +1,47 @@
-import React, { Component } from "react";
+import React from "react";
 
-export default class RegisterForm extends Component {
-	render() {
-		return <div>RegisterForm</div>;
-	}
-}
+import { signUpForm } from "../../utils/formFields";
+import { useForm } from "../hooks/useForm";
+
+import Input from "../input";
+import Button from "../button/button";
+
+export const RegisterForm = ({ 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}
+						/>
+					);
+				})}
+				{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/components/hooks/useForm.js

@@ -0,0 +1,92 @@
+import { useState } from "react";
+
+export const useForm = initialValues => {
+	const [form, setFormProp] = useState(initialValues);
+
+	const validator = (rules, value, allForm) => {
+		const { requred, minL, match } = rules;
+
+		let valid = true;
+		if (requred) {
+			valid = value.trim() !== "" && valid;
+		}
+
+		if (minL) {
+			valid = value.trim().length < minL && valid;
+		}
+		if (match) {
+			valid = value.trim() !== allForm[match] && valid;
+		}
+
+		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 lll = validator(prevState.form[name].validation, value, prevValues);
+			console.log("lll", lll);
+			return {
+				...prevState,
+				form: {
+					...prevState.form,
+					[name]: {
+						...prevState.form[name],
+						fail: value ? lll : 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/containers/auth.js

@@ -1,16 +1,27 @@
 import React, { Component } from "react";
 import { connect } from "react-redux";
 import { Redirect } from "react-router-dom";
+import axios from "axios";
 
-import { auth } from "../actions/auth";
+import { auth, register } from "../actions/auth";
 
-import RegisterForm from "../components/auth/register";
-import AuthForm from "../components/auth/auth";
+import { RegisterForm } from "../components/auth/register";
+import { AuthForm } from "../components/auth/auth";
 import Loader from "../components/HOC/loader";
 
 export class AuthContainer extends Component {
 	state = { auth: true };
 
+	async componentDidMount() {
+		const response = await axios({
+			method: "GET",
+			url: "http://localhost:5000/api/v1/",
+			withCredentials: true
+		});
+
+		console.log("response", response);
+	}
+
 	toggleAuth = () => this.setState(prevState => ({ auth: !prevState.auth }));
 
 	render() {
@@ -28,7 +39,13 @@ export class AuthContainer extends Component {
 							<AuthForm error={this.props.errorFromAuth} submitHandler={this.props.auth} />
 						</Loader>
 					) : (
-						<RegisterForm />
+						<Loader flag={this.props.isFetching}>
+							<RegisterForm
+								submitHandler={this.props.register}
+								error={this.props.errorFromAuth}
+								successRegister={this.props.successRegister}
+							/>
+						</Loader>
 					)}
 
 					<div className="auth__addintional-content">
@@ -57,10 +74,11 @@ export class AuthContainer extends Component {
 const mapStateToProps = state => ({
 	user: state.auth.user,
 	isFetching: state.auth.isFetching,
-	errorFromAuth: state.auth.error
+	errorFromAuth: state.auth.error,
+	successRegister: state.auth.successRegister
 });
 
 export default connect(
 	mapStateToProps,
-	{ auth }
+	{ auth, register }
 )(AuthContainer);

src/reducer/auth.js

@@ -4,7 +4,8 @@ const initialState = {
 	user: null,
 	isFetching: false,
 	token: null,
-	error: null
+	error: null,
+	successRegister: null
 };
 
 export default (state = initialState, action) => {
@@ -22,6 +23,19 @@ export default (state = initialState, action) => {
 			return { ...state, isFetching: false, error: action.payload.response.data.message };
 		}
 
+		case types.REGISTER_REQUEST: {
+			return { ...state, isFetching: true };
+		}
+
+		case types.REGISTER_REQUEST_SUCCESS: {
+			const { message } = action.payload;
+			return { ...state, isFetching: false, successRegister: message };
+		}
+
+		case types.REGISTER_REQUEST_FAIL: {
+			return { ...state, isFetching: false, error: action.payload.response.data.message };
+		}
+
 		default:
 			return state;
 	}

src/styles/pages/_auth.scss

@@ -41,6 +41,14 @@
 		font-size: 2rem;
 	}
 
+	&__success-auth-text {
+		margin-top: 1rem;
+		text-align: center;
+		width: 100%;
+		color: #1eb437;
+		font-size: 2rem;
+	}
+
 	&__submit-btn {
 		width: 100%;
 		border: 1px solid #eee;

src/utils/formFields.js

@@ -0,0 +1,99 @@
+export const logInForm = {
+	form: {
+		email: {
+			id: 1,
+			name: "email",
+			type: "email",
+			label: "Email",
+			validation: {
+				requred: true
+			},
+			fail: false,
+			touch: false,
+			value: ""
+		},
+		password: {
+			id: 2,
+			name: "password",
+			type: "password",
+			label: "Password",
+			validation: {
+				requred: true,
+				minL: 6
+			},
+			fail: false,
+			touch: false,
+			value: ""
+		}
+	},
+	validForm: false
+};
+
+export const signUpForm = {
+	form: {
+		email: {
+			id: 1,
+			name: "email",
+			type: "email",
+			label: "Email",
+			validation: {
+				requred: true
+			},
+			fail: false,
+			touch: false,
+			value: ""
+		},
+		firstName: {
+			id: 2,
+			type: "text",
+			name: "firstName",
+			label: "First Name",
+			validation: {
+				requred: true
+			},
+			fail: false,
+			touch: false,
+			value: ""
+		},
+		lastName: {
+			id: 3,
+			type: "text",
+			name: "lastName",
+			label: "First Name",
+			validation: {
+				requred: true
+			},
+			fail: false,
+			touch: false,
+			value: ""
+		},
+		password: {
+			id: 4,
+			name: "password",
+			type: "password",
+			label: "Password",
+			validation: {
+				requred: true,
+				minL: 6
+			},
+			fail: false,
+			touch: false,
+			value: ""
+		},
+		confirmPassword: {
+			id: 5,
+			name: "confirmPassword",
+			type: "password",
+			label: "Confirm Password",
+			validation: {
+				requred: true,
+				minL: 6,
+				match: "password"
+			},
+			fail: false,
+			touch: false,
+			value: ""
+		}
+	},
+	validForm: false
+};