Skip to content

Commit 2998bb5

Browse files
clintonwooclintonwoo
committed
Pinned react-render-html module to version 0.1.5 because afterwards it depends on Camelcase and that's breaking builds. Preparing reply page (it had junk before).
1 parent 42fb36a commit 2998bb5

File tree

5 files changed

+224
-139
lines changed

5 files changed

+224
-139
lines changed

‎.babelrc

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@
1313
"react"
1414
],
1515
"plugins": [
16-
["transform-runtime"]
16+
[
17+
"transform-runtime"
18+
]
1719
]
1820
}

‎package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
"flow": "flow",
1717
"build": "npm run build-clean && yarn install --dev && babel src -d build/app --ignore '**/*__tests__' && cp -R src/static build/app/static && next build build/app",
1818
"build-clean": "rm -rf build/app",
19-
"build-next": "NODE_ENV=production yarn install --dev && next build src",
19+
"build-next": "yarn install --dev && next build src",
2020
"build-docker": "docker build -t clintonwoo/hackernews-react-graphql . && docker run -p 80:3000 --name hackernews-react-graphql clintonwoo/hackernews-react-graphql",
2121
"build-static-website": "NODE_ENV=production rm -rf build/static && yarn install --dev && next build src && next export src -o build/static",
2222
"start": "NODE_ENV=production node build/app/server.js"
@@ -52,7 +52,7 @@
5252
"react-apollo": "^1.4.15",
5353
"react-dom": "^15.6.1",
5454
"react-redux": "^5.0.6",
55-
"react-render-html": "^0.5.0",
55+
"react-render-html": "0.1.5",
5656
"url": "^0.11.0"
5757
},
5858
"devDependencies": {

‎src/components/Comment.js

Lines changed: 90 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -6,106 +6,99 @@ import renderHTML from 'react-render-html';
66

77
import convertNumberToTimeAgo from '../helpers/convertNumberToTimeAgo';
88

9-
class Comment extends React.Component {
10-
static propTypes = {
11-
id: PropTypes.number.isRequired,
12-
creationTime: PropTypes.number.isRequired,
13-
indentationLevel: PropTypes.number.isRequired,
14-
submitterId: PropTypes.string.isRequired,
15-
text: PropTypes.string.isRequired,
16-
comments: PropTypes.arrayOf(PropTypes.shape({
17-
id: PropTypes.number.isRequired,
18-
creationTime: PropTypes.number.isRequired,
19-
submitterId: PropTypes.string.isRequired,
20-
text: PropTypes.string.isRequired,
21-
})).isRequired,
22-
}
23-
static fragments = {
24-
comment: gql`
25-
fragment Comment on Comment {
26-
id,
27-
creationTime,
28-
comments {
29-
id,
30-
creationTime,
31-
submitterId,
32-
text
33-
},
34-
submitterId,
35-
text,
36-
}
37-
`,
38-
}
39-
vote = () => {
40-
// this;
9+
10+
const Comment = (props) => {
11+
const vote = () => {
12+
console.log(this);
4113
// return "vote(event, this, "up")";
42-
}
43-
toggle = () => {
44-
// this;
14+
};
15+
const toggle = () => {
16+
console.log(this);
4517
// return "toggle(event, 15238246)";
46-
}
47-
render() {
48-
return (
49-
<tr className="athing comtr " id="15238246">
50-
<td>
51-
<table style={{ border: '0' }}>
52-
<tbody>
53-
<tr>
54-
<td className="ind">
55-
<img alt="" src="/static/s.gif" height="1" width={`${this.props.indentationLevel * 40}px`}/* Width varies depending on comment level*/ />
56-
</td>
57-
<td style={{ verticalAlign: 'top' }} className="votelinks">
58-
<center>
59-
<a id="up_15238246" onClick={this.vote} href="vote?id=15238246&amp;how=up&amp;auth=4eb97bf0d2568aa743691210b904f0c5182bb0fc&amp;goto=item%3Fid%3D15237896#15238246">
60-
<div className="votearrow" title="upvote" />
61-
</a>
62-
</center>
63-
</td>
64-
<td className="default">
65-
<div style={{ marginTop: '2px', marginBottom: '-10px' }}>
66-
<span className="comhead">
67-
<Link prefetch href="/user?id=mstade">
68-
<a className="hnuser">{this.props.submitterId}</a>
69-
</Link>
70-
<span className="age">
71-
{' '}
72-
<Link prefetch href={`/item?id=${this.props.id}`}>
73-
<a>{convertNumberToTimeAgo(this.props.creationTime)}</a>
74-
</Link>
75-
</span>
76-
{' '}
77-
<span id="unv_15238246" />
78-
<span className="par" />
18+
};
19+
return (
20+
<tr className="athing comtr " id="15238246">
21+
<td>
22+
<table style={{ border: '0' }}>
23+
<tbody>
24+
<tr>
25+
<td className="ind">
26+
<img alt="" src="/static/s.gif" height="1" width={`${props.indentationLevel * 40}px`}/* Width varies depending on comment level*/ />
27+
</td>
28+
<td style={{ verticalAlign: 'top' }} className="votelinks">
29+
<center>
30+
<a id="up_15238246" onClick={vote} href="vote?id=15238246&amp;how=up&amp;auth=4eb97bf0d2568aa743691210b904f0c5182bb0fc&amp;goto=item%3Fid%3D15237896#15238246">
31+
<div className="votearrow" title="upvote" />
32+
</a>
33+
</center>
34+
</td>
35+
<td className="default">
36+
<div style={{ marginTop: '2px', marginBottom: '-10px' }}>
37+
<span className="comhead">
38+
<Link prefetch href="/user?id=mstade">
39+
<a className="hnuser">{props.submitterId}</a>
40+
</Link>
41+
<span className="age">
7942
{' '}
80-
<a className="togg" id="24" href="javascript:void(0)" onClick={this.toggle}>[-]</a>
81-
<span className="storyon" />
82-
</span>
83-
</div>
84-
<br />
85-
<div className="comment">
86-
<span className="c00">
87-
<span >{renderHTML(this.props.text)}</span>
88-
<div className="reply">
89-
<p>
90-
<font size="1">
91-
<u>
92-
<Link prefetch href={`/reply?id=${this.props.id}&goto=item%3Fid%3D${this.props.id}`}>
93-
<a>reply</a>
94-
</Link>
95-
</u>
96-
</font>
97-
</p>
98-
</div>
43+
<Link prefetch href={`/item?id=${props.id}`}>
44+
<a>{convertNumberToTimeAgo(props.creationTime)}</a>
45+
</Link>
9946
</span>
100-
</div>
101-
</td>
102-
</tr>
103-
</tbody>
104-
</table>
105-
</td>
106-
</tr>
107-
);
108-
}
109-
}
47+
{' '}
48+
<span id="unv_15238246" />
49+
<span className="par" />
50+
{' '}
51+
<a className="togg" id="24" href="javascript:void(0)" onClick={toggle}>[-]</a>
52+
<span className="storyon" />
53+
</span>
54+
</div>
55+
<br />
56+
<div className="comment">
57+
<span className="c00">
58+
<span>{renderHTML(props.text)}</span>
59+
<div className="reply">
60+
<p>
61+
<font size="1">
62+
<u>
63+
<Link prefetch href={`/reply?id=${props.id}&goto=item%3Fid%3D${props.id}`}>
64+
<a>reply</a>
65+
</Link>
66+
</u>
67+
</font>
68+
</p>
69+
</div>
70+
</span>
71+
</div>
72+
</td>
73+
</tr>
74+
</tbody>
75+
</table>
76+
</td>
77+
</tr>
78+
);
79+
};
80+
Comment.propTypes = {
81+
id: PropTypes.number.isRequired,
82+
creationTime: PropTypes.number.isRequired,
83+
indentationLevel: PropTypes.number.isRequired,
84+
submitterId: PropTypes.string.isRequired,
85+
text: PropTypes.string.isRequired,
86+
};
87+
Comment.fragments = {
88+
comment: gql`
89+
fragment Comment on Comment {
90+
id,
91+
creationTime,
92+
comments {
93+
id,
94+
creationTime,
95+
submitterId,
96+
text
97+
},
98+
submitterId,
99+
text
100+
}
101+
`,
102+
};
110103

111104
export default Comment;

‎src/pages/reply.js

Lines changed: 103 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,115 @@
11
import React from 'react';
2+
import {
3+
graphql,
4+
gql,
5+
} from 'react-apollo';
26

37
import Main from '../layouts/Main';
4-
import NewsTitle from '../components/NewsTitle';
5-
import NewsDetail from '../components/NewsDetail';
6-
import CommentBox from '../components/CommentBox';
7-
import Comments from '../components/Comments';
8+
import Comment from '../components/Comment';
89
import withData from '../helpers/withData';
910

10-
import data from '../data/SampleData';
11+
// import data from '../data/SampleData';
1112

12-
export default withData(props => (
13-
<Main currentURL={props.url.pathname}>
13+
const query = gql`
14+
query Comment($id: Int!) {
15+
comment(id: $id) {
16+
id
17+
...Comment
18+
}
19+
}
20+
${Comment.fragments.comment}
21+
`;
22+
const variables = {
23+
id: 100,
24+
};
25+
26+
const page = ({ data: { loading, error, comment }, data, options }) => {
27+
const vote = () => {
28+
console.log('onclick');
29+
};
30+
const toggle = () => {
31+
console.log('toggle');
32+
};
33+
return (
1434
<tr>
15-
<td style={{ padding: '0px' }} >
16-
<table style={{ border: '0px', padding: '0px', borderCollapse: 'collapse', borderSpacing: '0px' }} className="itemlist">
35+
<td>
36+
<table className="fatitem" style={{ border: '0' }}>
1737
<tbody>
18-
<NewsTitle isRankVisible={false} {...data.newsItems[5]} />
19-
<NewsDetail isPostScrutinyVisible={true} {...data.newsItems[5]} />
20-
<tr key="morespace" className="morespace" style={{ height: '10px' }} />
21-
<CommentBox {...data.newsItems[5]} />
38+
<tr className="athing" id="15260438">
39+
<td className="ind" />
40+
<td style={{ verticalAlign: 'top' }} className="votelinks">
41+
<center>
42+
<a id="up_15260438" onClick={vote} href="vote?id=15260438&amp;how=up&amp;auth=82a0b28fffc36f0d2f3e733c3a339bb29315dd10&amp;goto=reply%3Fgoto%3Ditem%3Fid%3D15260384%2315260438%26id%3D15260438#15260438">
43+
<div className="votearrow" title="upvote" />
44+
</a>
45+
</center>
46+
</td>
47+
<td className="default">
48+
<div style={{ marginTop: '2px', marginBottom: '-10px' }}>
49+
<span className="comhead">
50+
<a href="user?id=philipkglass" className="hnuser">
51+
philipkglass
52+
</a>
53+
<span className="age">
54+
<a href="item?id=15260438">2 hours ago</a>
55+
</span>
56+
<span id="unv_15260438" />
57+
<span className="par"> | <a href="item?id=15260384">parent</a></span>
58+
<a className="togg" href="javascript:void(0)" onClick={toggle} />
59+
<span className="storyon"> | on: <a href="item?id=15260384">Electric dump truck stores as much energy as 8 Mod...</a></span>
60+
</span>
61+
</div>
62+
<br />
63+
<div className="comment">
64+
<span className="c00">
65+
<i>
66+
Because the vehicle is electric, there is no need to “heat up” the brakes when descending. This is because the enormous electric engine acts as a generator and recharges the battery pack. That same energy is then used to help the vehicle travel back up the hill. Phys reports, “If all goes as planned, the electric dumper truck will even harvest more electricity while traveling downhill than it needs for the ascent. Instead of consuming fossil fuels, it would then feed surplus electricity into the grid.”
67+
</i>
68+
<p>
69+
Clever. It can do this because it travels uphill empty and comes downhill full.
70+
<span />
71+
</p>
72+
<div className="reply" />
73+
</span>
74+
</div>
75+
</td>
76+
</tr>
77+
<tr style={{ height: '10px' }} />
78+
<tr>
79+
<td colSpan="2" />
80+
<td>
81+
<form method="post" action="comment">
82+
<input type="hidden" name="parent" value="15260438" />
83+
<input type="hidden" name="goto" value="item?id=15260384#15260438" />
84+
<input type="hidden" name="hmac" value="d4cda96b7000a0e0cd578dde21feb6c9070cda8a" />
85+
<textarea name="text" rows="6" cols="60" />
86+
<br />
87+
<br />
88+
<input type="submit" value="reply" />
89+
</form>
90+
</td>
91+
</tr>
2292
</tbody>
2393
</table>
24-
<br />
25-
<br />
26-
<Comments {...data.newsItems[5]} />
27-
<br />
28-
<br />
2994
</td>
3095
</tr>
31-
</Main>
32-
));
96+
);
97+
};
98+
99+
const ReplyToComment = graphql(query, {
100+
options: {
101+
variables,
102+
},
103+
props: ({ data }) => ({
104+
data,
105+
}),
106+
})(page);
107+
108+
export default withData((props) => {
109+
variables.id = (props.url.query && +props.url.query.id) || 0;
110+
return (
111+
<Main currentURL={props.url.pathname}>
112+
<ReplyToComment />
113+
</Main>
114+
);
115+
});

0 commit comments

Comments
 (0)