Skip to content

Commit 016bba6

Browse files
clintonwooclintonwoo
committed
Comments are working. Current depth is 2.
1 parent 213e993 commit 016bba6

17 files changed

+356
-142
lines changed

‎src/components/Comment.js

Lines changed: 39 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,40 @@
11
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import { gql } from 'react-apollo';
24
import Link from 'next/link';
35

6+
import convertNumberToTimeAgo from '../helpers/convertNumberToTimeAgo';
7+
48
class Comment extends React.Component {
9+
static propTypes = {
10+
id: PropTypes.number.isRequired,
11+
creationTime: PropTypes.number.isRequired,
12+
indentationLevel: PropTypes.number.isRequired,
13+
submitterId: PropTypes.string.isRequired,
14+
text: PropTypes.string.isRequired,
15+
comments: PropTypes.arrayOf(PropTypes.shape({
16+
id: PropTypes.number.isRequired,
17+
creationTime: PropTypes.number.isRequired,
18+
submitterId: PropTypes.string.isRequired,
19+
text: PropTypes.string.isRequired,
20+
})).isRequired,
21+
}
22+
static fragments = {
23+
comment: gql`
24+
fragment Comment on Comment {
25+
id,
26+
creationTime,
27+
comments {
28+
id,
29+
creationTime,
30+
submitterId,
31+
text
32+
},
33+
submitterId,
34+
text,
35+
}
36+
`,
37+
}
538
vote() {
639
this;
740
return "vote(event, this, "up")";
@@ -18,7 +51,7 @@ class Comment extends React.Component {
1851
<tbody>
1952
<tr>
2053
<td className="ind">
21-
<img alt="" src="/static/s.gif" height="1" width="0"/* Width varies depending on comment level*/ />
54+
<img alt="" src="/static/s.gif" height="1" width={`${this.props.indentationLevel * 40}px`}/* Width varies depending on comment level*/ />
2255
</td>
2356
<td style={{ verticalAlign: 'top' }} className="votelinks">
2457
<center>
@@ -31,12 +64,12 @@ class Comment extends React.Component {
3164
<div style={{ marginTop: '2px', marginBottom: '-10px' }}>
3265
<span className="comhead">
3366
<Link prefetch href="/user?id=mstade">
34-
<a className="hnuser">mstade</a>
67+
<a className="hnuser">{this.props.submitterId}</a>
3568
</Link>
3669
<span className="age">
3770
{' '}
38-
<Link prefetch href="/item?id=15238246">
39-
<a>1 hour ago</a>
71+
<Link prefetch href={`/item?id=${this.props.id}`}>
72+
<a>{convertNumberToTimeAgo(this.props.creationTime)}</a>
4073
</Link>
4174
</span>
4275
{' '}
@@ -50,17 +83,12 @@ class Comment extends React.Component {
5083
<br />
5184
<div className="comment">
5285
<span className="c00">
53-
I honestly can't believe I'm saying this, but: can you please enable me to buy a new license for 4.0 even though it may not even be on the road map yet? Or switch to / enable a subscriber model which is paid yearly and gives access to all upgrades?<p>I rely so much on sublime for my day to day work and I fear the $80 or whatever I paid for it whenever ago is too cheap for the amount of value I'm getting out of it, and I'd hate to see this magnificent piece of software fall by the wayside because of an unsustainable business model.
54-
</p>
55-
<p>
56-
Of course, if the business is perfectly sustainable then you know, carry on as you where.
57-
<span />
58-
</p>
86+
<span dangerouslySetInnerHTML={{__html: this.props.text}} />
5987
<div className="reply">
6088
<p>
6189
<font size="1">
6290
<u>
63-
<Link prefetch href="/reply?id=15238246&amp;goto=item%3Fid%3D15237896%2315238246">
91+
<Link prefetch href={`/reply?id=${this.props.id}&goto=item%3Fid%3D${this.props.id}`}>
6492
<a>reply</a>
6593
</Link>
6694
</u>

‎src/components/Comments.js

Lines changed: 62 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,66 @@
11
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import { gql } from 'react-apollo';
24

35
import Comment from './Comment';
46

5-
const Component = props => (
6-
<table className="comment-tree" style={{ border: '0' }} >
7-
<tbody>
8-
<Comment />
9-
</tbody>
10-
</table>
11-
);
12-
13-
export default Component;
7+
const Comments = (props) => {
8+
const rows = [];
9+
props.newsItem.comments.forEach((rootComment) => {
10+
rows.push(<Comment
11+
key={rootComment.id}
12+
parentId={props.newsItem.id}
13+
indentationLevel={0}
14+
{...rootComment}
15+
/>);
16+
rootComment.comments.forEach((one) => {
17+
rows.push(<Comment
18+
key={one.id}
19+
parentId={one.parent}
20+
indentationLevel={1}
21+
{...one}
22+
/>);
23+
});
24+
});
25+
26+
return (
27+
<table className="comment-tree" style={{ border: '0' }} >
28+
<tbody>
29+
{ rows }
30+
</tbody>
31+
</table>
32+
);
33+
}
34+
Comments.propTypes = {
35+
newsItem: PropTypes.shape({
36+
id: PropTypes.number.isRequired,
37+
comments: PropTypes.arrayOf(PropTypes.shape({
38+
id: PropTypes.number.isRequired,
39+
creationTime: PropTypes.number.isRequired,
40+
submitterId: PropTypes.string.isRequired,
41+
text: PropTypes.string.isRequired,
42+
})).isRequired,
43+
}).isRequired,
44+
};
45+
Comments.fragments = {
46+
comment: gql`
47+
fragment Comments on Comment {
48+
id,
49+
comments {
50+
id,
51+
...Comment
52+
}
53+
...Comment
54+
}
55+
${Comment.fragments.comment}
56+
`,
57+
};
58+
// comments {
59+
// id
60+
// ...Comment
61+
// }
62+
// ...Comment
63+
// comments {
64+
// ...Comment
65+
// }
66+
export default Comments;

‎src/components/Component.js

Lines changed: 0 additions & 10 deletions
This file was deleted.

‎src/components/NewsDetail.js

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -13,21 +13,31 @@ class NewsDetail extends Component {
1313
commentCount: PropTypes.number.isRequired,
1414
creationTime: PropTypes.number.isRequired,
1515
submitterId: PropTypes.string.isRequired,
16-
title: PropTypes.string,
17-
isPostScrutinyVisible: PropTypes.bool,
1816
points: PropTypes.number.isRequired,
17+
isPostScrutinyVisible: PropTypes.bool,
1918
isFavoriteVisible: PropTypes.bool,
2019
}
2120
static defaultProps = {
22-
title: undefined,
2321
isFavoriteVisible: true,
2422
isPostScrutinyVisible: false,
2523
}
24+
static fragments = {
25+
newsItem: gql`
26+
fragment NewsDetail on NewsItem {
27+
id,
28+
commentCount,
29+
creationTime,
30+
submitterId,
31+
points
32+
}
33+
`,
34+
};
2635

2736
upvote() {
28-
37+
console.log(this);
2938
}
3039
hidestory() {
40+
console.log(this);
3141
return "/hide?id=15077449&amp;goto=news&amp;auth=15140ad499d896ef90cc72930b3fb7706f6d6398";
3242
}
3343
render() {
@@ -86,14 +96,4 @@ class NewsDetail extends Component {
8696
}
8797
}
8898

89-
const post = gql`
90-
fragment NewsDetail on entry {
91-
id
92-
submitterId
93-
commentCount
94-
points
95-
isFavoriteVisible
96-
}
97-
`
98-
9999
export default NewsDetail;

‎src/components/NewsFeed.js

Lines changed: 21 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
3-
4-
// import { graphql, gql } from 'react-apollo';
3+
import { gql } from 'react-apollo';
54

65
import NewsTitle from './NewsTitle';
76
import NewsDetail from './NewsDetail';
@@ -29,7 +28,14 @@ const NewsFeed = (props) => {
2928
rows.push(<tr className="spacer" key={`${newsItem.id.toString()}spacer`} style={{ height: 5 }} />);
3029
});
3130
rows.push(<tr key="morespace" className="morespace" style={{ height: '10px' }} />);
32-
rows.push(<tr key="morelinktr"><td key="morelinkcolspan" colSpan="2" /><td key="morelinktd" className="title"><a key="morelink" href="/news?p=2" className="morelink" rel="nofollow">More</a></td></tr>);
31+
rows.push(
32+
<tr key="morelinktr">
33+
<td key="morelinkcolspan" colSpan="2" />
34+
<td key="morelinktd" className="title">
35+
<a key="morelink" href={`${props.currentURL}?p=2`} className="morelink" rel="nofollow">More</a>
36+
</td>
37+
</tr>,
38+
);
3339

3440
return (
3541
<tr>
@@ -64,8 +70,19 @@ NewsFeed.propTypes = {
6470
url: PropTypes.string,
6571
commentCount: PropTypes.number.isRequired,
6672
points: PropTypes.number.isRequired,
67-
// favoriteVisible: PropTypes.bool.isRequired,
6873
})).isRequired,
74+
currentURL: PropTypes.string.isRequired,
75+
};
76+
NewsFeed.fragments = {
77+
newsItem: gql`
78+
fragment NewsFeed on NewsItem {
79+
id
80+
...NewsTitle
81+
...NewsDetail
82+
}
83+
${NewsTitle.fragments.newsItem}
84+
${NewsDetail.fragments.newsItem}
85+
`,
6986
};
7087

7188
export default NewsFeed;

‎src/components/NewsFeedWithApolloRenderer.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@ import PropTypes from 'prop-types';
33

44
import NewsFeed from './NewsFeed';
55

6-
export default ({ data: { loading, error, feed } }) => {
6+
export default ({ data: { loading, error, feed }, currentURL }) => {
77
if (error) return <tr><td>Error loading news items.</td></tr>;
88
if (feed && feed.length) {
99
return (
10-
<NewsFeed newsItems={feed} />
10+
<NewsFeed newsItems={feed} currentURL={currentURL} />
1111
);
1212
}
1313
return <tr><td>Loading</td></tr>;

‎src/components/NewsItemWithApolloRenderer.js

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import React from 'react';
2+
3+
import NewsTitle from './NewsTitle';
4+
import NewsDetail from './NewsDetail';
5+
import CommentBox from './CommentBox';
6+
import Comments from './Comments';
7+
8+
const NewsItemWithComments = ({ data: { loading, error, newsItem }, data}) => {
9+
if (error) return <tr><td>Error loading news items.</td></tr>;
10+
if (newsItem && newsItem.comments) {
11+
return (
12+
<tr>
13+
<td style={{ padding: '0px' }} >
14+
<table style={{ border: '0px', padding: '0px', borderCollapse: 'collapse', borderSpacing: '0px' }} className="itemlist">
15+
<tbody>
16+
<NewsTitle isRankVisible={false} {...newsItem} />
17+
<NewsDetail isPostScrutinyVisible={true} {...newsItem} />
18+
<tr key="morespace" className="morespace" style={{ height: '10px' }} />
19+
<CommentBox />
20+
</tbody>
21+
</table>
22+
<br />
23+
<br />
24+
<Comments newsItem={newsItem} />
25+
<br />
26+
<br />
27+
</td>
28+
</tr>
29+
)
30+
}
31+
return <tr><td>Loading</td></tr>;
32+
};
33+
34+
export default NewsItemWithComments;

‎src/components/NewsTitle.js

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
22
import Link from 'next/link';
33
import PropTypes from 'prop-types';
44
import url from 'url';
5+
import { gql } from 'react-apollo';
56

67
class NewsTitle extends Component {
78
static propTypes = {
@@ -17,12 +18,22 @@ class NewsTitle extends Component {
1718
rank: undefined,
1819
isRankVisible: true,
1920
}
21+
static fragments = {
22+
newsItem: gql`
23+
fragment NewsTitle on NewsItem {
24+
id,
25+
title,
26+
url,
27+
rank
28+
}
29+
`,
30+
};
2031

2132
upvote() {
22-
33+
console.log(this);
2334
}
2435
hidestory() {
25-
36+
console.log(this);
2637
}
2738
render() {
2839
return (

0 commit comments

Comments
 (0)