Page MenuHomePhabricator
Differential D11915

[lib] Introduce `useThreadInChatList` and consume in `web/ThreadListProvider`
ClosedPublic
Actions

Authored by atul on May 6 2024, 1:39 PM.
Tags
None
Referenced Files
Unknown Object (File)
Tue, Apr 1, 10:56 AM
Unknown Object (File)
Mon, Mar 31, 2:19 PM
Unknown Object (File)
Mon, Mar 31, 11:26 AM
Unknown Object (File)
Mon, Mar 31, 8:58 AM
Unknown Object (File)
Sun, Mar 30, 10:13 PM
Unknown Object (File)
Sun, Mar 30, 5:25 AM
Unknown Object (File)
Feb 26 2025, 2:21 AM
Unknown Object (File)
Jan 24 2025, 8:18 PM
View All 80 Files
Subscribers
None

Details

Reviewers
ashoat
ginsu
tomek
varun
will
Commits
rCOMM10778f439a3f: [lib] Introduce `useThreadInChatList` and consume in `web/ThreadListProvider`
Summary

Similar to rest of diff, we want to replace usages of threadHasPermission with useThreadHasPermission.

Depends on D11914

Test Plan

flow and close reading for now.

Logged return value of threadHasPermission and useThreadHasPermission in ThreadListProvider and ensured that they remained the same.

Diff Detail

Repository
rCOMM Comm
Branch
master
Lint
No Lint Coverage
Unit
No Test Coverage

Event Timeline

atul created this revision.May 6 2024, 1:39 PM
atul published this revision for review.May 6 2024, 1:51 PM
Harbormaster completed remote builds in B28719: Diff 39873.May 6 2024, 1:58 PM
atul added a child revision: D11916: [native] Consume `useThreadInChatList` in `native/ThreadSettings`.May 6 2024, 2:11 PM
ashoat accepted this revision.May 6 2024, 2:12 PM
ashoat added inline comments.
lib/shared/thread-utils.js
209–212

What's the point of memoizing a boolean?

This revision is now accepted and ready to land.May 6 2024, 2:12 PM
atul added inline comments.May 6 2024, 2:15 PM
lib/shared/thread-utils.js
209–212

Yeah there's no point, I'll revert

atul updated this revision to Diff 40178.May 14 2024, 11:15 AM

address feedback (remove memoization of boolean value)

atul edited the test plan for this revision. (Show Details)May 14 2024, 11:17 AM
Harbormaster completed remote builds in B28909: Diff 40178.May 14 2024, 11:32 AM
Closed by commit rCOMM10778f439a3f: [lib] Introduce `useThreadInChatList` and consume in `web/ThreadListProvider` (authored by atul). · Explain WhyMay 14 2024, 1:10 PM
This revision was automatically updated to reflect the committed changes.
atul added a commit: rCOMM10778f439a3f: [lib] Introduce `useThreadInChatList` and consume in `web/ThreadListProvider`.

Revision Contents
Changeset List

PathSize
lib/
shared/
12 lines
web/
chat/
7 lines

Diff 39873

View Options

lib/shared/thread-utils.js

Show First 20 Lines • Show All 262 Lines • ▼ Show 20 Linesconst 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 Linesfunction 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 Linesfunction 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&rsquo;t send messages to a user that you&rsquo;ve blocked. You can&rsquo;t send messages to a user that you&rsquo;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
View Options

web/chat/thread-list-provider.js

Show First 20 Lines • Show All 262 Lines • ▼ Show 20 Linesconst 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 Linesfunction 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 Linesfunction 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&rsquo;t send messages to a user that you&rsquo;ve blocked. You can&rsquo;t send messages to a user that you&rsquo;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