-
Notifications
You must be signed in to change notification settings - Fork 0
/
fbjscript.jsx
110 lines (91 loc) · 2.5 KB
/
fbjscript.jsx
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
var {Comment} = require('./fbcomment');
var Status = React.createClass({
getInitialState: function(){
return ({liked: false});
},
addPost: function(newText){
this.props.addPostText(this.refs.newText.value);
},
addLike: function(){
this.setState({liked: true});
},
removeLike: function(){
this.setState({liked: false});
},
writeComment: function(){
this.props.addCommentText(this.refs.commentText.value);
},
renderNormal: function(){
return(
<div className="block">
<div className="checkStatus">{this.props.children}</div>
<button ref="likebtn" onClick={this.addLike} className="likebtn">Like</button>
<button className="commentbtn" onClick={this.writeComment}>Comment</button>
<button className="sharebtn">Share</button>
</div>)
},
renderLiked: function(){
return(
<div className="block">
<div className="checkStatus">{this.props.children}</div>
<button ref="likebtn" onClick={this.removeLike} className="likebtn">UnLike</button>
<button className="commentbtn" onClick={this.writeComment}>Comment</button>
<button className="sharebtn">Share</button>
</div>)
},
render: function(){
if(this.state.liked){
return this.renderLiked();
}else{
return this.renderNormal();
}
}
});
var Post = React.createClass({
getInitialState: function(){
return ({
posts: [],
comments: [],
});
},
addStatus: function(newText){
var arr = this.state.posts;
arr.unshift(newText);
this.setState({posts: arr});
},
eachStatus: function(newText,i){
return (
<Status key={i} addPostText={this.addStatus}>
{newText}
<Comment addCommentText={this.addComment}>
{commentText}
</Comment>
</Status>
);
},
handleClick: function(){
if(this.refs.myStatus !== null){
this.addStatus(this.refs.myStatus.value);
this.refs.myStatus.value = "";
}
},
addComment: function(commentText){
var arr2 = this.state.comments;
arr2.push(commentText);
this.setState({comments: arr2});
},
render: function(){
return (
<div>
<textarea rows="3" cols="50" ref="myStatus" placeholder="What's on your mind?" addPostText={this.addStatus}></textarea><br/>
<button onClick={this.handleClick} className="postbtn">Post</button>
<div>
{
this.state.posts.map(this.eachStatus)
}
</div>
</div>
);
}
});
ReactDOM.render(<Post />,document.getElementById("timeline"));