extract story list item from Results and Feed.

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) {

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 (
+			<div className="item" key={id}>
+				<div className="title">
+					<Link className="link" to={"/" + id}>
+						<img
+							className="source-logo"
+							src={getLogoUrl(story)}
+							alt="source logo"
+						/>
+						{" "}
+						{title}
+					</Link>
+
+					<span className="source">({sourceLink(story)})</span>
+				</div>
+
+				{infoLine(story)}
+			</div>
+		);
+	}
+}

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) {
@@ -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() {

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) {

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 {
 					<title>Feed - QotNews</title>
 				</Helmet>
 				{error && <p>Connection error?</p>}
-				{stories ?
+				{stories ? stories.map(story => <StoryItem story={story}></StoryItem>) : <p>loading...</p>}
-					<div>
-						{stories.map(x =>
-							<div className='item' key={x.id}>
-								<div className='title'>
-									<Link className='link' to={'/' + x.id}>
-										<img className='source-logo' src={getLogoUrl(x)} alt='source logo' /> {x.title}
-									</Link>
-
-									<span className='source'>
-										({sourceLink(x)})
-									</span>
-								</div>
-
-								{infoLine(x)}
-							</div>
-						)}
-					</div>
-					:
-					<p>loading...</p>
-				}
 			</div>
 		);
 	}

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 {
 					<>
 						<p>Search results:</p>
 						<div className='comment lined'>
-							{stories.length ?
+							{stories ? stories.map(story => <StoryItem story={story}></StoryItem>) : <p>loading...</p>}
-								stories.map(x =>
-									<div className='item' key={x.id}>
-										<div className='title'>
-											<Link className='link' to={'/' + x.id}>
-												<img className='source-logo' src={getLogoUrl(x)} alt='source logo' /> {x.title}
-											</Link>
-
-											<span className='source'>
-												({sourceLink(x)})
-											</span>
-										</div>
-
-										{infoLine(x)}
-									</div>
-								)
-								:
-								<p>none</p>
-							}
 						</div>
 					</>
 					: