compl form

src/Reducers/todo.js

@@ -4,14 +4,48 @@ import data from "../utils/fakeData";
 
 const initState = {
 	list: data,
-	data: {}
+	data: {},
+	loads: [{ id: new Date().getTime(), name: "" }]
 };
 
 export default (state = initState, { type, payload }) => {
 	switch (type) {
 		case types.CHANGE_INPUT_VALUE: {
-			console.log("CHANGE_INPUT_VALUE", payload);
-			return state;
+			const { id, value, checked, loads } = payload;
+
+			if (loads) {
+				console.log("loads", payload);
+
+				// const loads = state.loads.map( el => el.id === id ? ({...el, name: value}) : el )
+
+				const loads = state.loads.map(el => {
+					if (el.id === id) {
+						return { ...el, name: value };
+					}
+					return el;
+				});
+
+				return { ...state, loads };
+			}
+
+			return {
+				...state,
+				data: {
+					...state.data,
+					[id]: id === "night" ? checked : value
+				}
+			};
+		}
+		case types.ADD_TO_LIST: {
+			const list = state.list.concat({ ...state.data, id: new Date().getTime(), load: state.loads });
+
+			return { ...state, list };
+		}
+
+		case types.ADD_LOADS: {
+			const newDateInput = { id: new Date().getTime(), name: "" };
+
+			return { ...state, loads: state.loads.concat(newDateInput) };
 		}
 
 		default:

src/actions/todo.js

@@ -5,10 +5,15 @@ export const changeInputValue = payload => ({
 	payload
 });
 
-// export const addToList = payload => ({
-// 	type: types.ADD_TO_LIST,
-// 	payload
-// });
+export const addToList = payload => ({
+	type: types.ADD_TO_LIST,
+	payload
+});
+
+export const addLoads = payload => ({
+	type: types.ADD_LOADS,
+	payload
+});
 
 // export const toggleEditField = payload => ({
 // 	type: types.TOGGLE_EDIT_FIELD,

src/components/loadForm/index.js

@@ -1,39 +1,55 @@
 import React, { Component } from "react";
 
 export default class LoadForm extends Component {
+	changeHandler = e => {
+		const { changeInputValue } = this.props;
+		const { value, id, checked } = e.target;
+		changeInputValue({ value, id, checked });
+	};
+
 	render() {
+		const { addToList, loads, changeInputValue, addLoads } = this.props;
 		return (
 			<div className="form">
 				<div className="form__input-box">
 					<label className="form__input-lable" htmlFor="origin">
 						Город отправитель
-						<input className="form__input" id="origin" type="text" />
+						<input onChange={e => this.changeHandler(e)} className="form__input" id="origin" type="text" />
 					</label>
 				</div>
 				<div className="form__input-box">
 					<label className="form__input-lable" htmlFor="destination">
 						Город получатель
-						<input className="form__input" id="destination" type="text" />
+						<input
+							onChange={e => this.changeHandler(e)}
+							className="form__input"
+							id="destination"
+							type="text"
+						/>
 					</label>
 				</div>
 				<div className="form__input-box">
 					<label className="form__input-lable" htmlFor="name">
 						Введите имя водителя
-						<input className="form__input" id="name" type="text" />
+						<input onChange={e => this.changeHandler(e)} className="form__input" id="name" type="text" />
 					</label>
 				</div>
 
 				<div className="form__input-box">
 					<label className="form__input-lable" htmlFor="night">
 						Ночная перевозка ?
-						<input className="form__input" id="night" type="checkbox" />
+						<input onChange={e => this.changeHandler(e)} className="form__input" id="night" type="checkbox" />
 					</label>
 				</div>
 
 				<div className="form__input-box">
 					<label className="form__input-lable" htmlFor="bodyType">
 						Тип кузова
-						<select className="form__input" name="bodyType" id="bodyType">
+						<select
+							onChange={e => this.changeHandler(e)}
+							className="form__input"
+							name="bodyType"
+							id="bodyType">
 							<option value="type1">Тип 1</option>
 							<option value="type2">Тип 2</option>
 							<option value="type3">Тип 3</option>
@@ -45,19 +61,32 @@ export default class LoadForm extends Component {
 				<div className="form__input-box">
 					<label className="form__input-lable" htmlFor="weight">
 						Вес
-						<input className="form__input" id="weight" type="number" />
+						<input onChange={e => this.changeHandler(e)} className="form__input" id="weight" type="number" />
 					</label>
 				</div>
 
-				<div className="form__input-box">
-					<label className="form__input-lable" htmlFor="load">
-						Груз
-						<input className="form__input" id="load" type="text" />
-					</label>
-				</div>
+				<button type="button" onClick={addLoads}>
+					Добавить груз
+				</button>
+
+				{loads.map(el => (
+					<div key={el.id} className="form__input-box">
+						<label className="form__input-lable" htmlFor="name">
+							Груз
+							<input
+								onChange={e => changeInputValue({ id: el.id, value: e.target.value, loads: true })}
+								className="form__input"
+								id="name"
+								type="text"
+							/>
+						</label>
+					</div>
+				))}
 
 				<div className="form__button-box">
-					<button className="form__submit-button">Создать Доставку</button>
+					<button className="form__submit-button" onClick={addToList}>
+						Создать Доставку
+					</button>
 					<button className="form__submit-button form__submit-button--reset">Очистить форму</button>
 				</div>
 			</div>

src/constants/actionTypes.js

@@ -1,5 +1,6 @@
 export const CHANGE_INPUT_VALUE = "CHANGE_INPUT_VALUE";
-// export const ADD_TO_LIST = "ADD_TO_LIST";
+export const ADD_TO_LIST = "ADD_TO_LIST";
+export const ADD_LOADS = "ADD_LOADS";
 // export const TOGGLE_EDIT_FIELD = "TOGGLE_EDIT_FIELD";
 // export const CHANGE_LIST_VALUE = "CHANGE_LIST_VALUE";
 // export const DELETE_ITEM_LIST = "DELETE_ITEM_LIST";

src/container/App.js

@@ -19,8 +19,9 @@ class App extends Component {
 	openFormHandler = () => this.setState(prevState => ({ openAddForm: !prevState.openAddForm }));
 
 	render() {
-		const { list, changeInputValue } = this.props;
+		const { list, changeInputValue, inputData, addToList, loads, addLoads } = this.props;
 		const { openAddForm, toggleModal } = this.state;
+		console.log("list", list);
 		return (
 			<Fragment>
 				<h1 className="h1-tag">
@@ -30,9 +31,17 @@ class App extends Component {
 					</span>
 				</h1>
 				<div className="todo">
-					<List changeInputValue={changeInputValue} list={list} openEditModal={this.openEditModal} />
+					<List list={list} openEditModal={this.openEditModal} />
 
-					{openAddForm && <LoadForm />}
+					{openAddForm && (
+						<LoadForm
+							addLoads={addLoads}
+							loads={loads}
+							addToList={addToList}
+							inputData={inputData}
+							changeInputValue={changeInputValue}
+						/>
+					)}
 				</div>
 
 				<EditModal visible={toggleModal} handleClose={this.closeEditModal} />
@@ -42,7 +51,9 @@ class App extends Component {
 }
 
 const mapStateToProps = state => ({
-	list: state.todo.list
+	list: state.todo.list,
+	inputData: state.todo.data,
+	loads: state.todo.loads
 });
 
 const mapDispatchToProps = dispatch => bindActionCreators({ ...actions }, dispatch);