set design create team modal

browser/main/Components/UserNavigator.jsx

@@ -1,53 +0,0 @@
-var React = require('react')
-var _ = require('lodash')
-
-module.exports = React.createClass({
-  propTypes: {
-    createNewArticle: React.PropTypes.func,
-    search: React.PropTypes.string,
-    user: React.PropTypes.object
-  },
-  render: function () {
-    var user = this.props.user
-
-    var folders = _.isArray(user.Folders) ? user.Folders.map(function (folder) {
-      var isActive = this.props.search.match(new RegExp('in:' + folder.name))
-      return (
-        <button className={'folderButton' + (isActive ? ' active' : '')}><i className='fa fa-fw fa-square'/> {folder.name}</button>
-      )
-    }.bind(this)) : null
-
-    var members = _.isArray(user.Members) ? user.Members.map(function (member) {
-      return <button className='memberButton'>{member.profileName}</button>
-    }) : null
-
-    return (
-      <div className='UserNavigator'>
-        <div className='profile'>
-          <div className='profileName'>{user.profileName}</div>
-          <div className='name'>{user.name}</div>
-          <div className='dropdownIcon'><i className='fa fa-chevron-down'/></div>
-        </div>
-
-        <div className='control'>
-          <button onClick={this.props.createNewArticle} className='newPostButton'>New Post</button>
-        </div>
-
-        <div className='menu'>
-          <div className='menuGruop folders'>
-            <div className='label'>
-              Folders
-              <button className='plusButton'><i className='fa fa-plus'/></button>
-            </div>
-            <button className={'folderButton' + (this.props.search.match(/in:[a-z0-9-_]/) ? '' : ' active')}>All Folders</button>
-            {folders}
-          </div>
-
-          {user.userType === 'team' ? (
-            <div className='members'>{members}</div>
-          ) : null}
-        </div>
-      </div>
-    )
-  }
-})

browser/main/Containers/LoginContainer.js

