Page MenuHomePhabricator
Differential D5763

[native] Pass TextMessage.onPress down via context
ClosedPublic
Actions

Authored by ashoat on Nov 29 2022, 8:10 PM.
Tags
None
Referenced Files
Unknown Object (File)
Mon, Mar 17, 4:16 AM
Unknown Object (File)
Mon, Mar 17, 4:16 AM
Unknown Object (File)
Mon, Mar 17, 4:16 AM
Unknown Object (File)
Mon, Mar 17, 4:13 AM
Unknown Object (File)
Fri, Mar 7, 8:57 PM
Unknown Object (File)
Sat, Mar 1, 7:54 AM
Unknown Object (File)
Mon, Feb 24, 9:30 AM
Unknown Object (File)
Jan 29 2025, 12:41 AM
View All Files
Subscribers
tomek

Details

Reviewers
rohan
atul
ginsu
michal
Commits
rCOMMb589a7bbd40b: [native] Pass TextMessage.onPress down via context
Summary

Descendants of this component will need to call onPress.

Test Plan

I tested this in combination with the next diff. See attached video in the next diff

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Revision Contents
Changeset List

Diff 19024

View Options

native/chat/message-press-responder-context.js

// @flow // @flow
import invariant from 'invariant';
import * as React from 'react'; import * as React from 'react';
import { import {
sendReactionMessage, sendReactionMessage,
sendReactionMessageActionTypes, sendReactionMessageActionTypes,
} from 'lib/actions/message-actions'; } from 'lib/actions/message-actions';
import { useModalContext } from 'lib/components/modal-provider.react'; import { useModalContext } from 'lib/components/modal-provider.react';
import { messageTypes } from 'lib/types/message-types';
import type { RawReactionMessageInfo } from 'lib/types/messages/reaction';
import { import {
useDispatchActionPromise, useDispatchActionPromise,
useServerCall, useServerCall,
} from 'lib/utils/action-utils'; } from 'lib/utils/action-utils';
import Alert from '../modals/alert.react'; import Alert from '../modals/alert.react';
import { useSelector } from '../redux/redux-utils';
function useOnClickReact( function useOnClickReact(
messageID: ?string, messageID: ?string,
localID: string, localID: string,
threadID: string, threadID: string,
reaction: string, reaction: string,
action: 'add_reaction' | 'remove_reaction', action: 'add_reaction' | 'remove_reaction',
): (event: SyntheticEvent<HTMLElement>) => mixed { ): (event: SyntheticEvent<HTMLElement>) => mixed {
const { pushModal } = useModalContext(); const { pushModal } = useModalContext();
const viewerID = useSelector(
state => state.currentUserInfo && state.currentUserInfo.id,
);
const callSendReactionMessage = useServerCall(sendReactionMessage); const callSendReactionMessage = useServerCall(sendReactionMessage);
const dispatchActionPromise = useDispatchActionPromise(); const dispatchActionPromise = useDispatchActionPromise();
return React.useCallback( return React.useCallback(
(event: SyntheticEvent<HTMLElement>) => { (event: SyntheticEvent<HTMLElement>) => {
event.preventDefault(); event.preventDefault();
if (!messageID) { if (!messageID) {
return; return;
} }
invariant(viewerID, 'viewerID should be set');
const reactionMessagePromise = (async () => { const reactionMessagePromise = (async () => {
try { try {
const result = await callSendReactionMessage({ const result = await callSendReactionMessage({
threadID, threadID,
localID, localID,
targetMessageID: messageID, targetMessageID: messageID,
reaction, reaction,
action, action,
Show All 9 Lines (event: SyntheticEvent<HTMLElement>) => {
<Alert title="Couldn’t send the reaction"> <Alert title="Couldn’t send the reaction">
Please try again later Please try again later
</Alert>, </Alert>,
); );
throw e; throw e;
} }
})(); })();
const startingPayload: RawReactionMessageInfo = {
type: messageTypes.REACTION,
threadID,
localID,
creatorID: viewerID,
time: Date.now(),
targetMessageID: messageID,
reaction,
action,
};
dispatchActionPromise( dispatchActionPromise(
sendReactionMessageActionTypes, sendReactionMessageActionTypes,
reactionMessagePromise, reactionMessagePromise,
undefined,
startingPayload,
); );
}, },
[ [
action,
callSendReactionMessage,
dispatchActionPromise,
messageID, messageID,
pushModal,
reaction,
threadID, threadID,
localID, localID,
viewerID,
reaction,
action,
dispatchActionPromise,
callSendReactionMessage,
pushModal,
], ],
); );
} }
export { useOnClickReact }; export { useOnClickReact };
View Options

native/chat/text-message-tooltip-button.react.js

// @flow // @flow
import invariant from 'invariant';
import * as React from 'react'; import * as React from 'react';
import { import {
sendReactionMessage, sendReactionMessage,
sendReactionMessageActionTypes, sendReactionMessageActionTypes,
} from 'lib/actions/message-actions'; } from 'lib/actions/message-actions';
import { useModalContext } from 'lib/components/modal-provider.react'; import { useModalContext } from 'lib/components/modal-provider.react';
import { messageTypes } from 'lib/types/message-types';
import type { RawReactionMessageInfo } from 'lib/types/messages/reaction';
import { import {
useDispatchActionPromise, useDispatchActionPromise,
useServerCall, useServerCall,
} from 'lib/utils/action-utils'; } from 'lib/utils/action-utils';
import Alert from '../modals/alert.react'; import Alert from '../modals/alert.react';
import { useSelector } from '../redux/redux-utils';
function useOnClickReact( function useOnClickReact(
messageID: ?string, messageID: ?string,
localID: string, localID: string,
threadID: string, threadID: string,
reaction: string, reaction: string,
action: 'add_reaction' | 'remove_reaction', action: 'add_reaction' | 'remove_reaction',
): (event: SyntheticEvent<HTMLElement>) => mixed { ): (event: SyntheticEvent<HTMLElement>) => mixed {
const { pushModal } = useModalContext(); const { pushModal } = useModalContext();
const viewerID = useSelector(
state => state.currentUserInfo && state.currentUserInfo.id,
);
const callSendReactionMessage = useServerCall(sendReactionMessage); const callSendReactionMessage = useServerCall(sendReactionMessage);
const dispatchActionPromise = useDispatchActionPromise(); const dispatchActionPromise = useDispatchActionPromise();
return React.useCallback( return React.useCallback(
(event: SyntheticEvent<HTMLElement>) => { (event: SyntheticEvent<HTMLElement>) => {
event.preventDefault(); event.preventDefault();
if (!messageID) { if (!messageID) {
return; return;
} }
invariant(viewerID, 'viewerID should be set');
const reactionMessagePromise = (async () => { const reactionMessagePromise = (async () => {
try { try {
const result = await callSendReactionMessage({ const result = await callSendReactionMessage({
threadID, threadID,
localID, localID,
targetMessageID: messageID, targetMessageID: messageID,
reaction, reaction,
action, action,
Show All 9 Lines (event: SyntheticEvent<HTMLElement>) => {
<Alert title="Couldn’t send the reaction"> <Alert title="Couldn’t send the reaction">
Please try again later Please try again later
</Alert>, </Alert>,
); );
throw e; throw e;
} }
})(); })();
const startingPayload: RawReactionMessageInfo = {
type: messageTypes.REACTION,
threadID,
localID,
creatorID: viewerID,
time: Date.now(),
targetMessageID: messageID,
reaction,
action,
};
dispatchActionPromise( dispatchActionPromise(
sendReactionMessageActionTypes, sendReactionMessageActionTypes,
reactionMessagePromise, reactionMessagePromise,
undefined,
startingPayload,
); );
}, },
[ [
action,
callSendReactionMessage,
dispatchActionPromise,
messageID, messageID,
pushModal,
reaction,
threadID, threadID,
localID, localID,
viewerID,
reaction,
action,
dispatchActionPromise,
callSendReactionMessage,
pushModal,
], ],
); );
} }
export { useOnClickReact }; export { useOnClickReact };
View Options

native/chat/text-message.react.js

// @flow // @flow
import invariant from 'invariant';
import * as React from 'react'; import * as React from 'react';
import { import {
sendReactionMessage, sendReactionMessage,
sendReactionMessageActionTypes, sendReactionMessageActionTypes,
} from 'lib/actions/message-actions'; } from 'lib/actions/message-actions';
import { useModalContext } from 'lib/components/modal-provider.react'; import { useModalContext } from 'lib/components/modal-provider.react';
import { messageTypes } from 'lib/types/message-types';
import type { RawReactionMessageInfo } from 'lib/types/messages/reaction';
import { import {
useDispatchActionPromise, useDispatchActionPromise,
useServerCall, useServerCall,
} from 'lib/utils/action-utils'; } from 'lib/utils/action-utils';
import Alert from '../modals/alert.react'; import Alert from '../modals/alert.react';
import { useSelector } from '../redux/redux-utils';
function useOnClickReact( function useOnClickReact(
messageID: ?string, messageID: ?string,
localID: string, localID: string,
threadID: string, threadID: string,
reaction: string, reaction: string,
action: 'add_reaction' | 'remove_reaction', action: 'add_reaction' | 'remove_reaction',
): (event: SyntheticEvent<HTMLElement>) => mixed { ): (event: SyntheticEvent<HTMLElement>) => mixed {
const { pushModal } = useModalContext(); const { pushModal } = useModalContext();
const viewerID = useSelector(
state => state.currentUserInfo && state.currentUserInfo.id,
);
const callSendReactionMessage = useServerCall(sendReactionMessage); const callSendReactionMessage = useServerCall(sendReactionMessage);
const dispatchActionPromise = useDispatchActionPromise(); const dispatchActionPromise = useDispatchActionPromise();
return React.useCallback( return React.useCallback(
(event: SyntheticEvent<HTMLElement>) => { (event: SyntheticEvent<HTMLElement>) => {
event.preventDefault(); event.preventDefault();
if (!messageID) { if (!messageID) {
return; return;
} }
invariant(viewerID, 'viewerID should be set');
const reactionMessagePromise = (async () => { const reactionMessagePromise = (async () => {
try { try {
const result = await callSendReactionMessage({ const result = await callSendReactionMessage({
threadID, threadID,
localID, localID,
targetMessageID: messageID, targetMessageID: messageID,
reaction, reaction,
action, action,
Show All 9 Lines (event: SyntheticEvent<HTMLElement>) => {
<Alert title="Couldn’t send the reaction"> <Alert title="Couldn’t send the reaction">
Please try again later Please try again later
</Alert>, </Alert>,
); );
throw e; throw e;
} }
})(); })();
const startingPayload: RawReactionMessageInfo = {
type: messageTypes.REACTION,
threadID,
localID,
creatorID: viewerID,
time: Date.now(),
targetMessageID: messageID,
reaction,
action,
};
dispatchActionPromise( dispatchActionPromise(
sendReactionMessageActionTypes, sendReactionMessageActionTypes,
reactionMessagePromise, reactionMessagePromise,
undefined,
startingPayload,
); );
}, },
[ [
action,
callSendReactionMessage,
dispatchActionPromise,
messageID, messageID,
pushModal,
reaction,
threadID, threadID,
localID, localID,
viewerID,
reaction,
action,
dispatchActionPromise,
callSendReactionMessage,
pushModal,
], ],
); );
} }
export { useOnClickReact }; export { useOnClickReact };