-
Notifications
You must be signed in to change notification settings - Fork 47
/
client.js
115 lines (99 loc) · 2.94 KB
/
client.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
/**
* @jsx React.DOM
*/
'use strict';
var React = require('react');
var ReactAsync = require('react-async');
var ReactRouter = require('react-router-component');
var superagent = require('superagent');
var Pages = ReactRouter.Pages;
var Page = ReactRouter.Page;
var NotFound = ReactRouter.NotFound;
var Link = ReactRouter.Link;
var MainPage = React.createClass({
render: function() {
return (
<div className="MainPage">
<h1>Hello, anonymous!</h1>
<p><Link href="/users/doe">Login</Link></p>
</div>
);
}
});
var UserPage = React.createClass({
mixins: [ReactAsync.Mixin],
statics: {
getUserInfo: function(username, cb) {
/*
* The use of localhost URLs work as long as the browser is running on the same machine as the server,
* a typical development setup.
* As soon as you want to run this code on public facing machines, each server will need to know it's
* own hostname and port (which is ugly).
* Relative paths cannot work for serverside rendering, as that has no page context.
* More discussion of this issue, and solutions, can be found at:
* https://github.com/andreypopp/react-async/issues/34
* http://stackoverflow.com/questions/26463924/getting-rid-of-localhost3000-urls-for-reactasync
*/
superagent.get(
'http://localhost:3000/api/users/' + username,
function(err, res) {
cb(err, res ? res.body : null);
});
}
},
getInitialStateAsync: function(cb) {
this.type.getUserInfo(this.props.username, cb);
},
componentWillReceiveProps: function(nextProps) {
if (this.props.username !== nextProps.username) {
this.type.getUserInfo(nextProps.username, function(err, info) {
if (err) {
throw err;
}
this.setState(info);
}.bind(this));
}
},
render: function() {
var otherUser = this.props.username === 'doe' ? 'ivan' : 'doe';
return (
<div className="UserPage">
<h1>Hello, {this.state.name}!</h1>
<p>
Go to <Link href={"/users/" + otherUser}>/users/{otherUser}</Link>
</p>
<p><Link href="/">Logout</Link></p>
</div>
);
}
});
var NotFoundHandler = React.createClass({
render: function() {
return (
<p>Page not found</p>
);
}
});
var App = React.createClass({
render: function() {
return (
<html>
<head>
<link rel="stylesheet" href="/assets/style.css" />
<script src="/assets/bundle.js" />
</head>
<Pages className="App" path={this.props.path}>
<Page path="/" handler={MainPage} />
<Page path="/users/:username" handler={UserPage} />
<NotFound handler={NotFoundHandler} />
</Pages>
</html>
);
}
});
module.exports = App;
if (typeof window !== 'undefined') {
window.onload = function() {
React.renderComponent(App(), document);
}
}