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

14
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) {
@ -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 =>
<p dangerouslySetInnerHTML={{ __html: x }} />
)
:
:
(v.nodeName === '#text' ?
<p>{v.data}</p>
:
:
<>
<v.localName dangerouslySetInnerHTML={v.innerHTML ? { __html: v.innerHTML } : null} />
{v.localName == 'pre' && <button onClick={() => this.pConvert(k)}>Convert Code to Paragraph</button>}
@ -96,11 +96,11 @@ class Article extends React.Component {
)
)}
</div>
:
:
<p>Problem getting article :(</p>
}
</div>
:
:
<p>loading...</p>
}
<ToggleDot id={id} article={false} />

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>
</>
: