16 |
17 |
18 | }
19 | })
20 |
21 | export default Spinner
22 |
--------------------------------------------------------------------------------
/src/Stories.js:
--------------------------------------------------------------------------------
1 | var React = require('react')
2 |
3 | var StoryStore = require('./stores/StoryStore').default
4 |
5 | var PageNumberMixin = require('./mixins/PageNumberMixin').default
6 | var Paginator = require('./Paginator').default
7 | var Spinner = require('./Spinner').default
8 | var StoryListItem = require('./StoryListItem').default
9 | var SettingsStore = require('./stores/SettingsStore').default
10 |
11 | var {ITEMS_PER_PAGE} = require('./utils/constants').default
12 | var pageCalc = require('./utils/pageCalc').default
13 | var setTitle = require('./utils/setTitle').default
14 |
15 | var Stories = React.createClass({
16 | mixins: [PageNumberMixin],
17 |
18 | propTypes: {
19 | // The number of stories which may be paginated through
20 | limit: React.PropTypes.number.isRequired,
21 | // The route name being used
22 | route: React.PropTypes.string.isRequired,
23 | // The type of stories to be displayed
24 | type: React.PropTypes.string.isRequired,
25 |
26 | // Page title associated with the stories being displayed
27 | title: React.PropTypes.string
28 | },
29 |
30 | getInitialState() {
31 | return {
32 | ids: null,
33 | limit: this.props.limit,
34 | stories: []
35 | }
36 | },
37 |
38 | componentDidMount() {
39 | setTitle(this.props.title)
40 | this.store = new StoryStore(this.props.type)
41 | this.store.addListener('update', this.handleUpdate)
42 | this.store.start()
43 | this.setState(this.store.getState())
44 | },
45 |
46 | componentWillUnmount() {
47 | this.store.removeListener('update', this.handleUpdate)
48 | this.store.stop()
49 | this.store = null
50 | },
51 |
52 | handleUpdate(update) {
53 | if (!this.isMounted()) {
54 | if (process.env.NODE_ENV !== 'production') {
55 | console.warn(
56 | `Skipping update as the ${this.props.type} Stories component is no longer mounted.`
57 | )
58 | }
59 | return
60 | }
61 | update.limit = update.ids.length
62 | this.setState(update)
63 | },
64 |
65 | render() {
66 | var page = pageCalc(this.getPageNumber(), ITEMS_PER_PAGE, this.state.limit)
67 |
68 | // Special case for the Read Stories page, as its ids are read from
69 | // localStorage and there might not be any yet.
70 | if (this.props.type === 'read') {
71 | if (this.state.ids == null) {
72 | return
73 | }
74 | if (this.state.ids.length === 0) {
75 | return
76 |
There are no previously read stories to display.
77 |
78 | }
79 | }
80 |
81 | // Display a list of placeholder items while we're waiting for the initial
82 | // list of story ids to load from Firebase.
83 | if (this.state.ids == null) {
84 | var dummyItems = []
85 | for (var i = page.startIndex; i < page.endIndex; i++) {
86 | dummyItems.push(
87 |
88 |
90 | )
91 | }
92 | return
93 |
{dummyItems}
94 |
95 |
96 | }
97 |
98 | return
99 |
100 | {this.renderItems(page.startIndex, page.endIndex)}
101 |
102 |
103 |
104 | },
105 |
106 | renderItems(startIndex, endIndex) {
107 | var rendered = []
108 | for (var i = startIndex; i < endIndex; i++) {
109 | var item = this.state.stories[i]
110 | var id = this.state.ids[i]
111 | if (id) {
112 | rendered.push(
)
113 | }
114 | else {
115 | rendered.push()
116 | }
117 | }
118 | return rendered
119 | }
120 | })
121 |
122 | export default Stories
123 |
--------------------------------------------------------------------------------
/src/StoryListItem.js:
--------------------------------------------------------------------------------
1 | var React = require('react')
2 | var ReactFireMixin = require('reactfire')
3 |
4 | var StoryCommentThreadStore = require('./stores/StoryCommentThreadStore').default
5 | var HNService = require('./services/HNService').default
6 | var SettingsStore = require('./stores/SettingsStore').default
7 | var StoryStore = require('./stores/StoryStore').default
8 |
9 | var ItemMixin = require('./mixins/ItemMixin').default
10 | var ListItemMixin = require('./mixins/ListItemMixin').default
11 | var Spinner = require('./Spinner').default
12 |
13 | /**
14 | * Display story title and metadata as as a list item.
15 | * Cached story data may be given as a prop, but this component is also
16 | * responsible for listening to updates to the story and providing the latest
17 | * version for StoryStore's cache.
18 | */
19 | var StoryListItem = React.createClass({
20 | mixins: [ItemMixin, ListItemMixin, ReactFireMixin],
21 |
22 | propTypes: {
23 | // The StoryStore handling caching and updates to the stories being displayed
24 | store: React.PropTypes.instanceOf(StoryStore).isRequired,
25 |
26 | // The story's id in Hacker News
27 | id: React.PropTypes.number,
28 | // A version of the story from the cache, for initial display
29 | cachedItem: React.PropTypes.object,
30 | // The current index of the story in the list being displayed
31 | index: React.PropTypes.number
32 | },
33 |
34 | getDefaultProps() {
35 | return {
36 | id: null,
37 | cachedItem: null,
38 | index: null
39 | }
40 | },
41 |
42 | getInitialState() {
43 | return {
44 | item: this.props.cachedItem || {}
45 | }
46 | },
47 |
48 | componentWillMount() {
49 | if (this.props.id != null) {
50 | this.initLiveItem(this.props)
51 | }
52 | else if (this.props.cachedItem != null) {
53 | // Display the comment state of the cached item we were given while we're
54 | // waiting for the live item to load.
55 | this.threadState = StoryCommentThreadStore.loadState(this.state.item.id)
56 | }
57 | },
58 |
59 | componentWillUnmount() {
60 | if (this.props.id != null) {
61 | this.props.store.removeListener(this.props.id, this.updateThreadState)
62 | }
63 | },
64 |
65 | /**
66 | * Catch the transition from not having an id prop to having one.
67 | * Scenario: we were waiting for the initial list of story ids to load.
68 | */
69 | componentWillReceiveProps(nextProps) {
70 | if (this.props.id == null && nextProps.id != null) {
71 | this.initLiveItem(nextProps)
72 | }
73 | },
74 |
75 | /**
76 | * If the live item has been loaded or updated, update the StoryStore cache
77 | * with its current index and latest data.
78 | */
79 | componentWillUpdate(nextProps, nextState) {
80 | if (this.state.item !== nextState.item) {
81 | if (nextState.item != null) {
82 | this.props.store.itemUpdated(nextState.item, this.props.index)
83 | }
84 | else {
85 | if (process.env.NODE_ENV !== 'production') {
86 | console.warn(`Item ${this.props.id} went from ${JSON.stringify(this.state.item)} to ${nextProps.item}`)
87 | }
88 | }
89 | }
90 | },
91 |
92 | /**
93 | * Initialise listening to updates for the item with the given id and
94 | * initialise its comment thread state.
95 | */
96 | initLiveItem(props) {
97 | // If we were given a cached item to display initially, it will be replaced
98 | this.bindAsObject(HNService.itemRef(props.id), 'item')
99 |
100 | this.threadState = StoryCommentThreadStore.loadState(props.id)
101 | this.props.store.addListener(props.id, this.updateThreadState)
102 | },
103 |
104 | /**
105 | * Update thread state in response to a storage event indicating it has been
106 | * modified.
107 | */
108 | updateThreadState() {
109 | this.threadState = StoryCommentThreadStore.loadState(this.props.id)
110 | this.forceUpdate()
111 | },
112 |
113 | render() {
114 | // Display the loading spinner if we have nothing to show initially
115 | if (!this.state.item || !this.state.item.id) {
116 | return
117 |
119 | }
120 |
121 | return this.renderListItem(this.state.item, this.threadState)
122 | }
123 | })
124 |
125 | export default StoryListItem
126 |
--------------------------------------------------------------------------------
/src/Updates.js:
--------------------------------------------------------------------------------
1 | var React = require('react')
2 |
3 | var SettingsStore = require('./stores/SettingsStore').default
4 | var UpdatesStore = require('./stores/UpdatesStore').default
5 |
6 | var DisplayListItem = require('./DisplayListItem').default
7 | var DisplayComment = require('./DisplayComment').default
8 | var Paginator = require('./Paginator').default
9 | var Spinner = require('./Spinner').default
10 |
11 | var PageNumberMixin = require('./mixins/PageNumberMixin').default
12 |
13 | var {ITEMS_PER_PAGE} = require('./utils/constants').default
14 | var pageCalc = require('./utils/pageCalc').default
15 | var setTitle = require('./utils/setTitle').default
16 |
17 | function filterDead(item) {
18 | return !item.dead
19 | }
20 |
21 | function filterUpdates(updates) {
22 | if (!SettingsStore.showDead) {
23 | return {
24 | comments: updates.comments.filter(filterDead),
25 | stories: updates.stories.filter(filterDead)
26 | }
27 | }
28 | return updates
29 | }
30 |
31 | var Updates = React.createClass({
32 | mixins: [PageNumberMixin],
33 |
34 | getInitialState() {
35 | return filterUpdates(UpdatesStore.getUpdates())
36 | },
37 |
38 | componentWillMount() {
39 | this.setTitle(this.props.type)
40 | UpdatesStore.start()
41 | UpdatesStore.on('updates', this.handleUpdates)
42 | },
43 |
44 | componentWillUnmount() {
45 | UpdatesStore.off('updates', this.handleUpdates)
46 | UpdatesStore.stop()
47 | },
48 |
49 | componentWillReceiveProps(nextProps) {
50 | if (this.props.type !== nextProps.type) {
51 | this.setTitle(nextProps.type)
52 | }
53 | },
54 |
55 | setTitle(type) {
56 | setTitle('New ' + (type === 'comments' ? 'Comments' : 'Links'))
57 | },
58 |
59 | handleUpdates(updates) {
60 | if (!this.isMounted()) {
61 | if (process.env.NODE_ENV !== 'production') {
62 | console.warn('Skipping update of ' + this.props.type + ' as the Updates component is not mounted')
63 | }
64 | return
65 | }
66 | this.setState(filterUpdates(updates))
67 | },
68 |
69 | render() {
70 | var items = (this.props.type === 'comments' ? this.state.comments : this.state.stories)
71 | if (items.length === 0) {
72 | return
73 | }
74 |
75 | var page = pageCalc(this.getPageNumber(), ITEMS_PER_PAGE, items.length)
76 |
77 | if (this.props.type === 'comments') {
78 | return
79 | {items.slice(page.startIndex, page.endIndex).map(function(comment) {
80 | return
84 | }
85 | else {
86 | return
87 |
88 | {items.slice(page.startIndex, page.endIndex).map(function(item) {
89 | return
90 | })}
91 |
92 |
93 |
42 |
{this.props.params.id}
43 |
48 |
{user.id}
49 |
50 | Created
51 | ({createdDate.toDateString()}) Karma
53 | {user.karma}
54 | Delay
55 | {user.delay}
56 | {user.about && About }
57 | {user.about &&
59 |
React HN
7 |
8 |
44 |
45 |
46 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import {hashHistory} from 'react-router'
2 |
3 | require('./style.css')
4 |
5 | require('setimmediate')
6 |
7 | var React = require('react')
8 | var {render} = require('react-dom')
9 | var Router = require('react-router/lib/Router')
10 | var useScroll = require('react-router-scroll/lib/useScroll')
11 | var applyRouterMiddleware = require('react-router/lib/applyRouterMiddleware')
12 |
13 | var routes = require('./routes').default
14 |
15 | render(
16 |
40 | {(this.props.loadingSpinner || comment.delayed) &&
}
41 | {comment.delayed &&
42 | Unable to load comment – this usually indicates the author has configured a delay.
43 | Trying again in 30 seconds.
44 |
}
45 |
70 | [{collapsed ? '+' : '–'}]
71 |
72 | },
73 |
74 | /**
75 | * @param options.collapsible {Boolean} if true, assumes this.toggleCollspse()
76 | * @param options.collapsed {Boolean}
77 | * @param options.link {Boolean}
78 | * @param options.parent {Boolean} if true, assumes this.state.parent
79 | * @param options.op {Boolean} if true, assumes this.state.op
80 | * @param options.childCounts {Object} with .children and .newComments
81 | */
82 | renderCommentMeta(comment, options) {
83 | if (comment.dead && !SettingsStore.showDead) {
84 | return
85 | {options.collapsible && this.renderCollapseControl(options.collapsed)}
86 | {options.collapsible && ' '}
87 | [dead]
88 | {options.childCounts && ' | (' + options.childCounts.children + ' child' + pluralise(options.childCounts.children, ',ren')}
89 | {options.childCounts && options.childCounts.newComments > 0 && ', '}
90 | {options.childCounts && options.childCounts.newComments > 0 && {options.childCounts.newComments} new }
91 | {options.childCounts && ')'}
92 |
93 | }
94 |
95 | return
96 | {options.collapsible && this.renderCollapseControl(options.collapsed)}
97 | {options.collapsible && ' '}
98 | {options.childCounts.newComments} new }
110 | {options.childCounts && ')'}
111 |
112 | },
113 |
114 | renderCommentText(comment, options) {
115 | return
116 | {(!comment.dead || SettingsStore.showDead) ?
: '[dead]'}
117 | {SettingsStore.replyLinks && options.replyLink && !comment.dead &&
118 | reply
119 |
}
120 |
30 |
32 | }
33 |
34 | return
35 |
36 | {item.score} point{pluralise(item.score)}
37 | {' '}
38 |
39 | by {' '}
41 |
48 | },
49 |
50 | /**
51 | * Render an item's title bar.
52 | */
53 | renderItemTitle(item) {
54 | var hasURL = !!item.url
55 | var title
56 | if (item.dead) {
57 | title = '[dead] ' + item.title
58 | }
59 | else {
60 | title = (hasURL ? {item.title}
61 | :
64 | {title}
65 | {hasURL && ' '}
66 | {hasURL && ({parseHost(item.url)}) }
67 |
68 | }
69 | }
70 |
71 | export default ItemMixin
72 |
--------------------------------------------------------------------------------
/src/mixins/ListItemMixin.js:
--------------------------------------------------------------------------------
1 | var React = require('react')
2 | var Link = require('react-router/lib/Link')
3 |
4 | var SettingsStore = require('../stores/SettingsStore').default
5 | var cx = require('../utils/buildClassName').default
6 |
7 | /**
8 | * Reusable logic for displaying an item in a list.
9 | * Must be used in conjunction with ItemMixin for its rendering methods.
10 | */
11 | var ListItemMixin = {
12 | getNewCommentCount(item, threadState) {
13 | if (threadState.lastVisit === null) {
14 | return 0
15 | }
16 | return item.descendants - threadState.commentCount
17 | },
18 |
19 | renderListItem(item, threadState) {
20 | if (item.deleted) { return null }
21 | var newCommentCount = this.getNewCommentCount(item, threadState)
22 | return
23 | {this.renderItemTitle(item)}
24 | {this.renderItemMeta(item, (newCommentCount > 0 && {' '}
25 | ( ))}
29 |
30 | }
31 | }
32 |
33 | export default ListItemMixin
34 |
--------------------------------------------------------------------------------
/src/mixins/PageNumberMixin.js:
--------------------------------------------------------------------------------
1 | var PageNumberMixin = {
2 | getPageNumber(page) {
3 | if (typeof page == 'undefined') {
4 | page = this.props.location.query.page
5 | }
6 | return (page && /^\d+$/.test(page) ? Math.max(1, Number(page)) : 1)
7 | }
8 | }
9 |
10 | export default PageNumberMixin
11 |
--------------------------------------------------------------------------------
/src/routes.js:
--------------------------------------------------------------------------------
1 | var IndexRoute = require('react-router/lib/IndexRoute')
2 | var React = require('react')
3 | var Route = require('react-router/lib/Route')
4 | var Item = require('./Item').default
5 | // Polyfill require.ensure
6 | if (typeof require.ensure !== 'function') require.ensure = function(d, c) { c(require) }
7 |
8 | var App = require('./App').default
9 | var Stories = require('./Stories').default
10 | var Updates = require('./Updates').default
11 | var PermalinkedComment = require('./PermalinkedComment').default
12 | var UserProfile = require('./UserProfile').default
13 | var NotFound = require('./NotFound').default
14 |
15 | function stories(route, type, limit, title) {
16 | return React.createClass({
17 | render() {
18 | return
19 | }
20 | })
21 | }
22 |
23 | function updates(type) {
24 | return React.createClass({
25 | render() {
26 | return
27 | }
28 | })
29 | }
30 |
31 | var Ask = stories('ask', 'askstories', 200, 'Ask')
32 | var Comments = updates('comments')
33 | var Jobs = stories('jobs', 'jobstories', 200, 'Jobs')
34 | var New = stories('newest', 'newstories', 500, 'New Links')
35 | var Show = stories('show', 'showstories', 200, 'Show')
36 | var Top = stories('news', 'topstories', 500)
37 | var Read = stories('read', 'read', 0, 'Read Stories')
38 |
39 | export default
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
--------------------------------------------------------------------------------
/src/services/HNService.js:
--------------------------------------------------------------------------------
1 | var firebase = require('firebase/app')
2 | require('firebase/database')
3 |
4 | var config = {
5 | databaseURL: 'https://hacker-news.firebaseio.com'
6 | }
7 | firebase.initializeApp(config)
8 | var version = '/v0'
9 | var api = firebase.database().ref(version)
10 |
11 | // https://firebase.google.com/support/guides/firebase-web
12 |
13 | function fetchItem(id, cb) {
14 | itemRef(id).once('value', function(snapshot) {
15 | cb(snapshot.val())
16 | })
17 | }
18 |
19 | function fetchItems(ids, cb) {
20 | var items = []
21 | ids.forEach(function(id) {
22 | fetchItem(id, addItem)
23 | })
24 | function addItem(item) {
25 | items.push(item)
26 | if (items.length >= ids.length) {
27 | cb(items)
28 | }
29 | }
30 | }
31 |
32 | function storiesRef(path) {
33 | return api.child(path)
34 | }
35 |
36 | function itemRef(id) {
37 | return api.child('item/' + id)
38 | }
39 |
40 | function userRef(id) {
41 | return api.child('user/' + id)
42 | }
43 |
44 | function updatesRef() {
45 | return api.child('updates/items')
46 | }
47 |
48 | export default {
49 | fetchItem,
50 | fetchItems,
51 | storiesRef,
52 | itemRef,
53 | userRef,
54 | updatesRef
55 | }
56 |
--------------------------------------------------------------------------------
/src/stores/CommentThreadStore.js:
--------------------------------------------------------------------------------
1 | var extend = require('../utils/extend').default
2 |
3 | function CommentThreadStore(item, onCommentsChanged) {
4 | this.itemId = item.id
5 | this.onCommentsChanged = onCommentsChanged
6 |
7 | /**
8 | * Lookup from a comment id to the comment.
9 | * @type {Object.}
10 | */
11 | this.comments = {}
12 |
13 | /**
14 | * Lookup from a comment id to its child comment ids.
15 | * @type {Object.>}
16 | */
17 | this.children = {}
18 | this.children[item.id] = []
19 |
20 | /**
21 | * Lookup for new comment ids. Will only contain true.
22 | * @type {Object.}
23 | */
24 | this.isNew = {}
25 |
26 | /**
27 | * Lookup for collapsed state of comment ids. May contain true or false.
28 | * @type {Object.}
29 | */
30 | this.isCollapsed = {}
31 |
32 | /**
33 | * Lookup for dead comment ids
34 | * @type {Object.}
35 | */
36 | this.deadComments = {}
37 | }
38 |
39 | extend(CommentThreadStore.prototype, {
40 | /**
41 | * Get counts of children and new comments under the given comment.
42 | * @return .children {Number}
43 | * @return .newComments {Number}
44 | */
45 | getChildCounts(comment) {
46 | var childCount = 0
47 | var newCommentCount = 0
48 | var nodes = [comment.id]
49 |
50 | while (nodes.length) {
51 | var nextNodes = []
52 | for (var i = 0, l = nodes.length; i < l; i++) {
53 | var nodeChildren = this.children[nodes[i]]
54 | if (nodeChildren.length) {
55 | nextNodes.push.apply(nextNodes, nodeChildren)
56 | }
57 | }
58 | for (i = 0, l = nextNodes.length; i < l; i++) {
59 | if (this.isNew[nextNodes[i]]) {
60 | newCommentCount++
61 | }
62 | }
63 | childCount += nextNodes.length
64 | nodes = nextNodes
65 | }
66 |
67 | return {
68 | children: childCount,
69 | newComments: newCommentCount
70 | }
71 | },
72 |
73 | /**
74 | * Register a comment's appearance in the thread.
75 | */
76 | commentAdded(comment) {
77 | if (comment.deleted) { return }
78 |
79 | this.comments[comment.id] = comment
80 | this.children[comment.id] = []
81 | this.children[comment.parent].push(comment.id)
82 | if (comment.dead) {
83 | this.deadComments[comment.id] = true
84 | }
85 | },
86 |
87 | /**
88 | * Register a comment's deletion from the thread.
89 | */
90 | commentDeleted(comment) {
91 | // Comments which initially failed to load (null from Firebase API) can be
92 | // deleted by the time the API catches up.
93 | if (!comment) { return }
94 |
95 | delete this.comments[comment.id]
96 | var siblings = this.children[comment.parent]
97 | siblings.splice(siblings.indexOf(comment.id), 1)
98 | if (comment.dead) {
99 | delete this.deadComments[comment.id]
100 | }
101 | },
102 |
103 | toggleCollapse(commentId) {
104 | this.isCollapsed[commentId] = !this.isCollapsed[commentId]
105 | this.onCommentsChanged({type: 'collapse'})
106 | }
107 | })
108 |
109 | export default CommentThreadStore
110 |
--------------------------------------------------------------------------------
/src/stores/ItemStore.js:
--------------------------------------------------------------------------------
1 | var HNService = require('../services/HNService').default
2 |
3 | var StoryStore = require('./StoryStore').default
4 | var UpdatesStore = require('./UpdatesStore').default
5 | var commentParentLookup = {}
6 | var titleCache = {}
7 |
8 | function fetchCommentParent(comment, cb, result) {
9 | var commentId = comment.id
10 | var parentId = comment.parent
11 |
12 | while (commentParentLookup[parentId] || titleCache[parentId]) {
13 | // We just saved ourselves an item fetch
14 | result.itemCount++
15 | result.cacheHits++
16 |
17 | // The parent is a known non-comment
18 | if (titleCache[parentId]) {
19 | if (result.itemCount === 1) { result.parent = titleCache[parentId] }
20 | result.op = titleCache[parentId]
21 | cb(result)
22 | return
23 | }
24 |
25 | // The parent is a known comment
26 | if (commentParentLookup[parentId]) {
27 | if (result.itemCount === 1) { result.parent = {id: parentId, type: 'comment'} }
28 | // Set the parent comment's ids up for the next iteration
29 | commentId = parentId
30 | parentId = commentParentLookup[parentId]
31 | }
32 | }
33 |
34 | // The parent of the current comment isn't known, so we'll have to fetch it
35 | ItemStore.getItem(parentId, function(parent) {
36 | result.itemCount++
37 | // Add the current comment's parent to the lookup for next time
38 | commentParentLookup[commentId] = parentId
39 | if (parent.type === 'comment') {
40 | commentParentLookup[parent.id] = parent.parent
41 | }
42 | processCommentParent(parent, cb, result)
43 | }, result)
44 | }
45 |
46 | function processCommentParent(item, cb, result) {
47 | if (result.itemCount === 1) {
48 | result.parent = item
49 | }
50 | if (item.type !== 'comment') {
51 | result.op = item
52 | titleCache[item.id] = {
53 | id: item.id,
54 | type: item.type,
55 | title: item.title
56 | }
57 | cb(result)
58 | }
59 | else {
60 | fetchCommentParent(item, cb, result)
61 | }
62 | }
63 |
64 | var ItemStore = {
65 | getItem(id, cb, result) {
66 | var cachedItem = this.getCachedItem(id)
67 | if (cachedItem) {
68 | if (result) {
69 | result.cacheHits++
70 | }
71 | setImmediate(cb, cachedItem)
72 | }
73 | else {
74 | HNService.fetchItem(id, cb)
75 | }
76 | },
77 |
78 | getCachedItem(id) {
79 | return StoryStore.getItem(id) || UpdatesStore.getItem(id) || null
80 | },
81 |
82 | getCachedStory(id) {
83 | return StoryStore.getItem(id) || UpdatesStore.getStory(id) || null
84 | },
85 |
86 | fetchCommentAncestors(comment, cb) {
87 | var startTime = Date.now()
88 | var result = {itemCount: 0, cacheHits: 0}
89 | fetchCommentParent(comment, function() {
90 | result.timeTaken = Date.now() - startTime
91 | setImmediate(cb, result)
92 | }, result)
93 | }
94 | }
95 |
96 | export default ItemStore
97 |
--------------------------------------------------------------------------------
/src/stores/SettingsStore.js:
--------------------------------------------------------------------------------
1 | var extend = require('../utils/extend').default
2 | var storage = require('../utils/storage').default
3 |
4 | var STORAGE_KEY = 'settings'
5 |
6 | var SettingsStore = {
7 | autoCollapse: true,
8 | replyLinks: true,
9 | showDead: false,
10 | showDeleted: false,
11 | titleFontSize: 18,
12 | listSpacing: 16,
13 |
14 | load() {
15 | var json = storage.get(STORAGE_KEY)
16 | if (json) {
17 | extend(this, JSON.parse(json))
18 | }
19 | },
20 |
21 | save() {
22 | storage.set(STORAGE_KEY, JSON.stringify({
23 | autoCollapse: this.autoCollapse,
24 | replyLinks: this.replyLinks,
25 | showDead: this.showDead,
26 | showDeleted: this.showDeleted,
27 | titleFontSize: this.titleFontSize,
28 | listSpacing: this.listSpacing
29 | }))
30 | }
31 | }
32 |
33 | export default SettingsStore
34 |
--------------------------------------------------------------------------------
/src/stores/StoryCommentThreadStore.js:
--------------------------------------------------------------------------------
1 | var CommentThreadStore = require('./CommentThreadStore').default
2 | var SettingsStore = require('./SettingsStore').default
3 |
4 | var debounce = require('../utils/cancellableDebounce').default
5 | var extend = require('../utils/extend').default
6 | var pluralise = require('../utils/pluralise').default
7 | var storage = require('../utils/storage').default
8 |
9 | /**
10 | * Load persisted comment thread state.
11 | * @return .lastVisit {Date} null if the item hasn't been visited before.
12 | * @return .commentCount {Number} 0 if the item hasn't been visited before.
13 | * @return .maxCommentId {Number} 0 if the item hasn't been visited before.
14 | */
15 | function loadState(itemId) {
16 | var json = storage.get(itemId)
17 | if (json) {
18 | return JSON.parse(json)
19 | }
20 | return {
21 | lastVisit: null,
22 | commentCount: 0,
23 | maxCommentId: 0
24 | }
25 | }
26 |
27 | function StoryCommentThreadStore(item, onCommentsChanged, options) {
28 | CommentThreadStore.call(this, item, onCommentsChanged)
29 | this.startedLoading = Date.now()
30 |
31 | /** Lookup from a comment id to its parent comment id. */
32 | this.parents = {}
33 | /** The number of comments which have loaded. */
34 | this.commentCount = 0
35 | /** The number of new comments which have loaded. */
36 | this.newCommentCount = 0
37 | /** The max comment id seen by the store. */
38 | this.maxCommentId = 0
39 | /** Has the comment thread finished loading? */
40 | this.loading = true
41 | /** The number of comments we're expecting to load. */
42 | this.expectedComments = item.kids ? item.kids.length : 0
43 | /**
44 | * The number of descendants the story has according to the API.
45 | * This count includes deleted comments, which aren't accessible via the API,
46 | * so a thread with deleted comments (example story id: 9273709) will never
47 | * load this number of comments
48 | * However, we still need to persist the last known descendant count in order
49 | * to determine how many new comments there are when displaying the story on a
50 | * list page.
51 | */
52 | this.itemDescendantCount = item.descendants
53 |
54 | var initialState = loadState(item.id)
55 | /** Time of last visit to the story. */
56 | this.lastVisit = initialState.lastVisit
57 | /** Max comment id on the last visit - determines which comments are new. */
58 | this.prevMaxCommentId = initialState.maxCommentId
59 | /** Is this the user's first time viewing the story? */
60 | this.isFirstVisit = (initialState.lastVisit === null)
61 |
62 | // Trigger an immediate check for thread load completion if the item was not
63 | // retrieved from the cache, so is the latest version. This completes page
64 | // loading immediately for items which have no comments yet.
65 | if (!options.cached) {
66 | this.checkLoadCompletion()
67 | }
68 | }
69 |
70 | StoryCommentThreadStore.loadState = loadState
71 |
72 | StoryCommentThreadStore.prototype = extend(Object.create(CommentThreadStore.prototype), {
73 | constructor: StoryCommentThreadStore,
74 |
75 | /**
76 | * Callback to the item component with updated comment counts, debounced as
77 | * comments will be loading frequently on initial load.
78 | */
79 | numberOfCommentsChanged: debounce(function() {
80 | this.onCommentsChanged({type: 'number'})
81 | }, 123),
82 |
83 | /**
84 | * If we don't have a last visit time stored for an item, it must have been
85 | * visited for the first time. Once it finishes loading, establish the last
86 | * visit time and max comment id which will be used to track and display new
87 | * comments.
88 | */
89 | firstLoadComplete() {
90 | this.lastVisit = Date.now()
91 | this.prevMaxCommentId = this.maxCommentId
92 | this.isFirstVisit = false
93 | this.onCommentsChanged({type: 'first_load_complete'})
94 | },
95 |
96 | /**
97 | * Check whether the number of comments has reached the expected number yet.
98 | */
99 | checkLoadCompletion() {
100 | if (this.loading && this.commentCount >= this.expectedComments) {
101 | if (process.env.NODE_ENV !== 'production') {
102 | console.info(
103 | 'Initial load of ' +
104 | this.commentCount + ' comment' + pluralise(this.commentCount) +
105 | ' for ' + this.itemId + ' took ' +
106 | ((Date.now() - this.startedLoading) / 1000).toFixed(2) + 's'
107 | )
108 | }
109 | this.loading = false
110 | if (this.isFirstVisit) {
111 | this.firstLoadComplete()
112 | }
113 | else if (SettingsStore.autoCollapse && this.newCommentCount > 0) {
114 | this.collapseThreadsWithoutNewComments()
115 | }
116 | this._storeState()
117 | }
118 | },
119 |
120 | /**
121 | * Persist comment thread state.
122 | */
123 | _storeState() {
124 | storage.set(this.itemId, JSON.stringify({
125 | lastVisit: Date.now(),
126 | commentCount: this.itemDescendantCount,
127 | maxCommentId: this.maxCommentId
128 | }))
129 | },
130 |
131 | /**
132 | * The item this comment thread belongs to got updated.
133 | */
134 | itemUpdated(item) {
135 | this.itemDescendantCount = item.descendants
136 | },
137 |
138 | /**
139 | * A comment got loaded initially or added later.
140 | */
141 | commentAdded(comment) {
142 | // Deleted comments don't count towards the comment count
143 | if (comment.deleted) {
144 | // Adjust the number of comments expected during the initial page load.
145 | if (this.loading) {
146 | this.expectedComments--
147 | this.checkLoadCompletion()
148 | }
149 | return
150 | }
151 |
152 | CommentThreadStore.prototype.commentAdded.call(this, comment)
153 |
154 | // Dead comments don't contribute to the comment count if showDead is off
155 | if (comment.dead && !SettingsStore.showDead) {
156 | this.expectedComments--
157 | }
158 | else {
159 | this.commentCount++
160 | }
161 | // Add the number of kids the comment has to the expected total for the
162 | // initial load.
163 | if (this.loading && comment.kids) {
164 | this.expectedComments += comment.kids.length
165 | }
166 | // Register the comment as new if it's new, unless it's dead and showDead is off
167 | if (this.prevMaxCommentId > 0 &&
168 | comment.id > this.prevMaxCommentId &&
169 | (!comment.dead || SettingsStore.showDead)) {
170 | this.newCommentCount++
171 | this.isNew[comment.id] = true
172 | }
173 | // Keep track of the biggest comment id seen
174 | if (comment.id > this.maxCommentId) {
175 | this.maxCommentId = comment.id
176 | }
177 | // We don't want the story to be part of the comment parent hierarchy
178 | if (comment.parent !== this.itemId) {
179 | this.parents[comment.id] = comment.parent
180 | }
181 |
182 | this.numberOfCommentsChanged()
183 | if (this.loading) {
184 | this.checkLoadCompletion()
185 | }
186 | },
187 |
188 | /**
189 | * A comment which hasn't loaded yet is being delayed.
190 | */
191 | commentDelayed(commentId) {
192 | // Don't wait for delayed comments
193 | this.expectedComments--
194 | },
195 |
196 | /**
197 | * A comment which wasn't previously deleted became deleted.
198 | */
199 | commentDeleted(comment) {
200 | CommentThreadStore.prototype.commentDeleted.call(this, comment)
201 | this.commentCount--
202 | if (this.isNew[comment.id]) {
203 | this.newCommentCount--
204 | delete this.isNew[comment.id]
205 | }
206 | delete this.parents[comment.id]
207 | // Trigger debounced callbacks
208 | this.numberOfCommentsChanged()
209 | },
210 |
211 | /**
212 | * A comment which wasn't previously dead became dead.
213 | */
214 | commentDied(comment) {
215 | if (!SettingsStore.showDead) {
216 | this.commentCount--
217 | if (this.isNew[comment.id]) {
218 | this.newCommentCount--
219 | delete this.isNew[comment.id]
220 | }
221 | }
222 | },
223 |
224 | /**
225 | * Change the expected number of comments if an update was received during
226 | * initial loding and trigger a re-check of loading completion.
227 | */
228 | adjustExpectedComments(change) {
229 | this.expectedComments += change
230 | this.checkLoadCompletion()
231 | },
232 |
233 | collapseThreadsWithoutNewComments() {
234 | // Create an id lookup for comments which have a new comment as one of their
235 | // descendants. New comments themselves are not added to the lookup.
236 | var newCommentIds = Object.keys(this.isNew)
237 | var hasNewComments = {}
238 | for (var i = 0, l = newCommentIds.length; i < l; i++) {
239 | var parent = this.parents[newCommentIds[i]]
240 | while (parent) {
241 | // Stop when we hit one we've seen before
242 | if (hasNewComments[parent]) {
243 | break
244 | }
245 | hasNewComments[parent] = true
246 | parent = this.parents[parent]
247 | }
248 | }
249 |
250 | // Walk the tree of comments one level at a time, only walking children to
251 | // comments we know have new comment descendants, to find subtrees which
252 | // don't have new comments.
253 | // Other comments are marked for collapsing unless they are themselves a
254 | // new comment (in which case all their replies must be new too).
255 | var shouldCollapse = {}
256 | var commentIds = this.children[this.itemId]
257 | while (commentIds.length) {
258 | var nextCommentIds = []
259 | for (i = 0, l = commentIds.length; i < l; i++) {
260 | var commentId = commentIds[i]
261 | if (!hasNewComments[commentId]) {
262 | if (!this.isNew[commentId]) {
263 | shouldCollapse[commentId] = true
264 | }
265 | }
266 | else {
267 | var childCommentIds = this.children[commentId]
268 | if (childCommentIds.length) {
269 | nextCommentIds.push.apply(nextCommentIds, childCommentIds)
270 | }
271 | }
272 | }
273 | commentIds = nextCommentIds
274 | }
275 |
276 | this.isCollapsed = shouldCollapse
277 | this.onCommentsChanged({type: 'collapse'})
278 | },
279 |
280 | getCommentByTimeIndex(timeIndex) {
281 | var sortedCommentIds = Object.keys(this.comments).map(id => Number(id))
282 | if (!SettingsStore.showDead) {
283 | sortedCommentIds = sortedCommentIds.filter(id => !this.deadComments[id])
284 | }
285 | sortedCommentIds.sort()
286 | var commentId = sortedCommentIds[timeIndex - 1]
287 | return this.comments[commentId]
288 | },
289 |
290 | highlightNewCommentsSince(showCommentsAfter) {
291 | var referenceComment = this.getCommentByTimeIndex(showCommentsAfter)
292 |
293 | // Walk the tree of comments and create a new isNew lookup for comments
294 | // newer than the reference comment we're using for highlighting.
295 | var isNew = {}
296 | var commentIds = this.children[this.itemId]
297 | while (commentIds.length) {
298 | var nextCommentIds = []
299 | for (var i = 0, l = commentIds.length; i < l; i++) {
300 | var commentId = commentIds[i]
301 | if (commentId > referenceComment.id) {
302 | isNew[commentId] = true
303 | }
304 | var childCommentIds = this.children[commentId]
305 | if (childCommentIds.length) {
306 | nextCommentIds.push.apply(nextCommentIds, childCommentIds)
307 | }
308 | }
309 | commentIds = nextCommentIds
310 | }
311 |
312 | this.isNew = isNew
313 | this.collapseThreadsWithoutNewComments()
314 | },
315 |
316 | /**
317 | * Merk the thread as read.
318 | */
319 | markAsRead() {
320 | this.lastVisit = Date.now()
321 | this.newCommentCount = 0
322 | this.prevMaxCommentId = this.maxCommentId
323 | this.isNew = {}
324 | this._storeState()
325 | },
326 |
327 | /**
328 | * Persist comment thread state and perform any necessary internal cleanup.
329 | */
330 | dispose() {
331 | // Cancel debounced callbacks in case any are pending
332 | this.numberOfCommentsChanged.cancel()
333 | this._storeState()
334 | }
335 | })
336 |
337 | export default StoryCommentThreadStore
338 |
--------------------------------------------------------------------------------
/src/stores/StoryStore.js:
--------------------------------------------------------------------------------
1 | var {EventEmitter} = require('events')
2 |
3 | var HNService = require('../services/HNService').default
4 |
5 | var extend = require('../utils/extend').default
6 |
7 | var ID_REGEXP = /^\d+$/
8 |
9 | /**
10 | * Firebase reference used to stream updates - only one StoryStore instance can
11 | * be active at a time.
12 | */
13 | var firebaseRef = null
14 |
15 | // Cache objects shared among StoryStore instances, also accessible via static
16 | // functions on the StoryStore constructor.
17 |
18 | /**
19 | * Story ids by type, in rank order. Persisted to sessionStorage.
20 | * @type Object.>
21 | */
22 | var idCache = {}
23 |
24 | /**
25 | * Item cache. Persisted to sessionStorage.
26 | * @type Object.
27 | */
28 | var itemCache = {}
29 |
30 | /**
31 | * Story items in rank order for display, by type.
32 | * @type Object.>
33 | */
34 | var storyLists = {}
35 |
36 | /**
37 | * Populate the story list for the given story type from the cache.
38 | */
39 | function populateStoryList(type) {
40 | var ids = idCache[type]
41 | var storyList = storyLists[type]
42 | for (var i = 0, l = ids.length; i < l; i++) {
43 | storyList[i] = itemCache[ids[i]] || null
44 | }
45 | }
46 |
47 | function parseJSON(json, defaultValue) {
48 | return (json ? JSON.parse(json) : defaultValue)
49 | }
50 |
51 | class StoryStore extends EventEmitter {
52 | constructor(type) {
53 | super()
54 | this.type = type
55 |
56 | // Ensure cache objects for this type are initialised
57 | if (!(type in idCache)) {
58 | idCache[type] = []
59 | }
60 | if (!(type in storyLists)) {
61 | storyLists[type] = []
62 | populateStoryList(type)
63 | }
64 |
65 | // Pre-bind event handlers per instance
66 | this.onStorage = this.onStorage.bind(this)
67 | this.onStoriesUpdated = this.onStoriesUpdated.bind(this)
68 | }
69 |
70 | getState() {
71 | return {
72 | ids: idCache[this.type],
73 | stories: storyLists[this.type]
74 | }
75 | }
76 |
77 | itemUpdated(item, index) {
78 | storyLists[this.type][index] = item
79 | itemCache[item.id] = item
80 | }
81 |
82 | /**
83 | * Emit an item id event if a storage key corresponding to an item in the
84 | * cache has changed.
85 | */
86 | onStorage(e) {
87 | if (itemCache[e.key]) {
88 | this.emit(e.key)
89 | }
90 | }
91 |
92 | /**
93 | * Handle story id snapshots from Firebase.
94 | */
95 | onStoriesUpdated(snapshot) {
96 | idCache[this.type] = snapshot.val()
97 | populateStoryList(this.type)
98 | this.emit('update', this.getState())
99 | }
100 |
101 | start() {
102 | if (this.type === 'read') {
103 | var readStoryIds = Object.keys(window.localStorage)
104 | .filter(key => ID_REGEXP.test(key))
105 | .map(id => Number(id))
106 | .sort((a, b) => b - a)
107 | setImmediate(() => this.onStoriesUpdated({val: () => readStoryIds}))
108 | }
109 | else {
110 | firebaseRef = HNService.storiesRef(this.type)
111 | firebaseRef.on('value', this.onStoriesUpdated)
112 | }
113 | window.addEventListener('storage', this.onStorage)
114 | }
115 |
116 | stop() {
117 | if (firebaseRef !== null) {
118 | firebaseRef.off()
119 | firebaseRef = null
120 | }
121 | window.removeEventListener('storage', this.onStorage)
122 | }
123 | }
124 |
125 | // Static, cache-related functions
126 | extend(StoryStore, {
127 | /**
128 | * Get an item from the cache.
129 | */
130 | getItem(id) {
131 | return itemCache[id] || null
132 | },
133 |
134 | /**
135 | * Deserialise caches from sessionStorage.
136 | */
137 | loadSession() {
138 | idCache = parseJSON(window.sessionStorage.idCache, {})
139 | itemCache = parseJSON(window.sessionStorage.itemCache, {})
140 | },
141 |
142 | /**
143 | * Serialise caches to sessionStorage as JSON.
144 | */
145 | saveSession() {
146 | window.sessionStorage.idCache = JSON.stringify(idCache)
147 | window.sessionStorage.itemCache = JSON.stringify(itemCache)
148 | }
149 | })
150 |
151 | export default StoryStore
152 |
--------------------------------------------------------------------------------
/src/stores/UpdatesStore.js:
--------------------------------------------------------------------------------
1 | var EventEmitter = require('events').EventEmitter
2 |
3 | var HNService = require('../services/HNService').default
4 |
5 | var {UPDATES_CACHE_SIZE} = require('../utils/constants').default
6 | var extend = require('../utils/extend').default
7 |
8 | /**
9 | * Firebase reference used to stream updates.
10 | */
11 | var updatesRef = null
12 |
13 | /**
14 | * Contains item id -> item cache objects. Persisted to sessionStorage.
15 | * @prop .comments {Object.} comments cache.
16 | * @prop .stories {Object.} story cache.
17 | */
18 | var updatesCache = null
19 |
20 | /**
21 | * Lists of items in reverse chronological order for display.
22 | * @prop .comments {Array.- } comment updates.
23 | * @prop .stories {Array.
- } story updates.
24 | */
25 | var updates = {}
26 |
27 | function sortByTimeDesc(a, b) {
28 | return b.time - a.time
29 | }
30 |
31 | function cacheObjToSortedArray(obj) {
32 | var arr = Object.keys(obj).map(function(id) { return obj[id] })
33 | arr.sort(sortByTimeDesc)
34 | return arr
35 | }
36 |
37 | /**
38 | * Populate lists of updates for display from the cache.
39 | */
40 | function populateUpdates() {
41 | updates.comments = processCacheObj(updatesCache.comments)
42 | updates.stories = processCacheObj(updatesCache.stories)
43 | }
44 |
45 | /**
46 | * Create an array of items from a cache object, sorted in reverse chronological
47 | * order. Evict the oldest items from the cache if it's grown above
48 | * UPDATES_CACHE_SIZE.
49 | */
50 | function processCacheObj(cacheObj) {
51 | var arr = cacheObjToSortedArray(cacheObj)
52 | arr.splice(UPDATES_CACHE_SIZE, Math.max(0, arr.length - UPDATES_CACHE_SIZE))
53 | .forEach(function(item) {
54 | delete cacheObj[item.id]
55 | })
56 | return arr
57 | }
58 |
59 | /**
60 | * Lookup to filter out any items which appear in the updates feed which can't
61 | * be displayed by the Updates component.
62 | */
63 | var updateItemTypes = {
64 | comment: true,
65 | job: true,
66 | poll: true,
67 | story: true
68 | }
69 |
70 | /**
71 | * Process incoming items from the update stream.
72 | */
73 | function handleUpdateItems(items) {
74 | for (var i = 0, l = items.length; i < l; i++) {
75 | var item = items[i]
76 | // Silently ignore deleted items (because irony)
77 | if (item.deleted) { continue }
78 |
79 | if (typeof updateItemTypes[item.type] == 'undefined') {
80 | if (process.env.NODE_ENV !== 'production') {
81 | console.warn(
82 | "An item which can't be displayed by the Updates component was " +
83 | 'received in the updates stream: ' + JSON.stringify(item)
84 | )
85 | }
86 | continue
87 | }
88 |
89 | if (item.type === 'comment') {
90 | updatesCache.comments[item.id] = item
91 | }
92 | else {
93 | updatesCache.stories[item.id] = item
94 | }
95 | }
96 | populateUpdates()
97 | UpdatesStore.emit('updates', updates)
98 | }
99 |
100 | var UpdatesStore = extend(new EventEmitter(), {
101 | loadSession() {
102 | var json = window.sessionStorage.updates
103 | updatesCache = (json ? JSON.parse(json) : {comments: {}, stories: {}})
104 | populateUpdates()
105 | },
106 |
107 | saveSession() {
108 | window.sessionStorage.updates = JSON.stringify(updatesCache)
109 | },
110 |
111 | start() {
112 | if (updatesRef === null) {
113 | updatesRef = HNService.updatesRef()
114 | updatesRef.on('value', function(snapshot) {
115 | HNService.fetchItems(snapshot.val(), handleUpdateItems)
116 | })
117 | }
118 | },
119 |
120 | stop() {
121 | updatesRef.off()
122 | updatesRef = null
123 | },
124 |
125 | getUpdates() {
126 | return updates
127 | },
128 |
129 | getItem(id) {
130 | return (updatesCache.comments[id] || updatesCache.stories[id] || null)
131 | },
132 |
133 | getComment(id) {
134 | return (updatesCache.comments[id] || null)
135 | },
136 |
137 | getStory(id) {
138 | return (updatesCache.stories[id] || null)
139 | }
140 | })
141 | UpdatesStore.off = UpdatesStore.removeListener
142 |
143 | export default UpdatesStore
144 |
--------------------------------------------------------------------------------
/src/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | background-color: #fff;
3 | margin: 0;
4 | }
5 | form {
6 | margin: 0;
7 | }
8 | h2 {
9 | padding-left: 1.25em;
10 | }
11 | img {
12 | vertical-align: text-bottom;
13 | }
14 | pre {
15 | white-space: pre-wrap;
16 | }
17 | span.control {
18 | cursor: pointer;
19 | }
20 | span.control:hover {
21 | text-decoration: underline;
22 | }
23 |
24 | /* From https://github.com/tobiasahlin/SpinKit */
25 | .Spinner {
26 | }
27 | .Spinner > div {
28 | background-color: #666;
29 | border-radius: 100%;
30 | display: inline-block;
31 | -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
32 | animation: bouncedelay 1.4s infinite ease-in-out;
33 | /* Prevent first frame from flickering when animation starts */
34 | -webkit-animation-fill-mode: both;
35 | animation-fill-mode: both;
36 | }
37 | .Spinner .bounce1 {
38 | -webkit-animation-delay: -0.32s;
39 | animation-delay: -0.32s;
40 | }
41 | .Spinner .bounce2 {
42 | -webkit-animation-delay: -0.16s;
43 | animation-delay: -0.16s;
44 | }
45 | @-webkit-keyframes bouncedelay {
46 | 0%, 80%, 100% { -webkit-transform: scale(0.0) }
47 | 40% { -webkit-transform: scale(1.0) }
48 | }
49 | @keyframes bouncedelay {
50 | 0%, 80%, 100% {
51 | transform: scale(0.0);
52 | -webkit-transform: scale(0.0);
53 | } 40% {
54 | transform: scale(1.0);
55 | -webkit-transform: scale(1.0);
56 | }
57 | }
58 |
59 | .App__wrap {
60 | width: 90%;
61 | max-width: 1280px;
62 | margin: 8px auto;
63 | color: #000;
64 | background-color: #f5f5f5;
65 | font-size: 13.3333px;
66 | font-family: Verdana, Geneva, sans-serif;
67 | }
68 | .App__header {
69 | color: #00d8ff;
70 | background-color: #222;
71 | padding: 6px;
72 | line-height: 18px;
73 | vertical-align: middle;
74 | position: relative;
75 | }
76 | .App__settings {
77 | position: absolute;
78 | top: 6px;
79 | right: 10px;
80 | cursor: pointer;
81 | }
82 | .Settings {
83 | box-sizing: border-box;
84 | padding: .75em;
85 | position: absolute;
86 | width: 36%%;
87 | background-color: inherit;
88 | right: 0;
89 | border-bottom-left-radius: 1em;
90 | border-bottom-right-radius: 1em;
91 | }
92 | .Settings__setting td:first-child {
93 | text-align: right;
94 | }
95 | .Settings p {
96 | color: #fff;
97 | }
98 | .Settings div:last-child > p:last-child {
99 | margin-bottom: 0;
100 | }
101 | .App__header img {
102 | border: 1px solid #00d8ff;
103 | margin-right: .25em;
104 | }
105 | .App__header a {
106 | color: inherit;
107 | text-decoration: none;
108 | }
109 | .App__header a.active {
110 | color: #fff;
111 | }
112 | .App__homelink {
113 | text-decoration: none;
114 | font-weight: bold;
115 | color: #00d8ff !important;
116 | margin-right: .75em;
117 | }
118 | .App__homelink.active {
119 | color: #fff !important;
120 | }
121 | .App__content {
122 | overflow-wrap: break-word;
123 | word-wrap: break-word;
124 | }
125 | .App__footer {
126 | margin-top: 1em;
127 | border-top: 1px solid #e7e7e7;
128 | text-align: center;
129 | color: #333;
130 | padding: 6px 0;
131 | }
132 | .App__footer a {
133 | color: inherit;
134 | text-decoration: underline;
135 | }
136 |
137 | .Items > p {
138 | padding-left: 1.25em;
139 | }
140 | .Items__list {
141 | padding-left: 3em;
142 | padding-right: 1.25em;
143 | margin-top: 1em;
144 | margin-bottom: .5em;
145 | }
146 | .ListItem {
147 | margin-bottom: 16px;
148 | }
149 | .ListItem--loading {
150 | min-height: 34px;
151 | }
152 |
153 | .Updates--loading {
154 | padding: 1em 1.25em 0 1.25em;
155 | margin-bottom: 1em;
156 | }
157 | .Updates__notice {
158 | padding: 0 1.25em;
159 | }
160 | .Updates .Comment {
161 | margin-bottom: .75em;
162 | }
163 |
164 | .Paginator {
165 | margin-left: 3em;
166 | padding: .5em 0;
167 | }
168 | .Paginator a {
169 | font-weight: bold;
170 | color: #000;
171 | text-decoration: none;
172 | }
173 | .Paginator a:hover {
174 | text-decoration: underline;
175 | }
176 |
177 | .Item__content,
178 | .Item--loading {
179 | padding: 1em 1.25em 0 1.25em;
180 | margin-bottom: 1em;
181 | }
182 | .Item__title {
183 | color: #666;
184 | font-size:18px;
185 | }
186 | .Item__title a {
187 | text-decoration: none;
188 | color: #000;
189 | }
190 | .Item__title a:hover {
191 | text-decoration: underline;
192 | }
193 | .Item__title a:visited {
194 | color: #666;
195 | }
196 | .Item__meta {
197 | color: #666;
198 | }
199 | .Item > .Item__meta {
200 | margin-bottom: 1em;
201 | }
202 | .Item__meta a {
203 | text-decoration: none;
204 | color: inherit;
205 | }
206 | .Item__meta a:hover {
207 | text-decoration: underline;
208 | }
209 | .Item__meta em {
210 | font-style: normal;
211 | background-color: #ffffde;
212 | color: #000;
213 | }
214 | .Item__by a, .ListItem__newcomments a {
215 | font-weight: bold;
216 | }
217 | .Item__text {
218 | margin-top: 1em;
219 | }
220 | .Item__poll {
221 | margin-top: 1em;
222 | padding-left: 2.5em;
223 | }
224 |
225 | .PollOption {
226 | margin-bottom: 10px;
227 | }
228 | .PollOption__score {
229 | color: #666;
230 | }
231 |
232 | .PermalinkedComment > .Comment__content {
233 | margin-bottom: 1em;
234 | }
235 | .Comment {
236 | }
237 | .Comment--new > .Comment__content {
238 | background-color: #ffffde;
239 | }
240 | /* Highlights a comment and its descendants on hover -- too distracting?
241 | .Comment:hover > .Comment__content {
242 | background-color: #fff;
243 | }
244 | */
245 | .Comment__meta {
246 | color: #666;
247 | margin-bottom: .5em
248 | }
249 | .Comment__meta a {
250 | text-decoration: none;
251 | color: inherit;
252 | }
253 | .Comment__meta a:hover {
254 | text-decoration: underline;
255 | }
256 | .Comment__meta em {
257 | font-style: normal;
258 | background-color: #ffffde;
259 | color: #000;
260 | }
261 | .Comment__user {
262 | font-weight: bold;
263 | }
264 | .Comment__content, .Comment--loading {
265 | padding-right: 1.25em;
266 | padding-top: .65em;
267 | padding-bottom: .65em;
268 | }
269 | .Comment--level0 .Comment__content, .Comment--level0.Comment--loading { padding-left: 1.25em; }
270 | .Comment--level1 .Comment__content, .Comment--level1.Comment--loading { padding-left: 3.75em; }
271 | .Comment--level2 .Comment__content, .Comment--level2.Comment--loading { padding-left: 6.25em; }
272 | .Comment--level3 .Comment__content, .Comment--level3.Comment--loading { padding-left: 8.75em; }
273 | .Comment--level4 .Comment__content, .Comment--level4.Comment--loading { padding-left: 11.25em; }
274 | .Comment--level5 .Comment__content, .Comment--level5.Comment--loading { padding-left: 13.75em; }
275 | .Comment--level6 .Comment__content, .Comment--level6.Comment--loading { padding-left: 16.25em; }
276 | .Comment--level7 .Comment__content, .Comment--level7.Comment--loading { padding-left: 18.75em; }
277 | .Comment--level8 .Comment__content, .Comment--level8.Comment--loading { padding-left: 21.25em; }
278 | .Comment--level9 .Comment__content, .Comment--level9.Comment--loading { padding-left: 23.75em; }
279 | .Comment--level10 .Comment__content, .Comment--level10.Comment--loading { padding-left: 26.25em; }
280 | .Comment--level11 .Comment__content, .Comment--level11.Comment--loading { padding-left: 28.75em; }
281 | .Comment--level12 .Comment__content, .Comment--level12.Comment--loading { padding-left: 31.25em; }
282 | .Comment--level13 .Comment__content, .Comment--level13.Comment--loading { padding-left: 33.75em; }
283 | .Comment--level14 .Comment__content, .Comment--level14.Comment--loading { padding-left: 36.25em; }
284 | .Comment--level15 .Comment__content, .Comment--level15.Comment--loading { padding-left: 38.75em; }
285 | .Comment__kids {
286 | }
287 | .Comment__collapse {
288 | cursor: pointer;
289 | }
290 | .Comment--collapsed .Comment__text,
291 | .Comment--collapsed > .Comment__kids {
292 | display: none;
293 | }
294 | .Comment__text a {
295 | color: #000;
296 | }
297 | .Comment__text a:visited {
298 | color: #666;
299 | }
300 | .Comment__text p:last-child, .Comment__text pre:last-child {
301 | margin-bottom: 0;
302 | }
303 | .Comment--dead > .Comment__content > .Comment__text {
304 | color: #ddd !important;
305 | }
306 | .Comment--error .Comment__meta {
307 | color: #f33;
308 | }
309 |
310 | .UserProfile {
311 | padding-left: 1.25em;
312 | padding-top: 1em;
313 | }
314 | .UserProfile h4 {
315 | margin: 0 0 1em 0;
316 | }
317 |
318 | @media only screen and (max-width: 750px) and (min-width: 300px) {
319 | .App__wrap {
320 | width: 100%;
321 | margin: 0px auto;
322 | }
323 |
324 | /* Hide the App title homelink on narrow viewports */
325 | .App__homelink {
326 | display: none;
327 | }
328 |
329 | /* Safari only fix to ensure Settings menu is full width */
330 | _::-webkit-:not(:root:root), .Settings {
331 | width: 100%;
332 | }
333 | }
334 |
335 | /* Hide the Settings link on iPhone 5 */
336 | @media (device-height: 568px) and (device-width: 320px) and (-webkit-min-device-pixel-ratio: 2) {
337 | .App__settings {
338 | display: none;
339 | }
340 | }
341 |
--------------------------------------------------------------------------------
/src/utils/buildClassName.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Creates a className string including some class names conditionally.
3 | * @param {string=} staticClassName class name(s) which should always be
4 | * included.
5 | * @param {Object.
} conditionalClassNames an object mapping class
6 | * names to a value which indicates if the class name should be included -
7 | * class names will be included if their corresponding value is truthy.
8 | * @return {string}
9 | */
10 | function buildClassName(staticClassName, conditionalClassNames) {
11 | var classNames = []
12 | if (typeof conditionalClassNames == 'undefined') {
13 | conditionalClassNames = staticClassName
14 | }
15 | else {
16 | classNames.push(staticClassName)
17 | }
18 | var classNameKeys = Object.keys(conditionalClassNames)
19 | for (var i = 0, l = classNameKeys.length; i < l; i++) {
20 | if (conditionalClassNames[classNameKeys[i]]) {
21 | classNames.push(classNameKeys[i])
22 | }
23 | }
24 | return classNames.join(' ')
25 | }
26 |
27 | export default buildClassName
28 |
--------------------------------------------------------------------------------
/src/utils/cancellableDebounce.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Based on the implementation of _.debounce() from Underscore.js 1.7.0
3 | * http://underscorejs.org
4 | * (c) 2009-2014 Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
5 | * Distributed under the MIT license.
6 | *
7 | * Returns a function, that, as long as it continues to be invoked, will not
8 | * be triggered. The function will be called after it stops being called for
9 | * N milliseconds. If `immediate` is passed, trigger the function on the
10 | * leading edge, instead of the trailing.
11 | *
12 | * The returned function has a .cancel() function which can be used to prevent
13 | * the debounced functiom being called.
14 | */
15 | function cancellableDebounce(func, wait, immediate) {
16 | var timeout, args, context, timestamp, result
17 |
18 | var later = function() {
19 | var last = Date.now() - timestamp
20 | if (last < wait && last > 0) {
21 | timeout = setTimeout(later, wait - last)
22 | }
23 | else {
24 | timeout = null
25 | if (!immediate) {
26 | result = func.apply(context, args)
27 | if (!timeout) {
28 | context = args = null
29 | }
30 | }
31 | }
32 | }
33 |
34 | var debounced = function() {
35 | context = this
36 | args = arguments
37 | timestamp = Date.now()
38 | var callNow = immediate && !timeout
39 | if (!timeout) {
40 | timeout = setTimeout(later, wait)
41 | }
42 | if (callNow) {
43 | result = func.apply(context, args)
44 | context = args = null
45 | }
46 | return result
47 | }
48 |
49 | debounced.cancel = function() {
50 | if (timeout) {
51 | clearTimeout(timeout)
52 | }
53 | }
54 |
55 | return debounced
56 | }
57 |
58 | export default cancellableDebounce
59 |
--------------------------------------------------------------------------------
/src/utils/constants.js:
--------------------------------------------------------------------------------
1 | export default {
2 | ITEMS_PER_PAGE: 30,
3 | SITE_TITLE: 'React HN',
4 | UPDATES_CACHE_SIZE: 500
5 | }
6 |
--------------------------------------------------------------------------------
/src/utils/extend.js:
--------------------------------------------------------------------------------
1 | function extend(dest, src1, src2) {
2 | var props = Object.keys(src1)
3 | for (var i = 0, l = props.length; i < l; i++) {
4 | dest[props[i]] = src1[props[i]]
5 | }
6 | if (src2) {
7 | props = Object.keys(src2)
8 | for (i = 0, l = props.length; i < l; i++) {
9 | dest[props[i]] = src2[props[i]]
10 | }
11 | }
12 | return dest
13 | }
14 |
15 | export default extend
16 |
--------------------------------------------------------------------------------
/src/utils/pageCalc.js:
--------------------------------------------------------------------------------
1 | function pageCalc(pageNum, pageSize, numItems) {
2 | var startIndex = (pageNum - 1) * pageSize
3 | var endIndex = Math.min(numItems, startIndex + pageSize)
4 | var hasNext = endIndex < numItems - 1
5 | return {pageNum, startIndex, endIndex, hasNext}
6 | }
7 |
8 | export default pageCalc
9 |
--------------------------------------------------------------------------------
/src/utils/pluralise.js:
--------------------------------------------------------------------------------
1 | function pluralise(howMany, suffixes) {
2 | return (suffixes || ',s').split(',')[(howMany === 1 ? 0 : 1)]
3 | }
4 |
5 | export default pluralise
6 |
--------------------------------------------------------------------------------
/src/utils/setTitle.js:
--------------------------------------------------------------------------------
1 | var {SITE_TITLE} = require('./constants').default
2 |
3 | function setTitle(title) {
4 | if (typeof document === 'undefined') return
5 | document.title = (title ? title + ' | ' + SITE_TITLE : SITE_TITLE)
6 | }
7 |
8 | export default setTitle
9 |
--------------------------------------------------------------------------------
/src/utils/storage.js:
--------------------------------------------------------------------------------
1 | export default {
2 | get(key, defaultValue) {
3 | var value = window.localStorage[key]
4 | return (typeof value != 'undefined' ? value : defaultValue)
5 | },
6 | set(key, value) {
7 | window.localStorage[key] = value
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
{' '}
48 | React HN{' '}
49 | new{' | '}
50 | comments {' | '}
51 | show{' | '}
52 | ask{' | '}
53 | jobs{' | '}
54 | read
55 |
56 | {this.state.showSettings ? 'hide settings' : 'settings'}
57 |
58 | {this.state.showSettings &&