Page MenuHomePhabricator
Differential D9993

[Flow202][native][skip-ci] [9/x] Type navigation prop on all ReactNav screens
ClosedPublic
Actions

Authored by ashoat on Nov 27 2023, 12:31 AM.
Tags
None
Referenced Files
Unknown Object (File)
Sat, Apr 19, 12:04 AM
Unknown Object (File)
Fri, Apr 18, 11:00 AM
Unknown Object (File)
Thu, Apr 17, 7:29 AM
Unknown Object (File)
Wed, Apr 16, 12:22 PM
Unknown Object (File)
Wed, Apr 9, 6:46 AM
Unknown Object (File)
Mar 18 2025, 5:39 AM
Unknown Object (File)
Mar 18 2025, 5:39 AM
Unknown Object (File)
Mar 18 2025, 5:37 AM
View All 93 Files
Subscribers
None

Details

Reviewers
ginsu
atul
tomek
Commits
rCOMM34f640c23850: [Flow202][native][skip-ci] [9/x] Type navigation prop on all ReactNav screens
Summary

The new version of Flow wants us to type the navigation prop on all ReactNav screens so it can make sure we're using .Screen components correctly in navigators.

NOTE: CI will fail on this diff. I considered the possibility of fixing Flow errors BEFORE upgrading Flow, but it wasn't possible... in some cases, the fixes to support the new version of Flow caused errors in the old version. I could have hidden these type errors with $FlowFixMe lines and then later revert those, but that seemed like too much busy work.

Depends on D9992

Test Plan

Confirm the Flow errors go away

Diff Detail

Repository
rCOMM Comm
Lint
No Lint Coverage
Unit
No Test Coverage
Build Status
Buildable 24434
Build 210150: arc lint + arc unit

Revision Contents
Changeset List

Diff 33637

View Options

native/apps/apps-directory.react.js

