From 6845c16c6275cdf9b77401fa8098905169df6212 Mon Sep 17 00:00:00 2001 From: Pooria Attarzadeh Date: Sat, 6 Jun 2015 12:16:15 +0430 Subject: [PATCH] small fixes --- app/js/app.js | 7 +++ app/js/components/CMApp.react.js | 60 ++++++++++++-------- app/js/components/Contact.react.js | 12 ++-- app/js/components/ContactModal.react.js | 49 ++++++++-------- app/js/components/EditContactModal.react.js | 62 ++++++++++++--------- app/js/components/Navbar.react.js | 9 +-- app/js/constants/CMConstants.js | 3 +- app/js/stores/CMStore.js | 12 ++++ 8 files changed, 129 insertions(+), 85 deletions(-) diff --git a/app/js/app.js b/app/js/app.js index 5cce4db..5c2735b 100644 --- a/app/js/app.js +++ b/app/js/app.js @@ -1,7 +1,14 @@ +/** +* Contact Manager experimental app with Flux architecture - React +* Developed by Pooria Atarzadeh - @p0zart +* +* This project is using browserify to handle module requirements +*/ var React = require('react'); var CMApp = require('./components/CMApp.react'); + React.render( , document.getElementById('cm-holder') diff --git a/app/js/components/CMApp.react.js b/app/js/components/CMApp.react.js index 11d8443..fbb80f1 100644 --- a/app/js/components/CMApp.react.js +++ b/app/js/components/CMApp.react.js @@ -29,45 +29,57 @@ var CMApp = React.createClass({ }, componentDidMount: function() { CMStore.addChangeListener(this._onChange); - }, - componentWillUnmount: function() { - CMStore.removeChangeListener(this._onChange); - }, + }, + componentWillUnmount: function() { + CMStore.removeChangeListener(this._onChange); + }, render: function() { // request to edit a specific contact from store var editId = this.state.editContact.id; var editContact = this.state.editContact; if (editId !== undefined) { $('#edit_contact_modal').openModal(); - // filling with data + + // fill form elements with selected contact info $('#edit_contact_form').find('#contact_id').val(editContact.id); $('#edit_contact_form').find('#contact_name').val(editContact.name); $('#edit_contact_form').find('#contact_phone').val(editContact.phone); $('#edit_contact_form').find('#contact_email').val(editContact.email); $('#edit_contact_form').find('#contact_avatar').val(editContact.avatar); + + // focus on the first field with a little delay so it won't mess- + // with modal focus + setTimeout(function() { + $('#edit_contact_form').find('#contact_name').focus(); + },50); + + + // changing back to undefined so it prevent from opening the modal- + // everytime the view is rendering + this.state.editContact.id = undefined; } // main block - return( - - ); - }, - /** - * Event handler for 'change' events coming from the CMStore - */ - _onChange: function() { - this.setState(getContactsState()); + ); + }, + /** + * Event handler for 'change' events coming from the CMStore + */ + _onChange: function() { + this.setState(getContactsState()); - }, - _initializeContacts: function() { - // loading imaginary contacts - // can also be loaded from a remote server - var contacts = [ + }, + _initializeContacts: function() { + // loading imaginary contacts + // can also be loaded from a remote server + var contacts = [ { id: 1, name : 'Terrence S. Hatfield', @@ -111,7 +123,7 @@ var CMApp = React.createClass({ contacts.forEach(function(obj) { CMActions.create(obj); }); - } + } }); diff --git a/app/js/components/Contact.react.js b/app/js/components/Contact.react.js index 0326b10..f8ad5f0 100644 --- a/app/js/components/Contact.react.js +++ b/app/js/components/Contact.react.js @@ -9,12 +9,12 @@ var Contact = React.createClass({ // used by ContactList.react.js return(
  • - - {contact.name} -

    Phone Number: {contact.phone}
    - Email: {contact.email} -

    - + + {contact.name} +

    Phone Number: {contact.phone}
    + Email: {contact.email} +

    +
    • ); }, diff --git a/app/js/components/ContactModal.react.js b/app/js/components/ContactModal.react.js index 5aa493a..7232166 100644 --- a/app/js/components/ContactModal.react.js +++ b/app/js/components/ContactModal.react.js @@ -6,30 +6,30 @@ var ContactModal = React.createClass({ return(
    -
    -

    Add New Contact

    -
    - - - -
    -
    - - - -
    -
    - - - -
    -
    - +
    +

    Add New Contact

    +
    + + + +
    +
    + + + +
    +
    + + + +
    +
    +
    - -
    - Press enter or click here -
    + +
    + Press enter or click here +
    ); }, @@ -45,7 +45,7 @@ var ContactModal = React.createClass({ newContact.email = form.find('#contact_email').val(); CMActions.create(newContact); - $('#contact_modal').closeModal(); + this._clearContactForm(); }, /* @@ -57,6 +57,7 @@ var ContactModal = React.createClass({ form.find('#contact_name').val(''); form.find('#contact_phone').val(''); form.find('#contact_email').val(''); + $('#contact_modal').closeModal(); } }); diff --git a/app/js/components/EditContactModal.react.js b/app/js/components/EditContactModal.react.js index 9e1f5f9..f973317 100644 --- a/app/js/components/EditContactModal.react.js +++ b/app/js/components/EditContactModal.react.js @@ -7,32 +7,32 @@ var EditContactModal = React.createClass({ return(
    -
    -

    Edit Contact

    -
    - - +
    +

    Edit Contact

    +
    + + -
    -
    - - +
    +
    + + -
    -
    - - - -
    -
    - - - +
    +
    + + +
    +
    + + +
    - -
    - Press enter or click here -
    + +
    + Press enter or click here + delete contact +
    ); @@ -40,7 +40,7 @@ var EditContactModal = React.createClass({ // saving contact _saveContact: function(e) { e.preventDefault(); - var editId = this.props.editContact.id; + var contact = {}; var form = $('#edit_contact_form'); @@ -55,11 +55,20 @@ var EditContactModal = React.createClass({ //sending to action CMActions.save(contact); - $('#edit_contact_modal').closeModal(); + this._clearContactForm(); + }, + // when the user clicks on delete button + _removeContact: function(e) { + e.preventDefault(); + var removeId = $('#edit_contact_form').find('#contact_id').val(); + + //sending to action + CMActions.remove(removeId); + this._clearContactForm(); }, /* - * clearing form for next time + * clearing form and closing modal for the next time */ _clearContactForm: function() { var form = $('#edit_contact_form'); @@ -67,6 +76,7 @@ var EditContactModal = React.createClass({ form.find('#contact_name').val(''); form.find('#contact_phone').val(''); form.find('#contact_email').val(''); + $('#edit_contact_modal').closeModal(); } }); diff --git a/app/js/components/Navbar.react.js b/app/js/components/Navbar.react.js index de40d0f..2eab5ae 100644 --- a/app/js/components/Navbar.react.js +++ b/app/js/components/Navbar.react.js @@ -9,9 +9,9 @@ var Navbar = React.createClass({ return(
  • Contact Manager - - - + + +
    • ); }, @@ -19,7 +19,8 @@ var Navbar = React.createClass({ // Opening AddContactModal component _openAddModal: function() { $('#contact_modal').openModal(); - //CMActions.createNew(); + // focus on the first field + $('#contact_modal').find('#contact_name').focus(); } }); diff --git a/app/js/constants/CMConstants.js b/app/js/constants/CMConstants.js index c3d3efa..d84fed1 100644 --- a/app/js/constants/CMConstants.js +++ b/app/js/constants/CMConstants.js @@ -3,5 +3,6 @@ var keyMirror = require('keymirror'); module.exports = keyMirror({ CM_CREATE: null, CM_SAVE: null, - CM_EDIT: null + CM_EDIT: null, + CM_REMOVE: null }); diff --git a/app/js/stores/CMStore.js b/app/js/stores/CMStore.js index a4e3cdc..6c63e2f 100644 --- a/app/js/stores/CMStore.js +++ b/app/js/stores/CMStore.js @@ -46,6 +46,13 @@ function save(contact) { }; } +// removing contact by user +function remove(removeId) { + if (_contacts.hasOwnProperty(removeId)) { + delete _contacts[removeId]; + } +} + var CMStore = assign({}, EventEmitter.prototype, { /** @@ -101,6 +108,11 @@ AppDispatcher.register(function(action) { CMStore.emitChange(); break; + case CMConstants.CM_REMOVE: + remove(action.id); + CMStore.emitChange(); + break; + default: // no op }