diff --git a/webclient/src/App.js b/webclient/src/App.js index 85cb474..d8dba3c 100644 --- a/webclient/src/App.js +++ b/webclient/src/App.js @@ -5,13 +5,14 @@ import './Style-light.css'; import './Style-dark.css'; import './fonts/Fonts.css'; import { ForwardDot } from './utils.js'; -import Feed from './Feed.js'; -import Article from './Article.js'; -import Comments from './Comments.js'; import Search from './Search.js'; import Submit from './Submit.js'; -import Results from './Results.js'; import ScrollToTop from './ScrollToTop.js'; +import Feed from './pages/Feed.js'; +import Article from './pages/Article.js'; +import Comments from './pages/Comments.js'; +import Results from './pages/Results.js'; + class App extends React.Component { constructor(props) { diff --git a/webclient/src/components/StoryItem.js b/webclient/src/components/StoryItem.js new file mode 100644 index 0000000..03e4138 --- /dev/null +++ b/webclient/src/components/StoryItem.js @@ -0,0 +1,34 @@ +import React from "react"; +import { Link } from "react-router-dom"; +import { sourceLink, infoLine, getLogoUrl } from "../utils.js"; + +export class StoryItem extends React.Component { + constructor(props) { + super(props); + } + + render() { + const story = this.props.story; + const { id, title } = story; + + return ( +
+
+ + source logo + {" "} + {title} + + + ({sourceLink(story)}) +
+ + {infoLine(story)} +
+ ); + } +} diff --git a/webclient/src/Article.js b/webclient/src/pages/Article.js similarity index 94% rename from webclient/src/Article.js rename to webclient/src/pages/Article.js index 6b41562..11563bc 100644 --- a/webclient/src/Article.js +++ b/webclient/src/pages/Article.js @@ -1,7 +1,7 @@ import React from 'react'; import { Helmet } from 'react-helmet'; import localForage from 'localforage'; -import { sourceLink, infoLine, ToggleDot } from './utils.js'; +import { sourceLink, infoLine, ToggleDot } from '../utils.js'; class Article extends React.Component { constructor(props) { @@ -18,7 +18,7 @@ class Article extends React.Component { pConv: [], }; } - + componentDidMount() { const id = this.props.match ? this.props.match.params.id : 'CLOL'; @@ -45,7 +45,7 @@ class Article extends React.Component { } pConvert = (n) => { - this.setState({ pConv: [...this.state.pConv, n]}); + this.setState({ pConv: [...this.state.pConv, n] }); } render() { @@ -85,10 +85,10 @@ class Article extends React.Component { v.innerHTML.split('\n\n').map(x =>

) - : + : (v.nodeName === '#text' ?

{v.data}

- : + : <> {v.localName == 'pre' && } @@ -96,11 +96,11 @@ class Article extends React.Component { ) )} - : + :

Problem getting article :(

} - : + :

loading...

} diff --git a/webclient/src/Comments.js b/webclient/src/pages/Comments.js similarity index 98% rename from webclient/src/Comments.js rename to webclient/src/pages/Comments.js index 074f13f..856eb3e 100644 --- a/webclient/src/Comments.js +++ b/webclient/src/pages/Comments.js @@ -4,7 +4,7 @@ import { HashLink } from 'react-router-hash-link'; import { Helmet } from 'react-helmet'; import moment from 'moment'; import localForage from 'localforage'; -import { infoLine, ToggleDot } from './utils.js'; +import { infoLine, ToggleDot } from '../utils.js'; class Article extends React.Component { constructor(props) { diff --git a/webclient/src/Feed.js b/webclient/src/pages/Feed.js similarity index 70% rename from webclient/src/Feed.js rename to webclient/src/pages/Feed.js index 38e672a..0011093 100644 --- a/webclient/src/Feed.js +++ b/webclient/src/pages/Feed.js @@ -1,8 +1,7 @@ import React from 'react'; -import { Link } from 'react-router-dom'; import { Helmet } from 'react-helmet'; import localForage from 'localforage'; -import { sourceLink, infoLine, getLogoUrl } from './utils.js'; +import { StoryItem } from '../components/StoryItem.js'; class Feed extends React.Component { constructor(props) { @@ -56,27 +55,7 @@ class Feed extends React.Component { Feed - QotNews {error &&

Connection error?

} - {stories ? -
- {stories.map(x => -
-
- - source logo {x.title} - - - - ({sourceLink(x)}) - -
- - {infoLine(x)} -
- )} -
- : -

loading...

- } + {stories ? stories.map(story => ) :

loading...

} ); } diff --git a/webclient/src/Results.js b/webclient/src/pages/Results.js similarity index 70% rename from webclient/src/Results.js rename to webclient/src/pages/Results.js index abae43f..c30baab 100644 --- a/webclient/src/Results.js +++ b/webclient/src/pages/Results.js @@ -1,8 +1,7 @@ import React from 'react'; -import { Link } from 'react-router-dom'; import { Helmet } from 'react-helmet'; -import { sourceLink, infoLine, getLogoUrl } from './utils.js'; import AbortController from 'abort-controller'; +import { StoryItem } from '../components/StoryItem.js'; class Results extends React.Component { constructor(props) { @@ -63,25 +62,7 @@ class Results extends React.Component { <>

Search results:

- {stories.length ? - stories.map(x => -
-
- - source logo {x.title} - - - - ({sourceLink(x)}) - -
- - {infoLine(x)} -
- ) - : -

none

- } + {stories ? stories.map(story => ) :

loading...

}
: