LoginButton

5 files changed, 50 insertions, 14 deletions

diff --git a/vnext/src/app.js b/vnext/src/app.js
index 82209e45..1f323b51 100644
--- a/vnext/src/app.js
+++ b/vnext/src/app.js
@@ -4,6 +4,8 @@ import { BrowserRouter as Router, Route, Link } from "react-router-dom"
 
 import Discover from "./components/Discover"
 import Post from "./components/Post"
+import Thread from "./components/Thread"
+import LoginButton from "./components/LoginButton"
 
 class App extends React.Component {
   constructor(props) {
@@ -22,12 +24,17 @@ class App extends React.Component {
               <nav id="global">
                 <ul>
                   {this.state.visitor.uid ?
-                    <li><Link to="/?show=discuss"><i data-icon="ei-comment" data-size="s"></i>Discuss</Link></li>
+                    <li><Link to={{ pathname: "/", search: "?show=discuss"}}><i data-icon="ei-comment" data-size="s"></i>Discuss</Link></li>
                     :
-                    <li><Link to="/?show=photos" rel="nofollow"><i data-icon="ei-camera" data-size="s"></i>Photos</Link></li>
+                    <li><Link to={{ pathname: "/", search: "?media=1"}} rel="nofollow"><i data-icon="ei-camera" data-size="s"></i>Photos</Link></li>
                   }
-                  <li><Link to="/?show=all" rel="nofollow"><i data-icon="ei-search" data-size="s"></i>Discover</Link></li>
-                  <li><Link to="post" href="/post"><i data-icon="ei-pencil" data-size="s"></i>Post</Link>
+                  <li><Link to="/" rel="nofollow"><i data-icon="ei-search" data-size="s"></i>Discover</Link></li>
+                  <li>
+                    {this.state.visitor.uid ? 
+                    <Link to="post" href="/post"><i data-icon="ei-pencil" data-size="s"></i>Post</Link>
+                    :
+                    <LoginButton title="Login" onAuth={this.auth.bind(this)} />
+                    }
                   </li>
                 </ul>
               </nav>
@@ -40,11 +47,15 @@ class App extends React.Component {
             </div>
           </header>
           <Route exact path="/" component={Discover} />
-          <Route path="/post" component={Post} />
+          <Route path="/:user/:mid" component={Thread} />
+          <Route path="/post" component={Post} />          
         </div>
       </Router>
     )
   }
+  auth(data) {
+    console.log(data)
+  }
 }
 
 
diff --git a/vnext/src/components/Discover.js b/vnext/src/components/Discover.js
index 2d962bda..7fde3d88 100644
--- a/vnext/src/components/Discover.js
+++ b/vnext/src/components/Discover.js
@@ -1,6 +1,7 @@
 import "whatwg-fetch"
 import React from "react"
 import PropTypes from "prop-types"
+import queryString from "query-string"
 
 import Message from "./Message"
 
@@ -9,7 +10,8 @@ export default class Discover extends React.Component {
     super(props)
     this.state = {
       msgs: [],
-      loading: false
+      loading: false,
+      search: this.props.location.search
     }
     this.loadMessages = this.loadMessages.bind(this);
   }
@@ -22,8 +24,7 @@ export default class Discover extends React.Component {
     }    
   }
   loadMessages() {
-    const search = new URLSearchParams(this.props.params);    
-    const url = "https://api.juick.com/messages";
+    const url = "https://api.juick.com/messages" + this.state.search;
     fetch(url)
         .then(response => {
             return response.json()
@@ -38,13 +39,13 @@ export default class Discover extends React.Component {
   render() { 
     var nodes = this.state.msgs.map(msg => {
       return (<Message key={msg.mid} data={msg}/>) 
-    });
+    });    
     return (
-        <div className="msgs" id="content">{nodes}</div>
+      <div className="msgs" id="content">{nodes}</div>
     )    
   }
 };
 
 Discover.propTypes = {
-    msgs: PropTypes.array
+  msgs: PropTypes.array
 }
diff --git a/vnext/src/components/LoginButton.js b/vnext/src/components/LoginButton.js
index cdb62e1a..8d298fa2 100644
--- a/vnext/src/components/LoginButton.js
+++ b/vnext/src/components/LoginButton.js
@@ -8,14 +8,15 @@ export default class LoginButton extends React.Component {
       this.props.onAuth(event.data);
     }, false);
   }
-  login() {
+  login(event) {
+    event.preventDefault();
     let loginWindow = window.open("https://juick.com/login?redirect=false", "Login to Juick", "width=400,height=300,resizeable=no,menubar=no,toolbar=no,scrollbars=no");
     loginWindow.window.focus();
   }
 
   render() {
     return (
-    <div onClick={this.login}>{this.props.title}</div>
+    <a href="/login" onClick={this.login}>{this.props.title}</a>
     )
   }
 };
diff --git a/vnext/src/components/Thread.js b/vnext/src/components/Thread.js
new file mode 100644
index 00000000..49d9ea4d
--- /dev/null
+++ b/vnext/src/components/Thread.js
@@ -0,0 +1,23 @@
+import "whatwg-fetch"
+import React from "react"
+
+export default class Thread extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      replies: [],
+      loading: false
+    }
+  }
+  componentDidMount() {
+  }
+  render() {
+    const { user, mid } = this.props.match.params;
+    return (
+      <div>
+        <h1>{user}</h1>
+        <p>{mid}</p>
+      </div>
+    )
+  }
+}
\ No newline at end of file
diff --git a/vnext/src/views/index.html b/vnext/src/views/index.html
index 9f8feae9..661634d6 100644
--- a/vnext/src/views/index.html
+++ b/vnext/src/views/index.html
@@ -40,6 +40,6 @@
 </head>
 <body id="body">
 <div id="wrapper"></div>
-<script type="text/javascript" src="app.js"></script>
+<script type="text/javascript" src="/App.js"></script>
 </body>                                              
 </html>