add put

src/actionTypes/actionTypes.js

@@ -6,6 +6,7 @@ export const REQUEST_SUCCESS = "REQUEST_SUCCESS";
 export const REQUEST_FAIL = "REQUEST_FAIL";
 
 export const HANDLE_CHANGE_EVENT = "HANDLE_CHANGE_EVENT";
+export const HANDLE_CHANGE_EDIT_FORM = "HANDLE_CHANGE_EDIT_FORM";
 export const RESET_FORM = "RESET_FORM";
 export const HANDLE_SUBMIT_EVENT = "HANDLE_SUBMIT_EVENT";
 export const REMOVE_ITEM = "REMOVE_ITEM";
@@ -31,3 +32,7 @@ export const POST_REQUEST_FAIL = "POST_REQUEST_FAIL";
 export const REMOVE_REQUEST = "REMOVE_REQUEST";
 export const REMOVE_REQUEST_SUCCESS = "REMOVE_REQUEST_SUCCESS";
 export const REMOVE_REQUEST_FAIL = "REMOVE_REQUEST_FAIL";
+
+export const UPDATE_REQUEST = "UPDATE_REQUEST";
+export const UPDATE_REQUEST_SUCCESS = "UPDATE_REQUEST_SUCCESS";
+export const UPDATE_REQUEST_FAIL = "UPDATE_REQUEST_FAIL";

src/actions/remote-todo.js

@@ -1,6 +1,7 @@
 import axios from "axios";
 
 import * as types from "../actionTypes/actionTypes";
+import rmFiels from "../utils/rmPropFromObject";
 
 const URL = "https://test-request-4b9d7.firebaseio.com/posts";
 
@@ -9,6 +10,11 @@ export const changeInputValue = payload => ({
 	payload
 });
 
+export const handleChangeEditForm = payload => ({
+	type: types.HANDLE_CHANGE_EDIT_FORM,
+	payload
+});
+
 export const resetPostForm = () => ({
 	type: types.RESET_POSTS_FORM
 });
@@ -94,3 +100,28 @@ export const removePost = id => dispatch => {
 		.then(res => dispatch(removeRequestSuccess({ res, id })))
 		.catch(err => dispatch(removeRequestFail(err)));
 };
+
+const updatePost = payload => ({
+	type: types.UPDATE_REQUEST,
+	payload
+});
+
+const updatePostSuccess = payload => ({
+	type: types.UPDATE_REQUEST_SUCCESS,
+	payload
+});
+
+const updatePostFail = payload => ({
+	type: types.UPDATE_REQUEST_FAIL,
+	payload
+});
+
+export const update = payload => dispatch => {
+	const data = rmFiels(payload, "id");
+
+	dispatch(updatePost());
+	return axios
+		.put(URL + "/" + payload.id + ".json", data)
+		.then(res => dispatch(updatePostSuccess({ res, id: payload.id })))
+		.catch(err => dispatch(updatePostFail(err)));
+};

src/components/header/index.js

