Paths

Table of Contentst

-
lib/hooks/
-
hooks/
-
message-hooks.js

[lib] Prevent useMessageInfoForPreview from fetching messages that get immediately pruned
ClosedPublic
Actions

Authored by ashoat on Feb 25 2025, 12:20 AM.

Details

Reviewers

tomek
angelika

Commits

rCOMM4f5e12f406c3: [lib] Prevent useMessageInfoForPreview from fetching messages that get…

Summary

Copied from prior diff:

I observed an issue where the message fetch here ends up triggered MessageStorePruner. Normally, a message fetch can only happen when the viewer is looking at a thread, which results in lastNavigatedTo being bumped, which prevents MessageStorePruner from immediately triggering. But in the linked code the message fetch doesn't happen when the viewer is looking at a thread.

We could introduce a new action here to also bump lastNavigatedTo, but I don't think it's needed... if we can't get an acceptable MessagePreview within the first defaultNumberPerThread (unlikely), it's probably fine to just default to mostRecentMessageInfo, even though it's failing the showInMessagePreview check.

Note that we're only making these changes for thin threads. MessageStorePruner doesn't run for thick threads, and should already be fetching defaultNumberPerThread on app load for each thick thread.

Depends on D14400

Test Plan

I used this patch that adds a bunch of logs and ran a Release build of the iOS app pointed at production on my physical iOS device.

In combination with the prior diff, I confirmed that the logs of message prune actions were gone.

Diff Detail

Repository

rCOMM Comm

Lint

No Lint Coverage

Unit

No Test Coverage

Event Timeline

ashoat created this revision.Feb 25 2025, 12:20 AM

ashoat added a child revision: D14402: [lib] Avoid unnecessarily mutating MessageStore on processServerRequestsActionType.

Harbormaster completed remote builds in B33617: Diff 47237.Feb 25 2025, 1:30 AM

ashoat requested review of this revision.Feb 25 2025, 1:30 AM

MessageStorePruner doesn't run for thick threads

This isn't correct. The pruner runs for thick threads, but it doesn't remove from the DB.
https://github.com/CommE2E/comm/blob/3206010f0102cb2c82d0872a9c84aade5643d59c/lib/reducers/message-reducer.js#L1397-L1400

lib/hooks/message-hooks.js
34	How about renaming it so that it doesn't look like a flag?
94–99	Given that the pruner runs for thick threads, should we also apply this modification to thick threads?

This revision is now accepted and ready to land.Feb 25 2025, 2:32 AM

ashoat added inline comments.Feb 25 2025, 9:16 AM

lib/hooks/message-hooks.js
34	Good call – updated to `numOlderMessagesToFetch`
94–99	Thanks for this call-out / clarification

Feedback

This revision was landed with ongoing or failed builds.Feb 25 2025, 9:23 AM

Closed by commit rCOMM4f5e12f406c3: [lib] Prevent useMessageInfoForPreview from fetching messages that get… (authored by ashoat). · Explain Why

This revision was automatically updated to reflect the committed changes.

ashoat added a commit: rCOMM4f5e12f406c3: [lib] Prevent useMessageInfoForPreview from fetching messages that get….

Revision Contents
Changeset List

Path

Size

lib/

hooks/

message-hooks.js

32 lines

Diff 47237

View Options

lib/hooks/message-hooks.js

Show First 20 Lines • Show All 262 Lines • ▼ Show 20 Lines	const createThreadLoadingStatusSelector =
createLoadingStatusSelector(newThreadActionTypes);		createLoadingStatusSelector(newThreadActionTypes);

