diff --git a/native/roles/change-roles-header-right-button.react.js b/native/roles/change-roles-header-right-button.react.js --- a/native/roles/change-roles-header-right-button.react.js +++ b/native/roles/change-roles-header-right-button.react.js @@ -10,12 +10,15 @@ changeThreadMemberRoles, changeThreadMemberRolesActionTypes, } from 'lib/actions/thread-actions.js'; +import { otherUsersButNoOtherAdmins } from 'lib/selectors/thread-selectors.js'; +import { roleIsAdminRole } from 'lib/shared/thread-utils.js'; import { useDispatchActionPromise, useServerCall, } from 'lib/utils/action-utils.js'; import type { NavigationRoute } from '../navigation/route-names'; +import { useSelector } from '../redux/redux-utils.js'; import { useColors } from '../themes/colors.js'; type Props = { @@ -25,12 +28,17 @@ function ChangeRolesHeaderRightButton(props: Props): React.Node { const { threadInfo, memberInfo, role: selectedRole } = props.route.params; const { role: initialRole } = memberInfo; + invariant(initialRole, 'Expected initial role to be defined'); invariant(selectedRole, 'Expected selected role to be defined'); const navigation = useNavigation(); const callChangeThreadMemberRoles = useServerCall(changeThreadMemberRoles); const dispatchActionPromise = useDispatchActionPromise(); + const otherUsersButNoOtherAdminsValue = useSelector( + otherUsersButNoOtherAdmins(threadInfo.id), + ); + const { purpleLink } = useColors(); const textStyle = React.useMemo( () => ({ @@ -46,6 +54,16 @@ return; } + const memberIsAdmin = roleIsAdminRole(threadInfo.roles[initialRole]); + + if (otherUsersButNoOtherAdminsValue && memberIsAdmin) { + navigation.setParams({ + ...props.route.params, + shouldShowError: true, + }); + return; + } + const createChangeThreadMemberRolesPromise = () => { return callChangeThreadMemberRoles( threadInfo.id, @@ -66,8 +84,11 @@ initialRole, memberInfo.id, navigation, + otherUsersButNoOtherAdminsValue, + props.route.params, selectedRole, threadInfo.id, + threadInfo.roles, ]); return ( diff --git a/native/roles/change-roles-screen.react.js b/native/roles/change-roles-screen.react.js --- a/native/roles/change-roles-screen.react.js +++ b/native/roles/change-roles-screen.react.js @@ -20,6 +20,7 @@ +threadInfo: ThreadInfo, +memberInfo: RelativeMemberInfo, +role: ?string, + +shouldShowError?: boolean, }; type Props = { @@ -29,7 +30,7 @@ function ChangeRolesScreen(props: Props): React.Node { const { navigation } = props; - const { threadInfo, memberInfo, role } = props.route.params; + const { threadInfo, memberInfo, role, shouldShowError } = props.route.params; invariant(role, 'Role must be defined'); const styles = useStyles(unboundStyles); @@ -65,6 +66,7 @@ threadInfo, memberInfo, role: newRole, + shouldShowError: false, }); }, [navigation, setSelectedRole, roleOptions, memberInfo, threadInfo], @@ -88,7 +90,22 @@ }, onRoleChange, ); - }, [roleOptions, onRoleChange, activeTheme, showActionSheetWithOptions]); + }, [showActionSheetWithOptions, roleOptions, onRoleChange, activeTheme]); + + const errorMessage = React.useMemo(() => { + if (!shouldShowError) { + return null; + } + + return ( + + Cannot change role. + + There must be at least one admin at any given time. + + + ); + }, [shouldShowError, styles.errorMessage, styles.errorMessageContainer]); return ( @@ -109,6 +126,7 @@ + {errorMessage} ); } @@ -158,6 +176,16 @@ pencilIcon: { color: 'panelInputSecondaryForeground', }, + errorMessageContainer: { + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + marginTop: 20, + }, + errorMessage: { + color: 'redText', + fontSize: 16, + }, }; export default ChangeRolesScreen;