Edit Contact

src/actions/contactActions.js

@@ -1,5 +1,5 @@
 import axios from 'axios';
-import { GET_CONTACTS, DELETE_CONTACT, ADD_CONTACT } from './types';
+import { GET_CONTACTS, DELETE_CONTACT, ADD_CONTACT, GET_CONTACT, UPDATE_CONTACT } from './types';
 
 export const getContacts = () => async dispatch => {
   const res = await axios.get('https://jsonplaceholder.typicode.com/users')
@@ -9,6 +9,14 @@ export const getContacts = () => async dispatch => {
   })
 };
 
+export const getContact = (id) => async dispatch => {
+  const res = await axios.get(`https://jsonplaceholder.typicode.com/users/${id}`)
+  dispatch({
+    type: GET_CONTACT,
+    payload: res.data
+  })
+};
+
 export const deleteContact = (id) => async dispatch => {
   try{
     await axios.delete(`https://jsonplaceholder.typicode.com/users/${id}`)

src/actions/types.js

@@ -1,3 +1,5 @@
 export const GET_CONTACTS = 'GET_CONTACTS';
 export const DELETE_CONTACT = 'DELETE_CONTACT';
 export const ADD_CONTACT = 'ADD_CONTACT';
+export const GET_CONTACT = 'GET_CONTACT';
+export const UPDATE_CONTACT = 'UPDATE_CONTACT';

src/components/contacts/Contacts.js

@@ -33,4 +33,4 @@ const mapStateToProps = (state) => ({
   contacts: state.contact.contacts
 });
 
-export default connect(mapStateToProps, {getContacts})(Contacts);
+export default connect(mapStateToProps, { getContacts })(Contacts);

src/components/contacts/EditContact.js

@@ -1,5 +1,8 @@
 import React, { Component } from 'react';
 import TextInputGroup from '../layout/TextInputGroup';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { getContact } from './../../actions/contactActions';
 
 class EditContact extends Component {
   state = {
@@ -9,6 +12,20 @@ class EditContact extends Component {
     errors: {}
   };
 
+  componentDidMount(){
+    const { id } = this.props.match.params;
+    this.props.getContact(id);
+  }
+
+  componentWillReceiveProps(nextProps, nextState){
+    const { name, email, phone } = nextProps.contact;
+    this.setState({ 
+      name,
+      email,
+      phone
+    })
+  }
+
   onSubmit = (e) => {
     e.preventDefault();
 
@@ -98,4 +115,13 @@ class EditContact extends Component {
   }
 }
 
-export default EditContact;
+EditContact.propTypes = {
+  contact: PropTypes.object.isRequired,
+  getContact: PropTypes.func.isRequired
+};
+
+const mapStateToProps = (state) => ({
+  contact: state.contact.contact
+});
+
+export default connect(mapStateToProps, { getContact })(EditContact);

src/reducers/contactReducer.js

@@ -1,7 +1,8 @@
-import { GET_CONTACTS, DELETE_CONTACT, ADD_CONTACT } from './../actions/types';
+import { GET_CONTACTS, DELETE_CONTACT, ADD_CONTACT, GET_CONTACT, UPDATE_CONTACT } from './../actions/types';
 
 const initialState = {
-  contacts: []
+  contacts: [],
+  contact: {}
 };
 
 export default function(state = initialState, action){
@@ -11,6 +12,11 @@ export default function(state = initialState, action){
         ...state,
         contacts: action.payload
       }
+    case GET_CONTACT:
+      return {
+        ...state,
+        contact: action.payload
+      }
     case DELETE_CONTACT:
       return {
         ...state,