redux-form

package-lock.json

@@ -4191,6 +4191,11 @@
         "is-symbol": "^1.0.2"
       }
     },
+    "es6-error": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/es6-error/-/es6-error-4.1.1.tgz",
+      "integrity": "sha512-Um/+FxMr9CISWh0bi5Zv0iOD+4cFh5qLeks1qhAopKVAJw3drgKbKySikp7wGhDL0HPeaja0P5ULZrxLkniUVg=="
+    },
     "escape-html": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
@@ -8550,6 +8555,11 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz",
       "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg=="
     },
+    "lodash-es": {
+      "version": "4.17.11",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.11.tgz",
+      "integrity": "sha512-DHb1ub+rMjjrxqlB3H56/6MXtm1lSksDp2rA2cNWjG8mlDUYFhUj3Di2Zn5IwSU87xLv8tNIQ7sSwE/YOX/D/Q=="
+    },
     "lodash._getnative": {
       "version": "3.9.1",
       "resolved": "https://registry.npmjs.org/lodash._getnative/-/lodash._getnative-3.9.1.tgz",
@@ -13005,6 +13015,28 @@
         "symbol-observable": "^1.2.0"
       }
     },
+    "redux-form": {
+      "version": "7.4.2",
+      "resolved": "https://registry.npmjs.org/redux-form/-/redux-form-7.4.2.tgz",
+      "integrity": "sha512-QxC36s4Lelx5Cr8dbpxqvl23dwYOydeAX8c6YPmgkz/Dhj053C16S2qoyZN6LO6HJ2oUF00rKsAyE94GwOUhFA==",
+      "requires": {
+        "es6-error": "^4.1.1",
+        "hoist-non-react-statics": "^2.5.4",
+        "invariant": "^2.2.4",
+        "is-promise": "^2.1.0",
+        "lodash": "^4.17.10",
+        "lodash-es": "^4.17.10",
+        "prop-types": "^15.6.1",
+        "react-lifecycles-compat": "^3.0.4"
+      },
+      "dependencies": {
+        "hoist-non-react-statics": {
+          "version": "2.5.5",
+          "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz",
+          "integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw=="
+        }
+      }
+    },
     "redux-logger": {
       "version": "3.0.6",
       "resolved": "https://registry.npmjs.org/redux-logger/-/redux-logger-3.0.6.tgz",

package.json

@@ -12,6 +12,7 @@
     "react-router-dom": "^4.3.1",
     "react-scripts": "2.1.1",
     "redux": "^4.0.1",
+    "redux-form": "^7.4.2",
     "redux-logger": "^3.0.6",
     "redux-thunk": "^2.3.0"
   },

src/Reducers/index.js

@@ -1,9 +1,11 @@
 import { combineReducers } from "redux";
+import { reducer as formReducer } from "redux-form";
 
 import todo from "./todo";
 import weather from "./weather";
 
 export default combineReducers({
+	form: formReducer,
 	todo,
 	w: weather
 });

src/Reducers/todo.js

@@ -4,40 +4,14 @@ import data from "../utils/fakeData";
 
 const initState = {
 	list: data,
-	data: {},
-	loads: [{ id: new Date().getTime(), name: "" }]
+	loads: [{ id: new Date().getTime(), name: "" }],
+	initialValues: {}
 };
 
 export default (state = initState, { type, payload }) => {
 	switch (type) {
-		case types.CHANGE_INPUT_VALUE: {
-			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 });
+			const list = state.list.concat({ ...payload, id: new Date().getTime(), load: state.loads });
 
 			return { ...state, list };
 		}
@@ -48,6 +22,12 @@ export default (state = initState, { type, payload }) => {
 			return { ...state, loads: state.loads.concat(newDateInput) };
 		}
 
+		case types.GET_INIT_VAL: {
+			const initialValues = state.list.filter(el => el.id === payload)[0];
+
+			return { ...state, initialValues };
+		}
+
 		default:
 			return state;
 	}

src/actions/todo.js

@@ -15,10 +15,10 @@ export const addLoads = payload => ({
 	payload
 });
 
-// export const toggleEditField = payload => ({
-// 	type: types.TOGGLE_EDIT_FIELD,
-// 	payload
-// });
+export const getInitVal = payload => ({
+	type: types.GET_INIT_VAL,
+	payload
+});
 
 // export const changelistValue = payload => ({
 // 	type: types.CHANGE_LIST_VALUE,

src/components/loadForm/index.js

@@ -1,95 +1,103 @@
 import React, { Component } from "react";
+import { reduxForm, Field, FieldArray } from "redux-form";
 
