fix edit loads

src/Reducers/todo.js

@@ -6,9 +6,10 @@ const initState = {
 	list: data,
 	loads: [{ id: new Date().getTime(), name: "" }],
 	initialValues: {}
+	// editObject: {}
 };
 
-export default (state = initState, { type, payload }) => {
+export default (state = initState, { type, payload, meta }) => {
 	switch (type) {
 		case types.ADD_TO_LIST: {
 			const list = state.list.concat({ ...payload, id: new Date().getTime(), load: state.loads });
@@ -27,6 +28,25 @@ export default (state = initState, { type, payload }) => {
 
 			return { ...state, initialValues };
 		}
+		case types.EDIT_LOADS: {
+			const list = state.list.map(el => (el.id === payload.id ? payload : el));
+
+			return { ...state, list };
+		}
+
+		// case "@@redux-form/CHANGE": {
+		// 	if (meta.form === "editLoads") {
+		// 		console.log("meta", meta);
+		// 		return {
+		// 			...state,
+		// 			editObject: {
+		// 				...state.editObject,
+		// 				[meta.field]: payload
+		// 			}
+		// 		};
+		// 	}
+		// 	return state;
+		// }
 
 		default:
 			return state;

src/actions/todo.js

@@ -20,10 +20,10 @@ export const getInitVal = payload => ({
 	payload
 });
 
-// export const changelistValue = payload => ({
-// 	type: types.CHANGE_LIST_VALUE,
-// 	payload
-// });
+export const editLoads = payload => ({
+	type: types.EDIT_LOADS,
+	payload
+});
 
 // export const deleteItemList = payload => ({
 // 	type: types.DELETE_ITEM_LIST,

src/components/loadForm/index.js

@@ -1,4 +1,5 @@
 import React, { Component } from "react";
+import { connect } from "react-redux";
 import { reduxForm, Field, FieldArray } from "redux-form";
 
 const renderField = ({ input, meta: { touched, error }, label, type }) => (
@@ -26,7 +27,7 @@ const ololo = values => {
 };
 
 const renderHobbies = ({ fields, meta: { error } }) => {
-	console.log(fields);
+	// console.log(fields);
 	return (
 		<ul>
 			<li>
@@ -57,14 +58,13 @@ class LoadForm extends Component {
 	};
 
 	submit = values => {
-		const { addToList } = this.props;
+		const { event } = this.props;
 
-		addToList(values);
+		event(values);
 	};
 
 	render() {
-		const { handleSubmit } = this.props;
-		console.log("tssad", this.props);
+		const { handleSubmit, title, pristine, submitting } = this.props;
 
 		return (
 			<form onSubmit={handleSubmit(this.submit)} className="form">
@@ -90,7 +90,12 @@ class LoadForm extends Component {
 				<FieldArray name="loads" component={renderHobbies} />
 
 				<div className="form__button-box">
-					<button className="form__submit-button">Создать Доставку</button>
+					<button
+						disabled={pristine || submitting}
+						style={{ color: pristine || submitting ? "red" : "black" }}
+						className="form__submit-button">
+						{title}
+					</button>
 					<button type="button" className="form__submit-button form__submit-button--reset">
 						Очистить форму
 					</button>
@@ -100,4 +105,10 @@ class LoadForm extends Component {
 	}
 }
 
-export default reduxForm({ form: "LoadForm", validate: ololo })(LoadForm);
+const mapStateToProps = (state, props) => ({
+	form: props.formId
+});
+
+const component = reduxForm({ validate: ololo, enableReinitialize: true })(LoadForm);
+
+export default connect(mapStateToProps)(component);

src/components/modal/index.js

@@ -5,14 +5,14 @@ import LoadForm from "../loadForm";
 
 export default class EditModal extends Component {
 	render() {
-		const { visible, handleClose, addLoads, loads, addToList, inputData, initialValues } = this.props;
+		const { visible, handleClose, inputData, editLoads, initialValues } = this.props;
 		return (
-			<Modal title="Basic Modal" visible={visible} onCancel={handleClose}>
+			<Modal footer={false} title="Basic Modal" visible={visible} onCancel={handleClose}>
 				<LoadForm
+					formId="editLoads"
+					title="Сохранить изменения"
 					initialValues={initialValues}
-					addLoads={addLoads}
-					loads={loads}
-					addToList={addToList}
+					event={editLoads}
 					inputData={inputData}
 				/>
 			</Modal>

src/constants/actionTypes.js

@@ -2,7 +2,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 GET_INIT_VAL = "GET_INIT_VAL";
-// export const CHANGE_LIST_VALUE = "CHANGE_LIST_VALUE";
+export const EDIT_LOADS = "EDIT_LOADS";
 // export const DELETE_ITEM_LIST = "DELETE_ITEM_LIST";
 
 export const WEATHER_REQUEST = "WEATHER_REQUEST";

src/container/App.js

@@ -16,16 +16,15 @@ class App extends Component {
 	openEditModal = id => {
 		const { getInitVal } = this.props;
 		getInitVal(id);
-		this.setState({ toggleModal: true });
+		this.setState({ toggleModal: true, openAddForm: false });
 	};
 	closeEditModal = () => this.setState({ toggleModal: false });
 
 	openFormHandler = () => this.setState(prevState => ({ openAddForm: !prevState.openAddForm }));
 
 	render() {
-		const { list, inputData, addToList, loads, addLoads, initialValues } = this.props;
+		const { list, inputData, addToList, editLoads, initialValues } = this.props;
 		const { openAddForm, toggleModal } = this.state;
-		console.log("list", list);
 		return (
 			<Fragment>
 				<h1 className="h1-tag">
@@ -37,16 +36,16 @@ class App extends Component {
 				<div className="todo">
 					<List list={list} openEditModal={this.openEditModal} />
 
-					{openAddForm && (
-						<LoadForm addLoads={addLoads} loads={loads} addToList={addToList} inputData={inputData} />
-					)}
+					<div style={{ width: `50%` }}>
+						{openAddForm && (
+							<LoadForm formId="addLoads" title="Создать доставку" event={addToList} inputData={inputData} />
+						)}
+					</div>
 				</div>
 
 				<EditModal
 					initialValues={initialValues}
-					addLoads={addLoads}
-					loads={loads}
-					addToList={addToList}
+					editLoads={editLoads}
 					inputData={inputData}
 					visible={toggleModal}
 					handleClose={this.closeEditModal}
@@ -59,7 +58,6 @@ class App extends Component {
 const mapStateToProps = state => ({
 	list: state.todo.list,
 	inputData: state.todo.data,
-	loads: state.todo.loads,
 	initialValues: state.todo.initialValues
 });
 

src/style/components/_form.scss

@@ -1,9 +1,9 @@
 .form {
-	width: 60%;
+	width: 100%;
 
 	&__input-box {
 		padding: 0 2rem;
-		width: 50%;
+		width: 100%;
 
 		&:not(:last-child) {
 			margin-bottom: 2rem;