add hooks

src/actions/school.js

@@ -0,0 +1,21 @@
+import * as types from "../constants/actionTypes";
+
+export const changeField = payload => ({
+	type: types.CHANGE_FIELD,
+	payload
+});
+
+export const submitUser = payload => ({
+	type: types.SUBMIT_USER,
+	payload
+});
+
+export const addFieldInArr = payload => ({
+	type: types.ADD_FIELD_IN_ARR,
+	payload
+});
+
+export const cahngeFieldInArr = payload => ({
+	type: types.CHANGE_FIELD_IN_ARR,
+	payload
+});

src/components/common/useForm.js

@@ -0,0 +1,51 @@
+import { useState } from "react";
+
+import checkObject from "../../utils/checkObject";
+
+const useForm = initialValues => {
+	const [newObject, setNewObject] = useState(initialValues);
+
+	const validate = (rules, value, otherField) => {
+		let isValid = true;
+		if (rules.required) {
+			isValid = value.trim() !== "" && isValid;
+		}
+
+		if (rules.sameWithPassword) {
+			isValid = value.trim() !== "" && otherField.password.value.trim() === value.trim() && isValid;
+		}
+
+		return isValid;
+	};
+
+	const setNew = ({ name, value }) => {
+		setNewObject(newObject => {
+			const valid = validate(newObject[name].validation, value, newObject);
+
+			const otherValid = Object.keys(newObject)
+				.reduce(
+					(prev, el) =>
+						checkObject(newObject[el]) && newObject[el] !== newObject[name]
+							? [...prev, newObject[el].valid]
+							: prev,
+					[]
+				)
+				.indexOf(false);
+
+			return {
+				...newObject,
+				[name]: {
+					...newObject[name],
+					value,
+					valid,
+					touch: true
+				},
+				isValid: otherValid === -1 && valid
+			};
+		});
+	};
+
+	return [newObject, { setNew }];
+};
+
+export default useForm;

src/components/header/index.js

