tag feed

2 files changed, 19 insertions, 11 deletions

diff --git a/vnext/src/components/Feeds.js b/vnext/src/components/Feeds.js
index cf593b5e..b8367de4 100644
--- a/vnext/src/components/Feeds.js
+++ b/vnext/src/components/Feeds.js
@@ -18,6 +18,11 @@ export function Blog(props) {
   return (<Feed query={{ baseUrl: `https://api.juick.com/messages`, search: { uname: user }}} {...props} />)
 }
 
+export function Tag(props) {
+  const { tag } = props.match.params;
+  return (<Feed query={{ baseUrl: `https://api.juick.com/messages`, search: { tag: tag } }} {...props} />)
+}
+
 class Feed extends React.Component {
   constructor(props) {
     super(props);
@@ -75,6 +80,6 @@ Feed.propTypes = {
   msgs: PropTypes.array,
   query: PropTypes.shape({
     baseUrl: PropTypes.string.isRequired,
-    search: PropTypes.array
+    search: PropTypes.object
   })
 };
diff --git a/vnext/src/index.js b/vnext/src/index.js
index 4142f2c4..24421545 100644
--- a/vnext/src/index.js
+++ b/vnext/src/index.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
+import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';
 import Icon from './components/Icon';
-import { Discover, Discussions, Blog } from './components/Feeds';
+import { Discover, Discussions, Blog, Tag } from './components/Feeds';
 import Post from './components/Post';
 import Thread from './components/Thread';
 import LoginButton from './components/LoginButton';
@@ -25,7 +25,7 @@ class App extends React.Component {
     this.wScrollCurrent = 0;
     this.wScrollBefore = 0;
     this.wScrollDiff = 0;
-    
+
     window.addEventListener('scroll', this.throttle(500, () => {
       this.dHeight = document.body.offsetHeight;
       this.wHeight = window.innerHeight;
@@ -37,14 +37,14 @@ class App extends React.Component {
         this.setState({
           headerClassName: ''
         })
-      } else if (this.wScrollDiff > 0 && this.state.headerClassName.indexOf(elClassHidden) >=0) {
+      } else if (this.wScrollDiff > 0 && this.state.headerClassName.indexOf(elClassHidden) >= 0) {
         // scrolled up; element slides in
         this.setState({
           headerClassName: elClassBackground
         })
       } else if (this.wScrollDiff < 0) {
         // scrolled down
-        if (this.wScrollCurrent + this.wHeight >= this.dHeight && this.state.headerClassName.indexOf(elClassHidden) >=0) {
+        if (this.wScrollCurrent + this.wHeight >= this.dHeight && this.state.headerClassName.indexOf(elClassHidden) >= 0) {
           // scrolled to the very bottom; element slides in
           this.setState({
             headerClassName: elClassBackground
@@ -118,11 +118,14 @@ class App extends React.Component {
           </header>
           <div id="wrapper">
             <section id="content">
-              <Route exact path="/" render={(props) => <Discover visitor={this.state.visitor} {...props} />} />
-              <Route exact path="/discussions" render={(props) => <Discussions visitor={this.state.visitor} {...props} />} />
-              <Route exact path="/:user" render={(props) => <Blog visitor={this.state.visitor} {...props} />} />
-              <Route exact path="/:user/:mid" render={(props) => <Thread visitor={this.state.visitor} {...props} />} />
-              <Route exact path="/post" render={(props) => <Post visitor={this.state.visitor} {...props} />} />
+              <Switch>
+                <Route exact path="/" render={(props) => <Discover visitor={this.state.visitor} {...props} />} />
+                <Route exact path="/discussions" render={(props) => <Discussions visitor={this.state.visitor} {...props} />} />
+                <Route exact path="/:user" render={(props) => <Blog visitor={this.state.visitor} {...props} />} />
+                <Route exact path="/tag/:tag" render={(props) => <Tag visitor={this.state.visitor} {...props} />} />
+                <Route exact path="/:user/:mid" render={(props) => <Thread visitor={this.state.visitor} {...props} />} />
+                <Route exact path="/post" render={(props) => <Post visitor={this.state.visitor} {...props} />} />
+              </Switch>
             </section>
             <aside id="column"></aside>
           </div>