forked from purescript-contrib/purescript-react
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathtutorial.purs
More file actions
109 lines (95 loc) · 3.63 KB
/
tutorial.purs
File metadata and controls
109 lines (95 loc) · 3.63 KB
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
module Tutorial where
-- This is a mostly PureScript implementation of the tutorial found here:
-- http://facebook.github.io/react/docs/tutorial.html
import Control.Monad.Eff
import Data.Array hiding (span)
import React
import React.DOM
import Showdown
import Debug.Trace
cBoxRender = do
state <- readState
pure $ div [ className "commentBox" ]
[ h1' [ text "Comments" ]
, commentList { data': state }
, commentForm { onCommentSubmit: commentSubmit }
]
commentBox = mkUI spec {
getInitialState = return [],
componentWillMount = componentWillMount
} cBoxRender
foreign import componentWillMount
"function componentWillMount() {\
\ var load = loadCommentsFromServer.bind(this);\
\ load();\
\ setInterval(function() { load(); }, this.props.pollInterval);\
\}" :: forall eff. Eff ( reactState :: ReactState (read :: ReadAllowed) Unit | eff ) Unit
commentList = mkUI spec do
props <- getProps
pure $ div [ className "commentList" ]
(commentNodes <$> props.data')
commentForm = mkUI spec do
props <- getProps
pure $ form [ className "commentForm"
, onSubmit submit
]
[ input [ typeProp "text"
, placeholder "Your name"
, ref "author"
] []
, input [ typeProp "text"
, placeholder "Say something..."
, ref "text"
] []
, input [ typeProp "submit"
, value "Post"
] []
]
comment = mkUI spec do
props <- getProps
pure $ div [ className "comment" ]
[ h2 [ className "commentAuthor" ]
[ text props.author ]
, span [ dangerouslySetInnerHTML $ makeHtml props.children ] []
]
commentNodes c = comment { author: c.author, children: c.text }
foreign import commentSubmit
"function commentSubmit(comment) {\
\ var comments = this.state.state;\
\ var newComments = comments.concat([comment]);\
\ this.setState({state: newComments});\
\ $.ajax({\
\ url: this.props.url,\
\ dataType: 'json',\
\ type: 'POST',\
\ data: comment,\
\ success: function(data) {\
\ this.setState({state: data});\
\ }.bind(this)\
\ });\
\}" :: forall eff. Eff eff {}
foreign import submit
"function submit(e) {\
\ e.preventDefault();\
\ return function() { \
\ var author = this.refs.author.getDOMNode().value.trim();\
\ var text = this.refs.text.getDOMNode().value.trim();\
\ this.props.onCommentSubmit.call(this, {author: author, text: text});\
\ this.refs.author.getDOMNode().value = '';\
\ this.refs.text.getDOMNode().value = '';\
\ return false;\
\ } \
\}" :: Event -> forall eff. Eff eff Boolean
foreign import loadCommentsFromServer
"function loadCommentsFromServer() {\
\ $.ajax({\
\ url: this.props.url,\
\ dataType: 'json',\
\ success: function(data) {\
\ this.replaceState({state: data});\
\ }.bind(this)\
\ });\
\}" :: forall a r. {props :: {url :: String}, replaceState :: {state :: a} -> {} | r} -> {}
main = renderToElementById "content" $ commentBox { url: "comments.json"
, pollInterval: 2000
}