twisterarmy/twister-react
1
0
Fork 0
mirror of https://github.com/twisterarmy/twister-react.git synced 2025-08-26 13:52:06 +00:00
Code Issues Projects Releases Wiki Activity

upgrade to react-router 2.0 WIP 2

Browse Source
This commit is contained in:
Julian Steinwachs 2016-01-23 14:34:16 +01:00
parent 0deca79bc3
commit b38df6ee37
8 changed files with 57 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

115
build/app-bundle.js
View File

@ -57,24 +57,6 @@ App = React.createClass({displayName: "App",
SafeStateChangeMixin, SafeStateChangeMixin,
EventListenerMixin('newaccountbyuser')], EventListenerMixin('newaccountbyuser')],
contextTypes: {
router: React.PropTypes.func
},
getHandlerKey: function () {
var childDepth = 1; // assuming App is top-level route
var router = this.context.router
//console.log(router.getCurrentParams())
if ( router.getCurrentRoutes()[childDepth] ) {
var key = router.getCurrentRoutes()[childDepth].name;
if (key=="home" || key=="profile-active" || key=="accountProfileMore") {key=key+"/"+this.state.activeAccount;}
var id = JSON.stringify(router.getCurrentParams());
if (id) { key += id; }
//console.log(key);
return key;
} else {return "none"}
},
getInitialState: function () { getInitialState: function () {
var state={}; var state={};
@ -170,7 +152,7 @@ App = React.createClass({displayName: "App",
render: function() { render: function() {
var firstroute = this.context.router.getCurrentRoutes()[1].name; //var firstroute = this.context.router.getCurrentRoutes()[1].name;
//console.log(firstroute); //console.log(firstroute);
@ -196,13 +178,14 @@ App = React.createClass({displayName: "App",
key: this.state.accounts[i].name, key: this.state.accounts[i].name,
bsStyle: this.state.accounts[i].name==this.state.activeAccount ? 'primary' : 'default', bsStyle: this.state.accounts[i].name==this.state.activeAccount ? 'primary' : 'default',
onClick: this.switchAccount.bind(this,this.state.accounts[i].name), onClick: this.switchAccount.bind(this,this.state.accounts[i].name),
href: "javascript:void(0);" href: "javascript:void(0);",
eventKey: i
}, this.state.accounts[i].name) }, this.state.accounts[i].name)
); );
} }
var accountSelector = ( var accountSelector = (
React.createElement(DropdownButton, {title: this.state.activeAccount}, React.createElement(DropdownButton, {title: this.state.activeAccount, id: 'dropdown-accounts'},
userbuttons userbuttons
) )
@ -217,17 +200,17 @@ App = React.createClass({displayName: "App",
React.createElement(ButtonGroup, {justified: true}, React.createElement(ButtonGroup, {justified: true},
React.createElement(Button, { React.createElement(Button, {
href: "#", href: "#",
bsStyle: firstroute=="home" ? 'primary' : 'default', //bsStyle={firstroute=="home" ? 'primary' : 'default'}
disabled: guestMode disabled: guestMode
}, React.createElement(Glyphicon, {glyph: "home"})), }, React.createElement(Glyphicon, {glyph: "home"})),
React.createElement(Button, { React.createElement(Button, {
href: "#/profile", href: "#/profile",
bsStyle: firstroute=="profile-active" ? 'primary' : 'default', //bsStyle={firstroute=="profile-active" ? 'primary' : 'default'}
disabled: guestMode disabled: guestMode
}, React.createElement(Glyphicon, {glyph: "user"})), }, React.createElement(Glyphicon, {glyph: "user"})),
React.createElement(Button, {href: "#/directmessages", disabled: true}, React.createElement(Glyphicon, {glyph: "transfer"})), React.createElement(Button, {href: "#/directmessages", disabled: true}, React.createElement(Glyphicon, {glyph: "transfer"})),
accountSelector, accountSelector,
React.createElement(DropdownButton, {title: React.createElement(Glyphicon, {glyph: "menu-hamburger"})}, React.createElement(DropdownButton, {title: React.createElement(Glyphicon, {glyph: "menu-hamburger"}), id: 'dropdown-other'},
React.createElement(MenuItem, { React.createElement(MenuItem, {
onClick: this.clearCache onClick: this.clearCache
}, "Clear Cache"), }, "Clear Cache"),
@ -240,11 +223,10 @@ App = React.createClass({displayName: "App",
) )
), ),
React.createElement("br", null), React.createElement("br", null),
React.createElement(RouteHandler, { this.props.children && React.cloneElement(this.props.children, {
accounts: this.state.accounts, accounts:this.state.accounts,
activeAccount: this.state.activeAccount, activeAccount:this.state.activeAccount
key: this.getHandlerKey()} })
)
) )
) )
) )
@ -259,24 +241,24 @@ initializeApp = function () {
ReactDOM.render(( ReactDOM.render((
React.createElement(Router, {history: hashHistory}, React.createElement(Router, {history: hashHistory},
React.createElement(Route, {component: App, path: "/"}, React.createElement(Route, {component: App, path: "/"},
React.createElement(IndexRoute, {name: "home", component: Home}), React.createElement(IndexRoute, {component: Home}),
React.createElement(Route, {name: "profile-active", path: "/profile", component: Profile}, React.createElement(Route, {path: "/profile", component: Profile},
React.createElement(IndexRoute, {name: "profile-active-timeline-default", component: Timeline}), React.createElement(IndexRoute, {component: Timeline}),
React.createElement(Route, {name: "profile-active-timeline", path: "timeline", component: Timeline}), React.createElement(Route, {path: "timeline", component: Timeline}),
React.createElement(Route, {name: "profile-active-followings", path: "followings", component: Followings}), React.createElement(Route, {path: "followings", component: Followings}),
React.createElement(Route, {name: "profile-active-mentions", path: "mentions", component: Mentions}) React.createElement(Route, {path: "mentions", component: Mentions})
), ),
React.createElement(Route, {name: "profile", path: "/profile/:username", component: Profile}, React.createElement(Route, {path: "/profile/:username", component: Profile},
React.createElement(IndexRoute, {name: "profile-timeline-default", component: Timeline}), React.createElement(IndexRoute, {component: Timeline}),
React.createElement(Route, {name: "profile-timeline", path: "timeline", component: Timeline}), React.createElement(Route, {path: "timeline", component: Timeline}),
React.createElement(Route, {name: "profile-followings", path: "followings", component: Followings}), React.createElement(Route, {path: "followings", component: Followings}),
React.createElement(Route, {name: "profile-mentions", path: "mentions", component: Mentions}) React.createElement(Route, {path: "mentions", component: Mentions})
), ),
React.createElement(Route, {name: "conversation", path: "/conversation/:username/:postid", component: Conversation}), React.createElement(Route, {path: "/conversation/:username/:postid", component: Conversation}),
React.createElement(Route, {name: "hashtag", path: "/hashtag/:hashtag", component: Hashtag}), React.createElement(Route, {path: "/hashtag/:hashtag", component: Hashtag}),
React.createElement(Route, {name: "settings", path: "/settings", component: Settings}), React.createElement(Route, {path: "/settings", component: Settings}),
React.createElement(Route, {name: "accounts", path: "/accounts", component: Accounts}), React.createElement(Route, {path: "/accounts", component: Accounts}),
React.createElement(Route, {name: "featured", path: "/featured", component: Featured}) React.createElement(Route, {path: "/featured", component: Featured})
) )
) )
), document.getElementById('content')); ), document.getElementById('content'));
@ -1047,7 +1029,7 @@ module.exports = Post = React.createClass({displayName: "Post",
if (post.isReply()) { if (post.isReply()) {
var conversationLink = ( var conversationLink = (
React.createElement(OverlayTrigger, {placement: "left", overlay: React.createElement(OverlayTrigger, {placement: "left", overlay:
React.createElement(Tooltip, null, "View Conversation") React.createElement(Tooltip, {id: "view-conversation"}, "View Conversation")
}, },
React.createElement("small", null, React.createElement("a", {href: "#/conversation/"+post.getUsername()+"/"+post.getId(), className: "link-button-gray"}, React.createElement(Glyphicon, {glyph: "comment"}))) React.createElement("small", null, React.createElement("a", {href: "#/conversation/"+post.getUsername()+"/"+post.getId(), className: "link-button-gray"}, React.createElement(Glyphicon, {glyph: "comment"})))
) )
@ -1059,7 +1041,7 @@ module.exports = Post = React.createClass({displayName: "Post",
if (!post.isRetwist()) { if (!post.isRetwist()) {
var replyLink = React.createElement(OverlayTrigger, {placement: "left", overlay: var replyLink = React.createElement(OverlayTrigger, {placement: "left", overlay:
React.createElement(Tooltip, null, "Reply") React.createElement(Tooltip, {id: "reply"}, "Reply")
}, },
React.createElement("small", null, React.createElement("small", null,
React.createElement(ReplyModalButton, {replyUsername: post.getUsername(), replyPostId: post.getId(), activeAccount: this.props.activeAccount, originalMsg: post.getContent(), replyUserFullname: this.state.fullname}) React.createElement(ReplyModalButton, {replyUsername: post.getUsername(), replyPostId: post.getId(), activeAccount: this.props.activeAccount, originalMsg: post.getContent(), replyUserFullname: this.state.fullname})
@ -1071,7 +1053,7 @@ module.exports = Post = React.createClass({displayName: "Post",
var retwistLink = React.createElement(OverlayTrigger, {placement: "left", overlay: var retwistLink = React.createElement(OverlayTrigger, {placement: "left", overlay:
React.createElement(Tooltip, null, "Retwist") React.createElement(Tooltip, {id: "retwist"}, "Retwist")
}, },
React.createElement("small", null, React.createElement("small", null,
React.createElement(RetwistModalButton, {retwistUsername: post.getUsername(), retwistPostId: post.getId(), activeAccount: this.props.activeAccount, originalMsg: post.getContent(), retwistUserFullname: this.state.fullname}) React.createElement(RetwistModalButton, {retwistUsername: post.getUsername(), retwistPostId: post.getId(), activeAccount: this.props.activeAccount, originalMsg: post.getContent(), retwistUserFullname: this.state.fullname})
@ -1391,7 +1373,7 @@ module.exports = Postboard = React.createClass({displayName: "Postboard",
React.createElement(ListGroup, {fill: true}, React.createElement(ListGroup, {fill: true},
this.props.header, this.props.header,
spinner, spinner,
React.createElement(ReactCSSTransitionGroup, {transitionName: "item"}, React.createElement(ReactCSSTransitionGroup, {transitionName: "item", transitionEnterTimeout: 500, transitionLeaveTimeout: 300},
posts posts
) )
) )
@ -1438,7 +1420,7 @@ module.exports = ProfileBoard = React.createClass({displayName: "ProfileBoard",
React.createElement(ListGroup, {fill: true}, React.createElement(ListGroup, {fill: true},
this.props.header, this.props.header,
spinner, spinner,
React.createElement(ReactCSSTransitionGroup, {transitionName: "item"}, React.createElement(ReactCSSTransitionGroup, {transitionName: "item", transitionEnterTimeout: 500, transitionLeaveTimeout: 300},
profiles profiles
) )
) )
@ -1907,9 +1889,6 @@ module.exports = Home = React.createClass({displayName: "Home",
EventListenerMixin('scrolledtobottom'), EventListenerMixin('scrolledtobottom'),
EventListenerMixin('newpostbyuser') EventListenerMixin('newpostbyuser')
], ],
contextTypes: {
router: React.PropTypes.func
},
getInitialState: function() { getInitialState: function() {
return { return {
data: [], data: [],
@ -2174,9 +2153,6 @@ module.exports = Accounts = React.createClass({displayName: "Accounts",
SafeStateChangeMixin, SafeStateChangeMixin,
AppSettingsMixin AppSettingsMixin
], ],
contextTypes: {
router: React.PropTypes.func
},
render: function() { render: function() {
var thisComponent = this; var thisComponent = this;
@ -2190,8 +2166,8 @@ module.exports = Accounts = React.createClass({displayName: "Accounts",
this.props.accounts.map(function(acc,index) { this.props.accounts.map(function(acc,index) {
//console.log(acc,index) //console.log(acc,index)
return ( return (
React.createElement("div", null, React.createElement("div", {key: "miniprofile:"+acc.name},
React.createElement(MiniProfile, {username: acc.name, key: "miniprofile:"+acc.name, pollIntervalProfile: thisComponent.props.pollIntervalProfile}), React.createElement(MiniProfile, {username: acc.name, pollIntervalProfile: thisComponent.props.pollIntervalProfile}),
React.createElement("p", null, acc.status) React.createElement("p", null, acc.status)
) )
); );
@ -3050,22 +3026,6 @@ module.exports = Post = React.createClass({displayName: "Post",
SafeStateChangeMixin, SafeStateChangeMixin,
ProfileMixin ProfileMixin
], ],
contextTypes: {
router: React.PropTypes.func
},
getHandlerKey: function () {
var childDepth = 2; // assuming App is top-level route
var router = this.context.router;
//console.log(router.getCurrentParams())
if ( router.getCurrentRoutes()[childDepth] ) {
var key = router.getCurrentRoutes()[childDepth].name;
if (key.indexOf("active")>-1) {key+="/"+this.props.activeAccount;}
var id = JSON.stringify(router.getCurrentParams());
if (id) { key += id; }
//console.log(key);
return key;
} else {return "none"}
},
render: function() { render: function() {
var routeprefix = "#/profile/"+(this.context.router.getCurrentParams().username ? this.context.router.getCurrentParams().username+"/" : "") var routeprefix = "#/profile/"+(this.context.router.getCurrentParams().username ? this.context.router.getCurrentParams().username+"/" : "")
@ -3112,10 +3072,9 @@ module.exports = Post = React.createClass({displayName: "Post",
React.createElement(Button, {href: routeprefix+"mentions", bsStyle: subroute.indexOf("mentions")>-1 ? "primary" : "default"}, React.createElement(Glyphicon, {glyph: "comment"})) React.createElement(Button, {href: routeprefix+"mentions", bsStyle: subroute.indexOf("mentions")>-1 ? "primary" : "default"}, React.createElement(Glyphicon, {glyph: "comment"}))
) )
), ),
React.createElement(RouteHandler, { this.props.children && React.cloneElement(this.props.children, {
activeAccount: this.props.activeAccount, activeAccount:this.state.activeAccount
key: this.getHandlerKey()} })
)
) )
); );
} }

34
jsx/App.js
View File

@ -56,24 +56,6 @@ App = React.createClass({
SafeStateChangeMixin, SafeStateChangeMixin,
EventListenerMixin('newaccountbyuser')], EventListenerMixin('newaccountbyuser')],
contextTypes: {
router: React.PropTypes.func
},
getHandlerKey: function () {
var childDepth = 1; // assuming App is top-level route
var router = this.context.router
//console.log(router.getCurrentParams())
if ( router.getCurrentRoutes()[childDepth] ) {
var key = router.getCurrentRoutes()[childDepth].name;
if (key=="home" || key=="profile-active" || key=="accountProfileMore") {key=key+"/"+this.state.activeAccount;}
var id = JSON.stringify(router.getCurrentParams());
if (id) { key += id; }
//console.log(key);
return key;
} else {return "none"}
},
getInitialState: function () { getInitialState: function () {
var state={}; var state={};
@ -169,7 +151,7 @@ App = React.createClass({
render: function() { render: function() {
var firstroute = this.context.router.getCurrentRoutes()[1].name; //var firstroute = this.context.router.getCurrentRoutes()[1].name;
//console.log(firstroute); //console.log(firstroute);
@ -196,12 +178,13 @@ App = React.createClass({
bsStyle={this.state.accounts[i].name==this.state.activeAccount ? 'primary' : 'default'} bsStyle={this.state.accounts[i].name==this.state.activeAccount ? 'primary' : 'default'}
onClick={this.switchAccount.bind(this,this.state.accounts[i].name)} onClick={this.switchAccount.bind(this,this.state.accounts[i].name)}
href="javascript:void(0);" href="javascript:void(0);"
eventKey={i}
>{this.state.accounts[i].name}</MenuItem> >{this.state.accounts[i].name}</MenuItem>
); );
} }
var accountSelector = ( var accountSelector = (
<DropdownButton title={this.state.activeAccount}> <DropdownButton title={this.state.activeAccount} id={'dropdown-accounts'}>
{userbuttons} {userbuttons}
</DropdownButton> </DropdownButton>
@ -216,17 +199,17 @@ App = React.createClass({
<ButtonGroup justified> <ButtonGroup justified>
<Button <Button
href='#' href='#'
bsStyle={firstroute=="home" ? 'primary' : 'default'} //bsStyle={firstroute=="home" ? 'primary' : 'default'}
disabled = {guestMode} disabled = {guestMode}
><Glyphicon glyph="home"/></Button> ><Glyphicon glyph="home"/></Button>
<Button <Button
href='#/profile' href='#/profile'
bsStyle={firstroute=="profile-active" ? 'primary' : 'default'} //bsStyle={firstroute=="profile-active" ? 'primary' : 'default'}
disabled = {guestMode} disabled = {guestMode}
><Glyphicon glyph="user"/></Button> ><Glyphicon glyph="user"/></Button>
<Button href='#/directmessages' disabled><Glyphicon glyph="transfer"/></Button> <Button href='#/directmessages' disabled><Glyphicon glyph="transfer"/></Button>
{accountSelector} {accountSelector}
<DropdownButton title={<Glyphicon glyph="menu-hamburger"/>}> <DropdownButton title={<Glyphicon glyph="menu-hamburger"/>} id={'dropdown-other'}>
<MenuItem <MenuItem
onClick={this.clearCache} onClick={this.clearCache}
>Clear Cache</MenuItem> >Clear Cache</MenuItem>
@ -239,7 +222,10 @@ App = React.createClass({
</DropdownButton> </DropdownButton>
</ButtonGroup> </ButtonGroup>
<br/> <br/>
{this.props.children} {this.props.children && React.cloneElement(this.props.children, {
accounts:this.state.accounts,
activeAccount:this.state.activeAccount
})}
</Col> </Col>
</Row> </Row>
</Grid> </Grid>

6
jsx/common/Post.js
View File

@ -142,7 +142,7 @@ module.exports = Post = React.createClass({
if (post.isReply()) { if (post.isReply()) {
var conversationLink = ( var conversationLink = (
<OverlayTrigger placement='left' overlay={ <OverlayTrigger placement='left' overlay={
<Tooltip>View Conversation</Tooltip> <Tooltip id="view-conversation">View Conversation</Tooltip>
}> }>
<small><a href={"#/conversation/"+post.getUsername()+"/"+post.getId()} className="link-button-gray"><Glyphicon glyph="comment"/></a></small> <small><a href={"#/conversation/"+post.getUsername()+"/"+post.getId()} className="link-button-gray"><Glyphicon glyph="comment"/></a></small>
</OverlayTrigger> </OverlayTrigger>
@ -154,7 +154,7 @@ module.exports = Post = React.createClass({
if (!post.isRetwist()) { if (!post.isRetwist()) {
var replyLink = <OverlayTrigger placement='left' overlay={ var replyLink = <OverlayTrigger placement='left' overlay={
<Tooltip>Reply</Tooltip> <Tooltip id="reply">Reply</Tooltip>
}> }>
<small> <small>
<ReplyModalButton replyUsername={post.getUsername()} replyPostId={post.getId()} activeAccount={this.props.activeAccount} originalMsg={post.getContent()} replyUserFullname={this.state.fullname}/> <ReplyModalButton replyUsername={post.getUsername()} replyPostId={post.getId()} activeAccount={this.props.activeAccount} originalMsg={post.getContent()} replyUserFullname={this.state.fullname}/>
@ -166,7 +166,7 @@ module.exports = Post = React.createClass({
var retwistLink = <OverlayTrigger placement='left' overlay={ var retwistLink = <OverlayTrigger placement='left' overlay={
<Tooltip>Retwist</Tooltip> <Tooltip id="retwist">Retwist</Tooltip>
}> }>
<small> <small>
<RetwistModalButton retwistUsername={post.getUsername()} retwistPostId={post.getId()} activeAccount={this.props.activeAccount} originalMsg={post.getContent()} retwistUserFullname={this.state.fullname}/> <RetwistModalButton retwistUsername={post.getUsername()} retwistPostId={post.getId()} activeAccount={this.props.activeAccount} originalMsg={post.getContent()} retwistUserFullname={this.state.fullname}/>

2
jsx/common/Postboard.js
View File

@ -37,7 +37,7 @@ module.exports = Postboard = React.createClass({
<ListGroup fill> <ListGroup fill>
{this.props.header} {this.props.header}
{spinner} {spinner}
<ReactCSSTransitionGroup transitionName="item"> <ReactCSSTransitionGroup transitionName="item" transitionEnterTimeout={500} transitionLeaveTimeout={300}>
{posts} {posts}
</ReactCSSTransitionGroup> </ReactCSSTransitionGroup>
</ListGroup> </ListGroup>

2
jsx/common/ProfileBoard.js
View File

@ -37,7 +37,7 @@ module.exports = ProfileBoard = React.createClass({
<ListGroup fill> <ListGroup fill>
{this.props.header} {this.props.header}
{spinner} {spinner}
<ReactCSSTransitionGroup transitionName="item"> <ReactCSSTransitionGroup transitionName="item" transitionEnterTimeout={500} transitionLeaveTimeout={300}>
{profiles} {profiles}
</ReactCSSTransitionGroup> </ReactCSSTransitionGroup>
</ListGroup> </ListGroup>

3
jsx/home/Home.js
View File

@ -27,9 +27,6 @@ module.exports = Home = React.createClass({
EventListenerMixin('scrolledtobottom'), EventListenerMixin('scrolledtobottom'),
EventListenerMixin('newpostbyuser') EventListenerMixin('newpostbyuser')
], ],
contextTypes: {
router: React.PropTypes.func
},
getInitialState: function() { getInitialState: function() {
return { return {
data: [], data: [],

7
jsx/other/Accounts.js
View File

@ -23,9 +23,6 @@ module.exports = Accounts = React.createClass({
SafeStateChangeMixin, SafeStateChangeMixin,
AppSettingsMixin AppSettingsMixin
], ],
contextTypes: {
router: React.PropTypes.func
},
render: function() { render: function() {
var thisComponent = this; var thisComponent = this;
@ -39,8 +36,8 @@ module.exports = Accounts = React.createClass({
{this.props.accounts.map(function(acc,index) { {this.props.accounts.map(function(acc,index) {
//console.log(acc,index) //console.log(acc,index)
return ( return (
<div> <div key={"miniprofile:"+acc.name}>
<MiniProfile username={acc.name} key={"miniprofile:"+acc.name} pollIntervalProfile={thisComponent.props.pollIntervalProfile}/> <MiniProfile username={acc.name} pollIntervalProfile={thisComponent.props.pollIntervalProfile}/>
<p>{acc.status}</p> <p>{acc.status}</p>
</div> </div>
); );

20
jsx/profile/Profile.js
View File

@ -29,22 +29,6 @@ module.exports = Post = React.createClass({
SafeStateChangeMixin, SafeStateChangeMixin,
ProfileMixin ProfileMixin
], ],
contextTypes: {
router: React.PropTypes.func
},
getHandlerKey: function () {
var childDepth = 2; // assuming App is top-level route
var router = this.context.router;
//console.log(router.getCurrentParams())
if ( router.getCurrentRoutes()[childDepth] ) {
var key = router.getCurrentRoutes()[childDepth].name;
if (key.indexOf("active")>-1) {key+="/"+this.props.activeAccount;}
var id = JSON.stringify(router.getCurrentParams());
if (id) { key += id; }
//console.log(key);
return key;
} else {return "none"}
},
render: function() { render: function() {
var routeprefix = "#/profile/"+(this.context.router.getCurrentParams().username ? this.context.router.getCurrentParams().username+"/" : "") var routeprefix = "#/profile/"+(this.context.router.getCurrentParams().username ? this.context.router.getCurrentParams().username+"/" : "")
@ -91,7 +75,9 @@ module.exports = Post = React.createClass({
<Button href={routeprefix+"mentions"} bsStyle={subroute.indexOf("mentions")>-1 ? "primary" : "default"}><Glyphicon glyph="comment"/></Button> <Button href={routeprefix+"mentions"} bsStyle={subroute.indexOf("mentions")>-1 ? "primary" : "default"}><Glyphicon glyph="comment"/></Button>
</ButtonGroup> </ButtonGroup>
</ListGroupItem> </ListGroupItem>
{this.props.children} {this.props.children && React.cloneElement(this.props.children, {
activeAccount:this.state.activeAccount
})}
</ListGroup> </ListGroup>
); );
} }