- add an ability to create/update/delete persons

- move persons list into separated component

package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "backendless": "^5.2.8",
     "react": "^16.8.4",
+    "react-bootstrap": "^1.0.0-beta.6",
     "react-dom": "^16.8.4",
     "react-redux": "^6.0.1",
     "react-scripts": "2.1.8",

src/app.js

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import Persons from './persons';
+
+export default function App() {
+  return (
+    <div className="container">
+      <div className="header">
+        <h3>
+          Backendless React Addresses Book
+        </h3>
+      </div>
+
+      <Persons/>
+    </div>
+  );
+}

src/index.js

@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux'
 
 import './index.css';
-import App from './App';
+import App from './app';
 import * as serviceWorker from './serviceWorker';
 
 import { createStore } from './store'

src/persons/delete-confirmation.js

@@ -0,0 +1,58 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux'
+import Modal from 'react-bootstrap/Modal';
+import Button from 'react-bootstrap/Button';
+
+import { removePerson } from '../store';
+
+class DeletePersonConfirmation extends Component {
+
+  state = {
+    removing: false,
+  };
+
+  close = () => {
+    this.setState({
+      removing: false,
+    });
+
+    this.props.onHide()
+  };
+
+  confirm = () => {
+    const { person } = this.props;
+
+    this.setState({ removing: true });
+
+    this.props.removePerson(person.objectId)
+      .then(() => this.close())
+  };
+
+  render() {
+    const { person, show } = this.props;
+    const { removing } = this.state;
+
+    return (
+      <Modal show={show} onHide={this.close}>
+        <Modal.Header className="bg-danger text-white" closeButton>
+          <Modal.Title>
+            Delete Person Confirmation
+          </Modal.Title>
+        </Modal.Header>
+
+        <Modal.Body>
+          <p>
+            Are you seriously want to delete "<b>{person && person.name}</b>"
+          </p>
+        </Modal.Body>
+
+        <Modal.Footer>
+          <Button variant="secondary" onClick={this.close} disabled={removing}>No</Button>
+          <Button variant="danger" onClick={this.confirm} disabled={removing}>Yes</Button>
+        </Modal.Footer>
+      </Modal>
+    );
+  }
+}
+
+export default connect(null, { removePerson })(DeletePersonConfirmation);

src/persons/editor.js

@@ -0,0 +1,122 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux'
+import Modal from 'react-bootstrap/Modal';
+import Button from 'react-bootstrap/Button';
+import Alert from 'react-bootstrap/Alert';
+
+import { createPerson, updatePerson } from '../store';
+
+class PersonEditor extends Component {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      person     : props.person || {},
+      saving     : false,
+      serverError: null,
+    }
+  }
+
+  componentWillReceiveProps(nextProps) {
+    const prevPerson = this.props.person || {};
+    const nextPerson = nextProps.person || {};
+
+    if (prevPerson.objectId !== nextPerson.objectId) {
+      this.setState({ person: nextPerson })
+    }
+  }
+
+  close = () => {
+    this.setState({
+      person     : {},
+      saving     : false,
+      serverError: null
+    });
+
+    this.props.onHide()
+  };
+
+  preparePerson() {
+    const { person } = this.state;
+
+    return {
+      ...person,
+      name   : (person.name || '').trim() || null,
+      address: (person.address || '').trim() || null,
+    }
+  }
+
+  save = () => {
+    const person = this.preparePerson();
+
+    const action = this.props.person
+      ? this.props.updatePerson
+      : this.props.createPerson;
+
+    action(person)
+      .then(() => this.close())
+      .catch(e => this.setState({ serverError: e.message }));
+  };
+
+  onNameChange = e => this.setState({ person: { ...this.state.person, name: e.target.value } });
+  onAddressChange = e => this.setState({ person: { ...this.state.person, address: e.target.value } });
+
+  render() {
+    const { show } = this.props;
+    const { person, serverError, saving } = this.state;
+
+    const isNew = !this.props.person;
+
+    return (
+      <Modal show={show} onHide={this.close}>
+        <Modal.Header closeButton>
+          <Modal.Title>
+            {isNew ? 'Add' : 'Edit'} Person
+          </Modal.Title>
+        </Modal.Header>
+
+        <Modal.Body>
+          <form>
+            <div className="form-group">
+              <label>Name:</label>
+              <input
+                className="form-control"
+                placeholder="Input name"
+                value={person.name || ''}
+                onChange={this.onNameChange}
+              />
+            </div>
+
+            <div className="form-group">
+              <label>Address:</label>
+              <input
+                className="form-control"
+                placeholder="Input address"
+                value={person.address || ''}
+                onChange={this.onAddressChange}
+              />
+            </div>
+
+            {serverError && (
+              <Alert variant="danger">
+                {serverError}
+              </Alert>
+            )}
+          </form>
+        </Modal.Body>
+
+        <Modal.Footer>
+          <Button variant="secondary" onClick={this.close}>
+            Close
+          </Button>
+          <Button variant="primary" onClick={this.save} disabled={saving}>
+            {saving ? 'Saving...' : 'Save'}
+          </Button>
+        </Modal.Footer>
+      </Modal>
+    );
+  }
+}
+
+export default connect(null, { createPerson, updatePerson })(PersonEditor);