react-coffee-quickstart/client.coffee at master · SimonDegraeve/react-coffee-quickstart · GitHub

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
# @cjsx React.DOM

React       = require("react")
ReactAsync  = require("react-async")
ReactRouter = require("react-router-component")
superagent  = require("superagent")

Pages       = ReactRouter.Pages
Page        = ReactRouter.Page
NotFound    = ReactRouter.NotFound
Link        = ReactRouter.Link

MainPage = React.createClass
  render: ->
    <div className="MainPage">
      <h1>Hello, anonymous!</h1>
      <p><Link href="/users/doe">Login</Link></p>
    </div>

UserPage = React.createClass
  mixins: [ReactAsync.Mixin]

  statics:
    getUserInfo: (username, cb) ->
      superagent.get "http://localhost:3000/api/users/" + username, (err, res) ->
        cb err, (if res then res.body else null)

  getInitialStateAsync: (cb) ->
    @type.getUserInfo(@props.username, cb)

  componentWillReceiveProps: (nextProps) ->
    if @props.username isnt nextProps.username
      @type.getUserInfo nextProps.username, ((err, info) ->
        throw err if err
        @setState info
      ).bind(this)

  render: ->
    otherUser = ( if @props.username is 'doe' then 'ivan' else 'doe' )
    <div className="UserPage">
      <h1>Hello, {@state.name}!</h1>
      <p>
        Go to <Link href={"/users/" + otherUser}>/users/{otherUser}</Link>
      </p>
      <p><Link href="/">Logout</Link></p>
    </div>

NotFoundHandler = React.createClass
  render: ->
    <p>Page not found!</p>

App = React.createClass
  render: ->
    <html>
      <head>
        <link rel="stylesheet" href="/assets/style.css" />
        <script src="/assets/bundle.js" />
      </head>
      <Pages className="App" path={@props.path}>
        <Page path="/" handler={MainPage} />
        <Page path="/users/:username" handler={UserPage} />
        <NotFound handler={NotFoundHandler} />
      </Pages>
    </html>

module.exports = App;

if typeof window isnt "undefined"
  window.onload = ->
    React.renderComponent App(), document