handle add contact

grottohub · Mar 13, 2021 · 5fef6d8 · 5fef6d8
1 parent 99d25f7
commit 5fef6d8
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 3 deletions.
diff --git a/public/javascripts/app.js b/public/javascripts/app.js
@@ -1,3 +1,4 @@
+import { contactRowBp } from "./blueprints/contactRow.js";
 import {contactAPI as api} from "./lib/contactAPI.js";
 import { domCache } from "./lib/domCache.js";
 import { open, close, onSubmit, updateForm, loadContacts } from './lib/eventHandlers.js';
@@ -12,13 +13,39 @@ document.addEventListener("contactsLoaded", (event) => {
 
 document.addEventListener("contactUpdated", (event) => {
   let contact = event.detail.contact;
-  console.log(event);
 
   domCache.updateContact(contact);
 
   close(null, "manageContactModal");
 });
 
+document.addEventListener("contactAdded", (event) => {
+  let contact = event.detail.contact,
+      contactAmt = domCache.pushContact(contact),
+      contactCard = domCache.allContacts().pop(),
+      container;
+
+  console.log(contact);
+  console.log(contactAmt);
+  console.log(contactCard);
+
+  if (contactAmt % 2 === 0) {
+    container = _ui.get({childrenOf: {id: 'cardContainer'}}).pop();
+    console.log(container);
+  } else {
+    container = _ui.make(contactRowBp).firstElementChild;
+    _ui.get({id: 'cardContainer'}).appendChild(container);
+  }
+
+  console.log(container);
+
+  container.appendChild(contactCard);
+
+  _ui.get({id: 'addContactForm'}).reset();
+
+  close(null, "addContactModal");
+});
+
 _ui.loaded(() => {
   api.allContacts(loadContacts);
   _ui.click({class: "openModal"}, open);

diff --git a/public/javascripts/lib/eventHandlers.js b/public/javascripts/lib/eventHandlers.js
@@ -1,4 +1,4 @@
-import { contactsLoaded, contactUpdated } from './events.js';
+import { contactsLoaded, contactUpdated, contactAdded } from './events.js';
 import { ContactData } from './contactData.js';
 import { domCache } from './domCache.js';
 import { contactAPI as api } from "./contactAPI.js";
@@ -15,6 +15,14 @@ const updateContact = function updateContactCallback(event) {
   document.dispatchEvent(contactUpdated);
 };
 
+const addContact = function addContactCallback(event) {
+  let contact = event.target.response;
+
+  contactAdded.detail.contact = contact;
+
+  document.dispatchEvent(contactAdded);
+};
+
 export const onSubmit = function onSubmittingForm(event) {
   event.preventDefault();
 
@@ -26,7 +34,7 @@ export const onSubmit = function onSubmittingForm(event) {
   if (formId.includes("edit")) {
     api.editContact(contactId, contactFormData, updateContact);
   } else if (formId.includes("add")) {
-    api.addContact(contactFormData, logger);
+    api.addContact(contactFormData, addContact);
   // } else {
   //   api.delContact(contactId, logger);
   }

diff --git a/public/javascripts/lib/events.js b/public/javascripts/lib/events.js
@@ -11,4 +11,10 @@ export const contactUpdated = new CustomEvent("contactUpdated", {
   detail: {
     contact: null,
   }
+});
+
+export const contactAdded = new CustomEvent("contactAdded", {
+  detail: {
+    contact: null,
+  }
 });