tanner/qotnews
1
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

extract story list item from Results and Feed.

Browse Source
This commit is contained in:
Jason Schwarzenberger 2020-11-16 13:17:58 +13:00
parent b23e470317
commit b80c1a5cb5
6 changed files with 51 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
webclient/src/App.js
View File

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

34
webclient/src/components/StoryItem.js Normal file
View File

@ -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>
);
}
}

2
webclient/src/Article.js → webclient/src/pages/Article.js
View File

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

2
webclient/src/Comments.js → webclient/src/pages/Comments.js
View File

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

25
webclient/src/Feed.js → webclient/src/pages/Feed.js
View File

@ -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 ?
<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>
}
{stories ? stories.map(story => <StoryItem story={story}></StoryItem>) : <p>loading...</p>}
</div>
);
}

23
webclient/src/Results.js → webclient/src/pages/Results.js
View File

@ -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.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>
}
{stories ? stories.map(story => <StoryItem story={story}></StoryItem>) : <p>loading...</p>}
</div>
</>
: