refactor (components): Wizard instead full form, add loader

package.json

@@ -5,7 +5,7 @@
   "dependencies": {
     "axios": "^0.18.0",
     "moment": "^2.22.2",
-    "react": "^16.4.2",
+    "react": "^16.5.2",
     "react-datepicker": "^1.6.0",
     "react-dom": "^16.4.2",
     "react-input-mask": "^2.0.4",
@@ -14,7 +14,8 @@
     "react-scripts": "1.1.5",
     "react-text-mask": "^5.4.3",
     "redux": "^4.0.0",
-    "redux-thunk": "^2.3.0"
+    "redux-thunk": "^2.3.0",
+    "spinners": "^1.2.2"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.js

@@ -3,7 +3,7 @@ import { BrowserRouter as Router, Route } from 'react-router-dom'
 import ContactListItem from './components/ContactListItem/ContactListItem'
 import ContactCreateForm from './components/ContactCreateForm/ContactCreateForm'
 import ContactExplorer
-  from './containers/ContactExplorer'
+  from './components/ContactExplorer/containers/ContactExplorer'
 import './styles.css'
 import ContactSearchForm from './components/ContactSearchForm/ContactSearchForm'
 

src/actions/actions.js

@@ -1,12 +1,13 @@
 import axios from 'axios'
-
 export const SHOW_LIST = 'SHOW_LIST'
 export const SHOW_SEARCH = 'SHOW_SEARCH'
 export const SHOW_DISPLAY = 'SHOW_DISPLAY'
 export const SHOW_EDIT = 'SHOW_EDIT'
 export const GET_CONTACTS_SUCCESS = 'GET_CONTACTS_SUCCESS'
 export const SAVE_CONTACT_SUCCESS = 'SAVE_CONTACT_SUCCESS'
 export const DELETE_CONTACT_SUCCESS = 'DELETE_CONTACT_SUCCESS'
+export const SAVE_CONTACT_DATA = 'SAVE_CONTACT_DATA'
+export const LOAD_CONTACTS_SUCCESS = 'LOAD_CONTACTS_SUCCESS'
 
 export function getContacts () {
   return function (dispatch) {
@@ -21,6 +22,20 @@ export function getContacts () {
   }
 }
 
+export function loadContacts (pageNumber) {
+  return function (dispatch) {
+    return axios.post('http://localhost:3000/list', { pageNumber })
+      .then(res => {
+        const contacts = res.data
+        dispatch({
+          type: LOAD_CONTACTS_SUCCESS,
+          contacts: contacts,
+        })
+      })
+  }
+}
+
+
 export function saveContact (contact) {
   console.log('contact', contact)
   return function (dispatch) {
@@ -52,6 +67,7 @@ export function showList () {
     showSearch: false,
     showDisplay: false,
     showEdit: false,
+    showLoader: true,
   }
 }
 
@@ -62,6 +78,8 @@ export function showSearch () {
     showSearch: true,
     showDisplay: false,
     showEdit: false,
+    showLoader: false,
+
   }
 }
 
@@ -73,6 +91,7 @@ export function showDisplay (contact) {
     showDisplay: true,
     showEdit: false,
     contact: contact,
+    showLoader: false,
   }
 }
 
@@ -84,6 +103,14 @@ export function showEdit (contact) {
     showDisplay: false,
     showEdit: true,
     contact: contact,
+    showLoader: false,
+  }
+}
+
+export function saveContactData (contact) {
+  return {
+    type: SAVE_CONTACT_DATA,
+    contact: contact,
   }
 }
 

src/components/ContactCreateForm/AdditionalStep.js

@@ -0,0 +1,97 @@
+import React from 'react'
+import './styles.css'
+
+class AdditionalStep extends React.Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      contact: {},
+    }
+  }
+
+  saveData = () => {
+    this.props.saveData(this.state.contact)
+  }
+
+  onClick = () => {
+    this.saveData()
+    this.saveContact()
+  }
+
+  handleInputChange = (event) => {
+    const target = event.target
+    const value = target.value
+    const name = target.name
+    if (value !== '') {
+      this.setState({
+        contact: {
+          ...this.state.contact, [name]: value,
+        },
+      })
+    } else {
+      this.setState({
+        contact: {
+          ...this.state.contact, [name]: undefined,
+        },
+      })
+    }
+  }
+
+  showLocationStep = () => {
+    this.props.showLocationStep()
+  }
+
+  saveContact = () => {
+    this.props.saveContact(this.state.contact)
+  }
+
+  componentDidMount () {
+    if (this.props.contact) {
+      this.setState({
+        ...this.state, contact: this.props.contact,
+      })
+    }
+  }
+
+  render () {
+    console.log('this.state.contact.image', this.state.contact)
+    return (
+      <div className="contact-create-form__container">
+        <div>
+          <div className='contact-create-form__container__title'>
+            Additional information:
+          </div>
+          <div className='contact-create-form__container__input-block'>
+            <div className='contact-create-form__container__input-block__item'>
+              <label htmlFor='email' className='contact-create-form__label'>E-mail:</label>
+              <input name='email' id='email' type='text' placeholder='E-mail' className='contact-create-form__input' value={this.state.contact.email} onChange={this.handleInputChange}/>
+            </div>
+            <div className='contact-create-form__container__input-block__item'>
+              <label htmlFor='website' className='contact-create-form__label'>Website:</label>
+              <input name='website' id='website' type='text' placeholder='Website' className='contact-create-form__input' value={this.state.contact.website} onChange={this.handleInputChange}/>
+            </div>
+            <div className='contact-create-form__container__input-block__item'>
+              <label htmlFor='job' className='contact-create-form__label'>Current job:</label>
+              <input name='job' id='job' type='text' placeholder='Current job' className='contact-create-form__input' value={this.state.contact.job} onChange={this.handleInputChange}/>
+            </div>
+            <div className='contact-create-form__container__input-block__item__textarea'>
+              <label htmlFor='about' className='contact-create-form__label'>About me:</label>
+              <textarea name='about' id='about' placeholder='Tell us about yourself' className='contact-create-form__textarea' value={this.state.contact.about} onChange={this.handleInputChange}></textarea>
+            </div>
+          </div>
+        </div>
+        <div>
+          <button className="contact-create-form__button" onClick={this.onClick}>
+            Save
+          </button>
+          <button className="contact-create-form__button" onClick={this.showLocationStep}>
+            Back
+          </button>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default AdditionalStep
+