Page MenuHomePhabricator
Differential D6415

[4.5/n] Native Typeahead - Refactoring to the common utility function
ClosedPublic
Actions

Authored by • przemek on Jan 27 2023, 6:24 AM.
Tags
None
Referenced Files
Unknown Object (File)
Tue, Apr 15, 8:34 PM
Unknown Object (File)
Thu, Apr 3, 10:47 AM
Unknown Object (File)
Tue, Apr 1, 4:40 PM
Unknown Object (File)
Mar 15 2025, 10:56 AM
Unknown Object (File)
Mar 10 2025, 12:14 AM
Unknown Object (File)
Mar 10 2025, 12:14 AM
Unknown Object (File)
Mar 10 2025, 12:14 AM
Unknown Object (File)
Mar 10 2025, 12:13 AM
View All Files
Subscribers
ashoat
atul
ginsu
inka
kamil
michal
tomek

Details

Reviewers
inka
ginsu
kamil
michal
tomek
Commits
rCOMM9a5ad243ee32: [4.5/n] Native Typeahead - Refactoring to the common utility function
Summary

Refactoring some web code into lib function that will be used in native side as well.

Test Plan

Checked if app builds.
Checked if web typeahead still works corretly

Diff Detail

Repository
rCOMM Comm
Lint
No Lint Coverage
Unit
No Test Coverage

Revision Contents
Changeset List

PathSize
lib/
shared/
25 lines
web/
utils/
24 lines

Diff 21442

View Options

lib/shared/typeahead-utils.js