@@ -17,7 +17,7 @@ const header = props => {
 		});
 
 	return (
-		<header className="header">
+		<header className="header" id="header">
 			<div className="header__left-wrapper">
 				<div className="header__logo-box">logo</div>
 				<nav className="header__nav">

src/components/modal/index.js

@@ -0,0 +1,18 @@
+import React, { Component } from "react";
+import ReactDOM from "react-dom";
+
+import "./style.scss";
+
+export default class Modal extends Component {
+	render() {
+		const { children, open } = this.props;
+		return open
+			? ReactDOM.createPortal(
+					<div className="modal" ref={this.modal}>
+						{children}
+					</div>,
+					document.body
+			  )
+			: null;
+	}
+}

src/components/modal/style.scss

@@ -0,0 +1,10 @@
+.modal {
+	position: fixed;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+
+	padding: 30px;
+	border: 1px solid #eee;
+	border-radius: 3px;
+}

src/containers/remote-todo.js

@@ -8,18 +8,38 @@ import {
 	resetPostForm,
 	removePost,
 	showEditForm,
-	cancelUpdate
+	cancelUpdate,
+	update,
+	handleChangeEditForm
 } from "../actions/remote-todo";
 
 import Input from "../components/input";
 import Button from "../components/button/button";
 import Loder from "../components/HOC/loader";
+import Modal from "../components/modal";
 
 export class RemoteTodo extends Component {
+	state = { open: false };
+
+	close = () => this.setState({ open: false });
+
+	open = () => this.setState({ open: true });
+
 	componentDidMount() {
 		this.props.getPosts();
 	}
 
+	showEditModalForm = id => {
+		this.props.showEditForm(id);
+		this.open();
+	};
+
+	udatePostHandler = () => {
+		const { sendDataObject, update } = this.props;
+		update(sendDataObject);
+		this.close();
+	};
+
 	render() {
 		const {
 			changeInputValue,
@@ -30,10 +50,10 @@ export class RemoteTodo extends Component {
 			sendDataObject,
 			removePost,
 			isFetching,
-			showEditForm,
 			editForm,
 			editFormField,
-			cancelUpdate
+			cancelUpdate,
+			handleChangeEditForm
 		} = this.props;
 
 		return (
@@ -75,7 +95,11 @@ export class RemoteTodo extends Component {
 						<div key={el.id} className="list__item">
 							<Button text="x" className="list__rm-btn" onClick={removePost.bind(null, el.id)} />
 							{el.editable && (
-								<Button text="edit" className="list__edit-btn" onClick={showEditForm.bind(null, el.id)} />
+								<Button
+									text="edit"
+									className="list__edit-btn"
+									onClick={this.showEditModalForm.bind(null, el.id)}
+								/>
 							)}
 							<h3>
 								{el.firstName} {el.lastName}
@@ -91,35 +115,35 @@ export class RemoteTodo extends Component {
 								width: "100%",
 								display: "flex",
 								flexDirection: "column"
-							}}>
-							{editFormField.map(el => {
-								return (
-									<Input
-										key={el.id}
-										id={el.id}
-										value={el.value}
-										checked={el.checked}
-										type={el.type}
-										name={el.name}
-										label={el.label}
-										onChange={changeInputValue}
-									/>
-								);
-							})}
-							<div>
-								<Loder flag={isFetching}>
-									<Button
-										text="Update Post"
-										onClick={() => {
-											console.log("sendDataObject", sendDataObject);
-										}}
-									/>
-								</Loder>
-								<Button text="CANCEL" onClick={cancelUpdate} />
-							</div>
-						</div>
+							}}
+						/>
 					</div>
 				)}
+				<Modal open={this.state.open} close={this.close}>
+					<div>
+						{editFormField.map(el => {
+							return (
+								<Input
+									key={el.id}
+									id={el.id}
+									value={el.value}
+									checked={el.checked}
+									type={el.type}
+									name={el.name}
+									label={el.label}
+									onChange={handleChangeEditForm}
+								/>
+							);
+						})}
+						<div>
+							<Loder flag={isFetching}>
+								<Button text="Update Post" onClick={this.udatePostHandler} />
+							</Loder>
+							<Button text="CANCEL" onClick={cancelUpdate} />
+						</div>
+						<button onClick={this.close}>close</button>
+					</div>
+				</Modal>
 			</div>
 		);
 	}
@@ -138,5 +162,15 @@ const mapStateToProps = state => {
 
 export default connect(
 	mapStateToProps,
-	{ changeInputValue, createPost, getPosts, resetPostForm, removePost, showEditForm, cancelUpdate }
+	{
+		changeInputValue,
+		createPost,
+		getPosts,
+		resetPostForm,
+		removePost,
+		showEditForm,
+		cancelUpdate,
+		handleChangeEditForm,
+		update
+	}
 )(RemoteTodo);

src/reducer/remote-todo.js

@@ -47,6 +47,27 @@ const initialState = {
 
 export default (state = initialState, { type, payload }) => {
 	switch (type) {
+		case types.HANDLE_CHANGE_EDIT_FORM: {
+			const { value, checked, type, id, name } = payload.target;
+			const checkbox = type === "checkbox";
+
+			return {
+				...state,
+				sendDataObject: {
+					...state.sendDataObject,
+					[name]: checkbox ? checked : value
+				},
+				editFormField: state.editFormField.map(el =>
+					el.id === +id
+						? {
+								...el,
+								[checkbox ? "checked" : "value"]: checkbox ? checked : value
+						  }
+						: el
+				)
+			};
+		}
+
 		case types.CHANGE_INPUT_VALUE: {
 			const { value, checked, type, id, name } = payload.target;
 			const checkbox = type === "checkbox";
@@ -143,6 +164,22 @@ export default (state = initialState, { type, payload }) => {
 			};
 		}
 
+		case types.UPDATE_REQUEST: {
+			return state;
+		}
+
+		case types.UPDATE_REQUEST_SUCCESS: {
+			const { id, res } = payload;
+
+			return {
+				...state,
+				postList: state.postList.map(el => (el.id === id ? { ...res.data, id } : el))
+			};
+		}
+		case types.UPDATE_REQUEST_FAIL: {
+			return state;
+		}
+
 		default:
 			return state;
 	}

src/utils/rmPropFromObject.js

@@ -0,0 +1,4 @@
+export default (obj, field) => {
+	const { [field]: _, ...newObj } = obj;
+	return newObj;
+};