basic navigation

5 files changed, 116 insertions, 34 deletions

diff --git a/vnext/src/app.js b/vnext/src/app.js
index ba5ce816..fed735f7 100644
--- a/vnext/src/app.js
+++ b/vnext/src/app.js
@@ -1,37 +1,34 @@
-import "whatwg-fetch"
 import React from "react"
-import PropTypes from "prop-types"
 import ReactDOM from "react-dom"
+import createHistory from 'history/createBrowserHistory';
+const history = createHistory();
 
-import Message from "./components/Message"
+import Navigation from "./components/Navigation"
+import Discover from "./components/Discover"
 
-class Page extends React.Component {
+class App extends React.Component {
   constructor(props) {
     super(props)
-    this.state = {msgs: [], loading: false}
+    this.navigate = this.navigate.bind(this);
+    this.state = {
+      location: history.location
+    }
   }
-  render() { 
-    var nodes = this.state.msgs.map(msg => {
-      return (<Message key={msg.mid} data={msg}/>) 
-    });
-    return (<div className="msgs">{nodes}</div>)    
+  render() {
+    return (
+      <div className="wrapper">
+        <Navigation onNavigate={this.navigate} />
+        <Discover params={this.state.location.search} />
+      </div>
+    )
+  }  
+  navigate(location) {
+    console.log(location);    
+    history.push(location);
+    this.setState({location: location})
   }
-  componentDidMount() {
-      fetch(this.props.source)
-          .then(response => {
-              return response.json()
-          })
-          .then(data =>
-              this.setState({ msgs: data })
-          ).catch(ex => {
-        console.log(ex)
-      });
-  }
-};
 
-Page.propTypes = {
-    msgs: PropTypes.array,
-    source: PropTypes.string.isRequired
 }
 
-ReactDOM.render(<Page source="https://api.juick.com/messages" />, document.getElementById("content"));
+
+ReactDOM.render(<App />, document.getElementById("wrapper"));
diff --git a/vnext/src/components/Discover.js b/vnext/src/components/Discover.js
new file mode 100644
index 00000000..2d962bda
--- /dev/null
+++ b/vnext/src/components/Discover.js
@@ -0,0 +1,50 @@
+import "whatwg-fetch"
+import React from "react"
+import PropTypes from "prop-types"
+
+import Message from "./Message"
+
+export default class Discover extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      msgs: [],
+      loading: false
+    }
+    this.loadMessages = this.loadMessages.bind(this);
+  }
+  componentDidMount() {
+    this.loadMessages();
+  }
+  componentWillReceiveProps(props) {
+    if (props.params != this.props.params) {
+      this.loadMessages();
+    }    
+  }
+  loadMessages() {
+    const search = new URLSearchParams(this.props.params);    
+    const url = "https://api.juick.com/messages";
+    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 (
+        <div className="msgs" id="content">{nodes}</div>
+    )    
+  }
+};
+
+Discover.propTypes = {
+    msgs: PropTypes.array
+}
diff --git a/vnext/src/components/Navigation.js b/vnext/src/components/Navigation.js
new file mode 100644
index 00000000..1f0e9483
--- /dev/null
+++ b/vnext/src/components/Navigation.js
@@ -0,0 +1,42 @@
+import React from 'react';
+
+export default class Navigation extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      visitor: {uid: 0}
+    }
+    this.transition = this.transition.bind(this);
+  }  
+  transition(event) {
+    event.preventDefault();
+    this.props.onNavigate({ pathname: event.currentTarget.pathname, search: event.currentTarget.search});
+  };
+  render() {
+    return (
+     	<header>
+        <div id="header_wrapper">
+        <div id="logo"><a href="/" onClick={this.transition}>Juick</a></div>
+        <nav id="global">
+            <ul>
+                { this.state.visitor.uid ? 
+                <li><a href="/?show=discuss" onClick={this.transition}><i data-icon="ei-comment" data-size="s"></i>Discuss</a></li>
+		 : 
+                <li><a href="/?show=photos" rel="nofollow" onClick={this.transition}><i data-icon="ei-camera" data-size="s"></i>Photos</a></li>
+                 }
+                <li><a href="/?show=all" rel="nofollow" onClick={this.transition}><i data-icon="ei-search" data-size="s"></i>Discover</a></li>
+                <li><a id="post" href="/post" onClick={this.transition}><i data-icon="ei-pencil" data-size="s"></i>Post</a>
+                </li>
+            </ul>
+        </nav>
+        <div id="search">
+            <form action="/">
+                <input name="search" className="text"
+                       placeholder="Search..." />
+            </form>
+        </div>
+        </div>
+        </header>
+    )
+  }
+}
\ No newline at end of file
diff --git a/vnext/src/style/main.css b/vnext/src/style/main.css
index f1a84ceb..24108030 100644
--- a/vnext/src/style/main.css
+++ b/vnext/src/style/main.css
@@ -72,7 +72,6 @@ html {
 #wrapper {
     margin: 0 auto;
     width: 1000px;
-    margin-top: 50px;
 }
 #column {
     float: left;
diff --git a/vnext/src/views/index.html b/vnext/src/views/index.html
index da5ec8a5..9f8feae9 100644
--- a/vnext/src/views/index.html
+++ b/vnext/src/views/index.html
@@ -39,13 +39,7 @@
     </script>
 </head>
 <body id="body">
-<div id="wrapper">
-    <div class="page">
-        <p>Login to comment</p>
-    </div>
-<section id="content">
-</section>
-</div>
+<div id="wrapper"></div>
 <script type="text/javascript" src="app.js"></script>
 </body>                                              
 </html>