proxy-based Twister client written with react-js
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

162 lines
5.4 KiB

var ReactBootstrap = require('react-bootstrap')
, Grid = ReactBootstrap.Grid
, Col = ReactBootstrap.Col
, Row = ReactBootstrap.Row
, ListGroupItem = ReactBootstrap.ListGroupItem
, Glyphicon = ReactBootstrap.Glyphicon
, OverlayTrigger = ReactBootstrap.OverlayTrigger
, Tooltip = ReactBootstrap.Tooltip
var React = require('react');
var SetIntervalMixin = require("../common/SetIntervalMixin.js");
var SafeStateChangeMixin = require('../common/SafeStateChangeMixin.js');
module.exports = Post = React.createClass({displayName: "Post",
mixins: [SetIntervalMixin,SafeStateChangeMixin],
getInitialState: function() {
if (post.isRetwist()){
var postdata = {
username: post.getRetwistedUser(),
retwistingUser: post.getUsername(),
content: post.getRetwistedContent(),
id: post.getRetwistedId(),
timestamp: post.getTimestamp(),
postid: postid,
isRetwist: true
}
} else {
var postdata = {
username: post.getUsername(),
content: post.getContent(),
id: post.getId(),
timestamp: post.getTimestamp(),
postid: postid,
isRetwist: false
}
}
if (post.isReply()) {
postdata.isReply = true;
postdata.replyUser = post.getReplyUser();
postdata.replyId = post.getReplyId();
} else {
postdata.isReply = false;
}
return {
avatar: "img/genericPerson.png",
fullname: "",
timeAgo: ""
};
},
updateTimeAgo: function() {
var secondsAgo = Date.now()/1000-this.props.post.timestamp;
var newTimeAgo = "";
if (secondsAgo<45) {newTimeAgo="1m"}
else if (secondsAgo<45*60) {newTimeAgo=Math.round(secondsAgo/60)+"m"}
else if (secondsAgo<18*60*60) {newTimeAgo=Math.round(secondsAgo/60/60)+"h"}
else if (secondsAgo<26*24*60*60) {newTimeAgo=Math.round(secondsAgo/24/60/60)+"d"}
else if (secondsAgo<9*30.5*24*60*60) {newTimeAgo=Math.round(secondsAgo/30.5/24/60/60)+"mo"}
else {newTimeAgo=Math.round(secondsAgo/365/24/60/60)+"y"}
this.setStateSafe({timeAgo: newTimeAgo});
},
componentDidMount: function () {
var thisComponent = this;
//console.log(this.props.post.username+":post"+this.props.post.id);
Twister.getUser(this.props.post.username).doAvatar(function(avatar){
if (avatar.getUrl()) {
thisComponent.setStateSafe({avatar: avatar.getUrl()});
}
});
Twister.getUser(this.props.post.username).doProfile(function(profile){
thisComponent.setStateSafe({fullname: profile.getField("fullname")});
});
if (this.props.post.isRetwist) {
Twister.getUser(this.props.post.retwistingUser).doProfile(function(profile){
thisComponent.setStateSafe({retwistingUser: profile.getField("fullname")});
});
}
this.updateTimeAgo();
this.setInterval(this.updateTimeAgo,60000);
},
render: function() {
var post = Twister.getUser(this.props.post.username).getPost(this.props.post.id);
if (post.isReply()) {
var conversationLink = (
React.createElement(OverlayTrigger, {placement: "left", overlay:
React.createElement(Tooltip, null, "View Conversation")
},
React.createElement("small", null, React.createElement("a", {href: "#/conversation/"+post.replyUsername()+"/"+post.replyId(), className: "link-button-gray"}, React.createElement(Glyphicon, {glyph: "comment"})))
)
);
} else {
var conversationLink = (React.createElement("span", null));
}
return (
React.createElement(ListGroupItem, null,
React.createElement(Row, {className: "nomargin"},
React.createElement(Col, {xs: 2, md: 2, className: "fullytight"},
React.createElement("a", {href: "#/profile/"+post.getUsername()},
React.createElement("img", {className: "img-responsive", src: this.state.avatar})
)
),
React.createElement(Col, {xs: 9, md: 9},
React.createElement("strong", null, this.state.fullname), " ",
post.getContent()
),
React.createElement(Col, {xs: 1, md: 1, className: "fullytight text-align-right"}, this.state.timeAgo)
),
React.createElement(Row, {className: "nomargin"},
React.createElement(Col, {xs: 6, md: 6, className: "fullytight"},
post.isRetwist() && React.createElement("small", null, React.createElement(Glyphicon, {glyph: "retweet", "aria-hidden": "true"}), React.createElement("em", null, "  retwisted by ", this.state.retwistingUser))
),
React.createElement(Col, {xs: 6, md: 6, className: "fullytight text-align-right"}, conversationLink)
)
)
);
}
});
/*
<div className="post-avatar">
<img src={this.state.avatar}/>
</div>
<div className="post-bulk">
<div className="post-username">
<span className="post-fullname">{this.state.fullname} </span>
@{post.username} - {post.id}
</div>
<div className="post-timestamp">{post.timestamp}</div>
<div className="post-content">{post.content}</div>
</div>
<hr/>
*/