@@ -39,13 +39,11 @@ export default class LoginPage extends React.Component {
           console.error(err)
           if (err.response == null) {
             return this.setState({
-              error: {name: 'CunnectionRefused', message: 'API server doesn\'t respond. Check your internet connection.'},
+              error: {name: 'CunnectionRefused', message: 'Can\'t connect to API server.'},
               isSending: false
             })
           }
 
-          var res = err.response
-
           // Connection Failed or Whatever
           this.setState({
             error: err.response.body,

browser/main/Containers/SignupContainer.js

@@ -37,7 +37,7 @@ export default class SignupContainer extends React.Component {
           console.error(err)
           if (err.response == null) {
             return this.setState({
-              error: {name: 'CunnectionRefused', message: 'API server doesn\'t respond. Check your internet connection.'},
+              error: {name: 'CunnectionRefused', message: 'Can\'t connect to API server.'},
               isSending: false
             })
           }

browser/main/HomeContainer/Components/UserNavigator.js

@@ -1,8 +1,18 @@
 import React, { Component, PropTypes } from 'react'
 import { Link } from 'react-router'
 import ProfileImage from '../../components/ProfileImage'
+import { openModal } from '../lib/modal'
+import CreateNewTeam from '../lib/modal/CreateNewTeam'
 
 export default class UserNavigator extends Component {
+  handleClick (e) {
+    openModal(CreateNewTeam)
+  }
+
+  // for dev
+  componentDidMount () {
+    openModal(CreateNewTeam)
+  }
 
   renderUserList () {
     var users = this.props.users.map((user, index) => (
@@ -26,7 +36,7 @@ export default class UserNavigator extends Component {
     return (
       <div className='UserNavigator'>
         {this.renderUserList()}
-        <button className='createTeamBtn'>
+        <button className='createTeamBtn' onClick={e => this.handleClick(e)}>
           +
           <div className='tooltip'>Create a new team</div>
         </button>

browser/main/HomeContainer/lib/api.js

@@ -0,0 +1,11 @@
+var request = require('superagent-promise')(require('superagent'), Promise)
+var apiUrl = require('../../../../config').apiUrl
+
+export function createTeam (input) {
+  return request
+    .post(apiUrl + 'teams')
+    .set({
+      Authorization: 'Bearer ' + localStorage.getItem('token')
+    })
+    .send(input)
+}

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

@@ -0,0 +1,154 @@
+import React, { PropTypes } from 'react'
+import ProfileImage from '../../../components/ProfileImage'
+import { createTeam } from '../api'
+import linkState from '../../../helpers/linkState'
+
+export default class CreateNewTeam extends React.Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      create: {
+        name: '',
+        alert: null
+      },
+      select: {
+        team: {"name":"test123",
+          "profileName":"test123",
+          "userType":"team",
+          "updatedAt":"2015-10-11T09:01:01.277Z",
+          "createdAt":"2015-10-11T09:01:01.277Z",
+          "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"}]
+        },
+        alert: null
+      },
+      currentTab: 'select'
+    }
+  }
+
+  handleCloseClick (e) {
+    this.props.close()
+  }
+
+  handleContinueClick (e) {
+    let createState = this.state.create
+    createState.isSending = true
+    createState.alert = {
+      type: 'info',
+      message: 'sending...'
+    }
+    this.setState({create: createState})
+
+    function onTeamCreate (res) {
+      let createState = this.state.create
+      createState.isSending = false
+      createState.alert = null
+
+      let selectState = this.state.select
+      selectState.team = res.body
+
+      this.setState({
+        currentTab: 'select',
+        create: createState,
+        select: {
+          team: res.body
+        }
+      })
+    }
+
+    function onError (err) {
+      let errorMessage = err.response != null ? err.response.body.message : err.message
+
+      let createState = this.state.create
+      createState.isSending = false
+      createState.alert = {
+        type: 'error',
+        message: 'Can\'t connect to API server.'
+      }
+
+      this.setState({
+        create: createState
+      })
+    }
+
+    createTeam({name: this.state.create.name})
+      .then(onTeamCreate.bind(this))
+      .catch(onError.bind(this))
+  }
+
+  renderCreateTab () {
+    let createState = this.state.create
+    let alertEl = createState.alert != null ? (
+      <p className={['alert'].concat([createState.alert.type]).join(' ')}>{createState.alert.message}</p>
+    ) : null
+
+    return (
+      <div className='createTab'>
+        <div className='title'>Create new team</div>
+
+        <input valueLink={linkState(this, 'create.name')} className='ipt' type='text' placeholder='Enter your team name'/>
+        {alertEl}
+        <button onClick={e => this.handleContinueClick(e)} disabled={createState.isSending} className='confirmBtn'>Continue <i className='fa fa-arrow-right fa-fw'/></button>
+      </div>
+    )
+  }
+
+  renderSelectTab () {
+    let selectState = this.state.select
+    console.log(selectState)
+    let membersEl = selectState.team.Members.map(member => {
+      return (
+        <li key={'user-' + member.id}>
+          <ProfileImage className='userPhoto' email={member.email} size='30'/>
+          <div className='userInfo'>
+            <div className='userName'>{`${member.profileName} (${member.name})`}</div>
+            <div className='userEmail'>{member.email}</div>
+          </div>
+          <div className='userControl'>
+            <select value={member._pivot_role} className='userRole'>
+              <option value='owner'>Owner</option>
+              <option value='member'>Member</option>
+            </select>
+            <button><i className='fa fa-times fa-fw'/></button>
+          </div>
+        </li>
+      )
+    })
+
+    return (
+      <div className='selectTab'>
+        <div className='title'>Select member</div>
+        <div className='ipt'>
+          <input type='text' placeholder='Enter user name or e-mail'/>
+          <button>add</button>
+        </div>
+        <ul className='memberList'>
+          {membersEl}
+        </ul>
+        <button onClick={e => this.props.close(e)}className='confirmBtn'>Done</button>
+      </div>
+    )
+  }
+
+  render () {
+    let currentTab = this.state.currentTab === 'create'
+      ? this.renderCreateTab()
+      : this.renderSelectTab()
+
+    return (
+      <div className='CreateNewTeam modal'>
+        <button onClick={e => this.handleCloseClick(e)} className='closeBtn'><i className='fa fa-fw fa-times'/></button>
+
+        {currentTab}
+
+        <div className='tabNav'>
+          <i className={'fa fa-circle fa-fw' + (this.state.currentTab === 'create' ? ' active' : '')}/>
+          <i className={'fa fa-circle fa-fw' + (this.state.currentTab === 'select' ? ' active' : '')}/>
+        </div>
+      </div>
+    )
+  }
+}
+
+CreateNewTeam.propTypes = {
+  close: PropTypes.func
+}

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

@@ -0,0 +1,41 @@
+import React from 'react'
+
+class ModalBase extends React.Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      component: null,
+      componentProps: {},
+      isHidden: true
+    }
+  }
+
+  close () {
+    if (modalBase != null) modalBase.setState({component: null, componentProps: null, isHidden: true})
+  }
+
+  render () {
+    return (
+      <div className={'ModalBase' + (this.state.isHidden ? ' hide' : '')}>
+        <div onClick={e => this.close(e)} className='modalBack'/>
+        {this.state.component == null ? null : (
+          <this.state.component {...this.state.componentProps} close={this.close}/>
+        )}
+      </div>
+    )
+  }
+}
+
+let el = document.createElement('div')
+document.body.appendChild(el)
+let modalBase = React.render(<ModalBase/>, el)
+
+export function openModal (component, props) {
+  if (modalBase == null) { return }
+  modalBase.setState({component: component, componentProps: props, isHidden: false})
+}
+
+export function closeModal () {
+  if (modalBase == null) { return }
+  modalBase.setState({isHidden: true})
+}

browser/main/Services/Hq.js

@@ -1,5 +1,3 @@
-/* global localStorage */
-
 var request = require('superagent-promise')(require('superagent'), Promise)
 var apiUrl = require('../../../config').apiUrl
 

browser/main/helpers/linkState.js

@@ -21,9 +21,9 @@ function setPartialState (component, path, value) {
     updateIn(component.state, path, value))
 }
 
-export default function linkState (path) {
+export default function linkState (el, path) {
   return {
-    value: getIn(this.state, path),
-    requestChange: setPartialState.bind(null, this, path)
+    value: getIn(el.state, path),
+    requestChange: setPartialState.bind(null, el, path)
   }
 }