@@ -20,6 +20,11 @@ const Header = () => (
 						Auth
 					</Link>
 				</li>
+				<li className="header__item">
+					<Link className="header__link" to="/school">
+						Собрать Чебурека в школу
+					</Link>
+				</li>
 			</ul>
 		</nav>
 	</header>

src/components/list/index.js

@@ -0,0 +1,15 @@
+import React from "react";
+
+export default ({ list }) =>
+	list.map(el => (
+		<div key={el.id}>
+			<h1>{el.name}</h1>
+			<p>{el.class}</p>
+			<p>{el.school}</p>
+			<div>
+				{el.backPack.map(elem => (
+					<span key={elem.id}>{`${elem.item} `}</span>
+				))}
+			</div>
+		</div>
+	));

src/components/shkola/index.js

@@ -0,0 +1,23 @@
+import React from "react";
+
+const form = ({ submit, changeField, backPack, cahngeFieldInArr }) => (
+	<form onSubmit={submit}>
+		<input onChange={changeField} type="text" name="name" />
+		<input onChange={changeField} type="number" name="class" />
+		<input onChange={changeField} type="text" name="school" />
+
+		{backPack.map(el => (
+			<div key={el.id}>
+				<input
+					type="text"
+					name="item"
+					id={el.id}
+					onChange={e => cahngeFieldInArr({ value: e.target.value, id: e.target.id })}
+				/>
+			</div>
+		))}
+		<button>Отправить в школу!</button>
+	</form>
+);
+
+export default form;

src/components/signIn/index.js

@@ -1,156 +1,76 @@
-import React, { Component } from "react";
-import { withRouter } from "react-router-dom";
-import { func, string } from "prop-types";
+import React from "react";
 
-import InputComponent from "../common";
-
-class SignIn extends Component {
-	static propTypes = {
-		token: string,
-		auth: func
-	};
+import checkObject from "../../utils/checkObject";
 
-	componentDidMount() {
-		this.loadJS("https://apis.google.com/js/platform.js?onload=init");
-	}
-
-	state = {
-		singIn: {
-			email: {
-				value: "",
-				config: {
-					type: "email",
-					name: "email",
-					placeholder: "Enter your email"
-				},
-				valid: false,
-				touch: false,
-				validation: {
-					required: true
-				}
+import InputComponent from "../common";
+import useForm from "../common/useForm";
+
+const SignIn = props => {
+	const form = {
+		email: {
+			value: "",
+			config: {
+				type: "email",
+				name: "email",
+				placeholder: "Enter your email"
+			},
+			valid: false,
+			touch: false,
+			validation: {
+				required: true
+			}
+		},
+		password: {
+			value: "",
+			config: {
+				type: "password",
+				name: "password",
+				placeholder: "Enter your password"
 			},
-			password: {
-				value: "",
-				config: {
-					type: "password",
-					name: "password",
-					placeholder: "Enter your password"
-				},
-				valid: false,
-				touch: false,
-				validation: {
-					required: true,
-					minLength: 5
-				}
+			valid: false,
+			touch: false,
+			validation: {
+				required: true,
+				minLength: 5
 			}
 		},
-		isValid: false,
-		token: null
+		isValid: false
 	};
 
-	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);
-	};
+	const [newObject, { setNew }] = useForm(form);
 
-	submit = e => {
+	const submit = e => {
 		e.preventDefault();
-		const { singIn } = this.state;
-		const { auth } = this.props;
-		const values = Object.keys(singIn).reduce((prev, elem) => ({ ...prev, [elem]: singIn[elem].value }), {});
+		const { auth } = props;
+		const values = Object.keys(newObject).reduce(
+			(prev, elem) => ({ ...prev, [elem]: newObject[elem].value }),
+			{}
+		);
 
 		auth(values);
 	};
 
-	validator = (value, rules) => {
-		let isValid = true;
-
-		if (rules.required) {
-			isValid = value.trim() !== "" && isValid;
-		}
-
-		if (rules.minLength) {
-			isValid = value.length >= rules.minLength && isValid;
-		}
-
-		return isValid;
-	};
-
-	change = e => {
+	const change = e => {
 		const { name, value } = e.target;
-
-		this.setState(prevState => {
-			const valid = this.validator(value, prevState.singIn[name].validation);
-
-			const otherValid = Object.keys(prevState.singIn).some(el => !prevState.singIn[el].valid);
-
-			return {
-				singIn: {
-					...prevState.singIn,
-					[name]: {
-						...prevState.singIn[name],
-						value,
-						touch: true,
-						valid
-					}
-				},
-				isValid: otherValid && valid
-			};
-		});
-	};
-
-	googleAuth = () => {
-		const ga = window.gapi.auth2.init({
-			client_id: "665483657556-2qrnlhpqcp3ap5j5kq4u1eas2a0o3h23.apps.googleusercontent.com"
-		});
-
-		ga.signIn().then(info => {
-			const { Zi } = info;
-			console.log("p1", info);
-			fetch("http://localhost:5000/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));
-		});
+		setNew({ value, name });
 	};
 
-	render() {
-		const { singIn, isValid } = this.state;
-		return (
-			<form className="auth-box__sign-in-form" onSubmit={this.submit}>
-				{Object.keys(singIn).map(el => (
-					<InputComponent
-						key={el}
-						touch={singIn[el].touch}
-						valid={!singIn[el].valid}
-						config={{ ...singIn[el].config, value: singIn[el].value, onChange: this.change }}
-					/>
-				))}
-				<button type="button" onClick={this.googleAuth}>
-					Google link
-				</button>
-				<a href="https://github.com/login/oauth/authorize?client_id=115f273c8312fc176907">GitHub link</a>
-				<button type="submit">Sign in</button>
-			</form>
-		);
-	}
-}
-
-export default withRouter(SignIn);
+	return (
+		<form className="auth-box__sign-in-form" onSubmit={submit}>
+			{Object.keys(newObject).map(
+				el =>
+					checkObject(newObject[el]) && (
+						<InputComponent
+							key={el}
+							touch={newObject[el].touch}
+							valid={!newObject[el].valid}
+							config={{ ...newObject[el].config, value: newObject[el].value, onChange: change }}
+						/>
+					)
+			)}
+			<button type="submit">Sign in</button>
+		</form>
+	);
+};
+
+export default SignIn;

src/components/signUp/index.js

@@ -1,18 +1,113 @@
-import React, { Component } from "react";
-
-import Input from "../HOC/input";
-
-export default class SingUp extends Component {
-	render() {
-		return (
-			<div>
-				<Input id="number">
-					<div>
-						<label>ololo</label>
-						<input name="phone" id="number" type="text" />
-					</div>
-				</Input>
-			</div>
-		);
-	}
-}
+import React from "react";
+
+import InputComponent from "../common";
+import useForm from "../common/useForm";
+
+const SingUp = () => {
+	const form = {
+		firstName: {
+			value: "",
+			config: {
+				type: "text",
+				name: "firstName",
+				placeholder: "Enter your First Name"
+			},
+			valid: false,
+			touch: false,
+			validation: {
+				required: true
+			}
+		},
+		lastName: {
+			value: "",
+			config: {
+				type: "text",
+				name: "lastName",
+				placeholder: "Enter your Last Name"
+			},
+			valid: false,
+			touch: false,
+			validation: {
+				required: true
+			}
+		},
+		email: {
+			value: "",
+			config: {
+				type: "email",
+				name: "email",
+				placeholder: "Enter your email"
+			},
+			valid: false,
+			touch: false,
+			validation: {
+				required: true
+			}
+		},
+		password: {
+			value: "",
+			config: {
+				type: "password",
+				name: "password",
+				placeholder: "Enter your password"
+			},
+			valid: false,
+			touch: false,
+			validation: {
+				required: true,
+				minLength: 5
+			}
+		},
+		confirmPassword: {
+			value: "",
+			config: {
+				type: "password",
+				name: "confirmPassword",
+				placeholder: "Confirm your password"
+			},
+			valid: false,
+			touch: false,
+			validation: {
+				required: true,
+				minLength: 5
+			}
+		},
+		isValid: false
+	};
+
+	const [newObject, { setNew }] = useForm(form);
+
+	const checkObject = obj => Object.prototype.toString.call(obj) === "[object Object]";
+
+	const change = e => {
+		const { value, name } = e.target;
+
+		setNew({ value, name });
+	};
+
+	const submit = e => {
+		e.preventDefault();
+
+		console.log("newForm", newObject);
+	};
+
+	return (
+		<form onSubmit={submit}>
+			{Object.keys(newObject).map(
+				el =>
+					checkObject(newObject[el]) && (
+						<InputComponent
+							key={el}
+							touch={newObject[el].touch}
+							valid={!newObject[el].valid}
+							config={{ ...newObject[el].config, value: newObject[el].value, onChange: change }}
+						/>
+					)
+			)}
+
+			<button disabled={!newObject.isValid}>Submit</button>
+		</form>
+	);
+};
+
+export default SingUp;

src/constants/actionTypes.js

@@ -6,3 +6,8 @@ export const SET_TOKEN = "SET_TOKEN";
 export const GET_CATEGORY = "GET_CATEGORY";
 export const GET_CATEGORY_SUCCESS = "GET_CATEGORY_SUCCESS";
 export const GET_CATEGORY_FAIL = "GET_CATEGORY_FAIL";
+
+export const CHANGE_FIELD = "CHANGE_FIELD";
+export const ADD_FIELD_IN_ARR = "ADD_FIELD_IN_ARR";
+export const CHANGE_FIELD_IN_ARR = "CHANGE_FIELD_IN_ARR";
+export const SUBMIT_USER = "SUBMIT_USER";

src/containers/shkolota.js

@@ -0,0 +1,47 @@
+import React, { Component } from "react";
+
+import { connect } from "react-redux";
+import * as actions from "../actions/school";
+import Form from "../components/shkola";
+import List from "../components/list";
+
+class Shkolota extends Component {
+	submit = e => {
+		e.preventDefault();
+		this.props.submitUser();
+	};
+
+	changeFieldHandler = e => {
+		const { value, name } = e.target;
+
+		this.props.changeField({ value, name });
+	};
+
+	render() {
+		console.log("a", this.props.newChildren);
+		console.log("b", this.props.backPack);
+		return (
+			<div>
+				<List list={this.props.list} />
+				<button onClick={this.props.addFieldInArr}>Add Item in backPack</button>
+				<Form
+					cahngeFieldInArr={this.props.cahngeFieldInArr}
+					changeField={this.changeFieldHandler}
+					submit={this.submit}
+					backPack={this.props.backPack}
+				/>
+			</div>
+		);
+	}
+}
+
+const mapStateToProps = state => ({
+	list: state.school.data,
+	newChildren: state.school.newChildren,
+	backPack: state.school.backPack
+});
+
+export default connect(
+	mapStateToProps,
+	actions
+)(Shkolota);

src/reducers/index.js

@@ -2,8 +2,10 @@ import { combineReducers } from "redux";
 
 import auth from "./auth";
 import category from "./category";
+import school from "./school";
 
 export default combineReducers({
 	auth,
-	category
+	category,
+	school
 });

src/reducers/school.js

@@ -0,0 +1,48 @@
+import * as types from "../constants/actionTypes";
+
+import initialState from "../store/initialState";
+
+export default (state = initialState.school, { type, payload }) => {
+	switch (type) {
+		case types.CHANGE_FIELD: {
+			const { name, value } = payload;
+
+			return {
+				...state,
+				newChildren: {
+					...state.newChildren,
+					[name]: value
+				}
+			};
+		}
+		case types.SUBMIT_USER: {
+			const newChildren = {
+				...state.newChildren,
+				id: Math.random()
+					.toString()
+					.substr(2, 5),
+				backPack: state.backPack
+			};
+
+			return { ...state, data: state.data.concat(newChildren) };
+		}
+		case types.ADD_FIELD_IN_ARR: {
+			const item = {
+				id: Math.random()
+					.toString()
+					.substr(2, 5),
+				item: ""
+			};
+
+			return { ...state, backPack: state.backPack.concat(item) };
+		}
+		case types.CHANGE_FIELD_IN_ARR: {
+			const { id, value } = payload;
+			const backPack = state.backPack.map(el => (el.id === id ? { ...el, item: value } : el));
+			return { ...state, backPack };
+		}
+
+		default:
+			return state;
+	}
+};

src/router.js

@@ -6,6 +6,7 @@ import { bindActionCreators } from "redux";
 import App from "./containers/App";
 import Auth from "./containers/Auth";
 import Category from "./containers/Category";
+import Shkolota from "./containers/shkolota";
 
 import Header from "./components/header";
 import { setToken } from "./actions/auth";
@@ -29,6 +30,7 @@ class Router extends Component {
 					<PrivateRoute exact path="/" component={App} />
 					<PrivateRoute exact path="/category/:id" component={Category} />
 					<Route exact path="/auth" component={Auth} />
+					<Route exact path="/school" component={Shkolota} />
 
 					<Route render={() => <div>404 NOT FOUND</div>} />
 				</Switch>

src/store/initialState.js

@@ -1,3 +1,5 @@
+import mock from "../utils/mock";
+
 export default {
 	auth: {
 		token: null,
@@ -9,5 +11,10 @@ export default {
 		error: null,
 		totalCount: null,
 		isFetching: false
+	},
+	school: {
+		data: mock,
+		newChildren: null,
+		backPack: []
 	}
 };

src/utils/checkObject.js

@@ -0,0 +1 @@
+export default obj => Object.prototype.toString.call(obj) === "[object Object]";

src/utils/mock.js

@@ -0,0 +1,9 @@
+export default [
+	{
+		id: 1,
+		name: "Tony",
+		class: 2,
+		school: "trolo",
+		backPack: [{ id: 1, item: "pencil" }, { id: 2, item: "note" }, { id: 3, item: "book" }]
+	}
+];