Skip to content

Commit 1690e64

Browse files
Rokt33rRokt33r
committed
set design create team modal
1 parent acdf61f commit 1690e64

20 files changed

Lines changed: 815 additions & 461 deletions

File tree

‎browser/main/Components/UserNavigator.jsx‎

Lines changed: 0 additions & 53 deletions
This file was deleted.

‎browser/main/Containers/LoginContainer.js‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -39,13 +39,11 @@ export default class LoginPage extends React.Component {
3939
console.error(err)
4040
if (err.response == null) {
4141
return this.setState({
42-
error: {name: 'CunnectionRefused', message: 'API server doesn\'t respond. Check your internet connection.'},
42+
error: {name: 'CunnectionRefused', message: 'Can\'t connect to API server.'},
4343
isSending: false
4444
})
4545
}
4646

47-
var res = err.response
48-
4947
// Connection Failed or Whatever
5048
this.setState({
5149
error: err.response.body,

‎browser/main/Containers/SignupContainer.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ export default class SignupContainer extends React.Component {
3737
console.error(err)
3838
if (err.response == null) {
3939
return this.setState({
40-
error: {name: 'CunnectionRefused', message: 'API server doesn\'t respond. Check your internet connection.'},
40+
error: {name: 'CunnectionRefused', message: 'Can\'t connect to API server.'},
4141
isSending: false
4242
})
4343
}

‎browser/main/HomeContainer/Components/UserNavigator.js‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,18 @@
11
import React, { Component, PropTypes } from 'react'
22
import { Link } from 'react-router'
33
import ProfileImage from '../../components/ProfileImage'
4+
import { openModal } from '../lib/modal'
5+
import CreateNewTeam from '../lib/modal/CreateNewTeam'
46

57
export default class UserNavigator extends Component {
8+
handleClick (e) {
9+
openModal(CreateNewTeam)
10+
}
11+
12+
// for dev
13+
componentDidMount () {
14+
openModal(CreateNewTeam)
15+
}
616

717
renderUserList () {
818
var users = this.props.users.map((user, index) => (
@@ -26,7 +36,7 @@ export default class UserNavigator extends Component {
2636
return (
2737
<div className='UserNavigator'>
2838
{this.renderUserList()}
29-
<button className='createTeamBtn'>
39+
<button className='createTeamBtn' onClick={e => this.handleClick(e)}>
3040
+
3141
<div className='tooltip'>Create a new team</div>
3242
</button>

‎browser/main/HomeContainer/lib/api.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
var request = require('superagent-promise')(require('superagent'), Promise)
2+
var apiUrl = require('../../../../config').apiUrl
3+
4+
export function createTeam (input) {
5+
return request
6+
.post(apiUrl + 'teams')
7+
.set({
8+
Authorization: 'Bearer ' + localStorage.getItem('token')
9+
})
10+
.send(input)
11+
}

‎browser/main/HomeContainer/lib/modal/CreateNewTeam.js‎

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
import React, { PropTypes } from 'react'
2+
import ProfileImage from '../../../components/ProfileImage'
3+
import { createTeam } from '../api'
4+
import linkState from '../../../helpers/linkState'
5+
6+
export default class CreateNewTeam extends React.Component {
7+
constructor (props) {
8+
super(props)
9+
this.state = {
10+
create: {
11+
name: '',
12+
alert: null
13+
},
14+
select: {
15+
team: {"name":"test123",
16+
"profileName":"test123",
17+
"userType":"team",
18+
"updatedAt":"2015-10-11T09:01:01.277Z",
19+
"createdAt":"2015-10-11T09:01:01.277Z",
20+
"id":220,"Members":[{"id":213,"email":"fluke8259@gmail.com","name":"rokt33r","profileName":"Rokt33r","userType":"person","createdAt":"2015-10-05T09:01:30.000Z","updatedAt":"2015-10-05T09:01:30.000Z","_pivot_TeamId":220,"_pivot_MemberId":213,"_pivot_role":"owner"}]
21+
},
22+
alert: null
23+
},
24+
currentTab: 'select'
25+
}
26+
}
27+
28+
handleCloseClick (e) {
29+
this.props.close()
30+
}
31+
32+
handleContinueClick (e) {
33+
let createState = this.state.create
34+
createState.isSending = true
35+
createState.alert = {
36+
type: 'info',
37+
message: 'sending...'
38+
}
39+
this.setState({create: createState})
40+
41+
function onTeamCreate (res) {
42+
let createState = this.state.create
43+
createState.isSending = false
44+
createState.alert = null
45+
46+
let selectState = this.state.select
47+
selectState.team = res.body
48+
49+
this.setState({
50+
currentTab: 'select',
51+
create: createState,
52+
select: {
53+
team: res.body
54+
}
55+
})
56+
}
57+
58+
function onError (err) {
59+
let errorMessage = err.response != null ? err.response.body.message : err.message
60+
61+
let createState = this.state.create
62+
createState.isSending = false
63+
createState.alert = {
64+
type: 'error',
65+
message: 'Can\'t connect to API server.'
66+
}
67+
68+
this.setState({
69+
create: createState
70+
})
71+
}
72+
73+
createTeam({name: this.state.create.name})
74+
.then(onTeamCreate.bind(this))
75+
.catch(onError.bind(this))
76+
}
77+
78+
renderCreateTab () {
79+
let createState = this.state.create
80+
let alertEl = createState.alert != null ? (
81+
<p className={['alert'].concat([createState.alert.type]).join(' ')}>{createState.alert.message}</p>
82+
) : null
83+
84+
return (
85+
<div className='createTab'>
86+
<div className='title'>Create new team</div>
87+
88+
<input valueLink={linkState(this, 'create.name')} className='ipt' type='text' placeholder='Enter your team name'/>
89+
{alertEl}
90+
<button onClick={e => this.handleContinueClick(e)} disabled={createState.isSending} className='confirmBtn'>Continue <i className='fa fa-arrow-right fa-fw'/></button>
91+
</div>
92+
)
93+
}
94+
95+
renderSelectTab () {
96+
let selectState = this.state.select
97+
console.log(selectState)
98+
let membersEl = selectState.team.Members.map(member => {
99+
return (
100+
<li key={'user-' + member.id}>
101+
<ProfileImage className='userPhoto' email={member.email} size='30'/>
102+
<div className='userInfo'>
103+
<div className='userName'>{`${member.profileName} (${member.name})`}</div>
104+
<div className='userEmail'>{member.email}</div>
105+
</div>
106+
<div className='userControl'>
107+
<select value={member._pivot_role} className='userRole'>
108+
<option value='owner'>Owner</option>
109+
<option value='member'>Member</option>
110+
</select>
111+
<button><i className='fa fa-times fa-fw'/></button>
112+
</div>
113+
</li>
114+
)
115+
})
116+
117+
return (
118+
<div className='selectTab'>
119+
<div className='title'>Select member</div>
120+
<div className='ipt'>
121+
<input type='text' placeholder='Enter user name or e-mail'/>
122+
<button>add</button>
123+
</div>
124+
<ul className='memberList'>
125+
{membersEl}
126+
</ul>
127+
<button onClick={e => this.props.close(e)}className='confirmBtn'>Done</button>
128+
</div>
129+
)
130+
}
131+
132+
render () {
133+
let currentTab = this.state.currentTab === 'create'
134+
? this.renderCreateTab()
135+
: this.renderSelectTab()
136+
137+
return (
138+
<div className='CreateNewTeam modal'>
139+
<button onClick={e => this.handleCloseClick(e)} className='closeBtn'><i className='fa fa-fw fa-times'/></button>
140+
141+
{currentTab}
142+
143+
<div className='tabNav'>
144+
<i className={'fa fa-circle fa-fw' + (this.state.currentTab === 'create' ? ' active' : '')}/>
145+
<i className={'fa fa-circle fa-fw' + (this.state.currentTab === 'select' ? ' active' : '')}/>
146+
</div>
147+
</div>
148+
)
149+
}
150+
}
151+
152+
CreateNewTeam.propTypes = {
153+
close: PropTypes.func
154+
}

‎browser/main/HomeContainer/lib/modal/index.js‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import React from 'react'
2+
3+
class ModalBase extends React.Component {
4+
constructor (props) {
5+
super(props)
6+
this.state = {
7+
component: null,
8+
componentProps: {},
9+
isHidden: true
10+
}
11+
}
12+
13+
close () {
14+
if (modalBase != null) modalBase.setState({component: null, componentProps: null, isHidden: true})
15+
}
16+
17+
render () {
18+
return (
19+
<div className={'ModalBase' + (this.state.isHidden ? ' hide' : '')}>
20+
<div onClick={e => this.close(e)} className='modalBack'/>
21+
{this.state.component == null ? null : (
22+
<this.state.component {...this.state.componentProps} close={this.close}/>
23+
)}
24+
</div>
25+
)
26+
}
27+
}
28+
29+
let el = document.createElement('div')
30+
document.body.appendChild(el)
31+
let modalBase = React.render(<ModalBase/>, el)
32+
33+
export function openModal (component, props) {
34+
if (modalBase == null) { return }
35+
modalBase.setState({component: component, componentProps: props, isHidden: false})
36+
}
37+
38+
export function closeModal () {
39+
if (modalBase == null) { return }
40+
modalBase.setState({isHidden: true})
41+
}

‎browser/main/Services/Hq.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
/* global localStorage */
2-
31
var request = require('superagent-promise')(require('superagent'), Promise)
42
var apiUrl = require('../../../config').apiUrl
53

‎browser/main/helpers/linkState.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,9 @@ function setPartialState (component, path, value) {
2121
updateIn(component.state, path, value))
2222
}
2323

24-
export default function linkState (path) {
24+
export default function linkState (el, path) {
2525
return {
26-
value: getIn(this.state, path),
27-
requestChange: setPartialState.bind(null, this, path)
26+
value: getIn(el.state, path),
27+
requestChange: setPartialState.bind(null, el, path)
2828
}
2929
}

browser/styles/main/HomeContainer/ArticleDetail.styl renamed to browser/styles/main/HomeContainer/components/ArticleDetail.styl

File renamed without changes.

0 commit comments

Comments
 (0)