Show All 11 Lines
import SWMansionIcon from 'lib/components/SWMansionIcon.react.js'; import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js'; import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
import { threadInfoSelector } from 'lib/selectors/thread-selectors.js'; import { threadInfoSelector } from 'lib/selectors/thread-selectors.js';
import { userStoreMentionSearchIndex } from 'lib/selectors/user-selectors.js'; import { userStoreMentionSearchIndex } from 'lib/selectors/user-selectors.js';
import { import {
getMentionTypeaheadUserSuggestions, getMentionTypeaheadUserSuggestions,
getTypeaheadRegexMatches, getTypeaheadRegexMatches,
getUserMentionsCandidates, getUserMentionsCandidates,
getMentionTypeaheadChatSuggestions,
type MentionTypeaheadSuggestionItem, type MentionTypeaheadSuggestionItem,
type TypeaheadMatchedStrings, type TypeaheadMatchedStrings,
} from 'lib/shared/mention-utils.js'; } from 'lib/shared/mention-utils.js';
import { localIDPrefix, trimMessage } from 'lib/shared/message-utils.js'; import { localIDPrefix, trimMessage } from 'lib/shared/message-utils.js';
import { import {
threadHasPermission, threadHasPermission,
viewerIsMember, viewerIsMember,
threadFrozenDueToViewerBlock, threadFrozenDueToViewerBlock,
threadActualMembers, threadActualMembers,
checkIfDefaultMembersAreVoiced, checkIfDefaultMembersAreVoiced,
useThreadChatMentionCandidates,
useThreadChatMentionSearchIndex,
} from 'lib/shared/thread-utils.js'; } from 'lib/shared/thread-utils.js';
import type { CalendarQuery } from 'lib/types/entry-types.js'; import type { CalendarQuery } from 'lib/types/entry-types.js';
import type { LoadingStatus } from 'lib/types/loading-types.js'; import type { LoadingStatus } from 'lib/types/loading-types.js';
import { messageTypes } from 'lib/types/message-types-enum.js'; import { messageTypes } from 'lib/types/message-types-enum.js';
import { threadPermissions } from 'lib/types/thread-permission-types.js'; import { threadPermissions } from 'lib/types/thread-permission-types.js';
import { import {
type ThreadInfo, type ThreadInfo,
type ClientThreadJoinRequest, type ClientThreadJoinRequest,
▲ Show 20 Lines • Show All 535 Lines • ▼ Show 20 Lines React.memo<BaseProps>(function ConnectedChatInputBar(props) {
const createThreadLoadingStatus = useSelector( const createThreadLoadingStatus = useSelector(
createThreadLoadingStatusSelector, createThreadLoadingStatusSelector,
); );
const threadCreationInProgress = createThreadLoadingStatus === 'loading'; const threadCreationInProgress = createThreadLoadingStatus === 'loading';
const calendarQuery = useSelector(nonThreadCalendarQuery); const calendarQuery = useSelector(nonThreadCalendarQuery);
const dispatchActionPromise = useDispatchActionPromise(); const dispatchActionPromise = useDispatchActionPromise();
const callJoinThread = useServerCall(joinThread); const callJoinThread = useServerCall(joinThread);
const userSearchIndex = useSelector(userStoreMentionSearchIndex); const userSearchIndex = useSelector(userStoreMentionSearchIndex);
const chatMentionSearchIndex = useThreadChatMentionSearchIndex(
props.threadInfo,
);
const { parentThreadID } = props.threadInfo; const { parentThreadID } = props.threadInfo;
const parentThreadInfo = useSelector(state => const parentThreadInfo = useSelector(state =>
parentThreadID ? threadInfoSelector(state)[parentThreadID] : null, parentThreadID ? threadInfoSelector(state)[parentThreadID] : null,
); );
const userMentionsCandidates = getUserMentionsCandidates( const userMentionsCandidates = getUserMentionsCandidates(
props.threadInfo, props.threadInfo,
parentThreadInfo, parentThreadInfo,
); );
const chatMentionCandidates = useThreadChatMentionCandidates(
props.threadInfo,
);
const typeaheadRegexMatches = React.useMemo( const typeaheadRegexMatches = React.useMemo(
() => () =>
getTypeaheadRegexMatches( getTypeaheadRegexMatches(
props.inputState.draft, props.inputState.draft,
{ {
start: props.inputState.textCursorPosition, start: props.inputState.textCursorPosition,
end: props.inputState.textCursorPosition, end: props.inputState.textCursorPosition,
}, },
Show All 14 Lines const typeaheadMatchedStrings: ?TypeaheadMatchedStrings = React.useMemo(
[typeaheadRegexMatches], [typeaheadRegexMatches],
); );
React.useEffect(() => { React.useEffect(() => {
if (props.inputState.typeaheadState.keepUpdatingThreadMembers) { if (props.inputState.typeaheadState.keepUpdatingThreadMembers) {
const setter = props.inputState.setTypeaheadState; const setter = props.inputState.setTypeaheadState;
setter({ setter({
frozenUserMentionsCandidates: userMentionsCandidates, frozenUserMentionsCandidates: userMentionsCandidates,
frozenChatMentionsCandidates: chatMentionCandidates,
}); });
} }
}, [ }, [
userMentionsCandidates, userMentionsCandidates,
props.inputState.setTypeaheadState, props.inputState.setTypeaheadState,
props.inputState.typeaheadState.keepUpdatingThreadMembers, props.inputState.typeaheadState.keepUpdatingThreadMembers,
chatMentionCandidates,
]); ]);
const suggestedUsers = React.useMemo(() => { const suggestedUsers = React.useMemo(() => {
if (!typeaheadMatchedStrings) { if (!typeaheadMatchedStrings) {
return []; return [];
} }
return getMentionTypeaheadUserSuggestions( return getMentionTypeaheadUserSuggestions(
userSearchIndex, userSearchIndex,
props.inputState.typeaheadState.frozenUserMentionsCandidates, props.inputState.typeaheadState.frozenUserMentionsCandidates,
viewerID, viewerID,
typeaheadMatchedStrings.textPrefix, typeaheadMatchedStrings.textPrefix,
); );
}, [ }, [
userSearchIndex, userSearchIndex,
props.inputState.typeaheadState.frozenUserMentionsCandidates, props.inputState.typeaheadState.frozenUserMentionsCandidates,
viewerID, viewerID,
typeaheadMatchedStrings, typeaheadMatchedStrings,
]); ]);
const suggestedChats = React.useMemo(() => {
if (!typeaheadMatchedStrings) {
return [];
}
return getMentionTypeaheadChatSuggestions(
chatMentionSearchIndex,
props.inputState.typeaheadState.frozenChatMentionsCandidates,
typeaheadMatchedStrings.textPrefix,
);
}, [
chatMentionSearchIndex,
props.inputState.typeaheadState.frozenChatMentionsCandidates,
typeaheadMatchedStrings,
]);
const suggestions = React.useMemo(() => {
if (!typeaheadMatchedStrings) {
return [];
}
return [...suggestedUsers, ...suggestedChats];
}, [suggestedUsers, suggestedChats, typeaheadMatchedStrings]);
rohanUnsubmitted
Not Done
Inline Actions

Does it make sense to merge these two together? Something like

const suggestions = React.useMemo(() => {
  if (!typeaheadMatchedStrings) {
    return [];
  }
  const suggestedUsers = getMentionTypeaheadUserSuggestions(
    userSearchIndex,
    props.inputState.typeaheadState.frozenUserMentionsCandidates,
    viewerID,
    typeaheadMatchedStrings.textPrefix,
  );

  const suggestedChats = getMentionTypeaheadChatSuggestions(
    chatMentionSearchIndex,
    props.inputState.typeaheadState.frozenChatMentionsCandidates,
    typeaheadMatchedStrings.textPrefix,
  );

  return [...suggestedUsers, ...suggestedChats];
}, [
  typeaheadMatchedStrings,
  userSearchIndex,
  props.inputState.typeaheadState.frozenUserMentionsCandidates,
  viewerID,
  chatMentionSearchIndex,
]);
rohan: Does it make sense to merge these two together? Something like ``` const suggestions =…
patrykAuthorUnsubmitted
Done
Inline Actions

Yes, my motivation to split this code into three useMemos was that if userSearchIndex changes and chatMentionSearchIndex not, then we would recalculate userSuggestions only, but the only time userSearchIndex and chatMentionSearchIndex would change is when user switches the focused chat, so my intuition was def wrong.

patryk: Yes, my motivation to split this code into three `useMemos` was that if `userSearchIndex`…
return ( return (
<ChatInputBar <ChatInputBar
{...props} {...props}
viewerID={viewerID} viewerID={viewerID}
joinThreadLoadingStatus={joinThreadLoadingStatus} joinThreadLoadingStatus={joinThreadLoadingStatus}
threadCreationInProgress={threadCreationInProgress} threadCreationInProgress={threadCreationInProgress}
calendarQuery={calendarQuery} calendarQuery={calendarQuery}
nextLocalID={nextLocalID} nextLocalID={nextLocalID}
isThreadActive={isThreadActive} isThreadActive={isThreadActive}
userInfos={userInfos} userInfos={userInfos}
dispatchActionPromise={dispatchActionPromise} dispatchActionPromise={dispatchActionPromise}
joinThread={callJoinThread} joinThread={callJoinThread}
typeaheadMatchedStrings={typeaheadMatchedStrings} typeaheadMatchedStrings={typeaheadMatchedStrings}
suggestions={suggestedUsers} suggestions={suggestions}
parentThreadInfo={parentThreadInfo} parentThreadInfo={parentThreadInfo}
/> />
); );
}); });
export default ConnectedChatInputBar; export default ConnectedChatInputBar;
View Options

native/profile/add-keyserver.react.js

Show All 11 Lines
import SWMansionIcon from 'lib/components/SWMansionIcon.react.js'; import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js'; import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
import { threadInfoSelector } from 'lib/selectors/thread-selectors.js'; import { threadInfoSelector } from 'lib/selectors/thread-selectors.js';
import { userStoreMentionSearchIndex } from 'lib/selectors/user-selectors.js'; import { userStoreMentionSearchIndex } from 'lib/selectors/user-selectors.js';
import { import {
getMentionTypeaheadUserSuggestions, getMentionTypeaheadUserSuggestions,
getTypeaheadRegexMatches, getTypeaheadRegexMatches,
getUserMentionsCandidates, getUserMentionsCandidates,
getMentionTypeaheadChatSuggestions,
type MentionTypeaheadSuggestionItem, type MentionTypeaheadSuggestionItem,
type TypeaheadMatchedStrings, type TypeaheadMatchedStrings,
} from 'lib/shared/mention-utils.js'; } from 'lib/shared/mention-utils.js';
import { localIDPrefix, trimMessage } from 'lib/shared/message-utils.js'; import { localIDPrefix, trimMessage } from 'lib/shared/message-utils.js';
import { import {
threadHasPermission, threadHasPermission,
viewerIsMember, viewerIsMember,
threadFrozenDueToViewerBlock, threadFrozenDueToViewerBlock,
threadActualMembers, threadActualMembers,
checkIfDefaultMembersAreVoiced, checkIfDefaultMembersAreVoiced,
useThreadChatMentionCandidates,
useThreadChatMentionSearchIndex,
} from 'lib/shared/thread-utils.js'; } from 'lib/shared/thread-utils.js';
import type { CalendarQuery } from 'lib/types/entry-types.js'; import type { CalendarQuery } from 'lib/types/entry-types.js';
import type { LoadingStatus } from 'lib/types/loading-types.js'; import type { LoadingStatus } from 'lib/types/loading-types.js';
import { messageTypes } from 'lib/types/message-types-enum.js'; import { messageTypes } from 'lib/types/message-types-enum.js';
import { threadPermissions } from 'lib/types/thread-permission-types.js'; import { threadPermissions } from 'lib/types/thread-permission-types.js';
import { import {
type ThreadInfo, type ThreadInfo,
type ClientThreadJoinRequest, type ClientThreadJoinRequest,
▲ Show 20 Lines • Show All 535 Lines • ▼ Show 20 Lines React.memo<BaseProps>(function ConnectedChatInputBar(props) {
const createThreadLoadingStatus = useSelector( const createThreadLoadingStatus = useSelector(
createThreadLoadingStatusSelector, createThreadLoadingStatusSelector,
); );
const threadCreationInProgress = createThreadLoadingStatus === 'loading'; const threadCreationInProgress = createThreadLoadingStatus === 'loading';
const calendarQuery = useSelector(nonThreadCalendarQuery); const calendarQuery = useSelector(nonThreadCalendarQuery);
const dispatchActionPromise = useDispatchActionPromise(); const dispatchActionPromise = useDispatchActionPromise();
const callJoinThread = useServerCall(joinThread); const callJoinThread = useServerCall(joinThread);
const userSearchIndex = useSelector(userStoreMentionSearchIndex); const userSearchIndex = useSelector(userStoreMentionSearchIndex);
const chatMentionSearchIndex = useThreadChatMentionSearchIndex(
props.threadInfo,
);
const { parentThreadID } = props.threadInfo; const { parentThreadID } = props.threadInfo;
const parentThreadInfo = useSelector(state => const parentThreadInfo = useSelector(state =>
parentThreadID ? threadInfoSelector(state)[parentThreadID] : null, parentThreadID ? threadInfoSelector(state)[parentThreadID] : null,
); );
const userMentionsCandidates = getUserMentionsCandidates( const userMentionsCandidates = getUserMentionsCandidates(
props.threadInfo, props.threadInfo,
parentThreadInfo, parentThreadInfo,
); );
const chatMentionCandidates = useThreadChatMentionCandidates(
props.threadInfo,
);
const typeaheadRegexMatches = React.useMemo( const typeaheadRegexMatches = React.useMemo(
() => () =>
getTypeaheadRegexMatches( getTypeaheadRegexMatches(
props.inputState.draft, props.inputState.draft,
{ {
start: props.inputState.textCursorPosition, start: props.inputState.textCursorPosition,
end: props.inputState.textCursorPosition, end: props.inputState.textCursorPosition,
}, },
Show All 14 Lines const typeaheadMatchedStrings: ?TypeaheadMatchedStrings = React.useMemo(
[typeaheadRegexMatches], [typeaheadRegexMatches],
); );
React.useEffect(() => { React.useEffect(() => {
if (props.inputState.typeaheadState.keepUpdatingThreadMembers) { if (props.inputState.typeaheadState.keepUpdatingThreadMembers) {
const setter = props.inputState.setTypeaheadState; const setter = props.inputState.setTypeaheadState;
setter({ setter({
frozenUserMentionsCandidates: userMentionsCandidates, frozenUserMentionsCandidates: userMentionsCandidates,
frozenChatMentionsCandidates: chatMentionCandidates,
}); });
} }
}, [ }, [
userMentionsCandidates, userMentionsCandidates,
props.inputState.setTypeaheadState, props.inputState.setTypeaheadState,
props.inputState.typeaheadState.keepUpdatingThreadMembers, props.inputState.typeaheadState.keepUpdatingThreadMembers,
chatMentionCandidates,
]); ]);
const suggestedUsers = React.useMemo(() => { const suggestedUsers = React.useMemo(() => {
if (!typeaheadMatchedStrings) { if (!typeaheadMatchedStrings) {
return []; return [];
} }
return getMentionTypeaheadUserSuggestions( return getMentionTypeaheadUserSuggestions(
userSearchIndex, userSearchIndex,
props.inputState.typeaheadState.frozenUserMentionsCandidates, props.inputState.typeaheadState.frozenUserMentionsCandidates,
viewerID, viewerID,
typeaheadMatchedStrings.textPrefix, typeaheadMatchedStrings.textPrefix,
); );
}, [ }, [
userSearchIndex, userSearchIndex,
props.inputState.typeaheadState.frozenUserMentionsCandidates, props.inputState.typeaheadState.frozenUserMentionsCandidates,
viewerID, viewerID,
typeaheadMatchedStrings, typeaheadMatchedStrings,
]); ]);
const suggestedChats = React.useMemo(() => {
if (!typeaheadMatchedStrings) {
return [];
}
return getMentionTypeaheadChatSuggestions(
chatMentionSearchIndex,
props.inputState.typeaheadState.frozenChatMentionsCandidates,
typeaheadMatchedStrings.textPrefix,
);
}, [
chatMentionSearchIndex,
props.inputState.typeaheadState.frozenChatMentionsCandidates,
typeaheadMatchedStrings,
]);
const suggestions = React.useMemo(() => {
if (!typeaheadMatchedStrings) {
return [];
}
return [...suggestedUsers, ...suggestedChats];
}, [suggestedUsers, suggestedChats, typeaheadMatchedStrings]);
rohanUnsubmitted
Not Done
Inline Actions

Does it make sense to merge these two together? Something like

const suggestions = React.useMemo(() => {
  if (!typeaheadMatchedStrings) {
    return [];
  }
  const suggestedUsers = getMentionTypeaheadUserSuggestions(
    userSearchIndex,
    props.inputState.typeaheadState.frozenUserMentionsCandidates,
    viewerID,
    typeaheadMatchedStrings.textPrefix,
  );

  const suggestedChats = getMentionTypeaheadChatSuggestions(
    chatMentionSearchIndex,
    props.inputState.typeaheadState.frozenChatMentionsCandidates,
    typeaheadMatchedStrings.textPrefix,
  );

  return [...suggestedUsers, ...suggestedChats];
}, [
  typeaheadMatchedStrings,
  userSearchIndex,
  props.inputState.typeaheadState.frozenUserMentionsCandidates,
  viewerID,
  chatMentionSearchIndex,
]);
rohan: Does it make sense to merge these two together? Something like ``` const suggestions =…
patrykAuthorUnsubmitted
Done
Inline Actions

Yes, my motivation to split this code into three useMemos was that if userSearchIndex changes and chatMentionSearchIndex not, then we would recalculate userSuggestions only, but the only time userSearchIndex and chatMentionSearchIndex would change is when user switches the focused chat, so my intuition was def wrong.

patryk: Yes, my motivation to split this code into three `useMemos` was that if `userSearchIndex`…
return ( return (
<ChatInputBar <ChatInputBar
{...props} {...props}
viewerID={viewerID} viewerID={viewerID}
joinThreadLoadingStatus={joinThreadLoadingStatus} joinThreadLoadingStatus={joinThreadLoadingStatus}
threadCreationInProgress={threadCreationInProgress} threadCreationInProgress={threadCreationInProgress}
calendarQuery={calendarQuery} calendarQuery={calendarQuery}
nextLocalID={nextLocalID} nextLocalID={nextLocalID}
isThreadActive={isThreadActive} isThreadActive={isThreadActive}
userInfos={userInfos} userInfos={userInfos}
dispatchActionPromise={dispatchActionPromise} dispatchActionPromise={dispatchActionPromise}
joinThread={callJoinThread} joinThread={callJoinThread}
typeaheadMatchedStrings={typeaheadMatchedStrings} typeaheadMatchedStrings={typeaheadMatchedStrings}
suggestions={suggestedUsers} suggestions={suggestions}
parentThreadInfo={parentThreadInfo} parentThreadInfo={parentThreadInfo}
/> />
); );
}); });
export default ConnectedChatInputBar; export default ConnectedChatInputBar;
View Options

native/profile/appearance-preferences.react.js

Show All 11 Lines
import SWMansionIcon from 'lib/components/SWMansionIcon.react.js'; import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js'; import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
import { threadInfoSelector } from 'lib/selectors/thread-selectors.js'; import { threadInfoSelector } from 'lib/selectors/thread-selectors.js';
import { userStoreMentionSearchIndex } from 'lib/selectors/user-selectors.js'; import { userStoreMentionSearchIndex } from 'lib/selectors/user-selectors.js';
import { import {
getMentionTypeaheadUserSuggestions, getMentionTypeaheadUserSuggestions,
getTypeaheadRegexMatches, getTypeaheadRegexMatches,
getUserMentionsCandidates, getUserMentionsCandidates,
getMentionTypeaheadChatSuggestions,
type MentionTypeaheadSuggestionItem, type MentionTypeaheadSuggestionItem,
type TypeaheadMatchedStrings, type TypeaheadMatchedStrings,
} from 'lib/shared/mention-utils.js'; } from 'lib/shared/mention-utils.js';
import { localIDPrefix, trimMessage } from 'lib/shared/message-utils.js'; import { localIDPrefix, trimMessage } from 'lib/shared/message-utils.js';
import { import {
threadHasPermission, threadHasPermission,
viewerIsMember, viewerIsMember,
threadFrozenDueToViewerBlock, threadFrozenDueToViewerBlock,
threadActualMembers, threadActualMembers,
checkIfDefaultMembersAreVoiced, checkIfDefaultMembersAreVoiced,
useThreadChatMentionCandidates,
useThreadChatMentionSearchIndex,
} from 'lib/shared/thread-utils.js'; } from 'lib/shared/thread-utils.js';
import type { CalendarQuery } from 'lib/types/entry-types.js'; import type { CalendarQuery } from 'lib/types/entry-types.js';
import type { LoadingStatus } from 'lib/types/loading-types.js'; import type { LoadingStatus } from 'lib/types/loading-types.js';
import { messageTypes } from 'lib/types/message-types-enum.js'; import { messageTypes } from 'lib/types/message-types-enum.js';
import { threadPermissions } from 'lib/types/thread-permission-types.js'; import { threadPermissions } from 'lib/types/thread-permission-types.js';
import { import {
type ThreadInfo, type ThreadInfo,
type ClientThreadJoinRequest, type ClientThreadJoinRequest,
▲ Show 20 Lines • Show All 535 Lines • ▼ Show 20 Lines React.memo<BaseProps>(function ConnectedChatInputBar(props) {
const createThreadLoadingStatus = useSelector( const createThreadLoadingStatus = useSelector(
createThreadLoadingStatusSelector, createThreadLoadingStatusSelector,
); );
const threadCreationInProgress = createThreadLoadingStatus === 'loading'; const threadCreationInProgress = createThreadLoadingStatus === 'loading';
const calendarQuery = useSelector(nonThreadCalendarQuery); const calendarQuery = useSelector(nonThreadCalendarQuery);
const dispatchActionPromise = useDispatchActionPromise(); const dispatchActionPromise = useDispatchActionPromise();
const callJoinThread = useServerCall(joinThread); const callJoinThread = useServerCall(joinThread);
const userSearchIndex = useSelector(userStoreMentionSearchIndex); const userSearchIndex = useSelector(userStoreMentionSearchIndex);
const chatMentionSearchIndex = useThreadChatMentionSearchIndex(
props.threadInfo,
);
const { parentThreadID } = props.threadInfo; const { parentThreadID } = props.threadInfo;
const parentThreadInfo = useSelector(state => const parentThreadInfo = useSelector(state =>
parentThreadID ? threadInfoSelector(state)[parentThreadID] : null, parentThreadID ? threadInfoSelector(state)[parentThreadID] : null,
); );
const userMentionsCandidates = getUserMentionsCandidates( const userMentionsCandidates = getUserMentionsCandidates(
props.threadInfo, props.threadInfo,
parentThreadInfo, parentThreadInfo,
); );
const chatMentionCandidates = useThreadChatMentionCandidates(
props.threadInfo,
);
const typeaheadRegexMatches = React.useMemo( const typeaheadRegexMatches = React.useMemo(
() => () =>
getTypeaheadRegexMatches( getTypeaheadRegexMatches(
props.inputState.draft, props.inputState.draft,
{ {
start: props.inputState.textCursorPosition, start: props.inputState.textCursorPosition,
end: props.inputState.textCursorPosition, end: props.inputState.textCursorPosition,
}, },
Show All 14 Lines const typeaheadMatchedStrings: ?TypeaheadMatchedStrings = React.useMemo(
[typeaheadRegexMatches], [typeaheadRegexMatches],
); );
React.useEffect(() => { React.useEffect(() => {
if (props.inputState.typeaheadState.keepUpdatingThreadMembers) { if (props.inputState.typeaheadState.keepUpdatingThreadMembers) {
const setter = props.inputState.setTypeaheadState; const setter = props.inputState.setTypeaheadState;
setter({ setter({
frozenUserMentionsCandidates: userMentionsCandidates, frozenUserMentionsCandidates: userMentionsCandidates,
frozenChatMentionsCandidates: chatMentionCandidates,
}); });
} }
}, [ }, [
userMentionsCandidates, userMentionsCandidates,
props.inputState.setTypeaheadState, props.inputState.setTypeaheadState,
props.inputState.typeaheadState.keepUpdatingThreadMembers, props.inputState.typeaheadState.keepUpdatingThreadMembers,
chatMentionCandidates,
]); ]);
const suggestedUsers = React.useMemo(() => { const suggestedUsers = React.useMemo(() => {
if (!typeaheadMatchedStrings) { if (!typeaheadMatchedStrings) {
return []; return [];
} }
return getMentionTypeaheadUserSuggestions( return getMentionTypeaheadUserSuggestions(
userSearchIndex, userSearchIndex,
props.inputState.typeaheadState.frozenUserMentionsCandidates, props.inputState.typeaheadState.frozenUserMentionsCandidates,
viewerID, viewerID,
typeaheadMatchedStrings.textPrefix, typeaheadMatchedStrings.textPrefix,
); );
}, [ }, [
userSearchIndex, userSearchIndex,
props.inputState.typeaheadState.frozenUserMentionsCandidates, props.inputState.typeaheadState.frozenUserMentionsCandidates,
viewerID, viewerID,
typeaheadMatchedStrings, typeaheadMatchedStrings,
]); ]);
const suggestedChats = React.useMemo(() => {
if (!typeaheadMatchedStrings) {
return [];
}
return getMentionTypeaheadChatSuggestions(
chatMentionSearchIndex,
props.inputState.typeaheadState.frozenChatMentionsCandidates,
typeaheadMatchedStrings.textPrefix,
);
}, [
chatMentionSearchIndex,
props.inputState.typeaheadState.frozenChatMentionsCandidates,
typeaheadMatchedStrings,
]);
const suggestions = React.useMemo(() => {
if (!typeaheadMatchedStrings) {
return [];
}
return [...suggestedUsers, ...suggestedChats];
}, [suggestedUsers, suggestedChats, typeaheadMatchedStrings]);
rohanUnsubmitted
Not Done
Inline Actions

Does it make sense to merge these two together? Something like

const suggestions = React.useMemo(() => {
  if (!typeaheadMatchedStrings) {
    return [];
  }
  const suggestedUsers = getMentionTypeaheadUserSuggestions(
    userSearchIndex,
    props.inputState.typeaheadState.frozenUserMentionsCandidates,
    viewerID,
    typeaheadMatchedStrings.textPrefix,
  );

  const suggestedChats = getMentionTypeaheadChatSuggestions(
    chatMentionSearchIndex,
    props.inputState.typeaheadState.frozenChatMentionsCandidates,
    typeaheadMatchedStrings.textPrefix,
  );

  return [...suggestedUsers, ...suggestedChats];
}, [
  typeaheadMatchedStrings,
  userSearchIndex,
  props.inputState.typeaheadState.frozenUserMentionsCandidates,
  viewerID,
  chatMentionSearchIndex,
]);
rohan: Does it make sense to merge these two together? Something like ``` const suggestions =…
patrykAuthorUnsubmitted
Done
Inline Actions

Yes, my motivation to split this code into three useMemos was that if userSearchIndex changes and chatMentionSearchIndex not, then we would recalculate userSuggestions only, but the only time userSearchIndex and chatMentionSearchIndex would change is when user switches the focused chat, so my intuition was def wrong.

patryk: Yes, my motivation to split this code into three `useMemos` was that if `userSearchIndex`…
return ( return (
<ChatInputBar <ChatInputBar
{...props} {...props}
viewerID={viewerID} viewerID={viewerID}
joinThreadLoadingStatus={joinThreadLoadingStatus} joinThreadLoadingStatus={joinThreadLoadingStatus}
threadCreationInProgress={threadCreationInProgress} threadCreationInProgress={threadCreationInProgress}
calendarQuery={calendarQuery} calendarQuery={calendarQuery}
nextLocalID={nextLocalID} nextLocalID={nextLocalID}
isThreadActive={isThreadActive} isThreadActive={isThreadActive}
userInfos={userInfos} userInfos={userInfos}
dispatchActionPromise={dispatchActionPromise} dispatchActionPromise={dispatchActionPromise}
joinThread={callJoinThread} joinThread={callJoinThread}
typeaheadMatchedStrings={typeaheadMatchedStrings} typeaheadMatchedStrings={typeaheadMatchedStrings}
suggestions={suggestedUsers} suggestions={suggestions}
parentThreadInfo={parentThreadInfo} parentThreadInfo={parentThreadInfo}
/> />
); );
}); });
export default ConnectedChatInputBar; export default ConnectedChatInputBar;
View Options

native/profile/backup-menu.react.js

Show All 11 Lines
import SWMansionIcon from 'lib/components/SWMansionIcon.react.js'; import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js'; import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
import { threadInfoSelector } from 'lib/selectors/thread-selectors.js'; import { threadInfoSelector } from 'lib/selectors/thread-selectors.js';
import { userStoreMentionSearchIndex } from 'lib/selectors/user-selectors.js'; import { userStoreMentionSearchIndex } from 'lib/selectors/user-selectors.js';
import { import {
getMentionTypeaheadUserSuggestions, getMentionTypeaheadUserSuggestions,
getTypeaheadRegexMatches, getTypeaheadRegexMatches,
getUserMentionsCandidates, getUserMentionsCandidates,
getMentionTypeaheadChatSuggestions,
type MentionTypeaheadSuggestionItem, type MentionTypeaheadSuggestionItem,
type TypeaheadMatchedStrings, type TypeaheadMatchedStrings,
} from 'lib/shared/mention-utils.js'; } from 'lib/shared/mention-utils.js';
import { localIDPrefix, trimMessage } from 'lib/shared/message-utils.js'; import { localIDPrefix, trimMessage } from 'lib/shared/message-utils.js';
import { import {
threadHasPermission, threadHasPermission,
viewerIsMember, viewerIsMember,
threadFrozenDueToViewerBlock, threadFrozenDueToViewerBlock,
threadActualMembers, threadActualMembers,
checkIfDefaultMembersAreVoiced, checkIfDefaultMembersAreVoiced,
useThreadChatMentionCandidates,
useThreadChatMentionSearchIndex,
} from 'lib/shared/thread-utils.js'; } from 'lib/shared/thread-utils.js';
import type { CalendarQuery } from 'lib/types/entry-types.js'; import type { CalendarQuery } from 'lib/types/entry-types.js';
import type { LoadingStatus } from 'lib/types/loading-types.js'; import type { LoadingStatus } from 'lib/types/loading-types.js';
import { messageTypes } from 'lib/types/message-types-enum.js'; import { messageTypes } from 'lib/types/message-types-enum.js';
import { threadPermissions } from 'lib/types/thread-permission-types.js'; import { threadPermissions } from 'lib/types/thread-permission-types.js';
import { import {
type ThreadInfo, type ThreadInfo,
type ClientThreadJoinRequest, type ClientThreadJoinRequest,
▲ Show 20 Lines • Show All 535 Lines • ▼ Show 20 Lines React.memo<BaseProps>(function ConnectedChatInputBar(props) {
const createThreadLoadingStatus = useSelector( const createThreadLoadingStatus = useSelector(
createThreadLoadingStatusSelector, createThreadLoadingStatusSelector,
); );
const threadCreationInProgress = createThreadLoadingStatus === 'loading'; const threadCreationInProgress = createThreadLoadingStatus === 'loading';
const calendarQuery = useSelector(nonThreadCalendarQuery); const calendarQuery = useSelector(nonThreadCalendarQuery);
const dispatchActionPromise = useDispatchActionPromise(); const dispatchActionPromise = useDispatchActionPromise();
const callJoinThread = useServerCall(joinThread); const callJoinThread = useServerCall(joinThread);
const userSearchIndex = useSelector(userStoreMentionSearchIndex); const userSearchIndex = useSelector(userStoreMentionSearchIndex);
const chatMentionSearchIndex = useThreadChatMentionSearchIndex(
props.threadInfo,
);
const { parentThreadID } = props.threadInfo; const { parentThreadID } = props.threadInfo;
const parentThreadInfo = useSelector(state => const parentThreadInfo = useSelector(state =>
parentThreadID ? threadInfoSelector(state)[parentThreadID] : null, parentThreadID ? threadInfoSelector(state)[parentThreadID] : null,
); );
const userMentionsCandidates = getUserMentionsCandidates( const userMentionsCandidates = getUserMentionsCandidates(
props.threadInfo, props.threadInfo,
parentThreadInfo, parentThreadInfo,
); );
const chatMentionCandidates = useThreadChatMentionCandidates(
props.threadInfo,
);
const typeaheadRegexMatches = React.useMemo( const typeaheadRegexMatches = React.useMemo(
() => () =>
getTypeaheadRegexMatches( getTypeaheadRegexMatches(
props.inputState.draft, props.inputState.draft,
{ {
start: props.inputState.textCursorPosition, start: props.inputState.textCursorPosition,
end: props.inputState.textCursorPosition, end: props.inputState.textCursorPosition,
}, },
Show All 14 Lines const typeaheadMatchedStrings: ?TypeaheadMatchedStrings = React.useMemo(
[typeaheadRegexMatches], [typeaheadRegexMatches],
); );
React.useEffect(() => { React.useEffect(() => {
if (props.inputState.typeaheadState.keepUpdatingThreadMembers) { if (props.inputState.typeaheadState.keepUpdatingThreadMembers) {
const setter = props.inputState.setTypeaheadState; const setter = props.inputState.setTypeaheadState;
setter({ setter({
frozenUserMentionsCandidates: userMentionsCandidates, frozenUserMentionsCandidates: userMentionsCandidates,
frozenChatMentionsCandidates: chatMentionCandidates,
}); });
} }
}, [ }, [
userMentionsCandidates, userMentionsCandidates,
props.inputState.setTypeaheadState, props.inputState.setTypeaheadState,
props.inputState.typeaheadState.keepUpdatingThreadMembers, props.inputState.typeaheadState.keepUpdatingThreadMembers,
chatMentionCandidates,
]); ]);
const suggestedUsers = React.useMemo(() => { const suggestedUsers = React.useMemo(() => {
if (!typeaheadMatchedStrings) { if (!typeaheadMatchedStrings) {
return []; return [];
} }
return getMentionTypeaheadUserSuggestions( return getMentionTypeaheadUserSuggestions(
userSearchIndex, userSearchIndex,
props.inputState.typeaheadState.frozenUserMentionsCandidates, props.inputState.typeaheadState.frozenUserMentionsCandidates,
viewerID, viewerID,
typeaheadMatchedStrings.textPrefix, typeaheadMatchedStrings.textPrefix,
); );
}, [ }, [
userSearchIndex, userSearchIndex,
props.inputState.typeaheadState.frozenUserMentionsCandidates, props.inputState.typeaheadState.frozenUserMentionsCandidates,
viewerID, viewerID,
typeaheadMatchedStrings, typeaheadMatchedStrings,
]); ]);
const suggestedChats = React.useMemo(() => {
if (!typeaheadMatchedStrings) {
return [];
}
return getMentionTypeaheadChatSuggestions(
chatMentionSearchIndex,
props.inputState.typeaheadState.frozenChatMentionsCandidates,
typeaheadMatchedStrings.textPrefix,
);
}, [
chatMentionSearchIndex,
props.inputState.typeaheadState.frozenChatMentionsCandidates,
typeaheadMatchedStrings,
]);
const suggestions = React.useMemo(() => {
if (!typeaheadMatchedStrings) {
return [];
}
return [...suggestedUsers, ...suggestedChats];
}, [suggestedUsers, suggestedChats, typeaheadMatchedStrings]);
rohanUnsubmitted
Not Done
Inline Actions

Does it make sense to merge these two together? Something like

const suggestions = React.useMemo(() => {
  if (!typeaheadMatchedStrings) {
    return [];
  }
  const suggestedUsers = getMentionTypeaheadUserSuggestions(
    userSearchIndex,
    props.inputState.typeaheadState.frozenUserMentionsCandidates,
    viewerID,
    typeaheadMatchedStrings.textPrefix,
  );

  const suggestedChats = getMentionTypeaheadChatSuggestions(
    chatMentionSearchIndex,
    props.inputState.typeaheadState.frozenChatMentionsCandidates,
    typeaheadMatchedStrings.textPrefix,
  );

  return [...suggestedUsers, ...suggestedChats];
}, [
  typeaheadMatchedStrings,
  userSearchIndex,
  props.inputState.typeaheadState.frozenUserMentionsCandidates,
  viewerID,
  chatMentionSearchIndex,
]);
rohan: Does it make sense to merge these two together? Something like ``` const suggestions =…
patrykAuthorUnsubmitted
Done
Inline Actions

Yes, my motivation to split this code into three useMemos was that if userSearchIndex changes and chatMentionSearchIndex not, then we would recalculate userSuggestions only, but the only time userSearchIndex and chatMentionSearchIndex would change is when user switches the focused chat, so my intuition was def wrong.

patryk: Yes, my motivation to split this code into three `useMemos` was that if `userSearchIndex`…
return ( return (
<ChatInputBar <ChatInputBar
{...props} {...props}
viewerID={viewerID} viewerID={viewerID}
joinThreadLoadingStatus={joinThreadLoadingStatus} joinThreadLoadingStatus={joinThreadLoadingStatus}
threadCreationInProgress={threadCreationInProgress} threadCreationInProgress={threadCreationInProgress}
calendarQuery={calendarQuery} calendarQuery={calendarQuery}
nextLocalID={nextLocalID} nextLocalID={nextLocalID}
isThreadActive={isThreadActive} isThreadActive={isThreadActive}
userInfos={userInfos} userInfos={userInfos}
dispatchActionPromise={dispatchActionPromise} dispatchActionPromise={dispatchActionPromise}
joinThread={callJoinThread} joinThread={callJoinThread}
typeaheadMatchedStrings={typeaheadMatchedStrings} typeaheadMatchedStrings={typeaheadMatchedStrings}
suggestions={suggestedUsers} suggestions={suggestions}
parentThreadInfo={parentThreadInfo} parentThreadInfo={parentThreadInfo}
/> />
); );
}); });
export default ConnectedChatInputBar; export default ConnectedChatInputBar;
View Options

native/profile/build-info.react.js

Loading...
View Options

native/profile/default-notifications-preferences.react.js

Loading...
View Options

native/profile/delete-account.react.js

Loading...
View Options

native/profile/emoji-user-avatar-creation.react.js

Loading...
View Options

native/profile/keyserver-selection-list.react.js

Loading...
View Options

native/profile/linked-devices.react.js

Loading...
View Options

native/profile/privacy-preferences.react.js

Loading...
View Options

native/profile/relationship-list.react.js

Loading...
View Options

native/profile/secondary-device-qr-code-scanner.react.js

Loading...
View Options

native/profile/tunnelbroker-menu.react.js

Loading...