From 67afd8e9378c65bff11a2aac21d95577fa916dc5 Mon Sep 17 00:00:00 2001
From: Vitaly Takmazov
Date: Sat, 16 Jun 2018 22:13:40 +0300
Subject: Discussions

---
 vnext/src/components/Discover.js | 59 ---------------------------------
 vnext/src/components/Feeds.js    | 71 ++++++++++++++++++++++++++++++++++++++++
 vnext/src/index.js               |  9 ++---
 3 files changed, 76 insertions(+), 63 deletions(-)
 delete mode 100644 vnext/src/components/Discover.js
 create mode 100644 vnext/src/components/Feeds.js

(limited to 'vnext')

diff --git a/vnext/src/components/Discover.js b/vnext/src/components/Discover.js
deleted file mode 100644
index a0e51160..00000000
--- a/vnext/src/components/Discover.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import 'whatwg-fetch';
-import React from 'react';
-import PropTypes from 'prop-types';
-import * as qs from 'query-string';
-
-import Message from './Message';
-import Spinner from './Spinner';
-
-export default class Discover extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      msgs: []
-    };
-    this.loadMessages = this.loadMessages.bind(this);
-  }
-  componentDidMount() {
-    this.loadMessages();
-  }
-  componentWillReceiveProps(nextProps) {
-    if (this.props.location.search != nextProps.location.search 
-      || this.props.visitor != nextProps.visitor) {
-      this.loadMessages(nextProps.location.search)
-    }
-  }
-  loadMessages(filter = '') {
-    this.setState({ msgs: [] })
-    let params = qs.parse(filter) || {}
-    let url = 'https://api.juick.com/messages';
-    if (this.props.visitor && this.props.visitor.hash) {
-      params.hash = this.props.visitor.hash;
-    }
-    if (Object.keys(params).length > 0) {
-      url = `${url}?${qs.stringify(params)}`;
-    }
-    fetch(url)
-      .then(response => {
-        return response.json()
-      })
-      .then(data =>
-        this.setState({ msgs: data })
-      ).catch(ex => {
-        console.log(ex);
-      });
-  }
-
-  render() {
-    var nodes = this.state.msgs.map(msg => {
-      return (<Message key={msg.mid} data={msg} />);
-    });
-    return this.state.msgs.length > 0 ? (
-      <div className="msgs" id="content">{nodes}</div>
-    ) : <Spinner />;
-  }
-}
-
-Discover.propTypes = {
-  msgs: PropTypes.array
-};
diff --git a/vnext/src/components/Feeds.js b/vnext/src/components/Feeds.js
new file mode 100644
index 00000000..3c183f7f
--- /dev/null
+++ b/vnext/src/components/Feeds.js
@@ -0,0 +1,71 @@
+import 'whatwg-fetch';
+import React from 'react';
+import PropTypes from 'prop-types';
+import * as qs from 'query-string';
+
+import Message from './Message';
+import Spinner from './Spinner';
+
+export function Discover(props) {
+  return (<Feed baseUrl="https://api.juick.com/messages" {...props} />)
+}
+
+export function Discussions(props) {
+  return (<Feed authRequired="true" baseUrl="https://api.juick.com/messages/discussions" {...props} />)
+}
+
+class Feed extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      msgs: []
+    };
+    this.loadMessages = this.loadMessages.bind(this);
+  }
+  componentDidMount() {
+    this.loadMessages(this.props.visitor.hash);
+  }
+  componentWillReceiveProps(nextProps) {
+    if (this.props.location.search != nextProps.location.search
+      || this.props.visitor != nextProps.visitor) {
+      this.loadMessages(nextProps.visitor.hash, nextProps.location.search)
+    }
+  }
+  loadMessages(hash = '', filter = '') {
+    this.setState({ msgs: [] })
+    let params = qs.parse(filter) || {}
+    let url = this.props.baseUrl;
+    if (hash) {
+      params.hash = hash;
+    }
+    if (Object.keys(params).length > 0) {
+      url = `${url}?${qs.stringify(params)}`;
+    }
+    if (!params.hash && this.props.authRequired) {
+      return
+    }
+    fetch(url)
+      .then(response => {
+        return response.json()
+      })
+      .then(data =>
+        this.setState({ msgs: data })
+      ).catch(ex => {
+        console.log(ex);
+      });
+  }
+
+  render() {
+    var nodes = this.state.msgs.map(msg => {
+      return (<Message key={msg.mid} data={msg} />);
+    });
+    return this.state.msgs.length > 0 ? (
+      <div className="msgs" id="content">{nodes}</div>
+    ) : <Spinner />;
+  }
+}
+
+Feed.propTypes = {
+  msgs: PropTypes.array,
+  baseUrl: PropTypes.string
+};
diff --git a/vnext/src/index.js b/vnext/src/index.js
index 3a4fe494..9317c8b6 100644
--- a/vnext/src/index.js
+++ b/vnext/src/index.js
@@ -2,7 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
 import Icon from './components/Icon';
-import Discover from './components/Discover';
+import { Discover, Discussions } from './components/Feeds';
 import Post from './components/Post';
 import Thread from './components/Thread';
 import LoginButton from './components/LoginButton';
@@ -42,7 +42,7 @@ class App extends React.Component {
                 <nav id="global">
                   <ul>
                     {this.state.visitor.uid > 0 ?
-                      <li><Link to={{ pathname: '/' }}><Icon name="ei-comment" size="s" />Discuss</Link></li>
+                      <li><Link to={{ pathname: '/discussions' }}><Icon name="ei-comment" size="s" />Discuss</Link></li>
                       :
                       <li><Link to='/?media=1' rel="nofollow"><Icon name="ei-camera" size="s" />Photos</Link></li>
                     }
@@ -59,8 +59,9 @@ class App extends React.Component {
               </div>
             </header>
             <Route exact path="/" render={(props) => <Discover visitor={this.state.visitor} {...props} />} />
-            <Route path="/:user/:mid" render={(props) => <Thread visitor={this.state.visitor} {...props} />} />
-            <Route path="/post" render={(props) => <Post visitor={this.state.visitor} {...props} />} />
+            <Route exact path="/discussions" render={(props) => <Discussions 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} />} />
           </div>
         </Router>
         <Footer />
-- 
cgit v1.2.3