From c7734eb2bc71a2443802faec8dd81cf6ba1cd823 Mon Sep 17 00:00:00 2001 From: Tanner Collin Date: Tue, 24 Sep 2019 08:23:14 +0000 Subject: [PATCH] Add site logos, keep displaying news on error --- webclient/public/logos/hackernews.png | Bin 0 -> 538 bytes webclient/public/logos/reddit.png | Bin 0 -> 5546 bytes webclient/public/logos/tildes.png | Bin 0 -> 500 bytes webclient/src/Article.js | 35 ++++++++----------- webclient/src/Comments.js | 35 ++++++++----------- webclient/src/Feed.js | 47 ++++++++++++-------------- webclient/src/Style-dark.css | 4 +++ webclient/src/Style-light.css | 5 +++ webclient/src/utils.js | 6 ++++ 9 files changed, 66 insertions(+), 66 deletions(-) create mode 100644 webclient/public/logos/hackernews.png create mode 100644 webclient/public/logos/reddit.png create mode 100644 webclient/public/logos/tildes.png diff --git a/webclient/public/logos/hackernews.png b/webclient/public/logos/hackernews.png new file mode 100644 index 0000000000000000000000000000000000000000..39f2f35ce61f0cceae69781e92ae9ab0b6f72ca7 GIT binary patch literal 538 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 literal 0 HcmV?d00001 diff --git a/webclient/public/logos/tildes.png b/webclient/public/logos/tildes.png new file mode 100644 index 0000000000000000000000000000000000000000..100d2e48ae2d399a11406034d20f6d8c4953c1b1 GIT binary patch literal 500 zcmV&Lok1@06I4i%KuYDb6f}GTLa75~8fuh+ zlG1ztH6;}#O{6rGh${JrNFeQdDR#UwV_UYdR$2jP$>@LUqO<;mR;0mxD~ z@3F%PGm)wRBtHN6);0#*o#*RwJb5kx-;b_P%7nXd^Kh{?L=fDa{3a-`pHo0m=Q(C= z^DcCT6bK1mlSl+Pu`qu445*MpYGudT*?hrqbGL4CcOxRKu%K4Os|h1uF0i8K&q;pU zTwG4Z?V{YV+EV0a5%KHOF)`h1aK``cJBWbuxcjGrFyQd-E={RGC=tz*=W~M>GnLai z5fP^+XTf^`h*M^V#=(jqhR=W%rd86fSq)jS1}6eaH@YuIdcNq?NC)FexYqLZL1sht zG - {error ? -

Something went wrong.

- : -
- {story ? -
-

{story.title}

+ {error &&

Connection error?

} + {story ? +
+

{story.title}

-
- Source: {sourceLink(story)} -
+
+ Source: {sourceLink(story)} +
- {infoLine(story)} + {infoLine(story)} - {story.text ? -
- : -

Problem getting article :(

- } -
+ {story.text ? +
: -

loading...

+

Problem getting article :(

} -
+ : +

loading...

} +
); } diff --git a/webclient/src/Comments.js b/webclient/src/Comments.js index f54ceb6..2bd3635 100644 --- a/webclient/src/Comments.js +++ b/webclient/src/Comments.js @@ -3,7 +3,7 @@ import { Link } from 'react-router-dom'; import moment from 'moment'; import { sourceLink, infoLine, ToggleDot } from './utils.js'; -const apiUrl = 'http://news-api.dns.t0.vc/'; +const apiUrl = 'https://news-api.t0.vc/'; class Article extends React.Component { constructor(props) { @@ -58,30 +58,25 @@ class Article extends React.Component { return (
- {error ? -

Something went wrong.

- : -
- {story ? -
-

{story.title}

+ {error &&

Connection error?

} + {story ? +
+

{story.title}

-
- View article -
+
+ View article +
- {infoLine(story)} + {infoLine(story)} -
- {story.comments.map(c => this.displayComment(story, c, 0))} -
-
- : -

loading...

- } - +
+ {story.comments.map(c => this.displayComment(story, c, 0))} +
+ : +

loading...

} +
); } diff --git a/webclient/src/Feed.js b/webclient/src/Feed.js index 43846a7..3374889 100644 --- a/webclient/src/Feed.js +++ b/webclient/src/Feed.js @@ -1,9 +1,9 @@ import React from 'react'; import { Link } from 'react-router-dom'; -import { sourceLink, infoLine } from './utils.js'; +import { siteLogo, sourceLink, infoLine } from './utils.js'; import { clearStorage } from './utils.js'; -const apiUrl = 'http://news-api.dns.t0.vc/'; +const apiUrl = 'https://news-api.t0.vc/'; class Feed extends React.Component { constructor(props) { @@ -14,7 +14,7 @@ class Feed extends React.Component { error: false, }; } - + componentDidMount() { fetch(apiUrl) .then(res => res.json()) @@ -23,7 +23,7 @@ class Feed extends React.Component { this.setState({ stories: result.stories }); clearStorage(); localStorage.setItem('stories', JSON.stringify(result.stories)); - result.stories.slice(0, 25).forEach(x => { + result.stories.filter(x => x.score >= 20).slice(0, 25).forEach(x => { fetch(apiUrl + x.id) .then(res => res.json()) .then(result => { @@ -45,34 +45,29 @@ class Feed extends React.Component { return (
- {error ? -

Something went wrong.

- : + {error &&

Connection error?

} + {stories ?
- {stories ? -
- {stories.map((x, i) => -
-
- {i+1}. -
+ {stories.map((x, i) => +
+
+ {i+1}. +
-
- {x.title} +
+ {siteLogo[x.source]} {x.title} - - ​({sourceLink(x)}) - -
+ + ​({sourceLink(x)}) + +
- {infoLine(x)} -
- )} + {infoLine(x)}
- : -

loading...

- } + )}
+ : +

loading...

}
); diff --git a/webclient/src/Style-dark.css b/webclient/src/Style-dark.css index 6dc3901..5b8b8db 100644 --- a/webclient/src/Style-dark.css +++ b/webclient/src/Style-dark.css @@ -10,6 +10,10 @@ color: #828282; } +.dark .item .source-logo { + filter: grayscale(1); +} + .dark .item a { color: #828282; } diff --git a/webclient/src/Style-light.css b/webclient/src/Style-light.css index 402e3e9..3305d49 100644 --- a/webclient/src/Style-light.css +++ b/webclient/src/Style-light.css @@ -34,6 +34,11 @@ a { margin-bottom: 0.6rem; } +.item .source-logo { + width: 0.9rem; + height: 0.9rem; +} + .item a { color: #828282; } diff --git a/webclient/src/utils.js b/webclient/src/utils.js index 8bab265..4fc39ed 100644 --- a/webclient/src/utils.js +++ b/webclient/src/utils.js @@ -11,6 +11,12 @@ export const sourceLink = (story) => { return ({host}); }; +export const siteLogo = { + hackernews: , + tildes: , + reddit: , +}; + export const infoLine = (story) =>
{story.score} points