Skip to content

Commit

Permalink
small fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@p0o
p0o committed Jun 6, 2015
1 parent c9bc6f0 commit 6845c16
Show file tree
Hide file tree
Showing 8 changed files with 129 additions and 85 deletions.
7 changes: 7 additions & 0 deletions app/js/app.js
View file
Original file line number Diff line number Diff line change
@@ -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(
<CMApp />,
document.getElementById('cm-holder')
Expand Down
60 changes: 36 additions & 24 deletions app/js/components/CMApp.react.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(
<ul className="collection">
<Navbar/>
<ContactList data={this.state.allContacts}/>
<ContactModal />
return(
<ul className="collection">
<Navbar/>
<ContactList data={this.state.allContacts}/>
<ContactModal />
<EditContactModal editContact={this.state.editContact} />
</ul>
</ul>

);
},
/**
* 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',
Expand Down Expand Up @@ -111,7 +123,7 @@ var CMApp = React.createClass({
contacts.forEach(function(obj) {
CMActions.create(obj);
});
}
}

});

Expand Down
12 changes: 6 additions & 6 deletions app/js/components/Contact.react.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,12 @@ var Contact = React.createClass({
// used by ContactList.react.js
return(
<li className="collection-item avatar">
<img src={contact.avatar} className="circle" />
<span className="title">{contact.name}</span>
<p>Phone Number: {contact.phone} <br />
Email: {contact.email}
</p>
<a href="#" onClick={this._openEditModal} className="secondary-content"><i className="mdi-editor-mode-edit"></i></a>
<img src={contact.avatar} className="circle" />
<span className="title">{contact.name}</span>
<p>Phone Number: {contact.phone} <br />
Email: {contact.email}
</p>
<a href="#" onClick={this._openEditModal} className="secondary-content"><i className="mdi-editor-mode-edit"></i></a>
</li>
);
},
Expand Down
49 changes: 25 additions & 24 deletions app/js/components/ContactModal.react.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,30 +6,30 @@ var ContactModal = React.createClass({
return(
<div id="contact_modal" className="modal">
<form id="contact_form" onSubmit={this._saveContact}>
<div className="modal-content">
<h4>Add New Contact</h4>
<div className="input-field">
<i className="mdi-action-account-circle prefix"></i>
<input id="contact_name" type="text" className="validate" />
<label for="icon_prefix">Name</label>
</div>
<div className="input-field">
<i className="mdi-communication-phone prefix"></i>
<input id="contact_phone" type="tel" className="validate"/>
<label for="icon_telephone">Phone</label>
</div>
<div className="input-field">
<i className="mdi-communication-email prefix"></i>
<input id="contact_email" type="tel" className="validate"/>
<label for="icon_email">Email</label>
</div>
</div>
<input type="submit" className="hidden-btn"/>
<div className="modal-content">
<h4>Add New Contact</h4>
<div className="input-field">
<i className="mdi-action-account-circle prefix"></i>
<input id="contact_name" type="text" className="validate" />
<label for="icon_prefix">Name</label>
</div>
<div className="input-field">
<i className="mdi-communication-phone prefix"></i>
<input id="contact_phone" type="tel" className="validate"/>
<label for="icon_telephone">Phone</label>
</div>
<div className="input-field">
<i className="mdi-communication-email prefix"></i>
<input id="contact_email" type="tel" className="validate"/>
<label for="icon_email">Email</label>
</div>
</div>
<input type="submit" className="hidden-btn"/>
</form>
<div className="modal-footer">
<a onClick={this._saveContact} className="modal-action modal-close waves-effect waves-green btn-flat">Press enter or click here</a>
</div>

<div className="modal-footer">
<a onClick={this._saveContact} className="modal-action modal-close waves-effect waves-green btn-flat">Press enter or click here</a>
</div>
</div>
);
},
Expand All @@ -45,7 +45,7 @@ var ContactModal = React.createClass({
newContact.email = form.find('#contact_email').val();

CMActions.create(newContact);
$('#contact_modal').closeModal();

this._clearContactForm();
},
/*
Expand All @@ -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();
}
});

Expand Down
62 changes: 36 additions & 26 deletions app/js/components/EditContactModal.react.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,40 +7,40 @@ var EditContactModal = React.createClass({
return(
<div id="edit_contact_modal" className="modal">
<form id="edit_contact_form" onSubmit={this._saveContact}>
<div className="modal-content">
<h4>Edit Contact</h4>
<div className="input-field">
<i className="mdi-action-account-circle prefix"></i>
<input id="contact_name" type="text" className="validate" />
<div className="modal-content">
<h4>Edit Contact</h4>
<div className="input-field">
<i className="mdi-action-account-circle prefix"></i>
<input id="contact_name" type="text" className="validate" />

</div>
<div className="input-field">
<i className="mdi-communication-phone prefix"></i>
<input id="contact_phone" type="tel" className="validate"/>
</div>
<div className="input-field">
<i className="mdi-communication-phone prefix"></i>
<input id="contact_phone" type="tel" className="validate"/>

</div>
<div className="input-field">
<i className="mdi-communication-email prefix"></i>
<input id="contact_email" type="tel" className="validate"/>

</div>
</div>
<input id="contact_id" type="hidden" />
<input id="contact_avatar" type="hidden" />
<input type="submit" className="hidden-btn"/>
</div>
<div className="input-field">
<i className="mdi-communication-email prefix"></i>
<input id="contact_email" type="tel" className="validate"/>
</div>
</div>
<input id="contact_id" type="hidden" />
<input id="contact_avatar" type="hidden" />
<input type="submit" className="hidden-btn"/>
</form>

<div className="modal-footer">
<a onClick={this._saveContact} className="modal-action modal-close waves-effect waves-green btn-flat">Press enter or click here</a>
</div>

<div className="modal-footer">
<a onClick={this._saveContact} className="modal-action modal-close waves-effect waves-green btn-flat">Press enter or click here</a>
<a onClick={this._removeContact} className="red lighten-4 modal-action modal-close waves-effect waves-red btn-flat">delete contact</a>
</div>
</div>
);

},
// saving contact
_saveContact: function(e) {
e.preventDefault();
var editId = this.props.editContact.id;

var contact = {};
var form = $('#edit_contact_form');

Expand All @@ -55,18 +55,28 @@ 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');

form.find('#contact_name').val('');
form.find('#contact_phone').val('');
form.find('#contact_email').val('');
$('#edit_contact_modal').closeModal();
}
});

Expand Down
9 changes: 5 additions & 4 deletions app/js/components/Navbar.react.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,17 +9,18 @@ var Navbar = React.createClass({
return(
<li className="collection-header">
<span className="title flow-text">Contact Manager</span>
<a onClick={this._openAddModal} className="blue darken-1 waves-effect waves-circle waves-light btn-floating secondary-content">
<i className="mdi-content-add"></i>
</a>
<a onClick={this._openAddModal} className="teal darken-1 waves-effect waves-circle waves-light btn-floating secondary-content">
<i className="mdi-content-add"></i>
</a>
</li>
);
},

// Opening AddContactModal component
_openAddModal: function() {
$('#contact_modal').openModal();
//CMActions.createNew();
// focus on the first field
$('#contact_modal').find('#contact_name').focus();
}
});

Expand Down
3 changes: 2 additions & 1 deletion app/js/constants/CMConstants.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
});
12 changes: 12 additions & 0 deletions app/js/stores/CMStore.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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, {
/**
Expand Down Expand Up @@ -101,6 +108,11 @@ AppDispatcher.register(function(action) {
CMStore.emitChange();
break;

case CMConstants.CM_REMOVE:
remove(action.id);
CMStore.emitChange();
break;

default:
// no op
}
Expand Down

0 comments on commit 6845c16

Please sign in to comment.