Edit and add a new contact with one page

How-to Discussions
1

Hey. I’m working on a contact list app atm. The app shows a list loaded from a local couchbase database and if i tap on one of the list entry the app swaps to the detail view and loads the contact by id from the database. With a addButton hovering over the list i want to access the same page. My code so far:

The two navigation methods in ContactList.js:

function pushToDetailsPage(arg) {

	var contact = arg.data;
	var contactId = contact._id;

	router.push("contactDetailsPage", { contactId: contactId });
}

function pushToNewContactPage() {

	router.push("contactDetailsPage", { isNewContact: true });
}

And my ContactDetails.js:

var Observable = require("FuseJS/Observable");
var Database = require("Database");
var Modal = require("Modal");

var params = this.Parameter;

var isNewContact = params.map(function(x) {

	var isNewContact = false;
	if(x.isNewContact != null) {
		isNewContact = x.isNewContact;	
	}

	return isNewContact;
});

var contact = params.map(function(x) {

	var contact = Observable();

	if(isNewContact.value === false){
		contact = Database.getLeadById(x.contactId);
	} 

	return contact;
});

var lead = Observable(
	{
		salutation: contact.map(function(x) { return convertContactElement(x.salutation); }),
		firstname: contact.map(function(x) { return convertContactElement(x.firstname); }),
		lastname: contact.map(function(x) { return convertContactElement(x.lastname); }),
		company: contact.map(function(x) { return convertContactElement(x.company); }),
		department: contact.map(function(x) { return convertContactElement(x.department); }),
		position: contact.map(function(x) { return convertContactElement(x.position); }),
		phone: contact.map(function(x) { return convertContactElement(x.phone); }),
		fax: contact.map(function(x) { return convertContactElement(x.fax); }),
		mobile: contact.map(function(x) { return convertContactElement(x.mobile); }),
		email: contact.map(function(x) { return convertContactElement(x.email); }),
		image: contact.map(function(x) { return convertContactElement(x.image); }),
		notes: contact.map(function(x) { return x.notes; }).inner(),
	}
);

function convertContactElement(element){

	var text = "";

	if(element != undefined) {
		text = element;
	} 

	return text;

}
	
function isElementValid(element){

	var valid = false;

	if (element !== "" || element == undefined) {
		valid = true;
	} 

	return valid;

}

function isValid(arg) {

	return (isElementValid(lead.value.firstname.value) 
		&&	isElementValid(lead.value.lastname.value) 
		&&	isElementValid(lead.value.company.value));

}

function goBack() {

	router.goBack();
}

function showModal(){
	console.log("modal");
}

function saveContact(){

	if(isValid()) {

		if(isNewContact.value){

			console.log("Create a new contact here");

		} else {

			console.log("Update a contact here");

		}

		// router.goBack();

	} else {

		showModal();
	}
	
}

module.exports = {

	//Variables
	params: params,
	isNewContact: isNewContact,
	contact: contact,
	lead: lead,

	//Methods
	showModal: showModal,
	saveContact: saveContact,
	goBack: goBack

};

Is this a “good” way to use one page with “two states” or is there a more generic way?