diff options
| -rw-r--r-- | vnext/package.json | 1 | ||||
| -rw-r--r-- | vnext/src/app.js | 49 | ||||
| -rw-r--r-- | vnext/src/components/Discover.js | 50 | ||||
| -rw-r--r-- | vnext/src/components/Navigation.js | 42 | ||||
| -rw-r--r-- | vnext/src/style/main.css | 1 | ||||
| -rw-r--r-- | vnext/src/views/index.html | 8 | ||||
| -rw-r--r-- | vnext/yarn.lock | 28 |
7 files changed, 143 insertions, 36 deletions
diff --git a/vnext/package.json b/vnext/package.json index 9170c983..9fc811e8 100644 --- a/vnext/package.json +++ b/vnext/package.json @@ -30,6 +30,7 @@ }, "dependencies": { "babel-preset-env": "^1.6.1", + "history": "^4.7.2", "react": "^16.2.0", "react-dom": "^16.2.0", "react-markdown": "^3.1.4", 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> diff --git a/vnext/yarn.lock b/vnext/yarn.lock index 8462b71c..7bd6aac9 100644 --- a/vnext/yarn.lock +++ b/vnext/yarn.lock @@ -2288,6 +2288,16 @@ hawk@3.1.3, hawk@~3.1.3: hoek "2.x.x" sntp "1.x.x" +history@^4.7.2: + version "4.7.2" + resolved "https://registry.yarnpkg.com/history/-/history-4.7.2.tgz#22b5c7f31633c5b8021c7f4a8a954ac139ee8d5b" + dependencies: + invariant "^2.2.1" + loose-envify "^1.2.0" + resolve-pathname "^2.2.0" + value-equal "^0.4.0" + warning "^3.0.0" + hmac-drbg@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1" @@ -2441,7 +2451,7 @@ interpret@^1.0.0: version "1.1.0" resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.1.0.tgz#7ed1b1410c6a0e0f78cf95d3b8440c63f78b8614" -invariant@^2.2.2: +invariant@^2.2.1, invariant@^2.2.2: version "2.2.2" resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.2.tgz#9e1f56ac0acdb6bf303306f338be3b204ae60360" dependencies: @@ -2905,7 +2915,7 @@ longest@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097" -loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1: +loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1: version "1.3.1" resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848" dependencies: @@ -4208,6 +4218,10 @@ resolve-from@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-3.0.0.tgz#b22c7af7d9d6881bc8b6e653335eebcb0a188748" +resolve-pathname@^2.2.0: + version "2.2.0" + resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-2.2.0.tgz#7e9ae21ed815fd63ab189adeee64dc831eefa879" + resolve-url@^0.2.1: version "0.2.1" resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a" @@ -4955,6 +4969,10 @@ validate-npm-package-license@^3.0.1: spdx-correct "~1.0.0" spdx-expression-parse "~1.0.0" +value-equal@^0.4.0: + version "0.4.0" + resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-0.4.0.tgz#c5bdd2f54ee093c04839d71ce2e4758a6890abc7" + vary@~1.1.2: version "1.1.2" resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc" @@ -4996,6 +5014,12 @@ vm-browserify@0.0.4: dependencies: indexof "0.0.1" +warning@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/warning/-/warning-3.0.0.tgz#32e5377cb572de4ab04753bdf8821c01ed605b7c" + dependencies: + loose-envify "^1.0.0" + watchpack@^1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.4.0.tgz#4a1472bcbb952bd0a9bb4036801f954dfb39faac" |