diff --git a/src/components/UserCard/index.js b/src/components/UserCard/index.js index ef79ce82..58b30ab7 100644 --- a/src/components/UserCard/index.js +++ b/src/components/UserCard/index.js @@ -42,11 +42,11 @@ class UserCard extends Component { isUpdatingPermission: true }) - const { user, updateProjectNember } = this.props + const { user, updateProjectMember } = this.props try { const newUserInfoRole = await updateProjectMemberRole(user.projectId, user.id, newRole) - updateProjectNember(newUserInfoRole) + updateProjectMember(newUserInfoRole) this.setState({ showSuccessModal: true }) } catch (e) { const error = _.get( @@ -190,7 +190,7 @@ class UserCard extends Component { UserCard.propTypes = { isInvite: PropTypes.bool, user: PropTypes.object, - updateProjectNember: PropTypes.func.isRequired, + updateProjectMember: PropTypes.func.isRequired, onRemoveClick: PropTypes.func.isRequired, isEditable: PropTypes.bool } diff --git a/src/components/Users/index.js b/src/components/Users/index.js index 3d00edc0..5ddc2e67 100644 --- a/src/components/Users/index.js +++ b/src/components/Users/index.js @@ -13,6 +13,7 @@ import { deleteProjectMemberInvite } from '../../services/projectMemberInvites' import ConfirmationModal from '../Modal/ConfirmationModal' import UserAddModalContent from './user-add.modal' import InviteUserModalContent from './invite-user.modal' // Import the new component +import Loader from '../Loader' const theme = { container: styles.modalContainer @@ -109,7 +110,7 @@ class Users extends Component { async onRemoveConfirmClick () { if (this.state.isRemoving) { return } - const { removeProjectNember, invitedMembers } = this.props + const { removeProjectMember, invitedMembers } = this.props const userToRemove = this.state.userToRemove const isInvite = !!_.find(invitedMembers, { email: userToRemove.email }) try { @@ -117,7 +118,7 @@ class Users extends Component { await ( isInvite ? deleteProjectMemberInvite(userToRemove.projectId, userToRemove.id) : removeUserFromProject(userToRemove.projectId, userToRemove.id) ) - removeProjectNember(userToRemove) + removeProjectMember(userToRemove) this.resetRemoveUserState() } catch (e) { @@ -156,11 +157,12 @@ class Users extends Component { projects, projectMembers, invitedMembers, - updateProjectNember, + updateProjectMember, isEditable, isSearchingUserProjects, resultSearchUserProjects, - loadNextProjects + loadNextProjects, + isLoadingProject } = this.props const { searchKey @@ -251,7 +253,7 @@ class Users extends Component { ) } { - membersExist && ( + !isLoadingProject && membersExist && ( <>
@@ -278,7 +280,7 @@ class Users extends Component { ) @@ -294,7 +296,7 @@ class Users extends Component { isInvite user={member} onRemoveClick={this.onRemoveClick} - updateProjectNember={updateProjectNember} + updateProjectMember={updateProjectMember} isEditable={isEditable} /> ) @@ -305,6 +307,8 @@ class Users extends Component { ) } + {isLoadingProject && } +
) } @@ -312,8 +316,8 @@ class Users extends Component { Users.propTypes = { loadProject: PropTypes.func.isRequired, - updateProjectNember: PropTypes.func.isRequired, - removeProjectNember: PropTypes.func.isRequired, + updateProjectMember: PropTypes.func.isRequired, + removeProjectMember: PropTypes.func.isRequired, addNewProjectInvite: PropTypes.func.isRequired, addNewProjectMember: PropTypes.func.isRequired, auth: PropTypes.object, @@ -322,6 +326,7 @@ Users.propTypes = { projects: PropTypes.arrayOf(PropTypes.object), projectMembers: PropTypes.arrayOf(PropTypes.object), invitedMembers: PropTypes.arrayOf(PropTypes.object), + isLoadingProject: PropTypes.bool.isRequired, searchUserProjects: PropTypes.func.isRequired, resultSearchUserProjects: PropTypes.arrayOf(PropTypes.object), loadNextProjects: PropTypes.func.isRequired diff --git a/src/config/constants.js b/src/config/constants.js index d40ddcbb..4ca6044a 100644 --- a/src/config/constants.js +++ b/src/config/constants.js @@ -437,6 +437,7 @@ export const SPECIAL_CHALLENGE_TAGS = [ * Possible statuses of projects */ export const PROJECT_STATUSES = [ + { label: 'Draft', value: 'draft' }, { label: 'Active', value: 'active' }, { label: 'In Review', value: 'in_review' }, { label: 'Reviewed', value: 'reviewed' }, diff --git a/src/containers/Users/index.js b/src/containers/Users/index.js index 08ee1f01..ab6b39f6 100644 --- a/src/containers/Users/index.js +++ b/src/containers/Users/index.js @@ -21,11 +21,12 @@ class Users extends Component { loginUserRoleInProject: '', projectMembers: null, invitedMembers: null, - isAdmin: false + isAdmin: false, + isLoadingProject: false } this.loadProject = this.loadProject.bind(this) - this.updateProjectNember = this.updateProjectNember.bind(this) - this.removeProjectNember = this.removeProjectNember.bind(this) + this.updateProjectMember = this.updateProjectMember.bind(this) + this.removeProjectMember = this.removeProjectMember.bind(this) this.addNewProjectInvite = this.addNewProjectInvite.bind(this) this.addNewProjectMember = this.addNewProjectMember.bind(this) this.loadNextProjects = this.loadNextProjects.bind(this) @@ -80,9 +81,10 @@ class Users extends Component { } loadProject (projectId) { + this.setState({ isLoadingProject: true }) fetchProjectById(projectId).then(async (project) => { const projectMembers = _.get(project, 'members') - const invitedMembers = _.get(project, 'invites') + const invitedMembers = _.get(project, 'invites') || [] const invitedUserIds = _.filter(_.map(invitedMembers, 'userId')) const invitedUsers = await fetchInviteMembers(invitedUserIds) @@ -91,14 +93,15 @@ class Users extends Component { invitedMembers: invitedMembers.map(m => ({ ...m, email: m.email || invitedUsers[m.userId].handle - })) + })), + isLoadingProject: false }) const { loggedInUser } = this.props this.updateLoginUserRoleInProject(projectMembers, loggedInUser) }) } - updateProjectNember (newMemberInfo) { + updateProjectMember (newMemberInfo) { const { projectMembers } = this.state const newProjectMembers = projectMembers.map(pm => pm.id === newMemberInfo.id ? ({ ...pm, @@ -111,7 +114,7 @@ class Users extends Component { this.updateLoginUserRoleInProject(newProjectMembers, loggedInUser) } - removeProjectNember (projectMember) { + removeProjectMember (projectMember) { const { projectMembers, invitedMembers } = this.state const newProjectMembers = _.filter(projectMembers, pm => pm.id !== projectMember.id) const newInvitedMembers = _.filter(invitedMembers, pm => pm.id !== projectMember.id) @@ -156,19 +159,21 @@ class Users extends Component { const { projectMembers, invitedMembers, - isAdmin + isAdmin, + isLoadingProject } = this.state return (