type ConnectedChatInputBarBaseProps = {		type ConnectedChatInputBarBaseProps = {
...BaseProps,		...BaseProps,
+onInputBarLayout?: (event: LayoutEvent) => mixed,		+onInputBarLayout?: (event: LayoutEvent) => mixed,
+openCamera: () => mixed,		+openCamera: () => mixed,
+navigation?: ChatNavigationProp<'MessageList'>,		+navigation?: ChatNavigationProp<'MessageList'>,
};		};
function ConnectedChatInputBarBase(props: ConnectedChatInputBarBaseProps) {		function ConnectedChatInputBarBase({
		threadInfo,
		navigation,
		openCamera,
		onInputBarLayout,
		}: ConnectedChatInputBarBaseProps) {
const navContext = React.useContext(NavContext);		const navContext = React.useContext(NavContext);
const keyboardState = React.useContext(KeyboardContext);		const keyboardState = React.useContext(KeyboardContext);
const inputState = React.useContext(InputStateContext);		const inputState = React.useContext(InputStateContext);
const overlayContext = React.useContext(OverlayContext);		const overlayContext = React.useContext(OverlayContext);

const viewerID = useSelector(		const viewerID = useSelector(
state => state.currentUserInfo && state.currentUserInfo.id,		state => state.currentUserInfo && state.currentUserInfo.id,
);		);
const draft = useSelector(		const draft = useSelector(
state =>		state => state.draftStore.drafts[draftKeyFromThreadID(threadInfo.id)] ?? '',
state.draftStore.drafts[draftKeyFromThreadID(props.threadInfo.id)] ?? '',
);		);
const joinThreadLoadingStatus = useSelector(joinThreadLoadingStatusSelector);		const joinThreadLoadingStatus = useSelector(joinThreadLoadingStatusSelector);
const createThreadLoadingStatus = useSelector(		const createThreadLoadingStatus = useSelector(
createThreadLoadingStatusSelector,		createThreadLoadingStatusSelector,
);		);
const threadCreationInProgress = createThreadLoadingStatus === 'loading';		const threadCreationInProgress = createThreadLoadingStatus === 'loading';
const calendarQuery = useSelector(state =>		const calendarQuery = useSelector(state =>
nonThreadCalendarQuery({		nonThreadCalendarQuery({
redux: state,		redux: state,
navContext,		navContext,
}),		}),
);		);
const userInfos = useSelector(state => state.userStore.userInfos);		const userInfos = useSelector(state => state.userStore.userInfos);

const styles = useStyles(unboundStyles);		const styles = useStyles(unboundStyles);
const colors = useColors();		const colors = useColors();

const isActive = React.useMemo(		const isActive = React.useMemo(
() => props.threadInfo.id === activeThreadSelector(navContext),		() => threadInfo.id === activeThreadSelector(navContext),
[props.threadInfo.id, navContext],		[threadInfo.id, navContext],
);		);

const dispatch = useDispatch();		const dispatch = useDispatch();
const dispatchActionPromise = useDispatchActionPromise();		const dispatchActionPromise = useDispatchActionPromise();
const rawThreadInfo = useSelector(		const rawThreadInfo = useSelector(
state => state.threadStore.threadInfos[props.threadInfo.id],		state => state.threadStore.threadInfos[threadInfo.id],
);		);

const { getChatMentionSearchIndex } = useChatMentionContext();		const { getChatMentionSearchIndex } = useChatMentionContext();
const chatMentionSearchIndex = getChatMentionSearchIndex(props.threadInfo);		const chatMentionSearchIndex = getChatMentionSearchIndex(threadInfo);

const { parentThreadID, community } = props.threadInfo;		const { parentThreadID, community } = threadInfo;
const parentThreadInfo = useSelector(state =>		const parentThreadInfo = useSelector(state =>
parentThreadID ? threadInfoSelector(state)[parentThreadID] : null,		parentThreadID ? threadInfoSelector(state)[parentThreadID] : null,
);		);
const communityThreadInfo = useSelector(state =>		const communityThreadInfo = useSelector(state =>
community ? threadInfoSelector(state)[community] : null,		community ? threadInfoSelector(state)[community] : null,
);		);

const threadFrozen = useThreadFrozenDueToViewerBlock(		const threadFrozen = useThreadFrozenDueToViewerBlock(
props.threadInfo,		threadInfo,
communityThreadInfo,		communityThreadInfo,
viewerID,		viewerID,
userInfos,		userInfos,
);		);

const userMentionsCandidates = useUserMentionsCandidates(		const userMentionsCandidates = useUserMentionsCandidates(
props.threadInfo,		threadInfo,
parentThreadInfo,		parentThreadInfo,
);		);

const chatMentionCandidates = useThreadChatMentionCandidates(		const chatMentionCandidates = useThreadChatMentionCandidates(threadInfo);
props.threadInfo,
);

const messageEditingContext = React.useContext(MessageEditingContext);		const messageEditingContext = React.useContext(MessageEditingContext);

const editedMessageInfo = messageEditingContext?.editState.editedMessage;		const editedMessageInfo = messageEditingContext?.editState.editedMessage;
const editedMessagePreview = useMessagePreview(		const editedMessagePreview = useMessagePreview(
editedMessageInfo,		editedMessageInfo,
props.threadInfo,		threadInfo,
getDefaultTextMessageRules(chatMentionCandidates).simpleMarkdownRules,		getDefaultTextMessageRules(chatMentionCandidates).simpleMarkdownRules,
);		);
const editMessage = useEditMessage(props.threadInfo);		const editMessage = useEditMessage(threadInfo);

const [selectionState, setSelectionState] =		const [selectionState, setSelectionState] =
React.useState<SyncedSelectionData>({		React.useState<SyncedSelectionData>({
text: draft,		text: draft,
selection: { start: 0, end: 0 },		selection: { start: 0, end: 0 },
});		});

const [text, setText] = React.useState(draft);		const [text, setText] = React.useState(draft);
Show All 34 Lines	function ConnectedChatInputBarBase({

const suggestions: $ReadOnlyArray<MentionTypeaheadSuggestionItem> =		const suggestions: $ReadOnlyArray<MentionTypeaheadSuggestionItem> =
React.useMemo(		React.useMemo(
() => [...suggestedUsers, ...suggestedChats],		() => [...suggestedUsers, ...suggestedChats],
[suggestedUsers, suggestedChats],		[suggestedUsers, suggestedChats],
);		);

const currentUserIsVoiced = useThreadHasPermission(		const currentUserIsVoiced = useThreadHasPermission(
props.threadInfo,		threadInfo,
threadPermissions.VOICED,		threadPermissions.VOICED,
);		);

const currentUserCanJoin = useThreadHasPermission(		const currentUserCanJoin = useThreadHasPermission(
props.threadInfo,		threadInfo,
threadPermissions.JOIN_THREAD,		threadPermissions.JOIN_THREAD,
);		);

const isExitingDuringEditModeRef = React.useRef(false);		const isExitingDuringEditModeRef = React.useRef(false);

const expandoButtonsOpen = useValue(1);		const expandoButtonsOpen = useValue(1);
const targetExpandoButtonsOpen = useValue(1);		const targetExpandoButtonsOpen = useValue(1);

▲ Show 20 Lines • Show All 126 Lines • ▼ Show 20 Lines	const shouldShowTextInput = React.useCallback(() => {
// and won't list the viewer as a member,		// and won't list the viewer as a member,
// which will end up hiding the input.		// which will end up hiding the input.
// In this case, we will assume that our creation action		// In this case, we will assume that our creation action
// will get translated into a join, and as long		// will get translated into a join, and as long
// as members are voiced, we can show the input.		// as members are voiced, we can show the input.
if (!threadCreationInProgress) {		if (!threadCreationInProgress) {
return false;		return false;
}		}
return checkIfDefaultMembersAreVoiced(props.threadInfo);		return checkIfDefaultMembersAreVoiced(threadInfo);
}, [currentUserIsVoiced, props.threadInfo, threadCreationInProgress]);		}, [currentUserIsVoiced, threadInfo, threadCreationInProgress]);

const isEditMode = React.useCallback(() => {		const isEditMode = React.useCallback(() => {
const editState = messageEditingContext?.editState;		const editState = messageEditingContext?.editState;
const isThisThread =		const isThisThread = editState?.editedMessage?.threadID === threadInfo.id;
editState?.editedMessage?.threadID === props.threadInfo.id;
return editState?.editedMessage !== null && isThisThread;		return editState?.editedMessage !== null && isThisThread;
}, [messageEditingContext?.editState, props.threadInfo.id]);		}, [messageEditingContext?.editState, threadInfo.id]);

const immediatelyShowSendButton = React.useCallback(() => {		const immediatelyShowSendButton = React.useCallback(() => {
sendButtonContainerOpen.setValue(1);		sendButtonContainerOpen.setValue(1);
targetSendButtonContainerOpen.setValue(1);		targetSendButtonContainerOpen.setValue(1);
}, [sendButtonContainerOpen, targetSendButtonContainerOpen]);		}, [sendButtonContainerOpen, targetSendButtonContainerOpen]);

const updateSendButton = React.useCallback(		const updateSendButton = React.useCallback(
(currentText: string) => {		(currentText: string) => {
▲ Show 20 Lines • Show All 59 Lines • ▼ Show 20 Lines	function ConnectedChatInputBarBase({
);		);

const saveDraft = React.useMemo(		const saveDraft = React.useMemo(
() =>		() =>
_throttle(newText => {		_throttle(newText => {
dispatch({		dispatch({
type: updateDraftActionType,		type: updateDraftActionType,
payload: {		payload: {
key: draftKeyFromThreadID(props.threadInfo.id),		key: draftKeyFromThreadID(threadInfo.id),
text: newText,		text: newText,
},		},
});		});
}, 400),		}, 400),
[dispatch, props.threadInfo.id],		[dispatch, threadInfo.id],
);		);

const isMessageEdited = React.useCallback(		const isMessageEdited = React.useCallback(
(newText?: string): boolean => {		(newText?: string): boolean => {
let updatedText = newText ?? text;		let updatedText = newText ?? text;
updatedText = trimMessage(updatedText);		updatedText = trimMessage(updatedText);
const originalText = editedMessageInfo?.text;		const originalText = editedMessageInfo?.text;
return updatedText !== originalText;		return updatedText !== originalText;
Show All 25 Lines	const focusAndUpdateButtonsVisibility = React.useCallback(() => {
}		}

immediatelyShowSendButton();		immediatelyShowSendButton();
immediatelyHideButtons();		immediatelyHideButtons();
textInput.focus();		textInput.focus();
}, [immediatelyHideButtons, immediatelyShowSendButton]);		}, [immediatelyHideButtons, immediatelyShowSendButton]);

const blockNavigation = React.useCallback(() => {		const blockNavigation = React.useCallback(() => {
const { navigation } = props;
if (!navigation \|\| !navigation.isFocused()) {		if (!navigation \|\| !navigation.isFocused()) {
return;		return;
}		}
navigation.setParams({		navigation.setParams({
removeEditMode: removeEditMode,		removeEditMode: removeEditMode,
});		});
}, [props, removeEditMode]);		}, [navigation, removeEditMode]);

const unblockNavigation = React.useCallback(() => {		const unblockNavigation = React.useCallback(() => {
const { navigation } = props;		navigation?.setParams({ removeEditMode: null });
if (!navigation) {		}, [navigation]);
return;
}
navigation.setParams({ removeEditMode: null });
}, [props]);

const exitEditMode = React.useCallback(() => {		const exitEditMode = React.useCallback(() => {
messageEditingContext?.setEditedMessage(null, () => {		messageEditingContext?.setEditedMessage(null, () => {
unblockNavigation();		unblockNavigation();
updateText(draft);		updateText(draft);
focusAndUpdateButtonsVisibility();		focusAndUpdateButtonsVisibility();
updateSendButton(draft);		updateSendButton(draft);
});		});
▲ Show 20 Lines • Show All 111 Lines • ▼ Show 20 Lines	const onSend = React.useCallback(async () => {
const creatorID = viewerID;		const creatorID = viewerID;
invariant(creatorID, 'should have viewer ID in order to send a message');		invariant(creatorID, 'should have viewer ID in order to send a message');
invariant(inputState, 'inputState should be set in ChatInputBar.onSend');		invariant(inputState, 'inputState should be set in ChatInputBar.onSend');

await inputState.sendTextMessage(		await inputState.sendTextMessage(
{		{
type: messageTypes.TEXT,		type: messageTypes.TEXT,
localID,		localID,
threadID: props.threadInfo.id,		threadID: threadInfo.id,
text: newText,		text: newText,
creatorID,		creatorID,
time: Date.now(),		time: Date.now(),
},		},
props.threadInfo,		threadInfo,
parentThreadInfo,		parentThreadInfo,
);		);
}, [		}, [
editMessageInner,		editMessageInner,
getEditedMessage,		getEditedMessage,
inputState,		inputState,
parentThreadInfo,		parentThreadInfo,
props.threadInfo,		threadInfo,
text,		text,
updateSendButton,		updateSendButton,
viewerID,		viewerID,
]);		]);

const removeEditMode: RemoveEditMode = React.useCallback(		const removeEditMode: RemoveEditMode = React.useCallback(
action => {		action => {
const { navigation } = props;
if (!navigation \|\| isExitingDuringEditModeRef.current) {		if (!navigation \|\| isExitingDuringEditModeRef.current) {
return 'ignore_action';		return 'ignore_action';
}		}
if (!isMessageEdited()) {		if (!isMessageEdited()) {
unblockNavigation();		unblockNavigation();
return 'reduce_action';		return 'reduce_action';
}		}
const unblockAndDispatch = () => {		const unblockAndDispatch = () => {
unblockNavigation();		unblockNavigation();
navigation.dispatch(action);		navigation.dispatch(action);
};		};
const onContinueEditing = () => {		const onContinueEditing = () => {
overlayContext?.resetScrollBlockingModalStatus();		overlayContext?.resetScrollBlockingModalStatus();
};		};
exitEditAlert({		exitEditAlert({
onDiscard: unblockAndDispatch,		onDiscard: unblockAndDispatch,
onContinueEditing,		onContinueEditing,
});		});
return 'ignore_action';		return 'ignore_action';
},		},
[isMessageEdited, overlayContext, props, unblockNavigation],		[isMessageEdited, navigation, overlayContext, unblockNavigation],
);		);

const onPressExitEditMode = React.useCallback(() => {		const onPressExitEditMode = React.useCallback(() => {
if (!isMessageEdited()) {		if (!isMessageEdited()) {
exitEditMode();		exitEditMode();
return;		return;
}		}
exitEditAlert({		exitEditAlert({
Show All 32 Lines	(e: {
if (!isEditMode()) {		if (!isEditMode()) {
return;		return;
}		}
const { action } = e.data;		const { action } = e.data;
e.preventDefault();		e.preventDefault();
const saveExit = () => {		const saveExit = () => {
messageEditingContext?.setEditedMessage(null, () => {		messageEditingContext?.setEditedMessage(null, () => {
isExitingDuringEditModeRef.current = true;		isExitingDuringEditModeRef.current = true;
props.navigation?.dispatch(action);		navigation?.dispatch(action);
});		});
};		};
if (!isMessageEdited()) {		if (!isMessageEdited()) {
saveExit();		saveExit();
return;		return;
}		}
exitEditAlert({		exitEditAlert({
onDiscard: saveExit,		onDiscard: saveExit,
});		});
},		},
[isEditMode, isMessageEdited, messageEditingContext, props.navigation],		[isEditMode, isMessageEdited, messageEditingContext, navigation],
);		);

React.useEffect(() => {		React.useEffect(() => {
if (isActive) {		if (isActive) {
addEditInputMessageListener();		addEditInputMessageListener();
}		}

return () => {		return () => {
if (isActive) {		if (isActive) {
removeEditInputMessageListener();		removeEditInputMessageListener();
}		}
};		};
}, [addEditInputMessageListener, isActive, removeEditInputMessageListener]);		}, [addEditInputMessageListener, isActive, removeEditInputMessageListener]);

React.useEffect(() => {		React.useEffect(() => {
const { navigation } = props;

const clearBeforeRemoveListener = navigation?.addListener(		const clearBeforeRemoveListener = navigation?.addListener(
'beforeRemove',		'beforeRemove',
onNavigationBeforeRemove,		onNavigationBeforeRemove,
);		);
const clearFocusListener = navigation?.addListener(		const clearFocusListener = navigation?.addListener(
'focus',		'focus',
onNavigationFocus,		onNavigationFocus,
);		);
const clearBlurListener = navigation?.addListener('blur', onNavigationBlur);		const clearBlurListener = navigation?.addListener('blur', onNavigationBlur);
return () => {		return () => {
clearBeforeRemoveListener?.();		clearBeforeRemoveListener?.();
clearFocusListener?.();		clearFocusListener?.();
clearBlurListener?.();		clearBlurListener?.();
};		};
}, [onNavigationBeforeRemove, onNavigationBlur, onNavigationFocus, props]);		}, [
		navigation,
		onNavigationBeforeRemove,
		onNavigationBlur,
		onNavigationFocus,
		]);

const callJoinThread = useJoinThread();		const callJoinThread = useJoinThread();

const joinAction = React.useCallback(async (): Promise<ThreadJoinPayload> => {		const joinAction = React.useCallback(async (): Promise<ThreadJoinPayload> => {
let joinThreadInput;		let joinThreadInput;
if (rawThreadInfo.thick) {		if (rawThreadInfo.thick) {
joinThreadInput = {		joinThreadInput = {
thick: true,		thick: true,
rawThreadInfo: rawThreadInfo,		rawThreadInfo: rawThreadInfo,
};		};
} else {		} else {
const query = calendarQuery();		const query = calendarQuery();
joinThreadInput = {		joinThreadInput = {
thick: false,		thick: false,
threadID: props.threadInfo.id,		threadID: threadInfo.id,
calendarQuery: {		calendarQuery: {
startDate: query.startDate,		startDate: query.startDate,
endDate: query.endDate,		endDate: query.endDate,
filters: [		filters: [
...query.filters,		...query.filters,
{ type: 'threads', threadIDs: [props.threadInfo.id] },		{ type: 'threads', threadIDs: [threadInfo.id] },
],		],
},		},
};		};
}		}

return await callJoinThread(joinThreadInput);		return await callJoinThread(joinThreadInput);
}, [calendarQuery, callJoinThread, props.threadInfo.id, rawThreadInfo]);		}, [calendarQuery, callJoinThread, threadInfo.id, rawThreadInfo]);

const onPressJoin = React.useCallback(() => {		const onPressJoin = React.useCallback(() => {
void dispatchActionPromise(joinThreadActionTypes, joinAction());		void dispatchActionPromise(joinThreadActionTypes, joinAction());
}, [dispatchActionPromise, joinAction]);		}, [dispatchActionPromise, joinAction]);

const setIOSKeyboardHeight = React.useCallback(() => {		const setIOSKeyboardHeight = React.useCallback(() => {
if (Platform.OS !== 'ios') {		if (Platform.OS !== 'ios') {
return;		return;
}		}
const textInput = textInputRef.current;		const textInput = textInputRef.current;
if (!textInput) {		if (!textInput) {
return;		return;
}		}
const keyboardHeight = getKeyboardHeight();		const keyboardHeight = getKeyboardHeight();
if (keyboardHeight === null \|\| keyboardHeight === undefined) {		if (keyboardHeight === null \|\| keyboardHeight === undefined) {
return;		return;
}		}
TextInputKeyboardMangerIOS.setKeyboardHeight(textInput, keyboardHeight);		TextInputKeyboardMangerIOS.setKeyboardHeight(textInput, keyboardHeight);
}, []);		}, []);

const showMediaGallery = React.useCallback(() => {		const showMediaGallery = React.useCallback(() => {
invariant(keyboardState, 'keyboardState should be initialized');		invariant(keyboardState, 'keyboardState should be initialized');
keyboardState.showMediaGallery(props.threadInfo);		keyboardState.showMediaGallery(threadInfo);
}, [keyboardState, props.threadInfo]);		}, [keyboardState, threadInfo]);

const dismissKeyboard = React.useCallback(() => {		const dismissKeyboard = React.useCallback(() => {
keyboardState?.dismissKeyboard();		keyboardState?.dismissKeyboard();
}, [keyboardState]);		}, [keyboardState]);

const prevThreadInfoID = React.useRef<?string>();		const prevThreadInfoID = React.useRef<?string>();
const prevDraft = React.useRef<?string>();		const prevDraft = React.useRef<?string>();

React.useEffect(() => {		React.useEffect(() => {
if (		if (
textEdited &&		textEdited &&
text &&		text &&
prevThreadInfoID.current &&		prevThreadInfoID.current &&
props.threadInfo.id !== prevThreadInfoID.current		threadInfo.id !== prevThreadInfoID.current
) {		) {
dispatch({		dispatch({
type: moveDraftActionType,		type: moveDraftActionType,
payload: {		payload: {
oldKey: draftKeyFromThreadID(prevThreadInfoID.current),		oldKey: draftKeyFromThreadID(prevThreadInfoID.current),
newKey: draftKeyFromThreadID(props.threadInfo.id),		newKey: draftKeyFromThreadID(threadInfo.id),
},		},
});		});
} else if (!textEdited && draft !== prevDraft.current) {		} else if (!textEdited && draft !== prevDraft.current) {
setText(draft);		setText(draft);
}		}
prevThreadInfoID.current = props.threadInfo.id;		prevThreadInfoID.current = threadInfo.id;
prevDraft.current = draft;		prevDraft.current = draft;
}, [dispatch, draft, props.threadInfo.id, text, textEdited]);		}, [dispatch, draft, threadInfo.id, text, textEdited]);

const prevIsActiveRef = React.useRef(isActive);		const prevIsActiveRef = React.useRef(isActive);
React.useEffect(() => {		React.useEffect(() => {
if (isActive && !prevIsActiveRef.current) {		if (isActive && !prevIsActiveRef.current) {
addEditInputMessageListener();		addEditInputMessageListener();
} else if (!isActive && prevIsActiveRef) {		} else if (!isActive && prevIsActiveRef) {
removeEditInputMessageListener();		removeEditInputMessageListener();
}		}
▲ Show 20 Lines • Show All 57 Lines • ▼ Show 20 Lines	const expandoButton = (
onPress={expandButtons}		onPress={expandButtons}
activeOpacity={0.4}		activeOpacity={0.4}
style={styles.expandButton}		style={styles.expandButton}
>		>
<AnimatedView style={expandIconStyle}>		<AnimatedView style={expandIconStyle}>
<SWMansionIcon		<SWMansionIcon
name="chevron-right"		name="chevron-right"
size={22}		size={22}
color={`#${props.threadInfo.color}`}		color={`#${threadInfo.color}`}
/>		/>
</AnimatedView>		</AnimatedView>
</TouchableOpacity>		</TouchableOpacity>
);		);
const threadColor = `#${props.threadInfo.color}`;		const threadColor = `#${threadInfo.color}`;
const expandoButtonsViewStyle: Array<ViewStyle> = [		const expandoButtonsViewStyle: Array<ViewStyle> = [
styles.innerExpandoButtons,		styles.innerExpandoButtons,
];		];
if (isEditMode()) {		if (isEditMode()) {
expandoButtonsViewStyle.push({ display: 'none' });		expandoButtonsViewStyle.push({ display: 'none' });
}		}
return (		return (
<TouchableWithoutFeedback onPress={dismissKeyboard}>		<TouchableWithoutFeedback onPress={dismissKeyboard}>
<View style={styles.inputContainer}>		<View style={styles.inputContainer}>
<AnimatedView style={expandoButtonsStyle}>		<AnimatedView style={expandoButtonsStyle}>
<View style={expandoButtonsViewStyle}>		<View style={expandoButtonsViewStyle}>
{buttonsExpanded ? expandoButton : null}		{buttonsExpanded ? expandoButton : null}
<TouchableOpacity onPress={showMediaGallery} activeOpacity={0.4}>		<TouchableOpacity onPress={showMediaGallery} activeOpacity={0.4}>
<AnimatedView style={cameraRollIconStyle}>		<AnimatedView style={cameraRollIconStyle}>
<SWMansionIcon		<SWMansionIcon
name="image-1"		name="image-1"
size={28}		size={28}
color={`#${props.threadInfo.color}`}		color={`#${threadInfo.color}`}
/>		/>
</AnimatedView>		</AnimatedView>
</TouchableOpacity>		</TouchableOpacity>
<TouchableOpacity		<TouchableOpacity
onPress={props.openCamera}		onPress={openCamera}
activeOpacity={0.4}		activeOpacity={0.4}
disabled={!buttonsExpanded}		disabled={!buttonsExpanded}
>		>
<AnimatedView style={cameraIconStyle}>		<AnimatedView style={cameraIconStyle}>
<SWMansionIcon		<SWMansionIcon
name="camera"		name="camera"
size={28}		size={28}
color={`#${props.threadInfo.color}`}		color={`#${threadInfo.color}`}
/>		/>
</AnimatedView>		</AnimatedView>
</TouchableOpacity>		</TouchableOpacity>
{buttonsExpanded ? null : expandoButton}		{buttonsExpanded ? null : expandoButton}
</View>		</View>
</AnimatedView>		</AnimatedView>
<SelectableTextInput		<SelectableTextInput
allowImagePasteForThreadID={props.threadInfo.id}		allowImagePasteForThreadID={threadInfo.id}
value={text}		value={text}
onChangeText={updateText}		onChangeText={updateText}
selection={selectionState.selection}		selection={selectionState.selection}
onUpdateSyncedSelectionData={setSelectionState}		onUpdateSyncedSelectionData={setSelectionState}
placeholder="Send a message..."		placeholder="Send a message..."
placeholderTextColor={colors.listInputButton}		placeholderTextColor={colors.listInputButton}
multiline={true}		multiline={true}
style={styles.textInput}		style={styles.textInput}
textInputRef={setTextInputRef}		textInputRef={setTextInputRef}
clearableTextInputRef={setClearableTextInputRef}		clearableTextInputRef={setClearableTextInputRef}
ref={selectableTextInputRef}		ref={selectableTextInputRef}
selectionColor={`#${props.threadInfo.color}`}		selectionColor={`#${threadInfo.color}`}
/>		/>
<AnimatedView style={sendButtonContainerStyle}>		<AnimatedView style={sendButtonContainerStyle}>
<TouchableOpacity		<TouchableOpacity
onPress={onSend}		onPress={onSend}
activeOpacity={0.4}		activeOpacity={0.4}
style={styles.sendButton}		style={styles.sendButton}
disabled={trimMessage(text) === ''}		disabled={trimMessage(text) === ''}
>		>
<Icon		<Icon
name="md-send"		name="md-send"
size={25}		size={25}
style={styles.sendIcon}		style={styles.sendIcon}
color={threadColor}		color={threadColor}
/>		/>
</TouchableOpacity>		</TouchableOpacity>
</AnimatedView>		</AnimatedView>
</View>		</View>
</TouchableWithoutFeedback>		</TouchableWithoutFeedback>
);		);
};		};

const isMember = viewerIsMember(props.threadInfo);		const isMember = viewerIsMember(threadInfo);
let joinButton = null;		let joinButton = null;
const threadColor = `#${props.threadInfo.color}`;		const threadColor = `#${threadInfo.color}`;

if (!isMember && currentUserCanJoin && !threadCreationInProgress) {		if (!isMember && currentUserCanJoin && !threadCreationInProgress) {
let buttonContent;		let buttonContent;
if (joinThreadLoadingStatus === 'loading') {		if (joinThreadLoadingStatus === 'loading') {
buttonContent = (		buttonContent = (
<ActivityIndicator		<ActivityIndicator
size="small"		size="small"
color="white"		color="white"
style={styles.joinThreadLoadingIndicator}		style={styles.joinThreadLoadingIndicator}
/>		/>
);		);
} else {		} else {
const textStyle = colorIsDark(props.threadInfo.color)		const textStyle = colorIsDark(threadInfo.color)
? styles.joinButtonTextLight		? styles.joinButtonTextLight
: styles.joinButtonTextDark;		: styles.joinButtonTextDark;
buttonContent = (		buttonContent = (
<View style={styles.joinButtonContent}>		<View style={styles.joinButtonContent}>
<SWMansionIcon name="plus" style={textStyle} />		<SWMansionIcon name="plus" style={textStyle} />
<Text style={textStyle}>Join Chat</Text>		<Text style={textStyle}>Join Chat</Text>
</View>		</View>
);		);
Show All 22 Lines	typeaheadTooltip = (
focusAndUpdateTextAndSelection={focusAndUpdateTextAndSelection}		focusAndUpdateTextAndSelection={focusAndUpdateTextAndSelection}
typeaheadTooltipActionsGetter={mentionTypeaheadTooltipActions}		typeaheadTooltipActionsGetter={mentionTypeaheadTooltipActions}
TypeaheadTooltipButtonComponent={MentionTypeaheadTooltipButton}		TypeaheadTooltipButtonComponent={MentionTypeaheadTooltipButton}
/>		/>
);		);
}		}

let content;		let content;
const defaultMembersAreVoiced = checkIfDefaultMembersAreVoiced(		const defaultMembersAreVoiced = checkIfDefaultMembersAreVoiced(threadInfo);
props.threadInfo,
);
if (shouldShowTextInput()) {		if (shouldShowTextInput()) {
content = renderInput();		content = renderInput();
} else if (		} else if (
threadFrozen &&		threadFrozen &&
threadActualMembers(props.threadInfo.members).length === 2		threadActualMembers(threadInfo.members).length === 2
) {		) {
content = (		content = (
<Text style={styles.explanation}>		<Text style={styles.explanation}>
You can’t send messages to a user that you’ve blocked.		You can’t send messages to a user that you’ve blocked.
</Text>		</Text>
);		);
} else if (isMember) {		} else if (isMember) {
content = (		content = (
▲ Show 20 Lines • Show All 42 Lines • ▼ Show 20 Lines	editedMessage = (
color={threadColor}		color={threadColor}
onPress={onPressExitEditMode}		onPress={onPressExitEditMode}
/>		/>
</AnimatedView>		</AnimatedView>
);		);
}		}

return (		return (
<AnimatedView style={styles.container} onLayout={props.onInputBarLayout}>		<AnimatedView style={styles.container} onLayout={onInputBarLayout}>
{typeaheadTooltip}		{typeaheadTooltip}
{joinButton}		{joinButton}
{editedMessage}		{editedMessage}
{content}		{content}
{keyboardInputHost}		{keyboardInputHost}
</AnimatedView>		</AnimatedView>
);		);
}		}
▲ Show 20 Lines • Show All 114 Lines • Show Last 20 Lines

[lib] Prevent useMessageInfoForPreview from fetching messages that get immediately prunedClosedPublicActions