Content-Length: 245005 | pFad | http://github.com/js-girls/workshop/commit/3d8e9867ff599b86bc8474a03ab1aad1f7a16699

9C Update 07-refresh-messages.md · js-girls/workshop@3d8e986 · GitHub
Skip to content

Commit

Permalink
Update 07-refresh-messages.md
Browse files Browse the repository at this point in the history
  • Loading branch information
4lbertoC committed Apr 1, 2016
1 parent 4c49881 commit 3d8e986
Showing 1 changed file with 42 additions and 9 deletions.
51 changes: 42 additions & 9 deletions docs/level1/07-refresh-messages.md
Original file line number Diff line number Diff line change
@@ -1,16 +1,18 @@
## Step 7

Add the `clearContent` function
## Refreshing the post list

```javascript
function clearContent() {
var postContainer = document.querySelector('#posts');
postContainer.innerHTML = '';
}
```
Our app is currently loading all the messages only on the page's first load or when the user submits a new post.

Let's make the app refresh the post list.

*7.1 – A little refactoring*

then replace
> _Refactoring_ is the process of restructuring existing code without changing its external behavior.
The refactoring that we are going to perform consists in moving some code inside a function, in order to make it reusable in different parts of our app.

We need to reuse the code that retrieves and draws the messages in the page:
```javascript
fetch(FIREBASE_JSON)
.then(function(response) {
@@ -22,9 +24,40 @@ fetch(FIREBASE_JSON)
});
});
```
In order to make it reusable, we wrap it inside a function called `refreshMessages`:
```javascript
function refreshMessages() {
fetch(FIREBASE_JSON)
.then(function(response) {
return response.json();
})
.then(function(posts) {
toArray(posts).forEach(function(postToAdd) {
drawElement(postToAdd);
});
});
}
```
*7.2 – Clearing the post list of the old content*

__What happens if we call this function multiple times?__

It is going to append the messages to the page, so we are going to have duplicates!

We need to clear the previous content before adding the new messages.

Let's add the `clearContent` function:
```javascript
function clearContent() {
var postContainer = document.querySelector('#posts');
postContainer.innerHTML = '';
}
```
It will simply erase whatever is contained in the post container.

with
Let's call `clearContent` at the beginning of `refreshMessages`. Don't forget to call `refreshMessages()` when the page loads!

Here is the result:
```javascript
function refreshMessages() {
clearContent();

0 comments on commit 3d8e986

Please sign in to comment.








ApplySandwichStrip

pFad - (p)hone/(F)rame/(a)nonymizer/(d)eclutterfier!      Saves Data!


--- a PPN by Garber Painting Akron. With Image Size Reduction included!

Fetched URL: http://github.com/js-girls/workshop/commit/3d8e9867ff599b86bc8474a03ab1aad1f7a16699

Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy