fix tags navigation

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&nbsp;</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
 }