fazo96/ipfs-boards
1
0
Fork 0
mirror of https://github.com/fazo96/ipfs-boards synced 2025-03-11 21:38:38 +01:00
Code Issues Releases Wiki Activity

wip refactor how API access is passed to components

Browse Source
This commit is contained in:
Enrico Fasoli 2015-11-28 10:02:49 +01:00
parent f77ef9904f
commit bae52734af
11 changed files with 126 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

117
webapp/components/comment.jsx
View File

@ -3,48 +3,79 @@ var Markdown = require('markdown.jsx')
var Icon = require('icon.jsx')
var Clock = require('clock.jsx')
var Link = require('react-router').Link
var UserID = require('userID.jsx')
module.exports = function(boardsAPI){
var UserID = require('userID.jsx')(boardsAPI)
return React.createClass({
getInitialState: function(){
return { moment: false }
},
componentDidMount: function(){
require.ensure(['moment'],_ => {
if(this.isMounted()) this.setState({ moment: require('moment') })
})
},
getPermalink: function(){
if(this.props.adminID && this.props.board && this.props.post && this.props.comment.hash){
return <div className="inline not-first">
<Icon name="code" /> <Link to={'/@'+this.props.adminID+'/'+this.props.board+'/'+this.props.post+'/'+this.props.comment.hash}>Permalink</Link>
</div>
}
},
getParentlink: function(){
if(this.props.showParent && this.props.comment.parent && this.props.comment.parent !== this.props.post){
return <div className="inline not-first">
<Icon name="level-up" /> <Link to={'/@'+this.props.adminID+'/'+this.props.board+'/'+this.props.post+'/'+this.props.comment.parent}>Parent</Link>
</div>
}
},
render: function(){
if(this.props.comment){
var Comments = this.props.comment.comments || require('comments.jsx')(boardsAPI)
return <div className="comment"><hr/>
<div className="icons">
<UserID id={this.props.comment.op} />
<Clock date={this.props.comment.date} />
{this.getPermalink()}
{this.getParentlink()}
</div>
<Markdown source={this.props.comment.text} />
<Comments className="shifted" parent={this.props.comment.hash} post={this.props.post} adminID={this.props.adminID} board={this.props.board}/>
<hr/></div>
} else {
return <div><hr/>Invalid Comment<hr/></div>
}
var Comment = React.createClass({
getInitialState: function(){
return { moment: false }
},
componentDidMount: function(){
require.ensure(['moment'],_ => {
if(this.isMounted()) this.setState({ moment: require('moment') })
})
},
getPermalink: function(){
if(this.props.adminID && this.props.board && this.props.post && this.props.comment.hash){
return <div className="inline not-first">
<Icon name="code" /> <Link to={'/@'+this.props.adminID+'/'+this.props.board+'/'+this.props.post+'/'+this.props.comment.hash}>Permalink</Link>
</div>
}
})
}
},
getParentlink: function(){
if(this.props.showParent && this.props.comment.parent && this.props.comment.parent !== this.props.post){
return <div className="inline not-first">
<Icon name="level-up" /> <Link to={'/@'+this.props.adminID+'/'+this.props.board+'/'+this.props.post+'/'+this.props.comment.parent}>Parent</Link>
</div>
}
},
getComments: function(){
return <Comments className="shifted" parent={this.props.comment.hash} post={this.props.post} adminID={this.props.adminID} board={this.props.board} api={this.props.api} />
},
render: function(){
if(this.props.comment){
return <div className="comment"><hr/>
<div className="icons">
<UserID id={this.props.comment.op} api={this.props.api} />
<Clock date={this.props.comment.date} />
{this.getPermalink()}
{this.getParentlink()}
</div>
<Markdown source={this.props.comment.text} />
<hr/></div>
} else {
return <div><hr/>Invalid Comment<hr/></div>
}
}
})
var Comments = React.createClass({
getInitialState: function(){
return { comments: [] }
},
componentDidMount: function(){
var boards = this.props.api
if(boards){
boards.getEventEmitter().on('comment for '+this.props.parent,cmnt => {
if(this.isMounted()) this.setState({ comments: this.state.comments.concat(cmnt) })
})
if(boards.isInit && this.isMounted()){
boards.getCommentsFor(this.props.parent,this.props.board,this.props.adminID)
}
boards.getEventEmitter().on('init', err => {
if(!err && this.isMounted())
boards.getCommentsFor(this.props.parent,this.props.board,this.props.adminID)
})
}
},
getComments: function(){
if(this.state.comments.length > 0){
return this.state.comments.map(cmnt => (<Comment key={cmnt.hash} comment={cmnt} post={this.props.post} adminID={this.props.adminID} board={this.props.board} api={this.props.api} />) )
}
else return <div></div>
},
render: function(){
return <div className={this.props.className+' comments'} >{this.getComments()}</div>
}
})
module.exports = { Comment, Comments }

32
webapp/components/comments.jsx
View File

@ -1,32 +0,0 @@
var React = require('react')
module.exports = function(boardsAPI){
var Comment = require('comment.jsx')(boardsAPI)
return React.createClass({
getInitialState: function(){
return { comments: [] }
},
componentDidMount: function(){
boardsAPI.use(boards => {
boards.getEventEmitter().on('comment for '+this.props.parent,cmnt => {
if(this.isMounted()) this.setState({ comments: this.state.comments.concat(cmnt) })
})
if(boards.isInit && this.isMounted()){
boards.getCommentsFor(this.props.parent,this.props.board,this.props.adminID)
}
boards.getEventEmitter().on('init', err => {
if(!err && this.isMounted())
boards.getCommentsFor(this.props.parent,this.props.board,this.props.adminID)
})
})
},
getComments: function(){
if(this.state.comments.length > 0)
return this.state.comments.map(cmnt => (<Comment key={cmnt.hash} comment={cmnt} post={this.props.post} comments={this} adminID={this.props.adminID} board={this.props.board}/>) )
else return <div></div>
},
render: function(){
return <div className={this.props.className+' comments'} >{this.getComments()}</div>
}
})
}

6
webapp/components/post.jsx
View File

@ -4,8 +4,8 @@ var Icon = require('icon.jsx')
var Link = require('react-router').Link
var Clock = require('clock.jsx')
module.exports = function(boardsAPI){
var UserID = require('userID.jsx')(boardsAPI)
module.exports = function(){
var UserID = require('userID.jsx')()
return React.createClass({
getInitialState: function(){
return { moment: false }
@ -32,7 +32,7 @@ module.exports = function(boardsAPI){
<h5>{this.props.post.title}</h5><hr/>
<Markdown source={this.props.post.text} /><hr/>
<div className="icons">
<UserID id={this.props.post.op}></UserID>
<UserID id={this.props.post.op} api={this.props.api} ></UserID>
<Clock className="not-first" date={this.props.post.date} />
<Icon name="comments" className="not-first" /> <Link className="nounderline" to={this.postLink()}>View</Link>
</div>

11
webapp/components/postlist.jsx
View File

@ -2,8 +2,8 @@ var React = require('react')
var sortedIndex = require('lodash.sortedindex')
var Icon = require('icon.jsx')
module.exports = function(boardsAPI){
var Post = require('post.jsx')(boardsAPI)
module.exports = function(){
var Post = require('post.jsx')()
return React.createClass({
getInitialState: function(){
return { posts: [], api: false }
@ -30,17 +30,18 @@ module.exports = function(boardsAPI){
})
},
componentDidMount: function(){
boardsAPI.use(boards => {
var boards = this.props.api
if(boards){
if(boards.isInit) this.init(boards)
else boards.getEventEmitter().on('init',err => {
if(!err && this.isMounted()) this.init(boards)
})
})
}
},
getPosts: function(){
if(this.state.posts.length > 0 || this.state.api){
return this.state.posts.map(post => {
return <Post key={post.hash} board={this.props.board} admin={this.props.admin} post={post} />
return <Post key={post.hash} board={this.props.board} admin={this.props.admin} post={post} api={this.props.api} />
})
} else return <div className="center-block text-center">
<Icon name="refresh" className="fa-3x center-block light fa-spin" />

9
webapp/components/userID.jsx
View File

@ -2,21 +2,22 @@ var React = require('react')
var Icon = require('icon.jsx')
var Link = require('react-router').Link
module.exports = function(boardsAPI){
module.exports = function(){
return React.createClass({
getInitialState: function(){
return { }
},
componentDidMount: function(){
boardsAPI.use(boards => {
var boards = this.props.api
if(boards){
if(boards.isInit){
this.getProfile(boards)
}
boards.getEventEmitter().on('init',err => {
if(!err) this.getProfile(boards)
if(!err && this.isMounted()) this.getProfile(boards)
else console.log('ERR INIT',err)
})
})
}
},
getProfile: function(boards){
if(this.props.id === undefined) return

16
webapp/pages/board.jsx
View File

@ -4,9 +4,9 @@ var Link = require('react-router').Link
var Icon = require('icon.jsx')
module.exports = function(boardsAPI){
var UserID = require('userID.jsx')(boardsAPI)
var PostList = require('postlist.jsx')(boardsAPI)
var GetIPFS = require('getipfs.jsx')(boardsAPI)
var UserID = require('userID.jsx')()
var PostList = require('postlist.jsx')()
var GetIPFS = require('getipfs.jsx')()
return React.createClass({
getInitialState: function(){
return { name: this.props.params.boardname, api: false }
@ -24,7 +24,6 @@ module.exports = function(boardsAPI){
var ee = boards.getEventEmitter()
ee.on('init',err => {
if(!err && this.isMounted()){
this.setState({ api: true })
this.init(boards)
}
})
@ -37,7 +36,6 @@ module.exports = function(boardsAPI){
this.setState({ description: 'All the messages posted in __#'+this.props.params.boardname+'__' })
}
if(boards.isInit || this.state.api){
this.setState({api: true})
this.init(boards)
}
})
@ -46,7 +44,7 @@ module.exports = function(boardsAPI){
if(!this.state.init){
if(this.props.params.userid)
boards.getBoardSettings(this.props.params.userid,this.props.params.boardname)
this.setState({ init: true })
this.setState({ init: true, api: true, boards: boards })
}
},
render: function(){
@ -54,11 +52,11 @@ module.exports = function(boardsAPI){
return (<div className="board">
<h2>{this.state.name}</h2>
<Markdown source={this.state.description} skipHtml={true} />
{this.props.params.userid?<h5><UserID id={this.props.params.userid} /></h5>:<p></p>}
{this.props.params.userid?<h5><UserID id={this.props.params.userid} api={this.state.boards} /></h5>:<p></p>}
<hr />
<PostList board={this.props.params.boardname} admin={this.props.params.userid}/>
<PostList board={this.props.params.boardname} admin={this.props.params.userid} api={this.state.boards} />
</div>)
} else return <GetIPFS />
} else return <GetIPFS api={this.state.boards} />
}
})
}

18
webapp/pages/commentpage.jsx
View File

@ -3,10 +3,10 @@ var Link = require('react-router').Link
var Icon = require('icon.jsx')
module.exports = function(boardsAPI){
var UserID = require('userID.jsx')(boardsAPI)
var GetIPFS = require('getipfs.jsx')(boardsAPI)
var Post = require('post.jsx')(boardsAPI)
var Comment = require('comment.jsx')(boardsAPI)
var UserID = require('userID.jsx')()
var GetIPFS = require('getipfs.jsx')()
var Post = require('post.jsx')()
var Comment = require('comment.jsx').Comment
return React.createClass({
getInitialState: function(){
@ -27,7 +27,7 @@ module.exports = function(boardsAPI){
},
init: function(boards){
if(this.state.init) return
this.setState({ api: true })
this.setState({ api: true, boards: boards })
boards.downloadComment(this.props.params.commenthash,this.props.params.userid,this.props.params.boardname,(err,comment) => {
if(err){
this.setState({ comment: { title: 'Error', text: err.Message || err.Error }})
@ -39,14 +39,14 @@ module.exports = function(boardsAPI){
getContext: function(){
if(this.props.params.userid){
if(this.props.params.boardname)
return <div>Comment by <UserID id={this.props.params.userid} /> in <Link to={'@'+this.props.params.userid+'/'+this.props.params.boardname}>#{this.props.params.boardname}</Link> to <Link to={'/@'+this.props.params.userid+'/'+this.props.params.boardname+'/'+this.props.params.posthash }>{this.props.params.posthash}</Link></div>
return <div>Comment by <UserID id={this.props.params.userid} api={this.state.boards} /> in <Link to={'@'+this.props.params.userid+'/'+this.props.params.boardname}>#{this.props.params.boardname}</Link> to <Link to={'/@'+this.props.params.userid+'/'+this.props.params.boardname+'/'+this.props.params.posthash }>{this.props.params.posthash}</Link></div>
else
return <div>Comment by <UserID id={this.props.params.userid} /></div>
return <div>Comment by <UserID id={this.props.params.userid} api={this.state.boards} /></div>
} else return <div><h6 className="light">You are viewing a single comment</h6></div>
},
showComment: function(){
if(this.state.comment){
return <Comment comment={this.state.comment} post={this.props.params.posthash} adminID={this.props.params.userid} board={this.props.params.boardname} showParent={true} />
return <Comment comment={this.state.comment} post={this.props.params.posthash} adminID={this.props.params.userid} board={this.props.params.boardname} showParent={true} api={this.state.boards} />
} else {
return <div className="center-block text-center">
<Icon name="refresh" className="fa-3x center-block light fa-spin" />
@ -62,7 +62,7 @@ module.exports = function(boardsAPI){
</div>
{this.showComment()}
</div>
else return <GetIPFS />
else return <GetIPFS api={this.state.boards} />
}
})
}

7
webapp/pages/getipfs.jsx
View File

@ -2,13 +2,14 @@ var React = require('react')
var Link = require('react-router').Link
var Icon = require('icon.jsx')
module.exports = function(boardsAPI){
module.exports = function(){
return React.createClass({
getInitialState: function(){
return { connected: false, error: false, long: false }
},
componentDidMount: function(){
boardsAPI.use(boards => {
var boards = this.props.api
if(boards){
if(!this.isMounted()) return
if(boards.isInit){
this.setState({ connected: true })
@ -25,7 +26,7 @@ module.exports = function(boardsAPI){
}
})
}
})
}
},
render: function(){
var opt = require('options.jsx').get()

20
webapp/pages/postpage.jsx
View File

@ -2,10 +2,10 @@ var React = require('react')
var Link = require('react-router').Link
module.exports = function(boardsAPI){
var UserID = require('userID.jsx')(boardsAPI)
var GetIPFS = require('getipfs.jsx')(boardsAPI)
var Post = require('post.jsx')(boardsAPI)
var Comments = require('comments.jsx')(boardsAPI)
var UserID = require('userID.jsx')()
var GetIPFS = require('getipfs.jsx')()
var Post = require('post.jsx')()
var Comments = require('comment.jsx').Comments
return React.createClass({
getInitialState: function(){
@ -26,7 +26,7 @@ module.exports = function(boardsAPI){
},
init: function(boards){
if(this.state.init) return
this.setState({ api: true })
this.setState({ api: true, boards: boards })
boards.downloadPost(this.props.params.posthash,this.props.params.userid,this.props.params.boardname,this.props.params.userid,(err,post) => {
if(err){
this.setState({ post: { title: 'Error', text: err.Message || err.Error }})
@ -38,9 +38,9 @@ module.exports = function(boardsAPI){
getContext: function(){
if(this.props.params.userid){
if(this.props.params.boardname)
return <div>Posted by <UserID id={this.props.params.userid} /> in <Link to={'@'+this.props.params.userid+'/'+this.props.params.boardname}>#{this.props.params.boardname}</Link></div>
return <div>Posted by <UserID id={this.props.params.userid} api={this.state.boards} /> in <Link to={'@'+this.props.params.userid+'/'+this.props.params.boardname}>#{this.props.params.boardname}</Link></div>
else
return <div>Posted by <UserID id={this.props.params.userid} /></div>
return <div>Posted by <UserID id={this.props.params.userid} api={this.state.boards} /></div>
} else return <div><h6 className="light">You are viewing a single post</h6></div>
},
render: function(){
@ -49,10 +49,10 @@ module.exports = function(boardsAPI){
<div className="text-center">
{this.getContext()}
</div>
<Post post={this.state.post} board={this.props.params.boardname} />
<Comments parent={this.props.params.posthash} board={this.props.params.boardname} adminID={this.props.params.userid} post={this.props.params.posthash} />
<Post post={this.state.post} board={this.props.params.boardname} api={this.state.boards} />
<Comments parent={this.props.params.posthash} board={this.props.params.boardname} adminID={this.props.params.userid} post={this.props.params.posthash} api={this.state.boards} />
</div>
else return <GetIPFS />
else return <GetIPFS api={this.state.boards} />
}
})
}

6
webapp/pages/profile.jsx
View File

@ -12,13 +12,13 @@ module.exports = function(boardsAPI){
componentDidMount: function(){
boardsAPI.use(boards => {
if(boards.isInit){
this.setState({ api: true, id: boards.id })
this.setState({ api: boards, id: boards.id })
this.init()
}
var ee = boards.getEventEmitter()
ee.on('init',err => {
if(!err && this.isMounted()){
this.setState({ api: true, id: boards.id })
this.setState({ api: boards, id: boards.id })
this.init()
}
})
@ -78,7 +78,7 @@ module.exports = function(boardsAPI){
</h6>
})}
</div>)
} else return <GetIPFS />
} else return <GetIPFS api={this.state.api} />
}
})
}

12
webapp/pages/users.jsx
View File

@ -2,8 +2,8 @@ var React = require('react')
var Icon = require('icon.jsx')
module.exports = function(boardsAPI){
var GetIPFS = require('getipfs.jsx')(boardsAPI)
var UserID = require('userID.jsx')(boardsAPI)
var GetIPFS = require('getipfs.jsx')()
var UserID = require('userID.jsx')()
return React.createClass({
getInitialState: function(){
return { users: [], api: false }
@ -13,7 +13,6 @@ module.exports = function(boardsAPI){
boards.init()
if(boards.isInit){
if(this.isMounted()){
this.setState({ api: true })
this.init(boards)
}
}
@ -21,7 +20,6 @@ module.exports = function(boardsAPI){
ee.on('init', e => {
if(!e && this.isMounted()){
this.init(boards)
this.setState({ api: true })
}
})
ee.on('user',(id) => {
@ -34,7 +32,7 @@ module.exports = function(boardsAPI){
},
init: function(boards){
if(this.isMounted() && !this.state.init){
this.setState({ users: boards.getUsers(), init: true })
this.setState({ users: boards.getUsers(), api: true, init: true, boards: boards })
boards.searchUsers()
}
},
@ -45,11 +43,11 @@ module.exports = function(boardsAPI){
<p>Found <b>{this.state.users.length}</b> users</p>
<ul>
{this.state.users.map(user => {
return <UserID key={user} id={user} />
return <UserID key={user} id={user} api={this.state.boards} />
})}
</ul>
</div>
} else return <GetIPFS />
} else return <GetIPFS api={this.state.boards} />
}
})
}