Admin are not able to see all users of the project

https://topcoder.atlassian.net/browse/PROD-4313

Author: jmgasper

src/components/UserCard/index.js

@@ -47,7 +47,7 @@ class UserCard extends Component {
     try {
       await updateProjectMemberRole(user.projectId, user.id, newRole)
       await wait(1000)
-      reloadProjectMembers(user.projectId)
+      reloadProjectMembers()
       this.setState({ showSuccessModal: true })
     } catch (e) {
       const error = _.get(

src/components/Users/index.js

@@ -92,7 +92,7 @@ class Users extends Component {
   async onAddUserConfirmClick () {
     console.log('in onAddUserConfirmClick')
     console.log('in onAddUserConfirmClick this.state.userToAdd', this.state.userToAdd)
-    const { reloadProjectMembers } = this.props
+    const { loadProject } = this.props
     if (this.state.isAdding) { return }
 
     this.setState({
@@ -116,7 +116,7 @@ class Users extends Component {
       await addUserToProject(this.state.projectOption.value, this.state.userToAdd.userId, this.state.userPermissionToAdd)
       // wait for a second so that project's members are updated
       await wait(1000)
-      if (this.state.projectOption.value) { reloadProjectMembers(this.state.projectOption.value) }
+      if (this.state.projectOption.value) { loadProject(this.state.projectOption.value) }
       this.resetAddUserState()
     } catch (e) {
       const error = _.get(
@@ -167,13 +167,13 @@ class Users extends Component {
   async onRemoveConfirmClick () {
     if (this.state.isRemoving) { return }
 
-    const { reloadProjectMembers } = this.props
+    const { loadProject } = 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) { reloadProjectMembers(this.state.projectOption.value) }
+      if (this.state.projectOption.value) { loadProject(this.state.projectOption.value) }
 
       this.resetRemoveUserState()
     } catch (e) {
@@ -196,7 +196,7 @@ class Users extends Component {
   }
 
   render () {
-    const { projects, projectMembers, reloadProjectMembers, isEditable } = this.props
+    const { projects, projectMembers, loadProject, isEditable } = this.props
     const projectOptions = projects.map(p => {
       return {
         label: p.name,
@@ -402,7 +402,11 @@ class Users extends Component {
                   _.map(projectMembers, (member) => {
                     return (
                       <li className={styles.userItem} key={`user-card-${member.id}`}>
-                        <UserCard user={member} onRemoveClick={this.onRemoveClick} reloadProjectMembers={reloadProjectMembers} isEditable={isEditable} />
+                        <UserCard
+                          user={member}
+                          onRemoveClick={this.onRemoveClick}
+                          reloadProjectMembers={() => loadProject(this.state.projectOption.value)}
+                          isEditable={isEditable} />
                       </li>
                     )
                   })
@@ -419,7 +423,6 @@ class Users extends Component {
 
 Users.propTypes = {
   loadProject: PropTypes.func.isRequired,
-  reloadProjectMembers: PropTypes.func.isRequired,
   auth: PropTypes.object,
   isEditable: PropTypes.bool,
   projects: PropTypes.arrayOf(PropTypes.object),

src/containers/Users/index.js

@@ -3,16 +3,18 @@ import { connect } from 'react-redux'
 import _ from 'lodash'
 import PT from 'prop-types'
 import UsersComponent from '../../components/Users'
-import { loadProject, reloadProjectMembers } from '../../actions/projects'
 import { PROJECT_ROLES } from '../../config/constants'
+import { fetchProjectById } from '../../services/projects'
 
 class Users extends Component {
   constructor (props) {
     super(props)
 
     this.state = {
-      loginUserRoleInProject: ''
+      loginUserRoleInProject: '',
+      projectMembers: null
     }
+    this.loadProject = this.loadProject.bind(this)
   }
 
   componentDidMount () {
@@ -27,9 +29,13 @@ class Users extends Component {
   }
 
   componentWillReceiveProps (nextProps) {
-    const { projectDetail, loggedInUser } = nextProps
-    if (projectDetail && loggedInUser) {
-      const projectMembers = projectDetail.members
+    const { loggedInUser } = nextProps
+    const { projectMembers } = this.state
+    this.updateLoginUserRoleInProject(projectMembers, loggedInUser)
+  }
+
+  updateLoginUserRoleInProject (projectMembers, loggedInUser) {
+    if (projectMembers && loggedInUser) {
       const loginUserProjectInfo = _.find(projectMembers, { userId: loggedInUser.userId })
       if (loginUserProjectInfo && this.state.loginUserRoleInProject !== loginUserProjectInfo.role) {
         this.setState({
@@ -39,52 +45,49 @@ class Users extends Component {
     }
   }
 
+  loadProject (projectId) {
+    fetchProjectById(projectId).then((project) => {
+      const projectMembers = _.get(project, 'members')
+      this.setState({
+        projectMembers
+      })
+      const { loggedInUser } = this.props
+      this.updateLoginUserRoleInProject(projectMembers, loggedInUser)
+    })
+  }
+
   render () {
     const {
       projects,
-      loadProject,
-      projectMembers,
-      auth,
-      reloadProjectMembers,
-      projectDetail
+      auth
     } = this.props
+    const {
+      projectMembers
+    } = this.state
     return (
       <UsersComponent
-        projectDetail={projectDetail}
         projects={projects}
-        loadProject={loadProject}
+        loadProject={this.loadProject}
         projectMembers={projectMembers}
         auth={auth}
-        reloadProjectMembers={reloadProjectMembers}
         isEditable={this.isEditable()}
       />
     )
   }
 }
 
-const mapStateToProps = ({ sidebar, challenges, auth, projects }) => {
+const mapStateToProps = ({ sidebar, auth }) => {
   return {
     projects: sidebar.projects,
-    projectMembers: _.get(challenges, 'metadata.members'),
-    projectDetail: projects.projectDetail,
     auth,
     loggedInUser: auth.user
   }
 }
 
-const mapDispatchToProps = {
-  loadProject,
-  reloadProjectMembers
-}
-
 Users.propTypes = {
-  loadProject: PT.func.isRequired,
-  reloadProjectMembers: PT.func.isRequired,
   projects: PT.arrayOf(PT.object),
-  projectMembers: PT.arrayOf(PT.object),
   auth: PT.object,
-  projectDetail: PT.object,
   loggedInUser: PT.object
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(Users)
+export default connect(mapStateToProps)(Users)