Skip to content

Commit 42fb36a

Browse files
clintonwooclintonwoo
committed
Added package to render comment data to html and added spinner as loading element.
1 parent 78f74ab commit 42fb36a

8 files changed

Lines changed: 198 additions & 12 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +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",
5556
"url": "^0.11.0"
5657
},
5758
"devDependencies": {

‎src/components/Comment.js‎

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

67
import convertNumberToTimeAgo from '../helpers/convertNumberToTimeAgo';
78

@@ -35,13 +36,13 @@ class Comment extends React.Component {
3536
}
3637
`,
3738
}
38-
vote() {
39-
this;
40-
return "vote(event, this, "up")";
39+
vote = () => {
40+
// this;
41+
// return "vote(event, this, "up")";
4142
}
42-
toggle() {
43-
this;
44-
return "toggle(event, 15238246)";
43+
toggle = () => {
44+
// this;
45+
// return "toggle(event, 15238246)";
4546
}
4647
render() {
4748
return (
@@ -83,7 +84,7 @@ class Comment extends React.Component {
8384
<br />
8485
<div className="comment">
8586
<span className="c00">
86-
<span dangerouslySetInnerHTML={{__html: this.props.text}} />
87+
<span >{renderHTML(this.props.text)}</span>
8788
<div className="reply">
8889
<p>
8990
<font size="1">

‎src/components/NewsFeedWithApolloRenderer.js‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,25 @@ export default ({ data: { loading, error, feed }, options }) => {
1010
<NewsFeed newsItems={feed} {...options} />
1111
);
1212
}
13-
return <tr><td>Loading</td></tr>;
13+
return (
14+
<tr>
15+
<td>
16+
<div className="sk-circle">
17+
<div className="sk-circle1 sk-child" />
18+
<div className="sk-circle2 sk-child" />
19+
<div className="sk-circle3 sk-child" />
20+
<div className="sk-circle4 sk-child" />
21+
<div className="sk-circle5 sk-child" />
22+
<div className="sk-circle6 sk-child" />
23+
<div className="sk-circle7 sk-child" />
24+
<div className="sk-circle8 sk-child" />
25+
<div className="sk-circle9 sk-child" />
26+
<div className="sk-circle10 sk-child" />
27+
<div className="sk-circle11 sk-child" />
28+
<div className="sk-circle12 sk-child" />
29+
</div>
30+
</td>
31+
</tr>
32+
);
1433
};
1534

‎src/components/NewsItemWithApolloRenderer.js‎

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,28 @@ const NewsItemWithComments = ({ data: { loading, error, newsItem }, data}) => {
2626
<br />
2727
</td>
2828
</tr>
29-
)
29+
);
3030
}
31-
return <tr><td>Loading</td></tr>;
31+
return (
32+
<tr>
33+
<td>
34+
<div className="sk-circle">
35+
<div className="sk-circle1 sk-child" />
36+
<div className="sk-circle2 sk-child" />
37+
<div className="sk-circle3 sk-child" />
38+
<div className="sk-circle4 sk-child" />
39+
<div className="sk-circle5 sk-child" />
40+
<div className="sk-circle6 sk-child" />
41+
<div className="sk-circle7 sk-child" />
42+
<div className="sk-circle8 sk-child" />
43+
<div className="sk-circle9 sk-child" />
44+
<div className="sk-circle10 sk-child" />
45+
<div className="sk-circle11 sk-child" />
46+
<div className="sk-circle12 sk-child" />
47+
</div>
48+
</td>
49+
</tr>
50+
);
3251
};
3352

3453
export default NewsItemWithComments;

‎src/data/HNDataAPI.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,8 @@ const rebuildFeed = (feedType) => {
100100
Feed[feedType] = feed;
101101
logger(`Updated ${feedType} ids`);
102102
}),
103-
);
103+
)
104+
.catch(reason => logger(`Error building feed: ${reason}`));
104105
};
105106

106107
/* END NEWS ITEMS */

‎src/data/models/Comment.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@ export default class Comment {
1212
}
1313
static getComments(ids) {
1414
return Promise.all(ids.map(commentId => Comment.getComment(commentId)))
15-
.then(comments => comments.filter(comment => comment !== undefined));
15+
.then(comments => comments.filter(comment => comment !== undefined))
16+
.catch(reason => logger(`Rejected comments: ${reason}`));
1617
// return Promise.all(ids.map(comment => cache.getComment(comment.id) || HNDB.fetchComment(comment.id)));
1718
// return ids.map(comment => cache.getComment(comment.id) || HNDB.fetchComment(comment.id));
1819
}

‎src/static/news.css‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -173,3 +173,125 @@ pre { max-width: 900px; }
173173
.comment { max-width: 1130px; overflow: auto }
174174
pre { max-width: 840px; }
175175
}
176+
177+
.sk-circle {
178+
margin: 100px auto;
179+
width: 40px;
180+
height: 40px;
181+
position: relative;
182+
}
183+
.sk-circle .sk-child {
184+
width: 100%;
185+
height: 100%;
186+
position: absolute;
187+
left: 0;
188+
top: 0;
189+
}
190+
.sk-circle .sk-child:before {
191+
content: '';
192+
display: block;
193+
margin: 0 auto;
194+
width: 15%;
195+
height: 15%;
196+
background-color:rgb(238, 238, 230);
197+
border-radius: 100%;
198+
-webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
199+
animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
200+
}
201+
.sk-circle .sk-circle2 {
202+
-webkit-transform: rotate(30deg);
203+
-ms-transform: rotate(30deg);
204+
transform: rotate(30deg); }
205+
.sk-circle .sk-circle3 {
206+
-webkit-transform: rotate(60deg);
207+
-ms-transform: rotate(60deg);
208+
transform: rotate(60deg); }
209+
.sk-circle .sk-circle4 {
210+
-webkit-transform: rotate(90deg);
211+
-ms-transform: rotate(90deg);
212+
transform: rotate(90deg); }
213+
.sk-circle .sk-circle5 {
214+
-webkit-transform: rotate(120deg);
215+
-ms-transform: rotate(120deg);
216+
transform: rotate(120deg); }
217+
.sk-circle .sk-circle6 {
218+
-webkit-transform: rotate(150deg);
219+
-ms-transform: rotate(150deg);
220+
transform: rotate(150deg); }
221+
.sk-circle .sk-circle7 {
222+
-webkit-transform: rotate(180deg);
223+
-ms-transform: rotate(180deg);
224+
transform: rotate(180deg); }
225+
.sk-circle .sk-circle8 {
226+
-webkit-transform: rotate(210deg);
227+
-ms-transform: rotate(210deg);
228+
transform: rotate(210deg); }
229+
.sk-circle .sk-circle9 {
230+
-webkit-transform: rotate(240deg);
231+
-ms-transform: rotate(240deg);
232+
transform: rotate(240deg); }
233+
.sk-circle .sk-circle10 {
234+
-webkit-transform: rotate(270deg);
235+
-ms-transform: rotate(270deg);
236+
transform: rotate(270deg); }
237+
.sk-circle .sk-circle11 {
238+
-webkit-transform: rotate(300deg);
239+
-ms-transform: rotate(300deg);
240+
transform: rotate(300deg); }
241+
.sk-circle .sk-circle12 {
242+
-webkit-transform: rotate(330deg);
243+
-ms-transform: rotate(330deg);
244+
transform: rotate(330deg); }
245+
.sk-circle .sk-circle2:before {
246+
-webkit-animation-delay: -1.1s;
247+
animation-delay: -1.1s; }
248+
.sk-circle .sk-circle3:before {
249+
-webkit-animation-delay: -1s;
250+
animation-delay: -1s; }
251+
.sk-circle .sk-circle4:before {
252+
-webkit-animation-delay: -0.9s;
253+
animation-delay: -0.9s; }
254+
.sk-circle .sk-circle5:before {
255+
-webkit-animation-delay: -0.8s;
256+
animation-delay: -0.8s; }
257+
.sk-circle .sk-circle6:before {
258+
-webkit-animation-delay: -0.7s;
259+
animation-delay: -0.7s; }
260+
.sk-circle .sk-circle7:before {
261+
-webkit-animation-delay: -0.6s;
262+
animation-delay: -0.6s; }
263+
.sk-circle .sk-circle8:before {
264+
-webkit-animation-delay: -0.5s;
265+
animation-delay: -0.5s; }
266+
.sk-circle .sk-circle9:before {
267+
-webkit-animation-delay: -0.4s;
268+
animation-delay: -0.4s; }
269+
.sk-circle .sk-circle10:before {
270+
-webkit-animation-delay: -0.3s;
271+
animation-delay: -0.3s; }
272+
.sk-circle .sk-circle11:before {
273+
-webkit-animation-delay: -0.2s;
274+
animation-delay: -0.2s; }
275+
.sk-circle .sk-circle12:before {
276+
-webkit-animation-delay: -0.1s;
277+
animation-delay: -0.1s; }
278+
279+
@-webkit-keyframes sk-circleBounceDelay {
280+
0%, 80%, 100% {
281+
-webkit-transform: scale(0);
282+
transform: scale(0);
283+
} 40% {
284+
-webkit-transform: scale(1);
285+
transform: scale(1);
286+
}
287+
}
288+
289+
@keyframes sk-circleBounceDelay {
290+
0%, 80%, 100% {
291+
-webkit-transform: scale(0);
292+
transform: scale(0);
293+
} 40% {
294+
-webkit-transform: scale(1);
295+
transform: scale(1);
296+
}
297+
}

‎yarn.lock‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,10 @@
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+
1317
"@types/react@^15.0.22":
1418
version "15.6.1"
1519
resolved "https://registry.yarnpkg.com/@types/react/-/react-15.6.1.tgz#497f7228762da4432e335957cb34fe9b40f150ae"
@@ -4889,6 +4893,12 @@ parse5@^1.5.1:
48894893
version "1.5.1"
48904894
resolved "https://registry.yarnpkg.com/parse5/-/parse5-1.5.1.tgz#9b7f3b0de32be78dc2401b17573ccaf0f6f59d94"
48914895

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"
4901+
48924902
parseurl@~1.3.1:
48934903
version "1.3.1"
48944904
resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.1.tgz#c8ab8c9223ba34888aa64a297b28853bec18da56"
@@ -5228,6 +5238,10 @@ react-apollo@^1.4.15:
52285238
object-assign "^4.0.1"
52295239
prop-types "^15.5.8"
52305240

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"
5244+
52315245
react-deep-force-update@^2.0.1:
52325246
version "2.1.0"
52335247
resolved "https://registry.yarnpkg.com/react-deep-force-update/-/react-deep-force-update-2.1.0.tgz#1c5f36ea96bcbf411605ec063f36c568ea4df86c"
@@ -5269,6 +5283,14 @@ react-redux@^5.0.6:
52695283
loose-envify "^1.1.0"
52705284
prop-types "^15.5.10"
52715285

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"
5289+
dependencies:
5290+
camelcase "^3.0.0"
5291+
parse5 "^3.0.2"
5292+
react-attr-converter "^0.3.1"
5293+
52725294
react-test-renderer@^15.6.1:
52735295
version "15.6.1"
52745296
resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-15.6.1.tgz#026f4a5bb5552661fd2cc4bbcd0d4bc8a35ebf7e"

0 commit comments

Comments
 (0)