Skip to content

Remove trailing spaces #97

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Remove trailing spaces #97

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
136 changes: 68 additions & 68 deletions hn-server-fetch.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,14 @@ require('isomorphic-fetch')
The official Firebase API (https://github.com/HackerNews/API) requires multiple network
connections to be made in order to fetch the list of Top Stories (indices) and then the
summary content of these stories. Directly requesting these resources makes server-side
rendering cumbersome as it is slow and ultimately requires that you maintain your own
cache to ensure full server renders are efficient.
rendering cumbersome as it is slow and ultimately requires that you maintain your own
cache to ensure full server renders are efficient.

To work around this problem, we can use one of the unofficial Hacker News APIs, specifically
https://github.com/cheeaun/node-hnapi which directly returns the Top Stories and can cache
https://github.com/cheeaun/node-hnapi which directly returns the Top Stories and can cache
responses for 10 minutes. In ReactHN, we can use the unofficial API for a static server-side
render and then 'hydrate' this once our components have mounted to display the real-time
experience.
render and then 'hydrate' this once our components have mounted to display the real-time
experience.

The benefit of this is clients loading up the app that are on flakey networks (or lie-fi)
can still get a fast render of content before the rest of our JavaScript bundle is loaded.
Expand All @@ -21,80 +21,80 @@ can still get a fast render of content before the rest of our JavaScript bundle
* Fetch top stories
*/
exports.fetchNews = function(page) {
page = page || ''
return fetch('http://node-hnapi.herokuapp.com/news' + page).then(function(response) {
return response.json()
}).then(function(json) {
var stories = '<ol class="Items__list" start="1">'
json.forEach(function(data, index) {
var story = '<li class="ListItem" style="margin-bottom: 16px;">' +
'<div class="Item__title" style="font-size: 18px;"><a href="' + data.url + '">' + data.title + '</a> ' +
'<span class="Item__host">(' + data.domain + ')</span></div>' +
'<div class="Item__meta"><span class="Item__score">' + data.points + ' points</span> ' +
'<span class="Item__by">by <a href="https://news.ycombinator.com/user?id=' + data.user + '">' + data.user + '</a></span> ' +
'<time class="Item__time">' + data.time_ago + ' </time> | ' +
'<a href="/news/story/' + data.id + '">' + data.comments_count + ' comments</a></div>'
'</li>'
stories += story
})
stories += '</ol>'
return stories
})
page = page || ''
return fetch('http://node-hnapi.herokuapp.com/news' + page).then(function(response) {
return response.json()
}).then(function(json) {
var stories = '<ol class="Items__list" start="1">'
json.forEach(function(data, index) {
var story = '<li class="ListItem" style="margin-bottom: 16px;">' +
'<div class="Item__title" style="font-size: 18px;"><a href="' + data.url + '">' + data.title + '</a> ' +
'<span class="Item__host">(' + data.domain + ')</span></div>' +
'<div class="Item__meta"><span class="Item__score">' + data.points + ' points</span> ' +
'<span class="Item__by">by <a href="https://news.ycombinator.com/user?id=' + data.user + '">' + data.user + '</a></span> ' +
'<time class="Item__time">' + data.time_ago + ' </time> | ' +
'<a href="/news/story/' + data.id + '">' + data.comments_count + ' comments</a></div>'
'</li>'
stories += story
})
stories += '</ol>'
return stories
})
}

function renderNestedComment(data) {
return '<div class="Comment__kids">' +
'<div class="Comment Comment--level1">' +
'<div class="Comment__content">' +
'<div class="Comment__meta"><span class="Comment__collapse" tabindex="0">[–]</span> ' +
'<a class="Comment__user" href="#/user/' + data.user + '">' + data.user + '</a> ' +
'<time>' + data.time_ago + '</time> ' +
'<a href="#/comment/' + data.id + '">link</a></div> ' +
'<div class="Comment__text">' +
'<div>' + data.content +'</div> ' +
'<p><a href="https://news.ycombinator.com/reply?id=' + data.id + '">reply</a></p>' +
'</div>' +
'</div>' +
'</div>' +
'</div>'
return '<div class="Comment__kids">' +
'<div class="Comment Comment--level1">' +
'<div class="Comment__content">' +
'<div class="Comment__meta"><span class="Comment__collapse" tabindex="0">[–]</span> ' +
'<a class="Comment__user" href="#/user/' + data.user + '">' + data.user + '</a> ' +
'<time>' + data.time_ago + '</time> ' +
'<a href="#/comment/' + data.id + '">link</a></div> ' +
'<div class="Comment__text">' +
'<div>' + data.content +'</div> ' +
'<p><a href="https://news.ycombinator.com/reply?id=' + data.id + '">reply</a></p>' +
'</div>' +
'</div>' +
'</div>' +
'</div>'
}

function generateNestedCommentString(data) {
var output = ''
data.comments.forEach(function(comment) {
output+= renderNestedComment(comment)
if (comment.comments) {
output+= generateNestedCommentString(comment)
}
})
return output
var output = ''
data.comments.forEach(function(comment) {
output+= renderNestedComment(comment)
if (comment.comments) {
output+= generateNestedCommentString(comment)
}
})
return output
}

/**
* Fetch details of the story/post/item with (nested) comments
* TODO: Add article summary at top of nested comment thread
*/
exports.fetchItem = function(itemId) {
return fetch('https://node-hnapi.herokuapp.com/item/' + itemId).then(function(response) {
return response.json()
}).then(function(json) {
var comments = ''
json.comments.forEach(function(data, index) {
var comment = '<div class="Item__kids">' +
'<div class="Comment Comment--level0">' +
'<div class="Comment__content">' +
'<div class="Comment__meta"><span class="Comment__collapse" tabindex="0">[–]</span> ' +
'<a class="Comment__user" href="#/user/' + data.user + '">' + data.user + '</a> ' +
'<time>' + data.time_ago + '</time> ' +
'<a href="#/comment/' + data.id + '">link</a></div> ' +
'<div class="Comment__text">' +
'<div>' + data.content +'</div> ' +
'<p><a href="https://news.ycombinator.com/reply?id=' + data.id + '">reply</a></p>' +
'</div>' +
'</div>' +
'</div>'
comments += generateNestedCommentString(data) + '</div>' + comment
})
return comments
})
return fetch('https://node-hnapi.herokuapp.com/item/' + itemId).then(function(response) {
return response.json()
}).then(function(json) {
var comments = ''
json.comments.forEach(function(data, index) {
var comment = '<div class="Item__kids">' +
'<div class="Comment Comment--level0">' +
'<div class="Comment__content">' +
'<div class="Comment__meta"><span class="Comment__collapse" tabindex="0">[–]</span> ' +
'<a class="Comment__user" href="#/user/' + data.user + '">' + data.user + '</a> ' +
'<time>' + data.time_ago + '</time> ' +
'<a href="#/comment/' + data.id + '">link</a></div> ' +
'<div class="Comment__text">' +
'<div>' + data.content +'</div> ' +
'<p><a href="https://news.ycombinator.com/reply?id=' + data.id + '">reply</a></p>' +
'</div>' +
'</div>' +
'</div>'
comments += generateNestedCommentString(data) + '</div>' + comment
})
return comments
})
}
4 changes: 2 additions & 2 deletions nwb.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,13 +26,13 @@ module.exports = {
names: ['core'],
filename: '[name].js',
minChunks: Infinity
}),
}),
new HtmlWebpackPlugin({
filename: 'views/index.ejs',
template: 'src/views/index.ejs',
markup: '<div id="app"><%- markup %></div>'
})
]
}
}
}
}
6 changes: 3 additions & 3 deletions public/index-static.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<title>React HN</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="manifest" href="manifest.json">
Expand All @@ -25,11 +25,11 @@
<link rel="icon" type="image/png" href="img/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="img/favicon-16x16.png" sizes="16x16">
<link rel="mask-icon" href="img/safari-pinned-tab.svg" color="#222222">

