Don’t require refresh when editing users

Author: jmgasper

src/components/UserCard/index.js

@@ -6,7 +6,6 @@ import { PROJECT_ROLES } from '../../config/constants'
 import PrimaryButton from '../Buttons/PrimaryButton'
 import AlertModal from '../Modal/AlertModal'
 import { updateProjectMemberRole } from '../../services/projects'
-import { wait } from '../../util/helper'
 import _ from 'lodash'
 
 const theme = {
@@ -42,12 +41,11 @@ class UserCard extends Component {
       isUpdatingPermission: true
     })
 
-    const { user, reloadProjectMembers } = this.props
+    const { user, updateProjectNember } = this.props
 
     try {
-      await updateProjectMemberRole(user.projectId, user.id, newRole)
-      await wait(1000)
-      reloadProjectMembers()
+      const newUserInfoRole = await updateProjectMemberRole(user.projectId, user.id, newRole)
+      updateProjectNember(newUserInfoRole)
       this.setState({ showSuccessModal: true })
     } catch (e) {
       const error = _.get(
@@ -176,7 +174,7 @@ class UserCard extends Component {
 
 UserCard.propTypes = {
   user: PropTypes.object,
-  reloadProjectMembers: PropTypes.func.isRequired,
+  updateProjectNember: PropTypes.func.isRequired,
   onRemoveClick: PropTypes.func.isRequired,
   isEditable: PropTypes.bool
 }

src/components/Users/index.js

@@ -11,7 +11,6 @@ import SelectUserAutocomplete from '../SelectUserAutocomplete'
 import { PROJECT_ROLES } from '../../config/constants'
 import { checkAdmin } from '../../util/tc'
 import { addUserToProject, removeUserFromProject } from '../../services/projects'
-import { wait } from '../../util/helper'
 import ConfirmationModal from '../Modal/ConfirmationModal'
 
 const theme = {
@@ -90,9 +89,7 @@ class Users extends Component {
   }
 
   async onAddUserConfirmClick () {
-    console.log('in onAddUserConfirmClick')
-    console.log('in onAddUserConfirmClick this.state.userToAdd', this.state.userToAdd)
-    const { loadProject } = this.props
+    const { addNewProjectMember } = this.props
     if (this.state.isAdding) { return }
 
     this.setState({
@@ -101,7 +98,6 @@ class Users extends Component {
     })
 
     if (!this.state.userToAdd) {
-      console.log('in if')
       this.setState({
         showSelectUserError: true
       })
@@ -113,10 +109,10 @@ class Users extends Component {
     })
 
     try {
-      await addUserToProject(this.state.projectOption.value, this.state.userToAdd.userId, this.state.userPermissionToAdd)
+      const newUserInfo = await addUserToProject(this.state.projectOption.value, this.state.userToAdd.userId, this.state.userPermissionToAdd)
+      newUserInfo.handle = this.state.userToAdd.handle
       // wait for a second so that project's members are updated
-      await wait(1000)
-      if (this.state.projectOption.value) { loadProject(this.state.projectOption.value) }
+      addNewProjectMember(newUserInfo)
       this.resetAddUserState()
     } catch (e) {
       const error = _.get(
@@ -167,13 +163,12 @@ class Users extends Component {
   async onRemoveConfirmClick () {
     if (this.state.isRemoving) { return }
 
-    const { loadProject } = this.props
+    const { removeProjectNember } = this.props
     const userToRemove = this.state.userToRemove
     try {
       this.setState({ isRemoving: true })
       await removeUserFromProject(userToRemove.projectId, userToRemove.id)
-      await wait(1000)
-      if (this.state.projectOption.value) { loadProject(this.state.projectOption.value) }
+      removeProjectNember(userToRemove)
 
       this.resetRemoveUserState()
     } catch (e) {
@@ -196,7 +191,7 @@ class Users extends Component {
   }
 
   render () {
-    const { projects, projectMembers, loadProject, isEditable } = this.props
+    const { projects, projectMembers, updateProjectNember, isEditable } = this.props
     const projectOptions = projects.map(p => {
       return {
         label: p.name,
@@ -405,7 +400,7 @@ class Users extends Component {
                         <UserCard
                           user={member}
                           onRemoveClick={this.onRemoveClick}
-                          reloadProjectMembers={() => loadProject(this.state.projectOption.value)}
+                          updateProjectNember={updateProjectNember}
                           isEditable={isEditable} />
                       </li>
                     )
@@ -423,6 +418,9 @@ class Users extends Component {
 
 Users.propTypes = {
   loadProject: PropTypes.func.isRequired,
+  updateProjectNember: PropTypes.func.isRequired,
+  removeProjectNember: PropTypes.func.isRequired,
+  addNewProjectMember: PropTypes.func.isRequired,
   auth: PropTypes.object,
   isEditable: PropTypes.bool,
   projects: PropTypes.arrayOf(PropTypes.object),

src/containers/Users/index.js

@@ -15,6 +15,9 @@ class Users extends Component {
       projectMembers: null
     }
     this.loadProject = this.loadProject.bind(this)
+    this.updateProjectNember = this.updateProjectNember.bind(this)
+    this.removeProjectNember = this.removeProjectNember.bind(this)
+    this.addNewProjectMember = this.addNewProjectMember.bind(this)
   }
 
   componentDidMount () {
@@ -56,6 +59,42 @@ class Users extends Component {
     })
   }
 
+  updateProjectNember (newMemberInfo) {
+    const { projectMembers } = this.state
+    const newProjectMembers = projectMembers.map(pm => pm.id === newMemberInfo.id ? ({
+      ...pm,
+      ...newMemberInfo
+    }) : pm)
+    const { loggedInUser } = this.props
+    this.setState({
+      projectMembers: newProjectMembers
+    })
+    this.updateLoginUserRoleInProject(newProjectMembers, loggedInUser)
+  }
+
+  removeProjectNember (projectMember) {
+    const { projectMembers } = this.state
+    const newProjectMembers = _.filter(projectMembers, pm => pm.id !== projectMember.id)
+    const { loggedInUser } = this.props
+    this.setState({
+      projectMembers: newProjectMembers
+    })
+    this.updateLoginUserRoleInProject(newProjectMembers, loggedInUser)
+  }
+
+  addNewProjectMember (projectMember) {
+    const { projectMembers } = this.state
+    const newProjectMembers = [
+      ...projectMembers,
+      projectMember
+    ]
+    const { loggedInUser } = this.props
+    this.setState({
+      projectMembers: newProjectMembers
+    })
+    this.updateLoginUserRoleInProject(newProjectMembers, loggedInUser)
+  }
+
   render () {
     const {
       projects,
@@ -68,6 +107,9 @@ class Users extends Component {
       <UsersComponent
         projects={projects}
         loadProject={this.loadProject}
+        updateProjectNember={this.updateProjectNember}
+        removeProjectNember={this.removeProjectNember}
+        addNewProjectMember={this.addNewProjectMember}
         projectMembers={projectMembers}
         auth={auth}
         isEditable={this.isEditable()}