[native] Move join thread functions in ChatInputBar to function component
ClosedPublic
Actions

Authored by angelika on Nov 22 2024, 4:41 AM.

Details

Reviewers

kamil
bartek
ashoat

Commits

rCOMMcba7ba6620d3: [native] Move join thread functions in ChatInputBar to function component

Summary

https://linear.app/comm/issue/ENG-8147/convert-chatinputbar-to-reanimated-2-syntax

Depends on D14014

Test Plan

Tested this diff stack by playing around with ChatInputBar on both iOS simulator and Android device:

focus the text input and verify the keyboard is up and the camera buttons are animated correctly
try to send the message, verify the send button is animated correctly
verify the text input can be unfocused and keyboard is hidden
verify the draft works: write text, navigate from the chat, navigate into the chat again, verify the text is kept and the $
verify the edit mode works by editing a message
try to close the chat while editing a message - the alert should be shown
try to join a thread
try to select typed text

Diff Detail

Repository

rCOMM Comm

Lint

Lint Not Applicable

Unit

Tests Not Applicable

Event Timeline

angelika created this revision.Nov 22 2024, 4:41 AM

Herald added subscribers: tomek, ashoat. · View Herald TranscriptNov 22 2024, 4:41 AM

angelika added a child revision: D14016: [native] Move keyboard handling in ChatInputBar to function component.Nov 22 2024, 4:42 AM

Harbormaster completed remote builds in B32779: Diff 45955.Nov 22 2024, 5:56 AM

angelika requested review of this revision.Nov 22 2024, 5:56 AM

ashoat accepted this revision.Nov 24 2024, 6:33 PM

ashoat added inline comments.