<meta name="msapplication-TileColor" content="#222222">
<meta name="msapplication-TileImage" content="img/mstile-144x144.png">
<meta name="msapplication-config" content="img/browserconfig.xml">

<link rel="stylesheet" href="css/style.css">
</head>
<body>
Expand Down
4 changes: 2 additions & 2 deletions server.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ app.get('/news/story/:id', function (req, res, next) {
res.render('index', { markup: markup })
})
}
})
})
});

app.get('*', function(req, res) {
Expand All @@ -68,7 +68,7 @@ app.get('*', function(req, res) {
}
else if (props) {
var markup = renderToString(React.createElement(ReactRouter.RouterContext, props, null))
res.render('index', { markup: markup })
res.render('index', { markup: markup })
}
else {
res.sendStatus(404)
Expand Down
6 changes: 3 additions & 3 deletions src/views/index.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<title>React HN</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="manifest" href="manifest.json">
Expand All @@ -25,7 +25,7 @@
<link rel="icon" type="image/png" href="img/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="img/favicon-16x16.png" sizes="16x16">
<link rel="mask-icon" href="img/safari-pinned-tab.svg" color="#222222">

<meta name="msapplication-TileColor" content="#222222">
<meta name="msapplication-TileImage" content="img/mstile-144x144.png">
<meta name="msapplication-config" content="img/browserconfig.xml">
Expand Down Expand Up @@ -71,6 +71,6 @@
ga('send', 'pageview');
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
<!-- End Google Analytics -->
<!-- End Google Analytics -->
</body>
</html>