Page MenuHomePhabricator
Differential D13997

[native] update community drawer button to navigate to community joiner modal
ClosedPublic
Actions

Authored by varun on Nov 21 2024, 10:34 PM.
Tags
None
Referenced Files
Unknown Object (File)
Thu, Apr 17, 12:57 AM
Unknown Object (File)
Tue, Apr 15, 11:39 AM
Unknown Object (File)
Mon, Apr 14, 11:01 AM
Unknown Object (File)
Mon, Apr 14, 10:42 AM
Unknown Object (File)
Sun, Apr 13, 2:44 AM
Unknown Object (File)
Fri, Apr 11, 11:57 PM
Unknown Object (File)
Thu, Mar 27, 11:12 AM
Unknown Object (File)
Thu, Mar 27, 11:12 AM
View All 60 Files
Subscribers
tomek

Details

Reviewers
ashoat
Commits
rCOMM0d9f892d8aeb: [native] update community drawer button to navigate to community joiner modal
rCOMM4c8f460c450b: [native] update community drawer button to navigate to community joiner modal
Summary

Depends on D13996

when the explore communities button is pressed, we should navigate to the modal. if for some reason we are unable to fetch the community info from the keyserver, we will display an alert asking the user to try again

Test Plan

see video

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

varun created this revision.Nov 21 2024, 10:34 PM
Herald added a subscriber: tomek. · View Herald TranscriptNov 21 2024, 10:34 PM
varun edited the test plan for this revision. (Show Details)Nov 21 2024, 10:34 PM
varun attached a referenced file: F3341161: RPReplay_Final1732257038.MP4. (Show Details)
varun added inline comments.
native/navigation/community-drawer-content.react.js
196 ↗(On Diff #45934)

I'm not sure if this is the right experience. we could instead just disable the explore communities button if !fetchedCommunitiesWithNames, but that feels worse

Harbormaster completed remote builds in B32758: Diff 45934.Nov 21 2024, 10:51 PM
varun requested review of this revision.Nov 21 2024, 10:51 PM
ashoat requested changes to this revision.Nov 23 2024, 6:25 AM

Seems like we're adding two new keyserver calls on app start here, but I think we can do this without adding any

native/navigation/community-drawer-content.react.js
64–66 ↗(On Diff #45934)

This is not a promise, but rather a function that returns a promise

77–84 ↗(On Diff #45934)

I don't love that we're doing both of these calls separately. Doesn't fetchAllCommunityInfosWithNamesActionTypes have all the data that fetchCommunityInfosActionTypes needs? Can you combine them?

86 ↗(On Diff #45934)

You're creating the promise twice, which I think results in two calls to the keyserver. You should only invoke fetchPromise once, and then use the returned Promise here, as well as passing it to dispatchActionPromise

196 ↗(On Diff #45934)

Seems like this could happen if the user presses the button while the first request is ongoing, which might be a likely thing to happen and a negative experience

I think you should assign the Promise to a ref when you create it in the useEffect above, and then await it here if fetchedCommunitiesWithNames isn't set yet

After you do that, then this should be less likely to occur and probably an Alert isn't the worse thing to do

This revision now requires changes to proceed.Nov 23 2024, 6:25 AM
varun added a child revision: D14053: [native] DisplayCommunityDirectoryPrompt.Nov 26 2024, 10:14 PM
varun updated this revision to Diff 46388.Dec 12 2024, 11:35 AM

address feedback

varun planned changes to this revision.Dec 12 2024, 11:40 AM
varun updated this revision to Diff 46389.Dec 12 2024, 11:46 AM

fix navigation param

Harbormaster completed remote builds in B33067: Diff 46388.Dec 12 2024, 11:58 AM
Harbormaster completed remote builds in B33068: Diff 46389.Dec 12 2024, 12:04 PM
ashoat accepted this revision.Dec 12 2024, 12:13 PM
ashoat added inline comments.
lib/reducers/community-reducer.js
50 ↗(On Diff #46389)

Thought a bit about whether we should also have a KNOW_OF check here, but I don't think it's possible (or will likely ever be possible) to be a member without KNOW_OF

native/navigation/community-drawer-content.react.js
219–221 ↗(On Diff #46389)

I think it's okay for this one to be "cancelable" (dismissable by pressing the backdrop) since it's just something we want the user to acknowledge. I think a good rule of thumb (we probably don't consistently follow it though) is that if there's just one button and it's "OK", it probably should be cancelable

This revision is now accepted and ready to land.Dec 12 2024, 12:13 PM
Closed by commit rCOMM4c8f460c450b: [native] update community drawer button to navigate to community joiner modal (authored by varun). · Explain WhyFeb 11 2025, 6:50 PM
This revision was automatically updated to reflect the committed changes.
varun added a commit: rCOMM4c8f460c450b: [native] update community drawer button to navigate to community joiner modal.
varun added a reverting change: rCOMM3fe14f5bbe84: Revert "[native] update community drawer button to navigate to community joiner….Feb 11 2025, 7:27 PM
varun reopened this revision.Feb 11 2025, 7:28 PM
This revision is now accepted and ready to land.Feb 11 2025, 7:28 PM
Closed by commit rCOMM0d9f892d8aeb: [native] update community drawer button to navigate to community joiner modal (authored by varun). · Explain WhyFeb 11 2025, 7:45 PM
This revision was automatically updated to reflect the committed changes.
varun added a commit: rCOMM0d9f892d8aeb: [native] update community drawer button to navigate to community joiner modal.

Revision Contents
Changeset List

PathSize
lib/
reducers/
23 lines
native/
navigation/
69 lines

Diff 47012

View Options

lib/reducers/community-reducer.js

Show All 22 Lines
} from '../../types/minimally-encoded-thread-permissions-types.js'; } from '../../types/minimally-encoded-thread-permissions-types.js';
import { joinThreadSubscription } from '../../types/subscription-types.js'; import { joinThreadSubscription } from '../../types/subscription-types.js';
import type { ThickMemberInfo } from '../../types/thread-types.js'; import type { ThickMemberInfo } from '../../types/thread-types.js';
import { updateTypes } from '../../types/update-types-enum.js'; import { updateTypes } from '../../types/update-types-enum.js';
import type { ClientUpdateInfo } from '../../types/update-types.js'; import type { ClientUpdateInfo } from '../../types/update-types.js';
import { values } from '../../utils/objects.js'; import { values } from '../../utils/objects.js';
import { roleIsDefaultRole, userIsMember } from '../thread-utils.js'; import { roleIsDefaultRole, userIsMember } from '../thread-utils.js';
const addMembersSpec: DMOperationSpec<DMAddMembersOperation> = Object.freeze({ function createAddNewMembersResults(
processDMOperation: async (
dmOperation: DMAddMembersOperation, dmOperation: DMAddMembersOperation,
viewerID: string, viewerID: string,
utilities: ProcessDMOperationUtilities, utilities: ProcessDMOperationUtilities,
) => { ): {
+rawMessageInfos: Array<RawMessageInfo>,
+updateInfos: Array<ClientUpdateInfo>,
+threadInfo: ?ThickRawThreadInfo,
} {
const { editorID, time, messageID, addedUserIDs, existingThreadDetails } = const { editorID, time, messageID, addedUserIDs, existingThreadDetails } =
dmOperation; dmOperation;
const addMembersMessage = { const addMembersMessage = {
type: messageTypes.ADD_MEMBERS, type: messageTypes.ADD_MEMBERS,
id: messageID, id: messageID,
threadID: existingThreadDetails.threadID, threadID: existingThreadDetails.threadID,
creatorID: editorID, creatorID: editorID,
time, time,
addedUserIDs: [...addedUserIDs], addedUserIDs: [...addedUserIDs],
}; };
const viewerIsAdded = addedUserIDs.includes(viewerID); const viewerIsAdded = addedUserIDs.includes(viewerID);
const updateInfos: Array<ClientUpdateInfo> = []; const updateInfos: Array<ClientUpdateInfo> = [];
const rawMessageInfos: Array<RawMessageInfo> = []; const rawMessageInfos: Array<RawMessageInfo> = [];
let resultThreadInfo: ?ThickRawThreadInfo;
if (viewerIsAdded) { if (viewerIsAdded) {
const newThread = createThickRawThreadInfo( const newThread = createThickRawThreadInfo(
{ {
...existingThreadDetails, ...existingThreadDetails,
allMemberIDs: [ allMemberIDs: [...existingThreadDetails.allMemberIDs, ...addedUserIDs],
...existingThreadDetails.allMemberIDs,
...addedUserIDs,
],
}, },
viewerID, viewerID,
); );
resultThreadInfo = newThread;
updateInfos.push( updateInfos.push(
{ {
type: updateTypes.JOIN_THREAD, type: updateTypes.JOIN_THREAD,
id: uuid.v4(), id: uuid.v4(),
time, time,
threadInfo: newThread, threadInfo: newThread,
rawMessageInfos: [addMembersMessage], rawMessageInfos: [addMembersMessage],
truncationStatus: messageTruncationStatus.EXHAUSTIVE, truncationStatus: messageTruncationStatus.EXHAUSTIVE,
rawEntryInfos: [], rawEntryInfos: [],
}, },
{ {
type: updateTypes.UPDATE_THREAD_READ_STATUS, type: updateTypes.UPDATE_THREAD_READ_STATUS,
id: uuid.v4(), id: uuid.v4(),
time, time,
threadID: existingThreadDetails.threadID, threadID: existingThreadDetails.threadID,
unread: true, unread: true,
}, },
); );
} else { } else {
const currentThreadInfoOptional = const currentThreadInfoOptional =
utilities.threadInfos[existingThreadDetails.threadID]; utilities.threadInfos[existingThreadDetails.threadID];
if (!currentThreadInfoOptional || !currentThreadInfoOptional.thick) { if (!currentThreadInfoOptional || !currentThreadInfoOptional.thick) {
// We can't perform this operation now. It should be queued for later. // We can't perform this operation now. It should be queued for later.
return { return {
rawMessageInfos: [], rawMessageInfos: [],
updateInfos: [], updateInfos: [],
threadInfo: null,
}; };
} }
const currentThreadInfo: ThickRawThreadInfo = currentThreadInfoOptional; const currentThreadInfo: ThickRawThreadInfo = currentThreadInfoOptional;
const defaultRoleID = values(currentThreadInfo.roles).find(role => const defaultRoleID = values(currentThreadInfo.roles).find(role =>
roleIsDefaultRole(role), roleIsDefaultRole(role),
)?.id; )?.id;
invariant(defaultRoleID, 'Default role ID must exist'); invariant(defaultRoleID, 'Default role ID must exist');
const { membershipPermissions } = createRoleAndPermissionForThickThreads( const { membershipPermissions } = createRoleAndPermissionForThickThreads(
currentThreadInfo.type, currentThreadInfo.type,
currentThreadInfo.id, currentThreadInfo.id,
defaultRoleID, defaultRoleID,
); );
const newMembers = addedUserIDs const newMembers = addedUserIDs
.filter(userID => !userIsMember(currentThreadInfo, userID)) .filter(userID => !userIsMember(currentThreadInfo, userID))
.map(userID => .map(userID =>
minimallyEncodeMemberInfo<ThickMemberInfo>({ minimallyEncodeMemberInfo<ThickMemberInfo>({
id: userID, id: userID,
role: defaultRoleID, role: defaultRoleID,
permissions: membershipPermissions, permissions: membershipPermissions,
isSender: editorID === viewerID, isSender: editorID === viewerID,
subscription: joinThreadSubscription, subscription: joinThreadSubscription,
}), }),
); );
const newThreadInfo = { const newThreadInfo = {
...currentThreadInfo, ...currentThreadInfo,
members: [...currentThreadInfo.members, ...newMembers], members: [...currentThreadInfo.members, ...newMembers],
}; };
resultThreadInfo = newThreadInfo;
updateInfos.push( updateInfos.push(
{ {
type: updateTypes.UPDATE_THREAD, type: updateTypes.UPDATE_THREAD,
id: uuid.v4(), id: uuid.v4(),
time, time,
threadInfo: newThreadInfo, threadInfo: newThreadInfo,
}, },
{ {
type: updateTypes.UPDATE_THREAD_READ_STATUS, type: updateTypes.UPDATE_THREAD_READ_STATUS,
id: uuid.v4(), id: uuid.v4(),
time, time,
threadID: existingThreadDetails.threadID, threadID: existingThreadDetails.threadID,
unread: true, unread: true,
}, },
); );
rawMessageInfos.push(addMembersMessage); rawMessageInfos.push(addMembersMessage);
} }
return { return {
rawMessageInfos, rawMessageInfos,
updateInfos, updateInfos,
threadInfo: resultThreadInfo,
}; };
}
const addMembersSpec: DMOperationSpec<DMAddMembersOperation> = Object.freeze({
processDMOperation: async (
dmOperation: DMAddMembersOperation,
viewerID: string,
utilities: ProcessDMOperationUtilities,
) => {
const { rawMessageInfos, updateInfos } = createAddNewMembersResults(
dmOperation,
viewerID,
utilities,
);
return { rawMessageInfos, updateInfos };
}, },
}); });
export { addMembersSpec }; export { addMembersSpec, createAddNewMembersResults };
View Options

native/navigation/community-drawer-content.react.js

Show All 22 Lines
} from '../../types/minimally-encoded-thread-permissions-types.js'; } from '../../types/minimally-encoded-thread-permissions-types.js';
import { joinThreadSubscription } from '../../types/subscription-types.js'; import { joinThreadSubscription } from '../../types/subscription-types.js';
import type { ThickMemberInfo } from '../../types/thread-types.js'; import type { ThickMemberInfo } from '../../types/thread-types.js';
import { updateTypes } from '../../types/update-types-enum.js'; import { updateTypes } from '../../types/update-types-enum.js';
import type { ClientUpdateInfo } from '../../types/update-types.js'; import type { ClientUpdateInfo } from '../../types/update-types.js';
import { values } from '../../utils/objects.js'; import { values } from '../../utils/objects.js';
import { roleIsDefaultRole, userIsMember } from '../thread-utils.js'; import { roleIsDefaultRole, userIsMember } from '../thread-utils.js';
const addMembersSpec: DMOperationSpec<DMAddMembersOperation> = Object.freeze({ function createAddNewMembersResults(
processDMOperation: async (
dmOperation: DMAddMembersOperation, dmOperation: DMAddMembersOperation,
viewerID: string, viewerID: string,
utilities: ProcessDMOperationUtilities, utilities: ProcessDMOperationUtilities,
) => { ): {
+rawMessageInfos: Array<RawMessageInfo>,
+updateInfos: Array<ClientUpdateInfo>,
+threadInfo: ?ThickRawThreadInfo,
} {
const { editorID, time, messageID, addedUserIDs, existingThreadDetails } = const { editorID, time, messageID, addedUserIDs, existingThreadDetails } =
dmOperation; dmOperation;
const addMembersMessage = { const addMembersMessage = {
type: messageTypes.ADD_MEMBERS, type: messageTypes.ADD_MEMBERS,
id: messageID, id: messageID,
threadID: existingThreadDetails.threadID, threadID: existingThreadDetails.threadID,
creatorID: editorID, creatorID: editorID,
time, time,
addedUserIDs: [...addedUserIDs], addedUserIDs: [...addedUserIDs],
}; };
const viewerIsAdded = addedUserIDs.includes(viewerID); const viewerIsAdded = addedUserIDs.includes(viewerID);
const updateInfos: Array<ClientUpdateInfo> = []; const updateInfos: Array<ClientUpdateInfo> = [];
const rawMessageInfos: Array<RawMessageInfo> = []; const rawMessageInfos: Array<RawMessageInfo> = [];
let resultThreadInfo: ?ThickRawThreadInfo;
if (viewerIsAdded) { if (viewerIsAdded) {
const newThread = createThickRawThreadInfo( const newThread = createThickRawThreadInfo(
{ {
...existingThreadDetails, ...existingThreadDetails,
allMemberIDs: [ allMemberIDs: [...existingThreadDetails.allMemberIDs, ...addedUserIDs],
...existingThreadDetails.allMemberIDs,
...addedUserIDs,
],
}, },
viewerID, viewerID,
); );
resultThreadInfo = newThread;
updateInfos.push( updateInfos.push(
{ {
type: updateTypes.JOIN_THREAD, type: updateTypes.JOIN_THREAD,
id: uuid.v4(), id: uuid.v4(),
time, time,
threadInfo: newThread, threadInfo: newThread,
rawMessageInfos: [addMembersMessage], rawMessageInfos: [addMembersMessage],
truncationStatus: messageTruncationStatus.EXHAUSTIVE, truncationStatus: messageTruncationStatus.EXHAUSTIVE,
rawEntryInfos: [], rawEntryInfos: [],
}, },
{ {
type: updateTypes.UPDATE_THREAD_READ_STATUS, type: updateTypes.UPDATE_THREAD_READ_STATUS,
id: uuid.v4(), id: uuid.v4(),
time, time,
threadID: existingThreadDetails.threadID, threadID: existingThreadDetails.threadID,
unread: true, unread: true,
}, },
); );
} else { } else {
const currentThreadInfoOptional = const currentThreadInfoOptional =
utilities.threadInfos[existingThreadDetails.threadID]; utilities.threadInfos[existingThreadDetails.threadID];
if (!currentThreadInfoOptional || !currentThreadInfoOptional.thick) { if (!currentThreadInfoOptional || !currentThreadInfoOptional.thick) {
// We can't perform this operation now. It should be queued for later. // We can't perform this operation now. It should be queued for later.
return { return {
rawMessageInfos: [], rawMessageInfos: [],
updateInfos: [], updateInfos: [],
threadInfo: null,
}; };
} }
const currentThreadInfo: ThickRawThreadInfo = currentThreadInfoOptional; const currentThreadInfo: ThickRawThreadInfo = currentThreadInfoOptional;
const defaultRoleID = values(currentThreadInfo.roles).find(role => const defaultRoleID = values(currentThreadInfo.roles).find(role =>
roleIsDefaultRole(role), roleIsDefaultRole(role),
)?.id; )?.id;
invariant(defaultRoleID, 'Default role ID must exist'); invariant(defaultRoleID, 'Default role ID must exist');
const { membershipPermissions } = createRoleAndPermissionForThickThreads( const { membershipPermissions } = createRoleAndPermissionForThickThreads(
currentThreadInfo.type, currentThreadInfo.type,
currentThreadInfo.id, currentThreadInfo.id,
defaultRoleID, defaultRoleID,
); );
const newMembers = addedUserIDs const newMembers = addedUserIDs
.filter(userID => !userIsMember(currentThreadInfo, userID)) .filter(userID => !userIsMember(currentThreadInfo, userID))
.map(userID => .map(userID =>
minimallyEncodeMemberInfo<ThickMemberInfo>({ minimallyEncodeMemberInfo<ThickMemberInfo>({
id: userID, id: userID,
role: defaultRoleID, role: defaultRoleID,
permissions: membershipPermissions, permissions: membershipPermissions,
isSender: editorID === viewerID, isSender: editorID === viewerID,
subscription: joinThreadSubscription, subscription: joinThreadSubscription,
}), }),
); );
const newThreadInfo = { const newThreadInfo = {
...currentThreadInfo, ...currentThreadInfo,
members: [...currentThreadInfo.members, ...newMembers], members: [...currentThreadInfo.members, ...newMembers],
}; };
resultThreadInfo = newThreadInfo;
updateInfos.push( updateInfos.push(
{ {
type: updateTypes.UPDATE_THREAD, type: updateTypes.UPDATE_THREAD,
id: uuid.v4(), id: uuid.v4(),
time, time,
threadInfo: newThreadInfo, threadInfo: newThreadInfo,
}, },
{ {
type: updateTypes.UPDATE_THREAD_READ_STATUS, type: updateTypes.UPDATE_THREAD_READ_STATUS,
id: uuid.v4(), id: uuid.v4(),
time, time,
threadID: existingThreadDetails.threadID, threadID: existingThreadDetails.threadID,
unread: true, unread: true,
}, },
); );
rawMessageInfos.push(addMembersMessage); rawMessageInfos.push(addMembersMessage);
} }
return { return {
rawMessageInfos, rawMessageInfos,
updateInfos, updateInfos,
threadInfo: resultThreadInfo,
}; };
}
const addMembersSpec: DMOperationSpec<DMAddMembersOperation> = Object.freeze({
processDMOperation: async (
dmOperation: DMAddMembersOperation,
viewerID: string,
utilities: ProcessDMOperationUtilities,
) => {
const { rawMessageInfos, updateInfos } = createAddNewMembersResults(
dmOperation,
viewerID,
utilities,
);
return { rawMessageInfos, updateInfos };
}, },
}); });
export { addMembersSpec }; export { addMembersSpec, createAddNewMembersResults };