Created
March 18, 2018 14:00
-
-
Save utkarshbhatt12/38d05c3aa6f559bfa185acf42ac1d733 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Takes in a doc ref and displays a note by reading its title, | |
| * body and timestap in the viewport | |
| * @param {object} doc firestore document reference | |
| */ | |
| const drawNote = (doc) => { | |
| let title, body, timestamp, id, data, hr, h2, h6, p, aDelete, aEdit; | |
| // these nodes are created for each document | |
| hr = document.createElement('hr'); | |
| h2 = document.createElement('h2'); | |
| h6 = document.createElement('h6'); | |
| p = document.createElement('p'); | |
| aDelete = document.createElement('a'); | |
| aEdit = document.createElement('a'); | |
| // data() method contains the document data | |
| data = doc.data(); | |
| // the .(dot) id property gives us the auto-id of the document in context | |
| id = doc.id; | |
| // we can access each property with their appropirate name with the | |
| // . (dot) operator | |
| title = data.title; | |
| body = data.body; | |
| timestamp = data.timestamp; | |
| // setting the text of the nodes from the Firestore data | |
| h2.innerText = title; | |
| h6.innerText = timestamp; | |
| p.innerText = body; | |
| // adding a delete method to the notes | |
| aDelete.innerText = 'delete'; | |
| aDelete.href = '#'; | |
| aDelete.setAttribute('onclick', `deleteDoc("${id}")`); | |
| aEdit.innerText = ' | edit'; | |
| aEdit.href = '#'; | |
| aEdit.setAttribute('onclick', `editDoc("${id}", "${title}", "${body}")`); | |
| // finally, we append each element in the div to make them | |
| // show up in our page | |
| displayNotesDiv.appendChild(h2) | |
| displayNotesDiv.appendChild(h6); | |
| displayNotesDiv.appendChild(p); | |
| displayNotesDiv.appendChild(aDelete); | |
| displayNotesDiv.appendChild(aEdit); | |
| displayNotesDiv.appendChild(hr); | |
| }; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment