diff --git a/native/community-creation/community-creation-members.react.js b/native/community-creation/community-creation-members.react.js --- a/native/community-creation/community-creation-members.react.js +++ b/native/community-creation/community-creation-members.react.js @@ -1,14 +1,25 @@ // @flow import * as React from 'react'; +import { ActivityIndicator } from 'react-native'; +import { + changeThreadSettings, + changeThreadSettingsActionTypes, +} from 'lib/actions/thread-actions.js'; +import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js'; import { userInfoSelectorForPotentialMembers, userSearchIndexForPotentialMembers, } from 'lib/selectors/user-selectors.js'; import { getPotentialMemberItems } from 'lib/shared/search-utils.js'; +import type { LoadingStatus } from 'lib/types/loading-types.js'; import { threadTypes } from 'lib/types/thread-types-enum.js'; import type { AccountUserInfo } from 'lib/types/user-types.js'; +import { + useDispatchActionPromise, + useServerCall, +} from 'lib/utils/action-utils.js'; import CommunityCreationContentContainer from './community-creation-content-container.react.js'; import CommunityCreationKeyserverLabel from './community-creation-keyserver-label.react.js'; @@ -39,8 +50,18 @@ +route: NavigationRoute<'CommunityCreationMembers'>, }; +const changeThreadSettingsLoadingStatusSelector = createLoadingStatusSelector( + changeThreadSettingsActionTypes, +); + function CommunityCreationMembers(props: Props): React.Node { - const { announcement } = props.route.params; + const { announcement, threadID } = props.route.params; + + const dispatchActionPromise = useDispatchActionPromise(); + const callChangeThreadSettings = useServerCall(changeThreadSettings); + const changeThreadSettingsLoadingStatus: LoadingStatus = useSelector( + changeThreadSettingsLoadingStatusSelector, + ); const { navigation } = props; const { setOptions } = navigation; @@ -58,21 +79,64 @@ [selectedUsers], ); + const addSelectedUsersToCommunity = React.useCallback(() => { + dispatchActionPromise( + changeThreadSettingsActionTypes, + (async () => { + const result = await callChangeThreadSettings({ + threadID, + changes: { newMemberIDs: selectedUserIDs }, + }); + navigation.navigate(ChatThreadListRouteName); + return result; + })(), + ); + }, [ + callChangeThreadSettings, + dispatchActionPromise, + navigation, + selectedUserIDs, + threadID, + ]); + const exitCommunityCreationFlow = React.useCallback(() => { navigation.navigate(ChatThreadListRouteName); }, [navigation]); + const activityIndicatorStyle = React.useMemo( + () => ({ paddingRight: 20 }), + [], + ); + React.useEffect(() => { setOptions({ // eslint-disable-next-line react/display-name - headerRight: () => ( - - ), + headerRight: () => { + if (changeThreadSettingsLoadingStatus === 'loading') { + return ( + + ); + } + return ( + + ); + }, }); - }, [exitCommunityCreationFlow, selectedUserIDs.length, setOptions]); + }, [ + activityIndicatorStyle, + addSelectedUsersToCommunity, + changeThreadSettingsLoadingStatus, + exitCommunityCreationFlow, + selectedUserIDs.length, + setOptions, + ]); const userSearchResults = React.useMemo( () =>