aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--vnext/src/components/Discover.js37
-rw-r--r--vnext/src/components/LoginButton.js55
-rw-r--r--vnext/src/components/Thread.js12
-rw-r--r--vnext/src/index.js27
4 files changed, 100 insertions, 31 deletions
diff --git a/vnext/src/components/Discover.js b/vnext/src/components/Discover.js
index fc1ab707..a0e51160 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 * as qs from 'query-string';
import Message from './Message';
import Spinner from './Spinner';
@@ -9,9 +10,7 @@ export default class Discover extends React.Component {
constructor(props) {
super(props);
this.state = {
- msgs: [],
- loading: false,
- search: this.props.location.search
+ msgs: []
};
this.loadMessages = this.loadMessages.bind(this);
}
@@ -19,27 +18,35 @@ export default class Discover extends React.Component {
this.loadMessages();
}
componentWillReceiveProps(nextProps) {
- if (this.props.location.search != nextProps.location.search) {
+ if (this.props.location.search != nextProps.location.search
+ || this.props.visitor != nextProps.visitor) {
this.loadMessages(nextProps.location.search)
}
}
loadMessages(filter = '') {
- this.setState({ msgs: []})
- const url = 'https://api.juick.com/messages' + 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);
- });
+ .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 (<Message key={msg.mid} data={msg} />);
});
return this.state.msgs.length > 0 ? (
<div className="msgs" id="content">{nodes}</div>
diff --git a/vnext/src/components/LoginButton.js b/vnext/src/components/LoginButton.js
index c332de14..2016e853 100644
--- a/vnext/src/components/LoginButton.js
+++ b/vnext/src/components/LoginButton.js
@@ -7,29 +7,70 @@ import Modal from './Modal';
export default class LoginButton extends React.Component {
constructor(props) {
super(props);
- this.state = { isOpen: false };
+ this.state = {
+ isOpen: false,
+ username: '',
+ password: ''
+ };
+ this.toggleModal = this.toggleModal.bind(this);
}
toggleModal(event) {
- event.preventDefault()
+ if (event) event.preventDefault()
this.setState({
isOpen: !this.state.isOpen
});
}
+ usernameChanged(event) {
+ this.setState({
+ username: event.target.value
+ })
+ }
+ passwordChanged(event) {
+ this.setState({
+ password: event.target.value
+ })
+ }
+ login(event) {
+ event.preventDefault();
+ let headers = new Headers();
+ headers.append('Authorization', 'Basic ' + window.btoa(this.state.username + ":" + this.state.password));
+ fetch('https://api.juick.com/auth', {
+ method: 'GET',
+ credentials: 'omit',
+ headers: headers
+ }).then(response => {
+ return response.text()
+ })
+ .then(data => {
+ this.toggleModal();
+ this.props.onAuth(data);
+ }
+ ).catch(ex => {
+ console.log(ex);
+ });
+ }
render() {
return (
<React.Fragment>
- <a onClick={this.toggleModal.bind(this)}><Icon name="ei-user" size="s" />{this.props.title}</a>
+ <a onClick={this.toggleModal}><Icon name="ei-user" size="s" />{this.props.title}</a>
<Modal show={this.state.isOpen}
- onClose={this.toggleModal.bind(this)}>
+ onClose={this.toggleModal}>
<div className="dialoglogin">
<p>Please, introduce yourself:</p>
<a href="/_fblogin" id="signfb"><Icon name="ei-sc-facebook" size="s" />Login with facebook</a>
<a href="/_vklogin" id="signvk"><Icon name="ei-sc-vk" size="s" />Login with VK</a>
<p>Already registered?</p>
- <form action="/login" method="POST">
- <input className="signinput" type="text" name="username" placeholder="Username..." /><br />
- <input className="signinput" type="password" name="password" placeholder="Password..." /><br />
+ <form onSubmit={this.login.bind(this)}>
+ <input className="signinput"
+ type="text"
+ name="username"
+ placeholder="Username..."
+ value={this.state.username} onChange={this.usernameChanged.bind(this)} /><br />
+ <input className="signinput"
+ type="password" name="password"
+ placeholder="Password..."
+ value={this.state.password} onChange={this.passwordChanged.bind(this)} /><br />
<input className="signsubmit" type="submit" value="OK" />
</form>
</div>
diff --git a/vnext/src/components/Thread.js b/vnext/src/components/Thread.js
index 5393d7d3..1a3ac862 100644
--- a/vnext/src/components/Thread.js
+++ b/vnext/src/components/Thread.js
@@ -1,5 +1,6 @@
import 'whatwg-fetch';
import React from 'react';
+import * as qs from 'query-string';
import Message from './Message';
import Spinner from './Spinner';
@@ -8,8 +9,7 @@ export default class Thread extends React.Component {
constructor(props) {
super(props);
this.state = {
- replies: [],
- loading: false
+ replies: []
};
}
componentDidMount() {
@@ -18,7 +18,13 @@ export default class Thread extends React.Component {
loadReplies() {
this.setState({ replies: []})
const { mid } = this.props.match.params;
- const url = `https://api.juick.com/thread?mid=${mid}`;
+ let params = {
+ mid: mid
+ }
+ if (this.props.visitor && this.props.visitor.hash) {
+ params.hash = this.props.visitor.hash
+ };
+ const url = `https://api.juick.com/thread?${qs.stringify(params)}`;
fetch(url)
.then(response => {
return response.json()
diff --git a/vnext/src/index.js b/vnext/src/index.js
index 963aa968..3a4fe494 100644
--- a/vnext/src/index.js
+++ b/vnext/src/index.js
@@ -11,9 +11,11 @@ import Footer from './components/Footer';
class App extends React.Component {
constructor(props) {
super(props);
+ this.auth = this.auth.bind(this);
this.state = {
visitor: { uid: 0 }
};
+ this.auth(window.localStorage.hash || '')
}
render() {
return (
@@ -24,8 +26,8 @@ class App extends React.Component {
<div id="header_wrapper">
{this.state.visitor.uid > 0 ?
<div id="ctitle">
- <a href="/{this.state.visitor.name}">
- <img src="//i.juick.com/a/{this.state.visitor.uid}.png" alt="" />{this.state.visitor.name}
+ <a href={`/${this.state.visitor.uname}`}>
+ <img src={`//i.juick.com/a/${this.state.visitor.uid}.png`} alt="" />{this.state.visitor.uname}
</a>
</div>
:
@@ -56,9 +58,9 @@ class App extends React.Component {
</nav>
</div>
</header>
- <Route exact path="/" component={Discover} />
- <Route path="/:user/:mid" component={Thread} />
- <Route path="/post" component={Post} />
+ <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} />} />
</div>
</Router>
<Footer />
@@ -66,7 +68,20 @@ class App extends React.Component {
)
}
auth(data) {
- console.log(data)
+ if (data) {
+ window.localStorage.hash = data;
+ fetch(`https://api.juick.com/users?hash=${data}`)
+ .then(response => {
+ return response.json()
+ })
+ .then(users => {
+ let visitor = users[0]
+ visitor.hash = data
+ this.setState({
+ visitor: visitor
+ })
+ })
+ }
}
}
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-25 03:02:03 +0000