diff options
-rw-r--r-- | vnext/package.json | 1 | ||||
-rw-r--r-- | vnext/src/app.js | 21 | ||||
-rw-r--r-- | vnext/src/components/Discover.js | 13 | ||||
-rw-r--r-- | vnext/src/components/LoginButton.js | 5 | ||||
-rw-r--r-- | vnext/src/components/Thread.js | 23 | ||||
-rw-r--r-- | vnext/src/views/index.html | 2 | ||||
-rw-r--r-- | vnext/webpack.config.js | 4 | ||||
-rw-r--r-- | vnext/yarn.lock | 11 |
8 files changed, 64 insertions, 16 deletions
diff --git a/vnext/package.json b/vnext/package.json index 13d6df20..28fb9819 100644 --- a/vnext/package.json +++ b/vnext/package.json @@ -35,6 +35,7 @@ ] }, "dependencies": { + "query-string": "^6.0.0", "react": "^16.2.0", "react-dom": "^16.2.0", "react-markdown": "^3.3.0", 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> diff --git a/vnext/webpack.config.js b/vnext/webpack.config.js index ce4995eb..8d8060a6 100644 --- a/vnext/webpack.config.js +++ b/vnext/webpack.config.js @@ -5,9 +5,9 @@ const internalIp = require('internal-ip'); module.exports = { entry: { "vendor": ['react', 'react-dom', 'react-markdown', 'whatwg-fetch'], - "app": [ + "App": [ 'file-loader?name=index.html!./src/views/index.html', - __dirname + "/src/app.js", + __dirname + "/src/App.js", __dirname + "/src/style/main.css" ] }, diff --git a/vnext/yarn.lock b/vnext/yarn.lock index 62d58f59..2a375356 100644 --- a/vnext/yarn.lock +++ b/vnext/yarn.lock @@ -4809,6 +4809,13 @@ query-string@^5.0.1: object-assign "^4.1.0" strict-uri-encode "^1.0.0" +query-string@^6.0.0: + version "6.0.0" + resolved "https://registry.yarnpkg.com/query-string/-/query-string-6.0.0.tgz#8b8f39447b73e8290d6f5e3581779218e9171142" + dependencies: + decode-uri-component "^0.2.0" + strict-uri-encode "^2.0.0" + querystring-es3@^0.2.0: version "0.2.1" resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73" @@ -5567,6 +5574,10 @@ strict-uri-encode@^1.0.0: version "1.1.0" resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713" +strict-uri-encode@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz#b9c7330c7042862f6b142dc274bbcc5866ce3546" + string-template@~0.2.1: version "0.2.1" resolved "https://registry.yarnpkg.com/string-template/-/string-template-0.2.1.tgz#42932e598a352d01fc22ec3367d9d84eec6c9add" |