forked from tanner/qotnews
extract story list item from Results and Feed.
This commit is contained in:
Jason Schwarzenberger
112
webclient/src/pages/Article.js
Normal file
112
webclient/src/pages/Article.js
Normal file
@@ -0,0 +1,112 @@
|
||||
import React from 'react';
|
||||
import { Helmet } from 'react-helmet';
|
||||
import localForage from 'localforage';
|
||||
import { sourceLink, infoLine, ToggleDot } from '../utils.js';
|
||||
|
||||
class Article extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
const id = this.props.match ? this.props.match.params.id : 'CLOL';
|
||||
const cache = this.props.cache;
|
||||
|
||||
if (id in cache) console.log('cache hit');
|
||||
|
||||
this.state = {
|
||||
story: cache[id] || false,
|
||||
error: false,
|
||||
pConv: [],
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
const id = this.props.match ? this.props.match.params.id : 'CLOL';
|
||||
|
||||
localForage.getItem(id)
|
||||
.then(
|
||||
(value) => {
|
||||
if (value) {
|
||||
this.setState({ story: value });
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
fetch('/api/' + id)
|
||||
.then(res => res.json())
|
||||
.then(
|
||||
(result) => {
|
||||
this.setState({ story: result.story });
|
||||
localForage.setItem(id, result.story);
|
||||
},
|
||||
(error) => {
|
||||
this.setState({ error: true });
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
pConvert = (n) => {
|
||||
this.setState({ pConv: [...this.state.pConv, n] });
|
||||
}
|
||||
|
||||
render() {
|
||||
const id = this.props.match ? this.props.match.params.id : 'CLOL';
|
||||
const story = this.state.story;
|
||||
const error = this.state.error;
|
||||
const pConv = this.state.pConv;
|
||||
let nodes = null;
|
||||
|
||||
if (story.text) {
|
||||
let div = document.createElement('div');
|
||||
div.innerHTML = story.text;
|
||||
nodes = div.childNodes;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='article-container'>
|
||||
{error && <p>Connection error?</p>}
|
||||
{story ?
|
||||
<div className='article'>
|
||||
<Helmet>
|
||||
<title>{story.title} - QotNews</title>
|
||||
</Helmet>
|
||||
|
||||
<h1>{story.title}</h1>
|
||||
|
||||
<div className='info'>
|
||||
Source: {sourceLink(story)}
|
||||
</div>
|
||||
|
||||
{infoLine(story)}
|
||||
|
||||
{nodes ?
|
||||
<div className='story-text'>
|
||||
{Object.entries(nodes).map(([k, v]) =>
|
||||
pConv.includes(k) ?
|
||||
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>}
|
||||
</>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
:
|
||||
<p>Problem getting article :(</p>
|
||||
}
|
||||
</div>
|
||||
:
|
||||
<p>loading...</p>
|
||||
}
|
||||
<ToggleDot id={id} article={false} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Article;
|
||||
145
webclient/src/pages/Comments.js
Normal file
145
webclient/src/pages/Comments.js
Normal file
@@ -0,0 +1,145 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
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';
|
||||
|
||||
class Article extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
const id = this.props.match.params.id;
|
||||
const cache = this.props.cache;
|
||||
|
||||
if (id in cache) console.log('cache hit');
|
||||
|
||||
this.state = {
|
||||
story: cache[id] || false,
|
||||
error: false,
|
||||
collapsed: [],
|
||||
expanded: [],
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
const id = this.props.match.params.id;
|
||||
|
||||
localForage.getItem(id)
|
||||
.then(
|
||||
(value) => {
|
||||
this.setState({ story: value });
|
||||
}
|
||||
);
|
||||
|
||||
fetch('/api/' + id)
|
||||
.then(res => res.json())
|
||||
.then(
|
||||
(result) => {
|
||||
this.setState({ story: result.story }, () => {
|
||||
const hash = window.location.hash.substring(1);
|
||||
if (hash) {
|
||||
document.getElementById(hash).scrollIntoView();
|
||||
}
|
||||
});
|
||||
localForage.setItem(id, result.story);
|
||||
},
|
||||
(error) => {
|
||||
this.setState({ error: true });
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
collapseComment(cid) {
|
||||
this.setState(prevState => ({
|
||||
...prevState,
|
||||
collapsed: [...prevState.collapsed, cid],
|
||||
expanded: prevState.expanded.filter(x => x !== cid),
|
||||
}));
|
||||
}
|
||||
|
||||
expandComment(cid) {
|
||||
this.setState(prevState => ({
|
||||
...prevState,
|
||||
collapsed: prevState.collapsed.filter(x => x !== cid),
|
||||
expanded: [...prevState.expanded, cid],
|
||||
}));
|
||||
}
|
||||
|
||||
countComments(c) {
|
||||
return c.comments.reduce((sum, x) => sum + this.countComments(x), 1);
|
||||
}
|
||||
|
||||
displayComment(story, c, level) {
|
||||
const cid = c.author + c.date;
|
||||
|
||||
const collapsed = this.state.collapsed.includes(cid);
|
||||
const expanded = this.state.expanded.includes(cid);
|
||||
|
||||
const hidden = collapsed || (level == 4 && !expanded);
|
||||
const hasChildren = c.comments.length !== 0;
|
||||
|
||||
return (
|
||||
<div className={level ? 'comment lined' : 'comment'} key={cid}>
|
||||
<div className='info'>
|
||||
<p>
|
||||
{c.author === story.author ? '[OP]' : ''} {c.author || '[Deleted]'}
|
||||
{' '} | <HashLink to={'#' + cid} id={cid}>{moment.unix(c.date).fromNow()}</HashLink>
|
||||
|
||||
{hasChildren && (
|
||||
hidden ?
|
||||
<span className='collapser expander pointer' onClick={() => this.expandComment(cid)}>+</span>
|
||||
:
|
||||
<span className='collapser pointer' onClick={() => this.collapseComment(cid)}>–</span>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className={collapsed ? 'text hidden' : 'text'} dangerouslySetInnerHTML={{ __html: c.text }} />
|
||||
|
||||
{hidden && hasChildren ?
|
||||
<div className='comment lined info pointer' onClick={() => this.expandComment(cid)}>[show {this.countComments(c) - 1} more]</div>
|
||||
:
|
||||
c.comments.map(i => this.displayComment(story, i, level + 1))
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
const id = this.props.match.params.id;
|
||||
const story = this.state.story;
|
||||
const error = this.state.error;
|
||||
|
||||
return (
|
||||
<div className='container'>
|
||||
{error && <p>Connection error?</p>}
|
||||
{story ?
|
||||
<div className='article'>
|
||||
<Helmet>
|
||||
<title>{story.title} - QotNews Comments</title>
|
||||
</Helmet>
|
||||
|
||||
<h1>{story.title}</h1>
|
||||
|
||||
<div className='info'>
|
||||
<Link to={'/' + story.id}>View article</Link>
|
||||
</div>
|
||||
|
||||
{infoLine(story)}
|
||||
|
||||
<div className='comments'>
|
||||
{story.comments.map(c => this.displayComment(story, c, 0))}
|
||||
</div>
|
||||
</div>
|
||||
:
|
||||
<p>loading...</p>
|
||||
}
|
||||
<ToggleDot id={id} article={true} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Article;
|
||||
64
webclient/src/pages/Feed.js
Normal file
64
webclient/src/pages/Feed.js
Normal file
@@ -0,0 +1,64 @@
|
||||
import React from 'react';
|
||||
import { Helmet } from 'react-helmet';
|
||||
import localForage from 'localforage';
|
||||
import { StoryItem } from '../components/StoryItem.js';
|
||||
|
||||
class Feed extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
stories: JSON.parse(localStorage.getItem('stories')) || false,
|
||||
error: false,
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
fetch('/api')
|
||||
.then(res => res.json())
|
||||
.then(
|
||||
(result) => {
|
||||
const updated = !this.state.stories || this.state.stories[0].id !== result.stories[0].id;
|
||||
console.log('updated:', updated);
|
||||
|
||||
const { stories } = result;
|
||||
this.setState({ stories });
|
||||
localStorage.setItem('stories', JSON.stringify(stories));
|
||||
|
||||
if (updated) {
|
||||
localForage.clear();
|
||||
stories.forEach((x, i) => {
|
||||
fetch('/api/' + x.id)
|
||||
.then(res => res.json())
|
||||
.then(({ story }) => {
|
||||
localForage.setItem(x.id, story)
|
||||
.then(console.log('preloaded', x.id, x.title));
|
||||
this.props.updateCache(x.id, story);
|
||||
}, error => { }
|
||||
);
|
||||
});
|
||||
}
|
||||
},
|
||||
(error) => {
|
||||
this.setState({ error: true });
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
const stories = this.state.stories;
|
||||
const error = this.state.error;
|
||||
|
||||
return (
|
||||
<div className='container'>
|
||||
<Helmet>
|
||||
<title>Feed - QotNews</title>
|
||||
</Helmet>
|
||||
{error && <p>Connection error?</p>}
|
||||
{stories ? stories.map(story => <StoryItem story={story}></StoryItem>) : <p>loading...</p>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Feed;
|
||||
76
webclient/src/pages/Results.js
Normal file
76
webclient/src/pages/Results.js
Normal file
@@ -0,0 +1,76 @@
|
||||
import React from 'react';
|
||||
import { Helmet } from 'react-helmet';
|
||||
import AbortController from 'abort-controller';
|
||||
import { StoryItem } from '../components/StoryItem.js';
|
||||
|
||||
class Results extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
stories: false,
|
||||
error: false,
|
||||
};
|
||||
|
||||
this.controller = null;
|
||||
}
|
||||
|
||||
performSearch = () => {
|
||||
if (this.controller) {
|
||||
this.controller.abort();
|
||||
}
|
||||
|
||||
this.controller = new AbortController();
|
||||
const signal = this.controller.signal;
|
||||
|
||||
const search = this.props.location.search;
|
||||
fetch('/api/search' + search, { method: 'get', signal: signal })
|
||||
.then(res => res.json())
|
||||
.then(
|
||||
(result) => {
|
||||
this.setState({ stories: result.results });
|
||||
},
|
||||
(error) => {
|
||||
if (error.message !== 'The operation was aborted. ') {
|
||||
this.setState({ error: true });
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.performSearch();
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
if (this.props.location.search !== prevProps.location.search) {
|
||||
this.performSearch();
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const stories = this.state.stories;
|
||||
const error = this.state.error;
|
||||
|
||||
return (
|
||||
<div className='container'>
|
||||
<Helmet>
|
||||
<title>Feed - QotNews</title>
|
||||
</Helmet>
|
||||
{error && <p>Connection error?</p>}
|
||||
{stories ?
|
||||
<>
|
||||
<p>Search results:</p>
|
||||
<div className='comment lined'>
|
||||
{stories ? stories.map(story => <StoryItem story={story}></StoryItem>) : <p>loading...</p>}
|
||||
</div>
|
||||
</>
|
||||
:
|
||||
<p>loading...</p>
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Results;
|
||||
Reference in New Issue
Block a user