mirror of
https://github.com/fazo96/ipfs-boards
synced 2025-01-25 14:54:19 +01:00
split app into components
This commit is contained in:
Enrico Fasoli
parent
fecd9af666
commit
d77c13f544
278
webapp/app.jsx
278
webapp/app.jsx
@ -5,10 +5,6 @@ var Route = require('react-router').Route
|
||||
var IndexRoute = require('react-router').IndexRoute
|
||||
var Redirect = require('react-router').Redirect
|
||||
var Link = require('react-router').Link
|
||||
|
||||
var MarkdownLib = require('react-markdown')
|
||||
var moment = require('moment')
|
||||
var sortedIndex = require('lodash.sortedindex')
|
||||
var BoardsAPI = require('boards-api.js')
|
||||
|
||||
// Load CSS
|
||||
@ -30,26 +26,6 @@ var boards = new BoardsAPI(ipfs)
|
||||
|
||||
// Components
|
||||
|
||||
var Markdown = React.createClass({
|
||||
renderIfApplicable: function(){
|
||||
if(this.props.source)
|
||||
return <MarkdownLib source={this.props.source} skipHtml={true} />
|
||||
return <p>...</p>
|
||||
},
|
||||
render: function(){
|
||||
return this.renderIfApplicable()
|
||||
}
|
||||
})
|
||||
|
||||
var Icon = React.createClass({
|
||||
class: function(){
|
||||
return 'fa fa-'+this.props.name+' '+this.props.className
|
||||
},
|
||||
render: function(){
|
||||
return ( <i className={this.class()}></i> )
|
||||
}
|
||||
})
|
||||
|
||||
var Container = React.createClass({
|
||||
render: function(){
|
||||
return ( <div className="container app">{this.props.children}</div> )
|
||||
@ -79,97 +55,6 @@ var Navbar = React.createClass({
|
||||
}
|
||||
})
|
||||
|
||||
var Post = React.createClass({
|
||||
getDate: function(){
|
||||
if(this.props.post.date){
|
||||
return moment.unix(this.props.post.date).fromNow()
|
||||
} else {
|
||||
return 'Unknown Date'
|
||||
}
|
||||
},
|
||||
render: function(){
|
||||
return <div key={this.props.post.title} className="post">
|
||||
<div className="content">
|
||||
<h5>{this.props.post.title}</h5><hr/>
|
||||
<Markdown source={this.props.post.text} skipHtml={true} /><hr/>
|
||||
<div className="icons">
|
||||
<UserID id={this.props.post.op}></UserID>
|
||||
<Icon name="clock-o" className="not-first"/> {this.getDate()}
|
||||
<Icon name="comments" className="not-first" /> Comments
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
})
|
||||
|
||||
var PostList = React.createClass({
|
||||
getInitialState: function(){
|
||||
return { posts: [] }
|
||||
},
|
||||
sortFn: function(a,b){
|
||||
return (b.date || 0) - (a.date || 0)
|
||||
},
|
||||
componentDidMount: function(){
|
||||
console.log('Initial POSTS',this.state.posts.length)
|
||||
boards.getPostsInBoard(this.props.admin,this.props.board)
|
||||
.on('post in '+this.props.board+'@'+this.props.admin,(post,hash) => {
|
||||
if(!this.isMounted()) return true
|
||||
var now = moment().unix()
|
||||
var posts = this.state.posts
|
||||
if(post.date === undefined || post.date <= 0){
|
||||
posts.push(post)
|
||||
} else if(post.date <= now){
|
||||
var i = sortedIndex(posts,post,(p) => now-p.date || now)
|
||||
posts.splice(i,0,post)
|
||||
} else {
|
||||
console.log('Post discarded cause date in the future:',post)
|
||||
}
|
||||
this.setState({ posts })
|
||||
})
|
||||
},
|
||||
render: function(){
|
||||
return (
|
||||
<div className="postList">
|
||||
{this.state.posts.map(post => {
|
||||
return <Post key={post.title+post.text} post={post} />
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
var UserID = React.createClass({
|
||||
getInitialState: function(){
|
||||
return { }
|
||||
},
|
||||
componentDidMount: function(){
|
||||
if(this.props.id) boards.getProfile(this.props.id, (err,res) => {
|
||||
if(!this.isMounted()) return true
|
||||
if(!err) {
|
||||
this.setState({ name: res.name.trim() })
|
||||
}
|
||||
})
|
||||
},
|
||||
getContent: function(){
|
||||
if(this.state.name){
|
||||
return (<Icon name="user" />)
|
||||
} else {
|
||||
return '@'
|
||||
}
|
||||
},
|
||||
render: function(){
|
||||
if(this.props.id)
|
||||
return (<div className="user-id">
|
||||
<Link className="light nounderline" to={'/@'+this.props.id}>
|
||||
{this.getContent()}{this.state.name || this.props.id}
|
||||
</Link>
|
||||
</div>)
|
||||
else return <div className="user-id">
|
||||
<Icon name="ban" /> Unknown User
|
||||
</div>
|
||||
}
|
||||
})
|
||||
|
||||
// Static pages
|
||||
|
||||
var Homepage = React.createClass({
|
||||
@ -226,165 +111,14 @@ var NotImplemented = React.createClass({
|
||||
}
|
||||
})
|
||||
|
||||
// Dynamic pages
|
||||
|
||||
var Profile = React.createClass({
|
||||
getInitialState: function(){
|
||||
return { name: '...', boards: [] }
|
||||
},
|
||||
componentDidMount: function(){
|
||||
console.log('About to ask for profile for',this.props.params.userid)
|
||||
var ee = boards.getEventEmitter()
|
||||
ee.on('boards for '+this.props.params.userid,l => {
|
||||
if(!this.isMounted()) return true
|
||||
this.setState({ boards: l })
|
||||
})
|
||||
boards.getProfile(this.props.params.userid,(err,res) => {
|
||||
if(!this.isMounted()) return true
|
||||
if(err){
|
||||
this.setState({
|
||||
name: <Icon name="ban" />,
|
||||
description: err
|
||||
})
|
||||
} else {
|
||||
this.setState({ name: res.name, description: res.description })
|
||||
}
|
||||
})
|
||||
},
|
||||
linkToEditor: function(){
|
||||
if(this.props.params.userid === boards.id){
|
||||
return <div>
|
||||
<h6>This is your profile</h6>
|
||||
<hr/>
|
||||
</div>
|
||||
}
|
||||
return ''
|
||||
},
|
||||
render: function(){
|
||||
return (<div className="profile">
|
||||
{this.linkToEditor()}
|
||||
<h1>{this.state.name}</h1>
|
||||
<Markdown source={this.state.description} skipHtml={true} />
|
||||
<hr/>
|
||||
<h5 className="light">@{this.props.params.userid}</h5>
|
||||
{this.state.boards.map(n => {
|
||||
return <h6 className="light" key={this.props.params.userid+'/'+n.name}>
|
||||
<Link to={'/@'+this.props.params.userid+'/'+n.name}># {n.name}</Link>
|
||||
</h6>
|
||||
})}
|
||||
</div>)
|
||||
}
|
||||
})
|
||||
|
||||
var Board = React.createClass({
|
||||
getInitialState: function(){
|
||||
return { name: this.props.params.boardname }
|
||||
},
|
||||
componentDidMount: function(){
|
||||
var ee = boards.getBoardSettings(this.props.params.userid,this.props.params.boardname)
|
||||
ee.on('settings for '+this.props.params.boardname+'@'+this.props.params.userid, (res) => {
|
||||
if(!this.isMounted()) return true
|
||||
console.log('Found name:',res.fullname)
|
||||
this.setState({ name: res.fullname.trim(), description: res.description })
|
||||
})
|
||||
},
|
||||
render: function(){
|
||||
return (<div className="board">
|
||||
<h2>{this.state.name}</h2>
|
||||
<Markdown source={this.state.description} skipHtml={true} />
|
||||
<h5><UserID id={this.props.params.userid} /></h5>
|
||||
<PostList board={this.props.params.boardname} admin={this.props.params.userid}/>
|
||||
</div>)
|
||||
}
|
||||
})
|
||||
|
||||
var Users = React.createClass({
|
||||
getInitialState: function(){
|
||||
return { users: boards.getUsers() }
|
||||
},
|
||||
componentDidMount: function(){
|
||||
boards.searchUsers().on('user',(id) => {
|
||||
if(id === undefined) console.log('found undefined user???')
|
||||
if(this.isMounted() && this.state.users.indexOf(id) < 0)
|
||||
this.setState({ users: this.state.users.concat(id) })
|
||||
})
|
||||
},
|
||||
render: function(){
|
||||
return <div>
|
||||
<h1><Icon name="users" /> Users</h1>
|
||||
<p>Found <b>{this.state.users.length}</b> users</p>
|
||||
<ul>
|
||||
{this.state.users.map(user => {
|
||||
return <UserID key={user} id={user} />
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
}
|
||||
})
|
||||
|
||||
var Settings = React.createClass({
|
||||
getDefaults: function(){
|
||||
return { addr: 'localhost', port: 5001 }
|
||||
},
|
||||
getInitialState: function(){
|
||||
var s = localStorage.getItem('ipfs-boards-settings')
|
||||
var obj = this.getDefaults()
|
||||
try {
|
||||
obj = JSON.parse(s)
|
||||
} catch(e){
|
||||
localStorage.removeItem('ipfs-boards-settings')
|
||||
}
|
||||
return obj || this.getDefaults()
|
||||
},
|
||||
save: function(){
|
||||
if(isNaN(this.state.port) || parseInt(this.state.port) > 65535 || parseInt(this.state.port) < 1){
|
||||
alert('Port number invalid')
|
||||
} else {
|
||||
localStorage.setItem('ipfs-boards-settings',JSON.stringify({
|
||||
addr: this.state.addr,
|
||||
port: parseInt(this.state.port)
|
||||
}))
|
||||
alert('Saved')
|
||||
}
|
||||
},
|
||||
setDefaults: function(){
|
||||
this.setState(this.getDefaults())
|
||||
},
|
||||
onChange: function(event){
|
||||
if(event.target.id === 'nodeAddress'){
|
||||
this.setState({ addr: event.target.value })
|
||||
} else {
|
||||
this.setState({ port: event.target.value })
|
||||
}
|
||||
},
|
||||
render: function(){
|
||||
return (
|
||||
<div className="settings">
|
||||
<h2><Icon name="cog"/> Settings</h2>
|
||||
<h5>This page is still a little rough, but it works. Reload the page after saving to apply changes.</h5>
|
||||
<p>Use this page to customize the application's behavior. For now, you can change how it connects to IPFS.</p>
|
||||
<p>All settings are saved in your browser.</p>
|
||||
<div className="row">
|
||||
<div className="six columns">
|
||||
<label htmlFor="nodeAddress">IPFS Node</label>
|
||||
<input className="u-full-width" type="text" id="nodeAddress" value={this.state.addr} onChange={this.onChange} placeholder="localhost" />
|
||||
</div>
|
||||
<div className="six columns">
|
||||
<label htmlFor="nodePort">API Port</label>
|
||||
<input className="u-full-width" type="text" id="nodePort" value={this.state.port} onChange={this.onChange} placeholder="5001" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="buttons">
|
||||
<button className="button button-primary" onClick={this.save}>Save</button>
|
||||
<button className="button not-first" onClick={this.setDefaults}>Defaults</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
// Start
|
||||
|
||||
var Users = require('users.jsx')(boards)
|
||||
var Settings = require('settings.jsx')(boards)
|
||||
var Profile = require('profile.jsx')(boards)
|
||||
var Board = require('board.jsx')(boards)
|
||||
var Icon = require('icon.jsx')
|
||||
|
||||
boards.init(err => {
|
||||
if(err){
|
||||
console.log('FATAL: IPFS NODE NOT AVAILABLE')
|
||||
|
||||
30
webapp/components/board.jsx
Normal file
30
webapp/components/board.jsx
Normal file
@ -0,0 +1,30 @@
|
||||
var React = require('react')
|
||||
var Markdown = require('markdown.jsx')
|
||||
var Link = require('react-router').Link
|
||||
var Icon = require('icon.jsx')
|
||||
|
||||
module.exports = function(boards){
|
||||
var UserID = require('userID.jsx')(boards)
|
||||
var PostList = require('postlist.jsx')(boards)
|
||||
return React.createClass({
|
||||
getInitialState: function(){
|
||||
return { name: this.props.params.boardname }
|
||||
},
|
||||
componentDidMount: function(){
|
||||
var ee = boards.getBoardSettings(this.props.params.userid,this.props.params.boardname)
|
||||
ee.on('settings for '+this.props.params.boardname+'@'+this.props.params.userid, (res) => {
|
||||
if(!this.isMounted()) return true
|
||||
console.log('Found name:',res.fullname)
|
||||
this.setState({ name: res.fullname.trim(), description: res.description })
|
||||
})
|
||||
},
|
||||
render: function(){
|
||||
return (<div className="board">
|
||||
<h2>{this.state.name}</h2>
|
||||
<Markdown source={this.state.description} skipHtml={true} />
|
||||
<h5><UserID id={this.props.params.userid} /></h5>
|
||||
<PostList board={this.props.params.boardname} admin={this.props.params.userid}/>
|
||||
</div>)
|
||||
}
|
||||
})
|
||||
}
|
||||
10
webapp/components/icon.jsx
Normal file
10
webapp/components/icon.jsx
Normal file
@ -0,0 +1,10 @@
|
||||
var React = require('react')
|
||||
|
||||
module.exports = React.createClass({
|
||||
class: function(){
|
||||
return 'fa fa-'+this.props.name+' '+this.props.className
|
||||
},
|
||||
render: function(){
|
||||
return ( <i className={this.class()}></i> )
|
||||
}
|
||||
})
|
||||
13
webapp/components/markdown.jsx
Normal file
13
webapp/components/markdown.jsx
Normal file
@ -0,0 +1,13 @@
|
||||
var React = require('react')
|
||||
var MarkdownLib = require('react-markdown')
|
||||
|
||||
module.exports = React.createClass({
|
||||
renderIfApplicable: function(){
|
||||
if(this.props.source)
|
||||
return <MarkdownLib source={this.props.source} skipHtml={true} />
|
||||
return <p>...</p>
|
||||
},
|
||||
render: function(){
|
||||
return this.renderIfApplicable()
|
||||
}
|
||||
})
|
||||
30
webapp/components/post.jsx
Normal file
30
webapp/components/post.jsx
Normal file
@ -0,0 +1,30 @@
|
||||
var React = require('react')
|
||||
var moment = require('moment')
|
||||
var Markdown = require('markdown.jsx')
|
||||
var Icon = require('icon.jsx')
|
||||
|
||||
module.exports = function(boards){
|
||||
var UserID = require('userID.jsx')(boards)
|
||||
return React.createClass({
|
||||
getDate: function(){
|
||||
if(this.props.post.date){
|
||||
return moment.unix(this.props.post.date).fromNow()
|
||||
} else {
|
||||
return 'Unknown Date'
|
||||
}
|
||||
},
|
||||
render: function(){
|
||||
return <div key={this.props.post.title} className="post">
|
||||
<div className="content">
|
||||
<h5>{this.props.post.title}</h5><hr/>
|
||||
<Markdown source={this.props.post.text} skipHtml={true} /><hr/>
|
||||
<div className="icons">
|
||||
<UserID id={this.props.post.op}></UserID>
|
||||
<Icon name="clock-o" className="not-first"/> {this.getDate()}
|
||||
<Icon name="comments" className="not-first" /> Comments
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
})
|
||||
}
|
||||
42
webapp/components/postlist.jsx
Normal file
42
webapp/components/postlist.jsx
Normal file
@ -0,0 +1,42 @@
|
||||
var React = require('react')
|
||||
var moment = require('moment')
|
||||
var sortedIndex = require('lodash.sortedindex')
|
||||
|
||||
module.exports = function(boards){
|
||||
var Post = require('post.jsx')(boards)
|
||||
return React.createClass({
|
||||
getInitialState: function(){
|
||||
return { posts: [] }
|
||||
},
|
||||
sortFn: function(a,b){
|
||||
return (b.date || 0) - (a.date || 0)
|
||||
},
|
||||
componentDidMount: function(){
|
||||
console.log('Initial POSTS',this.state.posts.length)
|
||||
boards.getPostsInBoard(this.props.admin,this.props.board)
|
||||
.on('post in '+this.props.board+'@'+this.props.admin,(post,hash) => {
|
||||
if(!this.isMounted()) return true
|
||||
var now = moment().unix()
|
||||
var posts = this.state.posts
|
||||
if(post.date === undefined || post.date <= 0){
|
||||
posts.push(post)
|
||||
} else if(post.date <= now){
|
||||
var i = sortedIndex(posts,post,(p) => now-p.date || now)
|
||||
posts.splice(i,0,post)
|
||||
} else {
|
||||
console.log('Post discarded cause date in the future:',post)
|
||||
}
|
||||
this.setState({ posts })
|
||||
})
|
||||
},
|
||||
render: function(){
|
||||
return (
|
||||
<div className="postList">
|
||||
{this.state.posts.map(post => {
|
||||
return <Post key={post.title+post.text} post={post} />
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
}
|
||||
54
webapp/components/profile.jsx
Normal file
54
webapp/components/profile.jsx
Normal file
@ -0,0 +1,54 @@
|
||||
var React = require('react')
|
||||
var Markdown = require('markdown.jsx')
|
||||
var Link = require('react-router').Link
|
||||
var Icon = require('icon.jsx')
|
||||
|
||||
module.exports = function(boards){
|
||||
return React.createClass({
|
||||
getInitialState: function(){
|
||||
return { name: '...', boards: [] }
|
||||
},
|
||||
componentDidMount: function(){
|
||||
console.log('About to ask for profile for',this.props.params.userid)
|
||||
var ee = boards.getEventEmitter()
|
||||
ee.on('boards for '+this.props.params.userid,l => {
|
||||
if(!this.isMounted()) return true
|
||||
this.setState({ boards: l })
|
||||
})
|
||||
boards.getProfile(this.props.params.userid,(err,res) => {
|
||||
if(!this.isMounted()) return true
|
||||
if(err){
|
||||
this.setState({
|
||||
name: <Icon name="ban" />,
|
||||
description: err
|
||||
})
|
||||
} else {
|
||||
this.setState({ name: res.name, description: res.description })
|
||||
}
|
||||
})
|
||||
},
|
||||
linkToEditor: function(){
|
||||
if(this.props.params.userid === boards.id){
|
||||
return <div>
|
||||
<h6>This is your profile</h6>
|
||||
<hr/>
|
||||
</div>
|
||||
}
|
||||
return ''
|
||||
},
|
||||
render: function(){
|
||||
return (<div className="profile">
|
||||
{this.linkToEditor()}
|
||||
<h1>{this.state.name}</h1>
|
||||
<Markdown source={this.state.description} skipHtml={true} />
|
||||
<hr/>
|
||||
<h5 className="light">@{this.props.params.userid}</h5>
|
||||
{this.state.boards.map(n => {
|
||||
return <h6 className="light" key={this.props.params.userid+'/'+n.name}>
|
||||
<Link to={'/@'+this.props.params.userid+'/'+n.name}># {n.name}</Link>
|
||||
</h6>
|
||||
})}
|
||||
</div>)
|
||||
}
|
||||
})
|
||||
}
|
||||
66
webapp/components/settings.jsx
Normal file
66
webapp/components/settings.jsx
Normal file
@ -0,0 +1,66 @@
|
||||
var React = require('react')
|
||||
var Icon = require('icon.jsx')
|
||||
|
||||
module.exports = function(boards){
|
||||
return React.createClass({
|
||||
getDefaults: function(){
|
||||
return { addr: 'localhost', port: 5001 }
|
||||
},
|
||||
getInitialState: function(){
|
||||
var s = localStorage.getItem('ipfs-boards-settings')
|
||||
var obj = this.getDefaults()
|
||||
try {
|
||||
obj = JSON.parse(s)
|
||||
} catch(e){
|
||||
localStorage.removeItem('ipfs-boards-settings')
|
||||
}
|
||||
return obj || this.getDefaults()
|
||||
},
|
||||
save: function(){
|
||||
if(isNaN(this.state.port) || parseInt(this.state.port) > 65535 || parseInt(this.state.port) < 1){
|
||||
alert('Port number invalid')
|
||||
} else {
|
||||
localStorage.setItem('ipfs-boards-settings',JSON.stringify({
|
||||
addr: this.state.addr,
|
||||
port: parseInt(this.state.port)
|
||||
}))
|
||||
alert('Saved')
|
||||
}
|
||||
},
|
||||
setDefaults: function(){
|
||||
this.setState(this.getDefaults())
|
||||
},
|
||||
onChange: function(event){
|
||||
if(event.target.id === 'nodeAddress'){
|
||||
this.setState({ addr: event.target.value })
|
||||
} else {
|
||||
this.setState({ port: event.target.value })
|
||||
}
|
||||
},
|
||||
render: function(){
|
||||
return (
|
||||
<div className="settings">
|
||||
<h2><Icon name="cog"/> Settings</h2>
|
||||
<h5>This page is still a little rough, but it works. Reload the page after saving to apply changes.</h5>
|
||||
<p>Use this page to customize the application's behavior. For now, you can change how it connects to IPFS.</p>
|
||||
<p>All settings are saved in your browser.</p>
|
||||
<div className="row">
|
||||
<div className="six columns">
|
||||
<label htmlFor="nodeAddress">IPFS Node</label>
|
||||
<input className="u-full-width" type="text" id="nodeAddress" value={this.state.addr} onChange={this.onChange} placeholder="localhost" />
|
||||
</div>
|
||||
<div className="six columns">
|
||||
<label htmlFor="nodePort">API Port</label>
|
||||
<input className="u-full-width" type="text" id="nodePort" value={this.state.port} onChange={this.onChange} placeholder="5001" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="buttons">
|
||||
<button className="button button-primary" onClick={this.save}>Save</button>
|
||||
<button className="button not-first" onClick={this.setDefaults}>Defaults</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
37
webapp/components/userID.jsx
Normal file
37
webapp/components/userID.jsx
Normal file
@ -0,0 +1,37 @@
|
||||
var React = require('react')
|
||||
var Icon = require('icon.jsx')
|
||||
var Link = require('react-router').Link
|
||||
|
||||
module.exports = function(boards){
|
||||
return React.createClass({
|
||||
getInitialState: function(){
|
||||
return { }
|
||||
},
|
||||
componentDidMount: function(){
|
||||
if(this.props.id) boards.getProfile(this.props.id, (err,res) => {
|
||||
if(!this.isMounted()) return true
|
||||
if(!err) {
|
||||
this.setState({ name: res.name || 'Unknown Name' })
|
||||
}
|
||||
})
|
||||
},
|
||||
getContent: function(){
|
||||
if(this.state.name){
|
||||
return (<Icon name="user" />)
|
||||
} else {
|
||||
return '@'
|
||||
}
|
||||
},
|
||||
render: function(){
|
||||
if(this.props.id)
|
||||
return (<div className="user-id">
|
||||
<Link className="light nounderline" to={'/@'+this.props.id}>
|
||||
{this.getContent()}{this.state.name || this.props.id}
|
||||
</Link>
|
||||
</div>)
|
||||
else return <div className="user-id">
|
||||
<Icon name="ban" /> Unknown User
|
||||
</div>
|
||||
}
|
||||
})
|
||||
}
|
||||
29
webapp/components/users.jsx
Normal file
29
webapp/components/users.jsx
Normal file
@ -0,0 +1,29 @@
|
||||
var React = require('react')
|
||||
var Icon = require('icon.jsx')
|
||||
|
||||
module.exports = function(boards){
|
||||
var UserID = require('userID.jsx')(boards)
|
||||
return React.createClass({
|
||||
getInitialState: function(){
|
||||
return { users: boards.getUsers() }
|
||||
},
|
||||
componentDidMount: function(){
|
||||
boards.searchUsers().on('user',(id) => {
|
||||
if(id === undefined) console.log('found undefined user???')
|
||||
if(this.isMounted() && this.state.users.indexOf(id) < 0)
|
||||
this.setState({ users: this.state.users.concat(id) })
|
||||
})
|
||||
},
|
||||
render: function(){
|
||||
return <div>
|
||||
<h1><Icon name="users" /> Users</h1>
|
||||
<p>Found <b>{this.state.users.length}</b> users</p>
|
||||
<ul>
|
||||
{this.state.users.map(user => {
|
||||
return <UserID key={user} id={user} />
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
}
|
||||
})
|
||||
}
|
||||
@ -13,7 +13,7 @@ module.exports = {
|
||||
},
|
||||
resolve: {
|
||||
modulesDirectories: [
|
||||
'node_modules', './webapp/', 'lib',
|
||||
'node_modules', './webapp/', 'lib', './webapp/components/',
|
||||
'node_modules/font-awesome/css', 'node_modules/font-awesome/fonts'
|
||||
],
|
||||
alias: {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user