add todo

src/components/button/button.js

@@ -1,3 +1,7 @@
 import React from "react";
 
-export default ({ text, ...rest }) => <button {...rest}>{text}</button>;
+export default ({ text, type = "button", ...rest }) => (
+	<button type={type} {...rest}>
+		{text}
+	</button>
+);

src/components/form/index.js

@@ -11,7 +11,7 @@ export default class Form extends Component {
 	};
 
 	render() {
-		const { values, onChangeEvent } = this.props;
+		const { values, onChangeEvent, reset, editableForm, addHobby, rmHobby } = this.props;
 
 		return (
 			<form onSubmit={this.submit}>
@@ -32,16 +32,23 @@ export default class Form extends Component {
 				<Input onChange={onChangeEvent} value={values.age} id="age" type="number" name="age" label="Age" />
 				<Input
 					onChange={onChangeEvent}
-					value={values.editable}
+					checked={values.editable}
 					id="editable"
 					type="checkbox"
 					name="editable"
 					label="Editable"
 				/>
+				<Button text="+" onClick={addHobby} />
 
-				<Input onChange={onChangeEvent} value={values.hobby} id="hobby" name="hobby" label="Hobby" />
+				{values.hobby.map(el => (
+					<div key={el.id}>
+						<Input onChange={onChangeEvent} value={el.value} id={el.id} name="hobby" label="Hobby" />
+						<Button text="-" onClick={rmHobby.bind(null, el.id)} />
+					</div>
+				))}
 
-				<Button type="submit" text="Add" />
+				<Button type="submit" text={editableForm ? "Save" : "Add"} />
+				<Button text="Reset" onClick={reset} />
 			</form>
 		);
 	}

src/containers/main.js

@@ -2,6 +2,7 @@ import React, { Component } from "react";
 
 import Form from "../components/form";
 import HOCcomponent from "../components/HOC/resize";
+import Button from "../components/button/button";
 
 const list = [
 	{
@@ -17,32 +18,113 @@ const list = [
 class Main extends Component {
 	state = {
 		list: list,
-		newItem: {
+		editableForm: false,
+		item: {
 			editable: false,
 			firstName: "",
 			lastName: "",
 			age: "",
-			hobby: ""
+			hobby: [{ id: new Date().getTime(), value: "" }]
 		}
 	};
 
-	onChange = e => {
-		const { name, value, checked, type } = e.target;
+	addHobby = () => {
+		this.setState(prevState => ({
+			...prevState,
+			item: {
+				...prevState.item,
+				hobby: prevState.item.hobby.concat({ id: new Date().getTime(), value: "" })
+			}
+		}));
+	};
 
+	rmHobby = id => {
 		this.setState(prevState => ({
 			...prevState,
-			newItem: {
-				...prevState.newItem,
+			item: {
+				...prevState.item,
+				hobby: prevState.item.hobby.filter(el => el.id !== id)
+			}
+		}));
+	};
+
+	onChange = e => {
+		const { name, value, checked, type, id } = e.target;
+
+		if (name === "hobby") {
+			console.log("id", id);
+			console.log("ww", this.state.item);
+			return this.setState(prevState => ({
+				...prevState,
+				item: {
+					...prevState.item,
+					hobby: prevState.item.hobby.map(el => (el.id === +id ? { ...el, value } : el))
+				}
+			}));
+		}
+
+		return this.setState(prevState => ({
+			...prevState,
+			item: {
+				...prevState.item,
 				[name]: type === "checkbox" ? checked : value
 			}
 		}));
 	};
 
-	onSubmit = () => console.log("submit");
+	onSubmit = () => {
+		const { editableForm } = this.state;
+
+		if (editableForm) {
+			this.setState(prevState => ({
+				...prevState,
+				list: prevState.list.map(el =>
+					el.id === prevState.item.id
+						? { ...prevState.item, hobby: prevState.item.hobby.map(el => el.value) }
+						: el
+				)
+			}));
+
+			return this.resetFormHandler();
+		}
+
+		this.setState(prevState => ({
+			...prevState,
+			list: prevState.list.concat({
+				...prevState.item,
+				id: new Date().getTime(),
+				hobby: prevState.item.hobby.map(el => el.value)
+			})
+		}));
+
+		return this.resetFormHandler();
+	};
+
+	resetFormHandler = () =>
+		this.setState({
+			item: {
+				editable: false,
+				firstName: "",
+				lastName: "",
+				age: "",
+				hobby: [{ id: new Date().getTime(), value: "" }]
+			},
+			editableForm: false
+		});
+
+	removeHandler = id =>
+		this.setState(prevState => ({
+			...prevState,
+			list: prevState.list.filter(el => el.id !== id)
+		}));
+
+	editHandler = id => {
+		const item = this.state.list.find(el => el.id === id);
+		this.setState({ editableForm: true, item });
+	};
 
 	render() {
 		const { list } = this.state;
-
 		return (
 			<>
 				<div style={{ border: "1px solid #eee", textAlign: "center", padding: 10 }}>
@@ -54,6 +136,19 @@ class Main extends Component {
 					<div className="list">
 						{list.map(el => (
 							<div className="list__item" key={el.id}>
+								<Button
+									text="x"
+									className="list__rm-btn"
+									// onClick={() => this.removeHandler(el.id)} />
+									onClick={this.removeHandler.bind(null, el.id)}
+								/>
+								{el.editable && (
+									<Button
+										text="edit"
+										className="list__edit-btn"
+										onClick={this.editHandler.bind(null, el.id)}
+									/>
+								)}
 								<h4 className="list__item-title">{el.firstName}</h4>
 								<p className="list__item-age">Age: {el.age}</p>
 								<ul className="list__item-ul">
@@ -67,7 +162,15 @@ class Main extends Component {
 						))}
 					</div>
 
-					<Form onChangeEvent={this.onChange} onSubmitEvent={this.onSubmit} values={this.state.newItem} />
+					<Form
+						rmHobby={this.rmHobby}
+						addHobby={this.addHobby}
+						editableForm={this.state.editableForm}
+						reset={this.resetFormHandler}
+						onChangeEvent={this.onChange}
+						onSubmitEvent={this.onSubmit}
+						values={this.state.item}
+					/>
 				</div>
 			</>
 		);

src/style.scss

@@ -66,6 +66,7 @@ body {
 		border: 1px solid #eee;
 		padding: 10px;
 		width: 250px;
+		position: relative;
 
 		text-decoration: none;
 		text-align: center;
@@ -74,6 +75,20 @@ body {
 		border-radius: 3px;
 	}
 
+	&__rm-btn {
+		position: absolute;
+		top: 20px;
+		right: 20px;
+		cursor: pointer;
+	}
+
+	&__edit-btn {
+		position: absolute;
+		top: 20px;
+		right: 50px;
+		cursor: pointer;
+	}
+
 	&__item-title {
 		font-size: 18px;
 		color: red;