Skip to content

Commit 2998bb5

Browse files
clintonwooclintonwoo
committedSep 16, 2017
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

+3-1
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

+2-2
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

+90-97
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

+103-20
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+
});

‎yarn.lock

+26-19
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,6 @@
1010
version "0.9.4"
1111
resolved "https://registry.yarnpkg.com/@types/graphql/-/graphql-0.9.4.tgz#cdeb6bcbef9b6c584374b81aa7f48ecf3da404fa"
1212

13-
"@types/node@^6.0.46":
14-
version "6.0.88"
15-
resolved "https://registry.yarnpkg.com/@types/node/-/node-6.0.88.tgz#f618f11a944f6a18d92b5c472028728a3e3d4b66"
16-
1713
"@types/react@^15.0.22":
1814
version "15.6.1"
1915
resolved "https://registry.yarnpkg.com/@types/react/-/react-15.6.1.tgz#497f7228762da4432e335957cb34fe9b40f150ae"
@@ -1138,7 +1134,7 @@ babel-runtime@6.23.0:
11381134
core-js "^2.4.0"
11391135
regenerator-runtime "^0.10.0"
11401136

1141-
babel-runtime@^6.18.0, babel-runtime@^6.20.0, babel-runtime@^6.22.0, babel-runtime@^6.26.0:
1137+
babel-runtime@^6.18.0, babel-runtime@^6.20.0, babel-runtime@^6.22.0, babel-runtime@^6.26.0, babel-runtime@^6.6.1:
11421138
version "6.26.0"
11431139
resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
11441140
dependencies:
@@ -4893,11 +4889,9 @@ parse5@^1.5.1:
48934889
version "1.5.1"
48944890
resolved "https://registry.yarnpkg.com/parse5/-/parse5-1.5.1.tgz#9b7f3b0de32be78dc2401b17573ccaf0f6f59d94"
48954891

4896-
parse5@^3.0.2:
4897-
version "3.0.2"
4898-
resolved "https://registry.yarnpkg.com/parse5/-/parse5-3.0.2.tgz#05eff57f0ef4577fb144a79f8b9a967a6cc44510"
4899-
dependencies:
4900-
"@types/node" "^6.0.46"
4892+
parse5@^2.0.2:
4893+
version "2.2.3"
4894+
resolved "https://registry.yarnpkg.com/parse5/-/parse5-2.2.3.tgz#0c4fc41c1000c5e6b93d48b03f8083837834e9f6"
49014895

49024896
parseurl@~1.3.1:
49034897
version "1.3.1"
@@ -5238,9 +5232,9 @@ react-apollo@^1.4.15:
52385232
object-assign "^4.0.1"
52395233
prop-types "^15.5.8"
52405234

5241-
react-attr-converter@^0.3.1:
5242-
version "0.3.1"
5243-
resolved "https://registry.yarnpkg.com/react-attr-converter/-/react-attr-converter-0.3.1.tgz#4a2abf6d907b7ddae4d862dfec80e489ce41ad6e"
5235+
react-attr-converter@0.1.1:
5236+
version "0.1.1"
5237+
resolved "https://registry.yarnpkg.com/react-attr-converter/-/react-attr-converter-0.1.1.tgz#0591f5a1146e3ab9c8e4d303d6cf966f5e6d7608"
52445238

52455239
react-deep-force-update@^2.0.1:
52465240
version "2.1.0"
@@ -5283,13 +5277,20 @@ react-redux@^5.0.6:
52835277
loose-envify "^1.1.0"
52845278
prop-types "^15.5.10"
52855279

5286-
react-render-html@^0.5.0:
5287-
version "0.5.0"
5288-
resolved "https://registry.yarnpkg.com/react-render-html/-/react-render-html-0.5.0.tgz#74cbf896b9ab83a1cf3c444ff064373576ff41ec"
5280+
react-render-html@0.1.5:
5281+
version "0.1.5"
5282+
resolved "https://registry.yarnpkg.com/react-render-html/-/react-render-html-0.1.5.tgz#09f85a8c425024dcabf816e4084c566a379569e4"
52895283
dependencies:
5290-
camelcase "^3.0.0"
5291-
parse5 "^3.0.2"
5292-
react-attr-converter "^0.3.1"
5284+
parse5 "^2.0.2"
5285+
react-attr-converter "0.1.1"
5286+
react-styling "^1.5.0"
5287+
5288+
react-styling@^1.5.0:
5289+
version "1.6.2"
5290+
resolved "https://registry.yarnpkg.com/react-styling/-/react-styling-1.6.2.tgz#1a1d9860ac40beeb0c9672a517a4d5366fe9dfc0"
5291+
dependencies:
5292+
babel-runtime "^6.6.1"
5293+
style-builder "^1.0.13"
52935294

52945295
react-test-renderer@^15.6.1:
52955296
version "15.6.1"
@@ -5947,6 +5948,12 @@ strip-json-comments@~2.0.1:
59475948
version "2.0.1"
59485949
resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
59495950

5951+
style-builder@^1.0.13:
5952+
version "1.0.13"
5953+
resolved "https://registry.yarnpkg.com/style-builder/-/style-builder-1.0.13.tgz#908f71f77c8ed62df80e20772a2325165f8d3687"
5954+
dependencies:
5955+
object-assign "^4.0.1"
5956+
59505957
styled-jsx@^1.0.8:
59515958
version "1.0.10"
59525959
resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-1.0.10.tgz#114eea6ff5ae8f54bc2bcda86d2861085d5c99dd"

0 commit comments

Comments
 (0)
Please sign in to comment.