// @flow // @flow
import invariant from 'invariant'; import invariant from 'invariant';
import * as React from 'react'; import * as React from 'react';
import { View } from 'react-native'; import { View } from 'react-native';
import { ScrollView } from 'react-native-gesture-handler'; import { ScrollView } from 'react-native-gesture-handler';
import { fetchPinnedMessages } from 'lib/actions/message-actions.js'; import { fetchPinnedMessages } from 'lib/actions/message-actions.js';
import { messageListData } from 'lib/selectors/chat-selectors.js'; import { messageListData } from 'lib/selectors/chat-selectors.js';
import { createMessageInfo } from 'lib/shared/message-utils.js'; import { createMessageInfo } from 'lib/shared/message-utils.js';
import { isComposableMessageType } from 'lib/types/message-types.js';
import type { ThreadInfo } from 'lib/types/thread-types.js'; import type { ThreadInfo } from 'lib/types/thread-types.js';
import { useServerCall } from 'lib/utils/action-utils.js'; import { useServerCall } from 'lib/utils/action-utils.js';
import { useHeightMeasurer } from './chat-context.js'; import { useHeightMeasurer } from './chat-context.js';
import type { ChatNavigationProp } from './chat.react'; import type { ChatNavigationProp } from './chat.react';
import MessageResult from './message-result.react.js'; import MessageResult from './message-result.react.js';
import type { NavigationRoute } from '../navigation/route-names'; import type { NavigationRoute } from '../navigation/route-names';
import { useSelector } from '../redux/redux-utils.js'; import { useSelector } from '../redux/redux-utils.js';
▲ Show 20 Lines • Show All 46 Lines • ▼ Show 20 Lines const chatMessageInfos = useSelector(
messageListData(threadInfo.id, translatedMessageResults), messageListData(threadInfo.id, translatedMessageResults),
); );
const sortedUniqueChatMessageInfoItems = React.useMemo(() => { const sortedUniqueChatMessageInfoItems = React.useMemo(() => {
if (!chatMessageInfos) { if (!chatMessageInfos) {
return []; return [];
} }
const pinnedMessageIDs = new Set(); const pinnedMessageIDs = new Set();
translatedMessageResults.forEach(item => pinnedMessageIDs.add(item.id)); translatedMessageResults.forEach(item => pinnedMessageIDs.add(item.id));
inkaUnsubmitted
Not Done
Inline Actions

We could probably go back to using isPinned property here. The thing we undid in D8097. This would make the code more readable, but it's up to you

inka: We could probably go back to using `isPinned` property here. The thing we undid in D8097. This…
const chatMessageInfoItems = chatMessageInfos.filter( const chatMessageInfoItems = chatMessageInfos.filter(
item => item =>
item.itemType === 'message' && item.itemType === 'message' &&
pinnedMessageIDs.has(item.messageInfo.id), pinnedMessageIDs.has(item.messageInfo.id) &&
isComposableMessageType(item.messageInfo.type),
rohanAuthorUnsubmitted
Done
Inline Actions

As mentioned in the description, this is because toggle_pin messages are visible robotext, so if we don't filter those out then they will become visible in the message results modal. This is done here, after the ChatMessageInfos have been created, so we can accurately use the updated fetched related messages to determine the isPinned flag. If we filtered this earlier, then we'd be in the same situation as before

This also is fine because we only allow the user to pin composable message types so we won't exclude anything from the view that we need to show.

rohan: As mentioned in the description, this is because toggle_pin messages are visible robotext, so…
); );
// By the nature of using messageListData and passing in // By the nature of using messageListData and passing in
// the desired translatedMessageResults as additional // the desired translatedMessageResults as additional
// messages, we will have duplicate ChatMessageInfoItems. // messages, we will have duplicate ChatMessageInfoItems.
const uniqueChatMessageInfoItemsMap = new Map(); const uniqueChatMessageInfoItemsMap = new Map();
chatMessageInfoItems.forEach( chatMessageInfoItems.forEach(
item => item =>
▲ Show 20 Lines • Show All 93 Lines • Show Last 20 Lines
View Options

web/utils/typeahead-utils.js

// @flow // @flow
import invariant from 'invariant'; import invariant from 'invariant';
import * as React from 'react'; import * as React from 'react';
import { View } from 'react-native'; import { View } from 'react-native';
import { ScrollView } from 'react-native-gesture-handler'; import { ScrollView } from 'react-native-gesture-handler';
import { fetchPinnedMessages } from 'lib/actions/message-actions.js'; import { fetchPinnedMessages } from 'lib/actions/message-actions.js';
import { messageListData } from 'lib/selectors/chat-selectors.js'; import { messageListData } from 'lib/selectors/chat-selectors.js';
import { createMessageInfo } from 'lib/shared/message-utils.js'; import { createMessageInfo } from 'lib/shared/message-utils.js';
import { isComposableMessageType } from 'lib/types/message-types.js';
import type { ThreadInfo } from 'lib/types/thread-types.js'; import type { ThreadInfo } from 'lib/types/thread-types.js';
import { useServerCall } from 'lib/utils/action-utils.js'; import { useServerCall } from 'lib/utils/action-utils.js';
import { useHeightMeasurer } from './chat-context.js'; import { useHeightMeasurer } from './chat-context.js';
import type { ChatNavigationProp } from './chat.react'; import type { ChatNavigationProp } from './chat.react';
import MessageResult from './message-result.react.js'; import MessageResult from './message-result.react.js';
import type { NavigationRoute } from '../navigation/route-names'; import type { NavigationRoute } from '../navigation/route-names';
import { useSelector } from '../redux/redux-utils.js'; import { useSelector } from '../redux/redux-utils.js';
▲ Show 20 Lines • Show All 46 Lines • ▼ Show 20 Lines const chatMessageInfos = useSelector(
messageListData(threadInfo.id, translatedMessageResults), messageListData(threadInfo.id, translatedMessageResults),
); );
const sortedUniqueChatMessageInfoItems = React.useMemo(() => { const sortedUniqueChatMessageInfoItems = React.useMemo(() => {
if (!chatMessageInfos) { if (!chatMessageInfos) {
return []; return [];
} }
const pinnedMessageIDs = new Set(); const pinnedMessageIDs = new Set();
translatedMessageResults.forEach(item => pinnedMessageIDs.add(item.id)); translatedMessageResults.forEach(item => pinnedMessageIDs.add(item.id));
inkaUnsubmitted
Not Done
Inline Actions

We could probably go back to using isPinned property here. The thing we undid in D8097. This would make the code more readable, but it's up to you

inka: We could probably go back to using `isPinned` property here. The thing we undid in D8097. This…
const chatMessageInfoItems = chatMessageInfos.filter( const chatMessageInfoItems = chatMessageInfos.filter(
item => item =>
item.itemType === 'message' && item.itemType === 'message' &&
pinnedMessageIDs.has(item.messageInfo.id), pinnedMessageIDs.has(item.messageInfo.id) &&
isComposableMessageType(item.messageInfo.type),
rohanAuthorUnsubmitted
Done
Inline Actions

As mentioned in the description, this is because toggle_pin messages are visible robotext, so if we don't filter those out then they will become visible in the message results modal. This is done here, after the ChatMessageInfos have been created, so we can accurately use the updated fetched related messages to determine the isPinned flag. If we filtered this earlier, then we'd be in the same situation as before

This also is fine because we only allow the user to pin composable message types so we won't exclude anything from the view that we need to show.

rohan: As mentioned in the description, this is because toggle_pin messages are visible robotext, so…
); );
// By the nature of using messageListData and passing in // By the nature of using messageListData and passing in
// the desired translatedMessageResults as additional // the desired translatedMessageResults as additional
// messages, we will have duplicate ChatMessageInfoItems. // messages, we will have duplicate ChatMessageInfoItems.
const uniqueChatMessageInfoItemsMap = new Map(); const uniqueChatMessageInfoItemsMap = new Map();
chatMessageInfoItems.forEach( chatMessageInfoItems.forEach(
item => item =>
▲ Show 20 Lines • Show All 93 Lines • Show Last 20 Lines