mirror of
https://github.com/BoostIo/Boostnote
synced 2025-12-24 07:01:48 +00:00
before applying redux
This commit is contained in:
Rokt33r
@@ -1,41 +0,0 @@
|
||||
/* global localStorage */
|
||||
|
||||
var React = require('react/addons')
|
||||
var ReactRouter = require('react-router')
|
||||
var RouteHandler = ReactRouter.RouteHandler
|
||||
var State = ReactRouter.State
|
||||
var Navigation = ReactRouter.Navigation
|
||||
|
||||
var AuthFilter = require('../Mixins/AuthFilter')
|
||||
var KeyCaster = require('../Mixins/KeyCaster')
|
||||
|
||||
var HomeNavigator = require('../Components/HomeNavigator')
|
||||
|
||||
module.exports = React.createClass({
|
||||
mixins: [AuthFilter.OnlyUser, State, Navigation, KeyCaster('homeContainer')],
|
||||
componentDidMount: function () {
|
||||
if (this.isActive('homeEmpty')) {
|
||||
var user = JSON.parse(localStorage.getItem('currentUser'))
|
||||
if (user.Planets != null && user.Planets.length > 0) {
|
||||
this.transitionTo('planet', {userName: user.name, planetName: user.Planets[0].name})
|
||||
return
|
||||
}
|
||||
this.transitionTo('userHome', {userName: user.name})
|
||||
}
|
||||
},
|
||||
onKeyCast: function (e) {
|
||||
switch (e.status) {
|
||||
case 'switchPlanet':
|
||||
this.refs.navigator.switchPlanetByIndex(e.data)
|
||||
break
|
||||
}
|
||||
},
|
||||
render: function () {
|
||||
return (
|
||||
<div className='HomeContainer'>
|
||||
<HomeNavigator ref='navigator'/>
|
||||
<RouteHandler/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
92
browser/main/Containers/LoginContainer.js
Normal file
92
browser/main/Containers/LoginContainer.js
Normal file
@@ -0,0 +1,92 @@
|
||||
var Hq = require('../Services/Hq')
|
||||
var socket = require('../Services/socket')
|
||||
|
||||
import React, { PropTypes } from 'react'
|
||||
import { Link } from 'react-router'
|
||||
import linkState from '../helpers/linkState'
|
||||
|
||||
export default class LoginPage extends React.Component {
|
||||
constructor (props) {
|
||||
super(props)
|
||||
|
||||
this.state = {
|
||||
user: {},
|
||||
isSending: false,
|
||||
error: null
|
||||
}
|
||||
this.linkState = linkState
|
||||
}
|
||||
|
||||
handleSubmit (e) {
|
||||
e.preventDefault()
|
||||
this.setState({
|
||||
isSending: true,
|
||||
error: null
|
||||
}, function () {
|
||||
console.log(this.state.user)
|
||||
Hq.login(this.state.user)
|
||||
.then(function (res) {
|
||||
localStorage.setItem('token', res.body.token)
|
||||
localStorage.setItem('currentUser', JSON.stringify(res.body.user))
|
||||
|
||||
try {
|
||||
this.props.history.pushState('home')
|
||||
} catch(e) {
|
||||
console.error(e)
|
||||
}
|
||||
}.bind(this))
|
||||
.catch(function (err) {
|
||||
console.error(err)
|
||||
if (err.response == null) {
|
||||
return this.setState({
|
||||
error: {name: 'CunnectionRefused', message: 'API server doesn\'t respond. Check your internet connection.'},
|
||||
isSending: false
|
||||
})
|
||||
}
|
||||
|
||||
var res = err.response
|
||||
|
||||
// Connection Failed or Whatever
|
||||
this.setState({
|
||||
error: err.response.body,
|
||||
isSending: false
|
||||
})
|
||||
}.bind(this))
|
||||
})
|
||||
}
|
||||
|
||||
render () {
|
||||
return (
|
||||
<div className='LoginContainer'>
|
||||
<img className='logo' src='resources/favicon-230x230.png'/>
|
||||
|
||||
<nav className='authNavigator text-center'><Link to='/login' activeClassName='active'>Log In</Link> / <Link to='/signup' activeClassName='active'>Sign Up</Link></nav>
|
||||
|
||||
<form onSubmit={e => this.handleSubmit(e)}>
|
||||
<div className='formField'>
|
||||
<input valueLink={this.linkState('user.email')} type='text' placeholder='E-mail'/>
|
||||
</div>
|
||||
<div className='formField'>
|
||||
<input valueLink={this.linkState('user.password')} onChange={this.handleChange} type='password' placeholder='Password'/>
|
||||
</div>
|
||||
|
||||
{this.state.isSending ? (
|
||||
<p className='alertInfo'>Logging in...</p>
|
||||
) : null}
|
||||
|
||||
{this.state.error != null ? <p className='alertError'>{this.state.error.message}</p> : null}
|
||||
|
||||
<div className='formField'>
|
||||
<button className='logInButton' type='submit'>Log In</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
LoginPage.propTypes = {
|
||||
history: PropTypes.shape({
|
||||
pushState: PropTypes.func
|
||||
})
|
||||
}
|
||||
@@ -1,108 +0,0 @@
|
||||
/* global localStorage */
|
||||
var React = require('react/addons')
|
||||
var ReactRouter = require('react-router')
|
||||
var Link = ReactRouter.Link
|
||||
|
||||
var AuthFilter = require('../Mixins/AuthFilter')
|
||||
var LinkedState = require('../Mixins/LinkedState')
|
||||
var Hq = require('../Services/Hq')
|
||||
var socket = require('../Services/socket')
|
||||
|
||||
module.exports = React.createClass({
|
||||
mixins: [LinkedState, ReactRouter.Navigation, AuthFilter.OnlyGuest],
|
||||
getInitialState: function () {
|
||||
return {
|
||||
user: {},
|
||||
authenticationFailed: false,
|
||||
connectionFailed: false,
|
||||
isSending: false
|
||||
}
|
||||
},
|
||||
onListen: function (res) {
|
||||
if (res.status === 'failedToLogIn') {
|
||||
if (res.data.status === 401) {
|
||||
// Wrong E-mail or Password
|
||||
this.setState({
|
||||
authenticationFailed: true,
|
||||
connectionFailed: false,
|
||||
isSending: false
|
||||
})
|
||||
return
|
||||
}
|
||||
// Connection Failed or Whatever
|
||||
this.setState({
|
||||
authenticationFailed: false,
|
||||
connectionFailed: true,
|
||||
isSending: false
|
||||
})
|
||||
return
|
||||
}
|
||||
},
|
||||
handleSubmit: function (e) {
|
||||
this.setState({
|
||||
authenticationFailed: false,
|
||||
connectionFailed: false,
|
||||
isSending: true
|
||||
}, function () {
|
||||
Hq.login(this.state.user)
|
||||
.then(function (res) {
|
||||
localStorage.setItem('token', res.body.token)
|
||||
localStorage.setItem('currentUser', JSON.stringify(res.body.user))
|
||||
socket.reconnect()
|
||||
|
||||
this.transitionTo('userHome', {userName: res.body.user.name})
|
||||
}.bind(this))
|
||||
.catch(function (err) {
|
||||
if (err.status === 401) {
|
||||
this.setState({
|
||||
authenticationFailed: true,
|
||||
connectionFailed: false,
|
||||
isSending: false
|
||||
})
|
||||
return
|
||||
}
|
||||
this.setState({
|
||||
authenticationFailed: false,
|
||||
connectionFailed: true,
|
||||
isSending: false
|
||||
})
|
||||
}.bind(this))
|
||||
})
|
||||
|
||||
e.preventDefault()
|
||||
},
|
||||
render: function () {
|
||||
return (
|
||||
<div className='LoginContainer'>
|
||||
<img className='logo' src='resources/favicon-230x230.png'/>
|
||||
|
||||
<nav className='authNavigator text-center'><Link to='login'>Log In</Link> / <Link to='signup'>Sign Up</Link></nav>
|
||||
|
||||
<form onSubmit={this.handleSubmit}>
|
||||
<div className='form-group'>
|
||||
<input className='stripInput' valueLink={this.linkState('user.email')} type='text' placeholder='E-mail'/>
|
||||
</div>
|
||||
<div className='form-group'>
|
||||
<input className='stripInput' valueLink={this.linkState('user.password')} onChange={this.handleChange} type='password' placeholder='Password'/>
|
||||
</div>
|
||||
|
||||
{this.state.isSending ? (
|
||||
<p className='alertInfo'>Logging in...</p>
|
||||
) : null}
|
||||
|
||||
{this.state.connectionFailed ? (
|
||||
<p className='alertError'>Please try again.</p>
|
||||
) : null}
|
||||
|
||||
{this.state.authenticationFailed ? (
|
||||
<p className='alertError'>Wrong E-mail or Password.</p>
|
||||
) : null}
|
||||
|
||||
<div className='form-group'>
|
||||
<button className='logInButton' type='submit'>Log In</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
45
browser/main/Containers/MainContainer.js
Normal file
45
browser/main/Containers/MainContainer.js
Normal file
@@ -0,0 +1,45 @@
|
||||
var ipc = require('ipc')
|
||||
import React, { PropTypes } from 'react'
|
||||
|
||||
var ContactModal = require('../Components/ContactModal')
|
||||
|
||||
export default class MainContainer extends React.Component {
|
||||
// mixins: [Modal],
|
||||
constructor (props) {
|
||||
super(props)
|
||||
this.state = {updateAvailable: false}
|
||||
}
|
||||
|
||||
componentDidMount () {
|
||||
ipc.on('update-available', function (message) {
|
||||
this.setState({updateAvailable: true})
|
||||
}.bind(this))
|
||||
}
|
||||
|
||||
updateApp () {
|
||||
ipc.send('update-app', 'Deal with it.')
|
||||
}
|
||||
|
||||
openContactModal () {
|
||||
this.openModal(ContactModal)
|
||||
}
|
||||
|
||||
render () {
|
||||
return (
|
||||
<div className='Main'>
|
||||
{this.state.updateAvailable ? (
|
||||
<button onClick={this.updateApp} className='appUpdateButton'><i className='fa fa-cloud-download'/> Update available!</button>
|
||||
) : null}
|
||||
<button onClick={this.openContactModal} className='contactButton'>
|
||||
<i className='fa fa-paper-plane-o'/>
|
||||
<div className='tooltip'>Contact us</div>
|
||||
</button>
|
||||
{this.props.children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
MainContainer.propTypes = {
|
||||
children: PropTypes.element
|
||||
}
|
||||
@@ -1,107 +0,0 @@
|
||||
/* global localStorage */
|
||||
|
||||
var ipc = require('ipc')
|
||||
|
||||
var React = require('react/addons')
|
||||
var ReactRouter = require('react-router')
|
||||
var RouteHandler = ReactRouter.RouteHandler
|
||||
var Navigation = ReactRouter.Navigation
|
||||
var State = ReactRouter.State
|
||||
|
||||
var Hq = require('../Services/Hq')
|
||||
var socket = require('../Services/socket')
|
||||
|
||||
var Modal = require('../Mixins/Modal')
|
||||
|
||||
var UserStore = require('../Stores/UserStore')
|
||||
|
||||
var ContactModal = require('../Components/ContactModal')
|
||||
|
||||
function fetchPlanet (userName, planetName) {
|
||||
return Hq.fetchPlanet(userName, planetName)
|
||||
.then(function (res) {
|
||||
var planet = res.body
|
||||
|
||||
planet.Codes.forEach(function (code) {
|
||||
code.type = 'code'
|
||||
})
|
||||
|
||||
planet.Notes.forEach(function (note) {
|
||||
note.type = 'note'
|
||||
})
|
||||
|
||||
localStorage.setItem('planet-' + planet.id, JSON.stringify(planet))
|
||||
|
||||
return planet
|
||||
})
|
||||
.catch(function (err) {
|
||||
console.error(err)
|
||||
})
|
||||
}
|
||||
|
||||
module.exports = React.createClass({
|
||||
mixins: [State, Navigation, Modal],
|
||||
getInitialState: function () {
|
||||
return {
|
||||
updateAvailable: false
|
||||
}
|
||||
},
|
||||
componentDidMount: function () {
|
||||
ipc.on('update-available', function (message) {
|
||||
this.setState({updateAvailable: true})
|
||||
}.bind(this))
|
||||
|
||||
if (this.isActive('root')) {
|
||||
if (localStorage.getItem('currentUser') == null) {
|
||||
this.transitionTo('login')
|
||||
return
|
||||
} else {
|
||||
this.transitionTo('home')
|
||||
}
|
||||
}
|
||||
|
||||
Hq.getUser()
|
||||
.then(function (res) {
|
||||
var user = res.body
|
||||
UserStore.Actions.update(user)
|
||||
|
||||
user.Planets.forEach(function (planet) {
|
||||
fetchPlanet(user.name, planet.name)
|
||||
})
|
||||
user.Teams.forEach(function (team) {
|
||||
team.Planets.forEach(function (planet) {
|
||||
fetchPlanet(team.name, planet.name)
|
||||
})
|
||||
})
|
||||
})
|
||||
.catch(function (err) {
|
||||
if (err.status === 401) {
|
||||
console.log('Not logged in yet')
|
||||
localStorage.removeItem('currentUser')
|
||||
this.transitionTo('login')
|
||||
return
|
||||
}
|
||||
console.error(err)
|
||||
}.bind(this))
|
||||
},
|
||||
updateApp: function () {
|
||||
ipc.send('update-app', 'Deal with it.')
|
||||
},
|
||||
openContactModal: function () {
|
||||
this.openModal(ContactModal)
|
||||
},
|
||||
render: function () {
|
||||
return (
|
||||
<div className='Main'>
|
||||
{this.state.updateAvailable ? (
|
||||
<button onClick={this.updateApp} className='appUpdateButton'><i className='fa fa-cloud-download'/> Update available!</button>
|
||||
) : null}
|
||||
<button onClick={this.openContactModal} className='contactButton'>
|
||||
<i className='fa fa-paper-plane-o'/>
|
||||
<div className='tooltip'>Contact us</div>
|
||||
</button>
|
||||
<RouteHandler/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
@@ -1,6 +1,5 @@
|
||||
/* global localStorage*/
|
||||
'strict'
|
||||
var React = require('react/addons')
|
||||
var React = require('react')
|
||||
var ReactRouter = require('react-router')
|
||||
var Reflux = require('reflux')
|
||||
|
||||
98
browser/main/Containers/SignupContainer.js
Normal file
98
browser/main/Containers/SignupContainer.js
Normal file
@@ -0,0 +1,98 @@
|
||||
import React, { PropTypes } from 'react'
|
||||
import { Link } from 'react-router'
|
||||
import linkState from '../helpers/linkState'
|
||||
import openExternal from '../helpers/openExternal'
|
||||
|
||||
var Hq = require('../Services/Hq')
|
||||
|
||||
export default class SignupContainer extends React.Component {
|
||||
constructor (props) {
|
||||
super(props)
|
||||
this.state = {
|
||||
user: {},
|
||||
connectionFailed: false,
|
||||
emailConflicted: false,
|
||||
nameConflicted: false,
|
||||
validationFailed: false,
|
||||
isSending: false,
|
||||
error: null
|
||||
}
|
||||
this.linkState = linkState
|
||||
this.openExternal = openExternal
|
||||
}
|
||||
|
||||
handleSubmit (e) {
|
||||
this.setState({
|
||||
isSending: true,
|
||||
error: null
|
||||
}, function () {
|
||||
Hq.signup(this.state.user)
|
||||
.then(res => {
|
||||
localStorage.setItem('token', res.body.token)
|
||||
localStorage.setItem('currentUser', JSON.stringify(res.body.user))
|
||||
|
||||
this.props.history.pushState('userHome', {userId: res.body.user.id})
|
||||
})
|
||||
.catch(function (err) {
|
||||
console.error(err)
|
||||
if (err.response == null) {
|
||||
return this.setState({
|
||||
error: {name: 'CunnectionRefused', message: 'API server doesn\'t respond. Check your internet connection.'},
|
||||
isSending: false
|
||||
})
|
||||
}
|
||||
|
||||
// Connection Failed or Whatever
|
||||
this.setState({
|
||||
error: err.response.body,
|
||||
isSending: false
|
||||
})
|
||||
}.bind(this))
|
||||
})
|
||||
|
||||
e.preventDefault()
|
||||
}
|
||||
|
||||
render () {
|
||||
return (
|
||||
<div className='SignupContainer'>
|
||||
<img className='logo' src='resources/favicon-230x230.png'/>
|
||||
|
||||
<nav className='authNavigator text-center'><Link to='/login' activeClassName='active'>Log In</Link> / <Link to='/signup' activeClassName='active'>Sign Up</Link></nav>
|
||||
|
||||
<form onSubmit={e => this.handleSubmit(e)}>
|
||||
<div className='formField'>
|
||||
<input valueLink={this.linkState('user.email')} type='text' placeholder='E-mail'/>
|
||||
</div>
|
||||
<div className='formField'>
|
||||
<input valueLink={this.linkState('user.password')} type='password' placeholder='Password'/>
|
||||
</div>
|
||||
<div className='formField'>
|
||||
<input valueLink={this.linkState('user.name')} type='text' placeholder='name'/>
|
||||
</div>
|
||||
<div className='formField'>
|
||||
<input valueLink={this.linkState('user.profileName')} type='text' placeholder='Profile name'/>
|
||||
</div>
|
||||
|
||||
{this.state.isSending ? (
|
||||
<p className='alertInfo'>Signing up...</p>
|
||||
) : null}
|
||||
|
||||
{this.state.error != null ? <p className='alertError'>{this.state.error.message}</p> : null}
|
||||
|
||||
<div className='formField'>
|
||||
<button className='logInButton' type='submit'>Sign Up</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<p className='alert'>会員登録することで、<a onClick={this.openExternal} href='http://boostio.github.io/regulations.html'>当サイトの利用規約</a>及び<a onClick={this.openExternal} href='http://boostio.github.io/privacypolicies.html'>Cookieの使用を含むデータに関するポリシー</a>に同意するものとします。</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
SignupContainer.propTypes = {
|
||||
history: PropTypes.shape({
|
||||
pushState: PropTypes.func
|
||||
})
|
||||
}
|
||||
@@ -1,139 +0,0 @@
|
||||
/* global localStorage */
|
||||
|
||||
var React = require('react/addons')
|
||||
var ReactRouter = require('react-router')
|
||||
var Link = ReactRouter.Link
|
||||
|
||||
var AuthFilter = require('../Mixins/AuthFilter')
|
||||
var LinkedState = require('../Mixins/LinkedState')
|
||||
var ExternalLink = require('../Mixins/ExternalLink')
|
||||
var Hq = require('../Services/Hq')
|
||||
var socket = require('../Services/socket')
|
||||
|
||||
module.exports = React.createClass({
|
||||
mixins: [LinkedState, ReactRouter.Navigation, AuthFilter.OnlyGuest, ExternalLink],
|
||||
getInitialState: function () {
|
||||
return {
|
||||
user: {},
|
||||
connectionFailed: false,
|
||||
emailConflicted: false,
|
||||
nameConflicted: false,
|
||||
validationFailed: false,
|
||||
isSending: false
|
||||
}
|
||||
},
|
||||
handleSubmit: function (e) {
|
||||
this.setState({
|
||||
connectionFailed: false,
|
||||
emailConflicted: false,
|
||||
nameConflicted: false,
|
||||
validationFailed: false,
|
||||
isSending: true
|
||||
}, function () {
|
||||
Hq.signup(this.state.user)
|
||||
.then(function (res) {
|
||||
localStorage.setItem('token', res.body.token)
|
||||
localStorage.setItem('currentUser', JSON.stringify(res.body.user))
|
||||
socket.reconnect()
|
||||
|
||||
this.transitionTo('userHome', {userName: res.body.user.name})
|
||||
}.bind(this))
|
||||
.catch(function (err) {
|
||||
console.error(err)
|
||||
var res = err.response
|
||||
if (err.status === 409) {
|
||||
// Confliction
|
||||
var emailConflicted = res.body.errors[0].path === 'email'
|
||||
var nameConflicted = res.body.errors[0].path === 'name'
|
||||
|
||||
this.setState({
|
||||
connectionFailed: false,
|
||||
emailConflicted: emailConflicted,
|
||||
nameConflicted: nameConflicted,
|
||||
validationFailed: false,
|
||||
isSending: false
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
if (err.status === 422) {
|
||||
// Validation Failed
|
||||
this.setState({
|
||||
connectionFailed: false,
|
||||
emailConflicted: false,
|
||||
nameConflicted: false,
|
||||
validationFailed: {
|
||||
errors: res.body.errors.map(function (error) {
|
||||
return error.path
|
||||
})
|
||||
},
|
||||
isSending: false
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
// Connection Failed or Whatever
|
||||
this.setState({
|
||||
connectionFailed: true,
|
||||
emailConflicted: false,
|
||||
nameConflicted: false,
|
||||
validationFailed: false,
|
||||
isSending: false
|
||||
})
|
||||
return
|
||||
}.bind(this))
|
||||
})
|
||||
|
||||
e.preventDefault()
|
||||
},
|
||||
render: function () {
|
||||
return (
|
||||
<div className='SignupContainer'>
|
||||
<img className='logo' src='resources/favicon-230x230.png'/>
|
||||
|
||||
<nav className='authNavigator text-center'><Link to='login'>Log In</Link> / <Link to='signup'>Sign Up</Link></nav>
|
||||
|
||||
<form onSubmit={this.handleSubmit}>
|
||||
<div className='form-group'>
|
||||
<input className='stripInput' valueLink={this.linkState('user.email')} type='text' placeholder='E-mail'/>
|
||||
</div>
|
||||
<div className='form-group'>
|
||||
<input className='stripInput' valueLink={this.linkState('user.password')} type='password' placeholder='Password'/>
|
||||
</div>
|
||||
<div className='form-group'>
|
||||
<input className='stripInput' valueLink={this.linkState('user.name')} type='text' placeholder='name'/>
|
||||
</div>
|
||||
<div className='form-group'>
|
||||
<input className='stripInput' valueLink={this.linkState('user.profileName')} type='text' placeholder='Profile name'/>
|
||||
</div>
|
||||
|
||||
{this.state.isSending ? (
|
||||
<p className='alertInfo'>Signing up...</p>
|
||||
) : null}
|
||||
|
||||
{this.state.connectionFailed ? (
|
||||
<p className='alertError'>Please try again.</p>
|
||||
) : null}
|
||||
|
||||
{this.state.emailConflicted ? (
|
||||
<p className='alertError'>E-mail already exists.</p>
|
||||
) : null}
|
||||
|
||||
{this.state.nameConflicted ? (
|
||||
<p className='alertError'>Username already exists.</p>
|
||||
) : null}
|
||||
|
||||
{this.state.validationFailed ? (
|
||||
<p className='alertError'>Please fill every field correctly: {this.state.validationFailed.errors.join(', ')}</p>
|
||||
) : null}
|
||||
|
||||
<div className='form-group'>
|
||||
<button className='logInButton' type='submit'>Sign Up</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<p className='alert'>会員登録することで、<a onClick={this.openExternal} href='http://boostio.github.io/regulations.html'>当サイトの利用規約</a>及び<a onClick={this.openExternal} href='http://boostio.github.io/privacypolicies.html'>Cookieの使用を含むデータに関するポリシー</a>に同意するものとします。</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
@@ -1,367 +0,0 @@
|
||||
/* global localStorage */
|
||||
|
||||
var React = require('react/addons')
|
||||
var ReactRouter = require('react-router')
|
||||
var Navigation = ReactRouter.Navigation
|
||||
var State = ReactRouter.State
|
||||
var RouteHandler = ReactRouter.RouteHandler
|
||||
var Link = ReactRouter.Link
|
||||
var Reflux = require('reflux')
|
||||
|
||||
var LinkedState = require('../Mixins/LinkedState')
|
||||
var Modal = require('../Mixins/Modal')
|
||||
var Helper = require('../Mixins/Helper')
|
||||
|
||||
var Hq = require('../Services/Hq')
|
||||
|
||||
var ProfileImage = require('../Components/ProfileImage')
|
||||
var EditProfileModal = require('../Components/EditProfileModal')
|
||||
var TeamSettingsModal = require('../Components/TeamSettingsModal')
|
||||
var PlanetCreateModal = require('../Components/PlanetCreateModal')
|
||||
var AddMemberModal = require('../Components/AddMemberModal')
|
||||
var TeamCreateModal = require('../Components/TeamCreateModal')
|
||||
|
||||
var UserStore = require('../Stores/UserStore')
|
||||
var PlanetStore = require('../Stores/PlanetStore')
|
||||
|
||||
module.exports = React.createClass({
|
||||
mixins: [LinkedState, State, Navigation, Modal, Reflux.listenTo(UserStore, 'onUserChange'), Reflux.listenTo(PlanetStore, 'onPlanetChange'), Helper],
|
||||
propTypes: {
|
||||
params: React.PropTypes.shape({
|
||||
userName: React.PropTypes.string,
|
||||
planetName: React.PropTypes.string
|
||||
})
|
||||
},
|
||||
getInitialState: function () {
|
||||
return {
|
||||
user: null
|
||||
}
|
||||
},
|
||||
componentDidMount: function () {
|
||||
this.fetchUser()
|
||||
},
|
||||
componentWillReceiveProps: function (nextProps) {
|
||||
if (this.state.user == null) {
|
||||
this.fetchUser(nextProps.params.userName)
|
||||
return
|
||||
}
|
||||
|
||||
if (nextProps.params.userName !== this.state.user.name) {
|
||||
this.setState({
|
||||
user: null
|
||||
}, function () {
|
||||
this.fetchUser(nextProps.params.userName)
|
||||
})
|
||||
}
|
||||
},
|
||||
onUserChange: function (res) {
|
||||
if (this.state.user == null) return
|
||||
|
||||
var member
|
||||
switch (res.status) {
|
||||
case 'userUpdated':
|
||||
if (this.state.user.id === res.data.id) {
|
||||
this.setState({user: res.data})
|
||||
}
|
||||
break
|
||||
case 'memberAdded':
|
||||
member = res.data
|
||||
if (this.state.user.userType === 'team' && member.TeamMember.TeamId === this.state.user.id) {
|
||||
this.state.user.Members = this.updateItemToTargetArray(member, this.state.user.Members)
|
||||
|
||||
this.setState({user: this.state.user})
|
||||
}
|
||||
break
|
||||
case 'memberRemoved':
|
||||
member = res.data
|
||||
if (this.state.user.userType === 'team' && member.TeamMember.TeamId === this.state.user.id) {
|
||||
this.state.user.Members = this.deleteItemFromTargetArray(member, this.state.user.Members)
|
||||
|
||||
this.setState({user: this.state.user})
|
||||
}
|
||||
break
|
||||
}
|
||||
},
|
||||
onPlanetChange: function (res) {
|
||||
if (this.state.user == null) return
|
||||
|
||||
var currentUser, planet, isOwner, team
|
||||
switch (res.status) {
|
||||
case 'updated':
|
||||
// if state.user is currentUser, planet will be fetched by UserStore
|
||||
currentUser = JSON.parse(localStorage.getItem('currentUser'))
|
||||
if (currentUser.id === this.state.user.id) return
|
||||
|
||||
planet = res.data
|
||||
isOwner = planet.Owner.id === this.state.user.id
|
||||
if (isOwner) {
|
||||
this.state.user.Planets = this.updateItemToTargetArray(planet, this.state.user.Planets)
|
||||
this.setState({user: this.state.user})
|
||||
return
|
||||
}
|
||||
// check if team of user has this planet
|
||||
team = null
|
||||
this.state.user.userType !== 'team' && this.state.user.Teams.some(function (_team) {
|
||||
if (planet.Owner.id === _team.id) {
|
||||
team = _team
|
||||
return true
|
||||
}
|
||||
return false
|
||||
})
|
||||
if (team != null) {
|
||||
team.Planets = this.updateItemToTargetArray(planet, team.Planets)
|
||||
this.setState({user: this.state.user})
|
||||
return
|
||||
}
|
||||
|
||||
break
|
||||
case 'destroyed':
|
||||
// if state.user is currentUser, planet will be fetched by UserStore
|
||||
currentUser = JSON.parse(localStorage.getItem('currentUser'))
|
||||
if (currentUser.id === this.state.user.id) return
|
||||
|
||||
planet = res.data
|
||||
isOwner = planet.Owner.id === this.state.user.id
|
||||
if (isOwner) {
|
||||
this.state.user.Planets = this.deleteItemFromTargetArray(planet, this.state.user.Planets)
|
||||
this.setState({user: this.state.user})
|
||||
return
|
||||
}
|
||||
// check if team of user has this planet
|
||||
team = null
|
||||
this.state.user.userType !== 'team' && this.state.user.Teams.some(function (_team) {
|
||||
if (planet.Owner.id === _team.id) {
|
||||
team = _team
|
||||
return true
|
||||
}
|
||||
return false
|
||||
})
|
||||
if (team != null) {
|
||||
team.Planets = this.deleteItemFromTargetArray(planet, team.Planets)
|
||||
this.setState({user: this.state.user})
|
||||
return
|
||||
}
|
||||
break
|
||||
}
|
||||
},
|
||||
fetchUser: function (userName) {
|
||||
if (userName == null) userName = this.props.params.userName
|
||||
|
||||
Hq.fetchUser(userName)
|
||||
.then(function (res) {
|
||||
this.setState({user: res.body})
|
||||
}.bind(this))
|
||||
.catch(function (err) {
|
||||
console.error(err)
|
||||
})
|
||||
},
|
||||
openEditProfileModal: function () {
|
||||
this.openModal(EditProfileModal, {user: this.state.user})
|
||||
},
|
||||
openTeamSettingsModal: function () {
|
||||
this.openModal(TeamSettingsModal, {team: this.state.user})
|
||||
},
|
||||
openAddUserModal: function () {
|
||||
this.openModal(AddMemberModal, {team: this.state.user})
|
||||
},
|
||||
openTeamCreateModal: function () {
|
||||
this.openModal(TeamCreateModal, {user: this.state.user})
|
||||
},
|
||||
openPlanetCreateModalWithOwnerName: function (name) {
|
||||
return function () {
|
||||
this.openModal(PlanetCreateModal, {ownerName: name})
|
||||
}.bind(this)
|
||||
},
|
||||
render: function () {
|
||||
var user = this.state.user
|
||||
|
||||
var currentUser = JSON.parse(localStorage.getItem('currentUser'))
|
||||
|
||||
if (this.isActive('userHome')) {
|
||||
if (user == null) {
|
||||
return (
|
||||
<div className='UserContainer'>
|
||||
User Loading...
|
||||
</div>
|
||||
)
|
||||
} else if (user.userType === 'team') {
|
||||
return this.renderTeamHome(currentUser)
|
||||
} else {
|
||||
return this.renderUserHome(currentUser)
|
||||
}
|
||||
} else if (this.isActive('planet') && user != null && user.userType === 'team') {
|
||||
var members = user.Members.map(function (member) {
|
||||
return (
|
||||
<li key={'user-' + member.id}><Link to='userHome' params={{userName: member.name}}>
|
||||
<ProfileImage className='memberImage' size='22' email={member.email}/>
|
||||
<div className='memberInfo'>
|
||||
<div className='memberProfileName'>{member.profileName}</div>
|
||||
<div className='memberName'>@{member.name}</div>
|
||||
</div>
|
||||
</Link></li>
|
||||
)
|
||||
})
|
||||
return (
|
||||
<div className='UserContainer'>
|
||||
<RouteHandler/>
|
||||
<div className='memberPopup'>
|
||||
<div className='label'>Members</div>
|
||||
<ul className='members'>
|
||||
{members}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
} else {
|
||||
return (
|
||||
<div className='UserContainer'>
|
||||
<RouteHandler/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
},
|
||||
renderTeamHome: function (currentUser) {
|
||||
var user = this.state.user
|
||||
|
||||
var isOwner = user.Members == null ? false : user.Members.some(function (member) {
|
||||
return member.id === currentUser.id && member.TeamMember.role === 'owner'
|
||||
})
|
||||
|
||||
var userPlanets = user.Planets.map(function (planet) {
|
||||
return (
|
||||
<li key={'planet-' + planet.id}>
|
||||
<Link to='planet' params={{userName: user.name, planetName: planet.name}}>{user.name}/{planet.name}</Link>
|
||||
{!planet.public ? (<i className='fa fa-lock'/>) : null}
|
||||
</li>
|
||||
)
|
||||
})
|
||||
|
||||
var members = user.Members == null ? [] : user.Members.map(function (member) {
|
||||
return (
|
||||
<li key={'user-' + member.id}>
|
||||
<Link to='userHome' params={{userName: member.name}}>
|
||||
<ProfileImage size='22' className='memberImage' email={member.email}/>
|
||||
<div className='memberInfo'>
|
||||
<div className='memberProfileName'>{member.profileName} <span className='memberRole'>({member.TeamMember.role})</span></div>
|
||||
<div className='memberName'>@{member.name}</div>
|
||||
</div>
|
||||
</Link>
|
||||
<div className='role'></div>
|
||||
</li>
|
||||
)
|
||||
})
|
||||
return (
|
||||
<div className='UserContainer'>
|
||||
<div className='userProfile'>
|
||||
<ProfileImage className='userPhoto' size='75' email={user.email}/>
|
||||
<div className='userInfo'>
|
||||
<div className='userProfileName'>{user.profileName}</div>
|
||||
<div className='userName'>{user.name}</div>
|
||||
</div>
|
||||
|
||||
{isOwner ? (<button onClick={this.openTeamSettingsModal} className='editProfileButton'>Team settings</button>) : null}
|
||||
</div>
|
||||
<div className='memberList'>
|
||||
<div className='memberLabel'>{members.length} {members.length > 1 ? 'Members' : 'Member'}</div>
|
||||
<ul className='members'>
|
||||
{members}
|
||||
{isOwner ? (<li><button onClick={this.openAddUserModal} className='addMemberButton'><i className='fa fa-plus-square-o'/> add Member</button></li>) : null}
|
||||
</ul>
|
||||
</div>
|
||||
<div className='planetList'>
|
||||
<div className='planetLabel'>{userPlanets.length} {userPlanets.length > 0 ? 'Planets' : 'Planet'}</div>
|
||||
<div className='planetGroup'>
|
||||
<ul className='planets'>
|
||||
{userPlanets}
|
||||
{isOwner ? (<li><button onClick={this.openPlanetCreateModalWithOwnerName(user.name)} className='createPlanetButton'><i className='fa fa-plus-square-o'/> Create new planet</button></li>) : null}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
renderUserHome: function (currentUser) {
|
||||
var user = this.state.user
|
||||
|
||||
var isOwner = currentUser.id === user.id
|
||||
|
||||
var userPlanets = user.Planets.map(function (planet) {
|
||||
return (
|
||||
<li key={'planet-' + planet.id}>
|
||||
<Link to='planet' params={{userName: user.name, planetName: planet.name}}>{user.name}/{planet.name}</Link>
|
||||
{!planet.public ? (<i className='fa fa-lock'/>) : null}
|
||||
</li>
|
||||
)
|
||||
})
|
||||
|
||||
var teams = user.Teams == null ? [] : user.Teams.map(function (team) {
|
||||
return (
|
||||
<li key={'user-' + team.id}>
|
||||
<Link to='userHome' params={{userName: team.name}}>
|
||||
<div className='teamInfo'>
|
||||
<div className='teamProfileName'>{team.profileName}</div>
|
||||
<div className='teamName'>@{team.name}</div>
|
||||
</div>
|
||||
</Link>
|
||||
</li>
|
||||
)
|
||||
})
|
||||
|
||||
var teamPlanets = user.Teams == null ? [] : user.Teams.map(function (team) {
|
||||
var planets = (team.Planets == null ? [] : team.Planets).map(function (planet) {
|
||||
return (
|
||||
<li key={'planet-' + planet.id}>
|
||||
<Link to='planet' params={{userName: team.name, planetName: planet.name}}>{team.name}/{planet.name}</Link>
|
||||
{!planet.public ? (<i className='fa fa-lock'/>) : null}
|
||||
</li>
|
||||
)
|
||||
})
|
||||
return (
|
||||
<div key={'user-' + team.id} className='planetGroup'>
|
||||
<div className='planetGroupLabel'>{team.profileName} <small>@{team.name}</small></div>
|
||||
<ul className='planets'>
|
||||
{planets}
|
||||
{isOwner ? (<li><button onClick={this.openPlanetCreateModalWithOwnerName(team.name)} className='createPlanetButton'><i className='fa fa-plus-square-o'/> Create new planet</button></li>) : null}
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
}.bind(this))
|
||||
|
||||
var planetCount = userPlanets.length + user.Teams.reduce(function (sum, team) {
|
||||
return sum + (team.Planets != null ? team.Planets.length : 0)
|
||||
}, 0)
|
||||
|
||||
return (
|
||||
<div className='UserContainer'>
|
||||
<div className='userProfile'>
|
||||
<ProfileImage className='userPhoto' size='75' email={user.email}/>
|
||||
<div className='userInfo'>
|
||||
<div className='userProfileName'>{user.profileName}</div>
|
||||
<div className='userName'>{user.name}</div>
|
||||
</div>
|
||||
|
||||
{isOwner ? (
|
||||
<button onClick={this.openEditProfileModal} className='editProfileButton'>Edit profile</button>) : null}
|
||||
</div>
|
||||
<div className='teamList'>
|
||||
<div className='teamLabel'>{teams.length} {teams.length > 1 ? 'Teams' : 'Team'}</div>
|
||||
<ul className='teams'>
|
||||
{teams}
|
||||
{isOwner ? (<li><button onClick={this.openTeamCreateModal} className='createTeamButton'><i className='fa fa-plus-square-o'/> Create new team</button></li>) : null}
|
||||
</ul>
|
||||
</div>
|
||||
<div className='planetList'>
|
||||
<div className='planetLabel'>{planetCount} {planetCount > 1 ? 'Planets' : 'Planet'}</div>
|
||||
<div className='planetGroup'>
|
||||
<div className='planetGroupLabel'>{user.profileName} <small>@{user.name}</small></div>
|
||||
<ul className='planets'>
|
||||
{userPlanets}
|
||||
{isOwner ? (<li><button onClick={this.openPlanetCreateModalWithOwnerName(user.name)} className='createPlanetButton'><i className='fa fa-plus-square-o'/> Create new planet</button></li>) : null}
|
||||
</ul>
|
||||
</div>
|
||||
{teamPlanets}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
Reference in New Issue
Block a user