add modal

src/components/list/index.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { Button, Icon } from "antd";
 
-export default ({ list }) => (
+export default ({ list, openEditModal }) => (
 	<div className="list">
 		{list.map(el => (
 			<div key={el.id} className="list__item">
@@ -18,7 +18,7 @@ export default ({ list }) => (
 					</div>
 				</div>
 				<div className="list__buttons">
-					<Button size="small" type="primary">
+					<Button size="small" type="primary" onClick={openEditModal.bind(null, el.id)}>
 						<Icon type="edit" />
 					</Button>
 					<Button size="small" type="danger">

src/components/loadForm/index.js

@@ -42,14 +42,23 @@ export default class LoadForm extends Component {
 					</label>
 				</div>
 
+				<div className="form__input-box">
+					<label className="form__input-lable" htmlFor="weight">
+						Вес
+						<input 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>
+
 				<div className="form__button-box">
 					<button className="form__submit-button">Создать Доставку</button>
+					<button className="form__submit-button form__submit-button--reset">Очистить форму</button>
 				</div>
 			</div>
 		);

src/components/modal/index.js

@@ -0,0 +1,15 @@
+import React, { Component } from "react";
+import { Modal } from "antd";
+
+export default class EditModal extends Component {
+	render() {
+		const { visible, handleClose } = this.props;
+		return (
+			<Modal title="Basic Modal" visible={visible} onCancel={handleClose}>
+				<p>Some contents...</p>
+				<p>Some contents...</p>
+				<p>Some contents...</p>
+			</Modal>
+		);
+	}
+}

src/container/App.js

@@ -5,17 +5,22 @@ import { connect } from "react-redux";
 import * as actions from "../actions/todo";
 import List from "../components/list";
 import LoadForm from "../components/loadForm";
+import EditModal from "../components/modal";
 
 class App extends Component {
 	state = {
-		openAddForm: false
+		openAddForm: false,
+		toggleModal: false
 	};
 
+	openEditModal = () => this.setState({ toggleModal: true });
+	closeEditModal = () => this.setState({ toggleModal: false });
+
 	openFormHandler = () => this.setState(prevState => ({ openAddForm: !prevState.openAddForm }));
 
 	render() {
 		const { list } = this.props;
-		const { openAddForm } = this.state;
+		const { openAddForm, toggleModal } = this.state;
 		return (
 			<Fragment>
 				<h1 className="h1-tag">
@@ -25,10 +30,12 @@ class App extends Component {
 					</span>
 				</h1>
 				<div className="todo">
-					<List list={list} />
+					<List list={list} openEditModal={this.openEditModal} />
 
 					{openAddForm && <LoadForm />}
 				</div>
+
+				<EditModal visible={toggleModal} handleClose={this.closeEditModal} />
 			</Fragment>
 		);
 	}

src/style/components/_form.scss

@@ -38,5 +38,10 @@
 		&:focus {
 			outline: none;
 		}
+
+		&--reset {
+			margin-left: 2rem;
+			background-color: $color-grey-light;
+		}
 	}
 }

src/utils/fakeData.js

@@ -7,7 +7,13 @@ export default [
 		contactName: "Anthony",
 		night: true,
 		bodyType: "type1",
-		load: ["some1", "some2", "some3", "some4", "some5"]
+		load: [
+			{ id: 1, name: "some1" },
+			{ id: 2, name: "some2" },
+			{ id: 3, name: "some3" },
+			{ id: 4, name: "some4" },
+			{ id: 5, name: "some5" }
+		]
 	},
 	{
 		id: 2,
@@ -17,7 +23,13 @@ export default [
 		contactName: "John",
 		night: false,
 		bodyType: "type2",
-		load: ["some1", "some2", "some3", "some4", "some5"]
+		load: [
+			{ id: 1, name: "some1" },
+			{ id: 2, name: "some2" },
+			{ id: 3, name: "some3" },
+			{ id: 4, name: "some4" },
+			{ id: 5, name: "some5" }
+		]
 	},
 	{
 		id: 3,
@@ -27,6 +39,12 @@ export default [
 		contactName: "Alex",
 		night: true,
 		bodyType: "type3",
-		load: ["some1", "some2", "some3", "some4", "some5"]
+		load: [
+			{ id: 1, name: "some1" },
+			{ id: 2, name: "some2" },
+			{ id: 3, name: "some3" },
+			{ id: 4, name: "some4" },
+			{ id: 5, name: "some5" }
+		]
 	}
 ];