-export default class LoadForm extends Component {
+const renderField = ({ input, meta: { touched, error }, label, type }) => (
+	<div className="form__input-box">
+		<label className="form__input-lable" htmlFor="origin">
+			{label}
+			<input type={type} {...input} />
+		</label>
+		{touched && error && <span>{error}</span>}
+	</div>
+);
+
+const ololo = values => {
+	const { origin, destination } = values;
+
+	const errors = {};
+	if (!origin) {
+		errors.origin = "Required";
+	}
+	if (!destination) {
+		errors.destination = "Required";
+	}
+
+	return errors;
+};
+
+const renderHobbies = ({ fields, meta: { error } }) => {
+	console.log(fields);
+	return (
+		<ul>
+			<li>
+				<button type="button" onClick={() => fields.push()}>
+					Добавить груз
+				</button>
+			</li>
+
+			{fields.map((el, index) => (
+				<li key={index}>
+					<button type="button" title="Remove Hobby" onClick={() => fields.remove(index)}>
+						x
+					</button>
+
+					<Field name={`${el}.name`} label="Груз" type="text" component={renderField} />
+				</li>
+			))}
+			{error && <li className="error">{error}</li>}
+		</ul>
+	);
+};
+
+class LoadForm extends Component {
 	changeHandler = e => {
 		const { changeInputValue } = this.props;
 		const { value, id, checked } = e.target;
 		changeInputValue({ value, id, checked });
 	};
 
+	submit = values => {
+		const { addToList } = this.props;
+
+		addToList(values);
+	};
+
 	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 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
-							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 onChange={e => this.changeHandler(e)} className="form__input" id="name" type="text" />
-					</label>
-				</div>
+		const { handleSubmit } = this.props;
+		console.log("tssad", this.props);
 
-				<div className="form__input-box">
-					<label className="form__input-lable" htmlFor="night">
-						Ночная перевозка ?
-						<input onChange={e => this.changeHandler(e)} className="form__input" id="night" type="checkbox" />
-					</label>
-				</div>
+		return (
+			<form onSubmit={handleSubmit(this.submit)} className="form">
+				<Field name="origin" label="Город отправитель" type="text" component={renderField} />
+				<Field name="destination" label="Город получатель" type="text" component={renderField} />
+				<Field name="contactName" label="Введите имя водителя" type="text" component={renderField} />
+				<Field name="night" label="Ночная перевозка ?" type="checkbox" component={renderField} />
 
 				<div className="form__input-box">
 					<label className="form__input-lable" htmlFor="bodyType">
 						Тип кузова
-						<select
-							onChange={e => this.changeHandler(e)}
-							className="form__input"
-							name="bodyType"
-							id="bodyType">
+						<Field name="bodyType" component="select">
 							<option value="type1">Тип 1</option>
 							<option value="type2">Тип 2</option>
 							<option value="type3">Тип 3</option>
 							<option value="type4">Тип 4</option>
-						</select>
+						</Field>
 					</label>
 				</div>
 
-				<div className="form__input-box">
-					<label className="form__input-lable" htmlFor="weight">
-						Вес
-						<input onChange={e => this.changeHandler(e)} className="form__input" id="weight" type="number" />
-					</label>
-				</div>
+				<Field name="weight" label="Вес" type="number" component={renderField} />
 
-				<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>
-				))}
+				<FieldArray name="loads" component={renderHobbies} />
 
 				<div className="form__button-box">
-					<button className="form__submit-button" onClick={addToList}>
-						Создать Доставку
+					<button className="form__submit-button">Создать Доставку</button>
+					<button type="button" className="form__submit-button form__submit-button--reset">
+						Очистить форму
 					</button>
-					<button className="form__submit-button form__submit-button--reset">Очистить форму</button>
 				</div>
-			</div>
+			</form>
 		);
 	}
 }
+
+export default reduxForm({ form: "LoadForm", validate: ololo })(LoadForm);

src/components/modal/index.js

@@ -1,14 +1,20 @@
 import React, { Component } from "react";
 import { Modal } from "antd";
 
+import LoadForm from "../loadForm";
+
 export default class EditModal extends Component {
 	render() {
-		const { visible, handleClose } = this.props;
+		const { visible, handleClose, addLoads, loads, addToList, inputData, initialValues } = this.props;
 		return (
 			<Modal title="Basic Modal" visible={visible} onCancel={handleClose}>
-				<p>Some contents...</p>
-				<p>Some contents...</p>
-				<p>Some contents...</p>
+				<LoadForm
+					initialValues={initialValues}
+					addLoads={addLoads}
+					loads={loads}
+					addToList={addToList}
+					inputData={inputData}
+				/>
 			</Modal>
 		);
 	}

src/constants/actionTypes.js

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

src/container/App.js

@@ -13,13 +13,17 @@ class App extends Component {
 		toggleModal: false
 	};
 
-	openEditModal = () => this.setState({ toggleModal: true });
+	openEditModal = id => {
+		const { getInitVal } = this.props;
+		getInitVal(id);
+		this.setState({ toggleModal: true });
+	};
 	closeEditModal = () => this.setState({ toggleModal: false });
 
 	openFormHandler = () => this.setState(prevState => ({ openAddForm: !prevState.openAddForm }));
 
 	render() {
-		const { list, changeInputValue, inputData, addToList, loads, addLoads } = this.props;
+		const { list, inputData, addToList, loads, addLoads, initialValues } = this.props;
 		const { openAddForm, toggleModal } = this.state;
 		console.log("list", list);
 		return (
@@ -34,17 +38,19 @@ class App extends Component {
 					<List list={list} openEditModal={this.openEditModal} />
 
 					{openAddForm && (
-						<LoadForm
-							addLoads={addLoads}
-							loads={loads}
-							addToList={addToList}
-							inputData={inputData}
-							changeInputValue={changeInputValue}
-						/>
+						<LoadForm addLoads={addLoads} loads={loads} addToList={addToList} inputData={inputData} />
 					)}
 				</div>
 
-				<EditModal visible={toggleModal} handleClose={this.closeEditModal} />
+				<EditModal
+					initialValues={initialValues}
+					addLoads={addLoads}
+					loads={loads}
+					addToList={addToList}
+					inputData={inputData}
+					visible={toggleModal}
+					handleClose={this.closeEditModal}
+				/>
 			</Fragment>
 		);
 	}
@@ -53,7 +59,8 @@ class App extends Component {
 const mapStateToProps = state => ({
 	list: state.todo.list,
 	inputData: state.todo.data,
-	loads: state.todo.loads
+	loads: state.todo.loads,
+	initialValues: state.todo.initialValues
 });
 
 const mapDispatchToProps = dispatch => bindActionCreators({ ...actions }, dispatch);