native/chat/chat-input-bar.react.js
1413 ↗	(On Diff #45955)	I think it would be good to have the `callJoinThread` declaration next to this

This revision is now accepted and ready to land.Nov 24 2024, 6:33 PM

Rebase and review changes

Harbormaster failed remote builds in B32822: Diff 46031!Nov 25 2024, 7:44 AM

Fix rebase

Harbormaster completed remote builds in B32858: Diff 46073.Nov 26 2024, 7:34 AM

Closed by commit rCOMMcba7ba6620d3: [native] Move join thread functions in ChatInputBar to function component (authored by angelika). · Explain WhyNov 28 2024, 5:12 PM

This revision was automatically updated to reflect the committed changes.

angelika added a commit: rCOMMcba7ba6620d3: [native] Move join thread functions in ChatInputBar to function component.

Revision Contents
Changeset List

Path

Size

native/

chat/

chat-input-bar.react.js

70 lines

Diff 46118

View Options

native/chat/chat-input-bar.react.js

Show First 20 Lines • Show All 309 Lines • ▼ Show 20 Lines	type Props = {
+currentUserCanJoin: boolean,		+currentUserCanJoin: boolean,
+threadFrozen: boolean,		+threadFrozen: boolean,
+text: string,		+text: string,
+setText: (text: string) => void,		+setText: (text: string) => void,
+textEdited: boolean,		+textEdited: boolean,
+setTextEdited: (edited: boolean) => void,		+setTextEdited: (edited: boolean) => void,
+buttonsExpanded: boolean,		+buttonsExpanded: boolean,
+setButtonsExpanded: (expanded: boolean) => void,		+setButtonsExpanded: (expanded: boolean) => void,
		+isExitingDuringEditModeRef: { current: boolean },
};		};
type State = {
+isExitingDuringEditMode: boolean,		class ChatInputBar extends React.PureComponent<Props> {
};
class ChatInputBar extends React.PureComponent<Props, State> {
textInput: ?React.ElementRef<typeof TextInput>;		textInput: ?React.ElementRef<typeof TextInput>;
clearableTextInput: ?ClearableTextInput;		clearableTextInput: ?ClearableTextInput;
selectableTextInput: ?React.ElementRef<typeof SelectableTextInput>;		selectableTextInput: ?React.ElementRef<typeof SelectableTextInput>;

expandoButtonsOpen: Value;		expandoButtonsOpen: Value;
targetExpandoButtonsOpen: Value;		targetExpandoButtonsOpen: Value;
expandoButtonsStyle: AnimatedViewStyle;		expandoButtonsStyle: AnimatedViewStyle;
cameraRollIconStyle: AnimatedViewStyle;		cameraRollIconStyle: AnimatedViewStyle;
cameraIconStyle: AnimatedViewStyle;		cameraIconStyle: AnimatedViewStyle;
expandIconStyle: AnimatedViewStyle;		expandIconStyle: AnimatedViewStyle;

sendButtonContainerOpen: Value;		sendButtonContainerOpen: Value;
targetSendButtonContainerOpen: Value;		targetSendButtonContainerOpen: Value;
sendButtonContainerStyle: AnimatedViewStyle;		sendButtonContainerStyle: AnimatedViewStyle;

clearBeforeRemoveListener: () => void;		clearBeforeRemoveListener: () => void;
clearFocusListener: () => void;		clearFocusListener: () => void;
clearBlurListener: () => void;		clearBlurListener: () => void;

constructor(props: Props) {		constructor(props: Props) {
super(props);		super(props);
this.state = {
isExitingDuringEditMode: false,
};

this.setUpActionIconAnimations();		this.setUpActionIconAnimations();
this.setUpSendIconAnimations();		this.setUpSendIconAnimations();
}		}

setUpActionIconAnimations() {		setUpActionIconAnimations() {
this.expandoButtonsOpen = new Value(1);		this.expandoButtonsOpen = new Value(1);
this.targetExpandoButtonsOpen = new Value(1);		this.targetExpandoButtonsOpen = new Value(1);
const prevTargetExpandoButtonsOpen = new Value(1);		const prevTargetExpandoButtonsOpen = new Value(1);
▲ Show 20 Lines • Show All 519 Lines • ▼ Show 20 Lines	class ChatInputBar extends React.PureComponent<Props> {

selectableTextInputRef = (		selectableTextInputRef = (
selectableTextInput: ?React.ElementRef<typeof SelectableTextInput>,		selectableTextInput: ?React.ElementRef<typeof SelectableTextInput>,
) => {		) => {
this.selectableTextInput = selectableTextInput;		this.selectableTextInput = selectableTextInput;
};		};

updateText = (text: string) => {		updateText = (text: string) => {
if (this.state.isExitingDuringEditMode) {		if (this.props.isExitingDuringEditModeRef.current) {
return;		return;
}		}
this.props.setText(text);		this.props.setText(text);
this.props.setTextEdited(true);		this.props.setTextEdited(true);
this.props.messageEditingContext?.setEditedMessageChanged(		this.props.messageEditingContext?.setEditedMessageChanged(
this.isMessageEdited(text),		this.isMessageEdited(text),
);		);
if (this.isEditMode()) {		if (this.isEditMode()) {
▲ Show 20 Lines • Show All 111 Lines • ▼ Show 20 Lines	unblockNavigation = () => {
if (!navigation) {		if (!navigation) {
return;		return;
}		}
navigation.setParams({ removeEditMode: null });		navigation.setParams({ removeEditMode: null });
};		};

removeEditMode: RemoveEditMode = action => {		removeEditMode: RemoveEditMode = action => {
const { navigation } = this.props;		const { navigation } = this.props;
if (!navigation \|\| this.state.isExitingDuringEditMode) {		if (!navigation \|\| this.props.isExitingDuringEditModeRef.current) {
return 'ignore_action';		return 'ignore_action';
}		}
if (!this.isMessageEdited()) {		if (!this.isMessageEdited()) {
this.unblockNavigation();		this.unblockNavigation();
return 'reduce_action';		return 'reduce_action';
}		}
const unblockAndDispatch = () => {		const unblockAndDispatch = () => {
this.unblockNavigation();		this.unblockNavigation();
▲ Show 20 Lines • Show All 69 Lines • ▼ Show 20 Lines	this.props.messageEditingContext?.setEditedMessage(null, () => {
this.unblockNavigation();		this.unblockNavigation();
this.updateText(this.props.draft);		this.updateText(this.props.draft);
this.focusAndUpdateButtonsVisibility();		this.focusAndUpdateButtonsVisibility();
this.updateSendButton(this.props.draft);		this.updateSendButton(this.props.draft);
});		});
};		};

onNavigationFocus = () => {		onNavigationFocus = () => {
this.setState({ isExitingDuringEditMode: false });		this.props.isExitingDuringEditModeRef.current = false;
};		};

onNavigationBlur = () => {		onNavigationBlur = () => {
if (!this.isEditMode()) {		if (!this.isEditMode()) {
return;		return;
}		}
this.props.setText(this.props.draft);		this.props.setText(this.props.draft);
this.setState({ isExitingDuringEditMode: true }, this.exitEditMode);		this.props.isExitingDuringEditModeRef.current = true;
		this.exitEditMode();
};		};

onNavigationBeforeRemove = (e: {		onNavigationBeforeRemove = (e: {
+data: { +action: GenericNavigationAction },		+data: { +action: GenericNavigationAction },
+preventDefault: () => void,		+preventDefault: () => void,
...		...
}) => {		}) => {
if (!this.isEditMode()) {		if (!this.isEditMode()) {
return;		return;
}		}
const { action } = e.data;		const { action } = e.data;
e.preventDefault();		e.preventDefault();
const saveExit = () => {		const saveExit = () => {
this.props.messageEditingContext?.setEditedMessage(null, () => {		this.props.messageEditingContext?.setEditedMessage(null, () => {
this.setState({ isExitingDuringEditMode: true }, () => {		this.props.isExitingDuringEditModeRef.current = true;
if (!this.props.navigation) {		this.props.navigation?.dispatch(action);
return;
}
this.props.navigation.dispatch(action);
});
});		});
};		};
if (!this.isMessageEdited()) {		if (!this.isMessageEdited()) {
saveExit();		saveExit();
return;		return;
}		}
exitEditAlert({		exitEditAlert({
onDiscard: saveExit,		onDiscard: saveExit,
▲ Show 20 Lines • Show All 214 Lines • ▼ Show 20 Lines	const currentUserIsVoiced = useThreadHasPermission(
threadPermissions.VOICED,		threadPermissions.VOICED,
);		);

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

		const isExitingDuringEditModeRef = React.useRef(false);

return (		return (
<ChatInputBar		<ChatInputBar
{...props}		{...props}
viewerID={viewerID}		viewerID={viewerID}
rawThreadInfo={rawThreadInfo}		rawThreadInfo={rawThreadInfo}
draft={draft}		draft={draft}
joinThreadLoadingStatus={joinThreadLoadingStatus}		joinThreadLoadingStatus={joinThreadLoadingStatus}
threadCreationInProgress={threadCreationInProgress}		threadCreationInProgress={threadCreationInProgress}
Show All 24 Lines	<ChatInputBar
currentUserCanJoin={currentUserCanJoin}		currentUserCanJoin={currentUserCanJoin}
threadFrozen={threadFrozen}		threadFrozen={threadFrozen}
text={text}		text={text}
setText={setText}		setText={setText}
textEdited={textEdited}		textEdited={textEdited}
setTextEdited={setTextEdited}		setTextEdited={setTextEdited}
buttonsExpanded={buttonsExpanded}		buttonsExpanded={buttonsExpanded}
setButtonsExpanded={setButtonsExpanded}		setButtonsExpanded={setButtonsExpanded}
		isExitingDuringEditModeRef={isExitingDuringEditModeRef}
/>		/>
);		);
}		}

type DummyChatInputBarProps = {		type DummyChatInputBarProps = {
...BaseProps,		...BaseProps,
+onHeightMeasured: (height: number) => mixed,		+onHeightMeasured: (height: number) => mixed,
};		};
▲ Show 20 Lines • Show All 109 Lines • Show Last 20 Lines

[native] Move join thread functions in ChatInputBar to function componentClosedPublicActions