diff options
-rw-r--r-- | vnext/src/components/Feeds.js | 29 | ||||
-rw-r--r-- | vnext/src/components/Message.js | 6 |
2 files changed, 26 insertions, 9 deletions
diff --git a/vnext/src/components/Feeds.js b/vnext/src/components/Feeds.js index b8367de4..0216a1b4 100644 --- a/vnext/src/components/Feeds.js +++ b/vnext/src/components/Feeds.js @@ -1,21 +1,22 @@ import React from 'react'; import PropTypes from 'prop-types'; +import { Link } from 'react-router-dom'; import * as qs from 'query-string'; import Message from './Message'; import Spinner from './Spinner'; export function Discover(props) { - return (<Feed query={{ baseUrl: "https://api.juick.com/messages"}} {...props} />) + return (<Feed query={{ baseUrl: "https://api.juick.com/messages" }} {...props} />) } export function Discussions(props) { - return (<Feed authRequired="true" query={{ baseUrl: "https://api.juick.com/messages/discussions"}} {...props} />) + return (<Feed authRequired="true" query={{ baseUrl: "https://api.juick.com/messages/discussions" }} {...props} />) } export function Blog(props) { const { user } = props.match.params; - return (<Feed query={{ baseUrl: `https://api.juick.com/messages`, search: { uname: user }}} {...props} />) + return (<Feed query={{ baseUrl: `https://api.juick.com/messages`, search: { uname: user } }} {...props} />) } export function Tag(props) { @@ -34,7 +35,7 @@ class Feed extends React.Component { componentDidMount() { document.body.scrollTop = 0; document.documentElement.scrollTop = 0; - this.loadMessages(this.props.visitor.hash); + this.loadMessages(this.props.visitor.hash, this.props.location.search); } componentWillReceiveProps(nextProps) { if (this.props.location.search != nextProps.location.search @@ -67,9 +68,23 @@ class Feed extends React.Component { } render() { - var nodes = this.state.msgs.map(msg => { - return (<Message key={msg.mid} data={msg} visitor={this.props.visitor} />); - }); + const { tag } = qs.parse(this.props.location.search || {}); + const nodes = ( + <React.Fragment> + { + tag && ( + <p className="page"> + <Link to={{ pathname: `/tag/${tag}` }}> + <span>← All posts with tag </span><b>{tag}</b> + </Link> + </p> + ) + } + {this.state.msgs.map(msg => + <Message key={msg.mid} data={msg} visitor={this.props.visitor} />) + } + </React.Fragment> + ); return this.state.msgs.length > 0 ? ( <div className="msgs" id="content">{nodes}</div> ) : <div className="msgs" id="content"><Spinner /><Spinner /><Spinner /><Spinner /></div>; diff --git a/vnext/src/components/Message.js b/vnext/src/components/Message.js index 5667047c..9a15d512 100644 --- a/vnext/src/components/Message.js +++ b/vnext/src/components/Message.js @@ -1,5 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; +import { Link } from 'react-router-dom'; import moment from 'moment'; import { UserType } from './Types'; @@ -27,7 +28,7 @@ export default function Message(props) { </a> </div> <div className="msg-tags" itemProp="headline"> - <Tags data={msg.tags || []} /> + <Tags user={msg.user} data={msg.tags || []} /> </div> </header> <div className="msg-txt"> @@ -96,7 +97,7 @@ export default function Message(props) { function Tags(props) { return props.data && props.data.map(tag => { - return (<a key={tag} href={`/tag/${tag}`} title={tag}>{tag}</a>) + return (<Link key={tag} to={{ pathname: `/${props.user.uname}`, search: `?tag=${tag}`}} title={tag}>{tag}</Link>) }) } @@ -111,6 +112,7 @@ Message.propTypes = { }; Tags.propTypes = { + user: UserType.isRequired, data: PropTypes.array } |