diff --git a/web/modals/threads/members/change-member-role-modal.react.js b/web/modals/threads/members/change-member-role-modal.react.js --- a/web/modals/threads/members/change-member-role-modal.react.js +++ b/web/modals/threads/members/change-member-role-modal.react.js @@ -1,9 +1,18 @@ // @flow +import invariant from 'invariant'; import * as React from 'react'; +import { + changeThreadMemberRoles, + changeThreadMemberRolesActionTypes, +} from 'lib/actions/thread-actions.js'; import { useModalContext } from 'lib/components/modal-provider.react.js'; import type { RelativeMemberInfo, ThreadInfo } from 'lib/types/thread-types'; +import { + useDispatchActionPromise, + useServerCall, +} from 'lib/utils/action-utils.js'; import { values } from 'lib/utils/objects.js'; import css from './change-member-role-modal.css'; @@ -21,6 +30,8 @@ function ChangeMemberRoleModal(props: ChangeMemberRoleModalProps): React.Node { const { memberInfo, threadInfo } = props; const { pushModal, popModal } = useModalContext(); + const dispatchActionPromise = useDispatchActionPromise(); + const callChangeThreadMemberRoles = useServerCall(changeThreadMemberRoles); const roleOptions = React.useMemo( () => @@ -50,6 +61,36 @@ pushModal(); }, [initialSelectedRole, popModal, pushModal, selectedRole]); + const onSave = React.useCallback(() => { + if (selectedRole === initialSelectedRole) { + popModal(); + return; + } + + const createChangeThreadMemberRolesPromise = () => { + invariant(selectedRole, 'Expected selected role to be set'); + return callChangeThreadMemberRoles( + threadInfo.id, + [memberInfo.id], + selectedRole, + ); + }; + + dispatchActionPromise( + changeThreadMemberRolesActionTypes, + createChangeThreadMemberRolesPromise(), + ); + popModal(); + }, [ + callChangeThreadMemberRoles, + dispatchActionPromise, + initialSelectedRole, + memberInfo.id, + popModal, + selectedRole, + threadInfo.id, + ]); + return (
@@ -81,6 +122,7 @@ variant="filled" className={css.roleModalSaveButton} buttonColor={buttonThemes.primary} + onClick={onSave} > Save