utkarshbhatt12 · March 18, 2018 13:16 · Mar 18, 2018
diff --git a/view notes event listener.js b/view notes event listener.js
@@ -0,0 +1,65 @@
+noteViewButton.addEventListener('click', () => {
+
+    statusSpan.innerText = 'getting docs from Firestore...';
+
+    // hide the fields
+    inputDiv.style.display = 'none';
+
+    let p;
+
+    notesRef.get()
+        .then((snapShot) => {
+
+            // gets the number of notes being displayed when the user clicks 
+            // the view notes button.
+            // displayNotesDiv.getElementsByTagName('*').length gets the 
+            // number of children nodes in the 'displayNotesDiv'
+            // we subtract 2 from it because of the top 'hr' and the bottom 'p' elements
+            // then we divide it by 5 because the number of elements being created to display
+            // a single note is 5. The result is the number of notes that we have in display
+            let numberOfNotes = (displayNotesDiv.getElementsByTagName('*').length - 2) / 5;
+
+            // if the list of notes is already populated, first remove them from the viewport
+            // then reconstruct the notes again by reading them from the firestore
+            if (numberOfNotes > 1) {
+                displayNotesDiv.innerHTML = '';
+            }
+
+
+            // if there are no notes in the db saved,
+            // show the EMPTY string instead of END.
+            if (snapShot.size === 0) {
+
+                p = document.createElement('p');
+                p.innerText = '************ EMPTY ************';
+                p.style.fontWeight = '800';
+                displayNotesDiv.appendChild(p);
+
+                statusSpan.innerText = 'idle...';
+            } else {
+                snapShot.forEach((doc) => {
+                    drawNote(doc); // from crud.js
+                });
+            }
+        }).then(() => {
+
+            // don't display the ************* END ************* string
+            // if there are no notes to display since we are already showing
+            // '************ EMPTY ************ string in the app
+            if (displayNotesDiv.getElementsByTagName('*').length > 2) {
+
+                p = document.createElement('p');
+                p.innerText = '************* END *************';
+                p.style.fontWeight = '800';
+                displayNotesDiv.appendChild(p);
+
+                statusSpan.innerText = 'idle...';
+            }
+        }).catch((error) => {
+            // something went wrong. Make sure that you have set up the permissions 
+            // to allow anyone to write to the Firestore
+            // READ MORE: https://firebase.google.com/docs/firestore/security/get-started
+            statusSpan.innerText = 'oops... something went wrong!';
+            console.log(error);
+        });
+});