diff --git a/src/actions/contactActions.js b/src/actions/contactActions.js index 2994002..20201d5 100644 --- a/src/actions/contactActions.js +++ b/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}`) diff --git a/src/actions/types.js b/src/actions/types.js index a93aa73..af70cfb 100644 --- a/src/actions/types.js +++ b/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'; diff --git a/src/components/contacts/Contacts.js b/src/components/contacts/Contacts.js index f6dc1ea..7e0b695 100644 --- a/src/components/contacts/Contacts.js +++ b/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); diff --git a/src/components/contacts/EditContact.js b/src/components/contacts/EditContact.js index 5404eb0..aee2ff3 100644 --- a/src/components/contacts/EditContact.js +++ b/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); diff --git a/src/reducers/contactReducer.js b/src/reducers/contactReducer.js index 23aa34c..386357f 100644 --- a/src/reducers/contactReducer.js +++ b/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,