Changeset View
Changeset View
Standalone View
Standalone View
web/modals/chat/toggle-pin-modal.react.js
| // @flow | // @flow | ||||
| import invariant from 'invariant'; | import invariant from 'invariant'; | ||||
| import * as React from 'react'; | import * as React from 'react'; | ||||
| import { | import { | ||||
| toggleMessagePin, | toggleMessagePin, | ||||
| toggleMessagePinActionTypes, | toggleMessagePinActionTypes, | ||||
| } from 'lib/actions/thread-actions.js'; | } from 'lib/actions/thread-actions.js'; | ||||
| import { useModalContext } from 'lib/components/modal-provider.react.js'; | import { useModalContext } from 'lib/components/modal-provider.react.js'; | ||||
| import type { ChatMessageInfoItem } from 'lib/selectors/chat-selectors.js'; | import type { ChatMessageInfoItem } from 'lib/selectors/chat-selectors.js'; | ||||
| import { modifyItemForResultScreen } from 'lib/shared/message-utils.js'; | |||||
| import type { ThreadInfo } from 'lib/types/thread-types.js'; | import type { ThreadInfo } from 'lib/types/thread-types.js'; | ||||
| import { | import { | ||||
| useServerCall, | useServerCall, | ||||
| useDispatchActionPromise, | useDispatchActionPromise, | ||||
| } from 'lib/utils/action-utils.js'; | } from 'lib/utils/action-utils.js'; | ||||
| import css from './toggle-pin-modal.css'; | import css from './toggle-pin-modal.css'; | ||||
| import Button, { buttonThemes } from '../../components/button.react.js'; | import Button, { buttonThemes } from '../../components/button.react.js'; | ||||
| Show All 39 Lines | function TogglePinModal(props: TogglePinModalProps): React.Node { | ||||
| // We want to remove inline engagement (threadCreatedFromMessage / reactions) | // We want to remove inline engagement (threadCreatedFromMessage / reactions) | ||||
| // and the message header (startsConversation). We also want to set isViewer | // and the message header (startsConversation). We also want to set isViewer | ||||
| // to false so that the message is left-aligned and uncolored. | // to false so that the message is left-aligned and uncolored. | ||||
| const modifiedItem = React.useMemo(() => { | const modifiedItem = React.useMemo(() => { | ||||
| if (item.messageInfoType !== 'composable') { | if (item.messageInfoType !== 'composable') { | ||||
| return item; | return item; | ||||
| } | } | ||||
| return { | const strippedItem = { | ||||
| ...item, | ...item, | ||||
| threadCreatedFromMessage: undefined, | threadCreatedFromMessage: undefined, | ||||
| reactions: {}, | reactions: {}, | ||||
| startsConversation: false, | |||||
| messageInfo: { | |||||
| ...item.messageInfo, | |||||
| creator: { | |||||
| ...item.messageInfo.creator, | |||||
| isViewer: false, | |||||
| }, | |||||
| }, | |||||
| }; | }; | ||||
| return modifyItemForResultScreen(strippedItem); | |||||
| }, [item]); | }, [item]); | ||||
| const onClick = React.useCallback(() => { | const onClick = React.useCallback(() => { | ||||
| const createToggleMessagePinPromise = async () => { | const createToggleMessagePinPromise = async () => { | ||||
| invariant(messageInfo.id, 'messageInfo.id should be defined'); | invariant(messageInfo.id, 'messageInfo.id should be defined'); | ||||
| const result = await callToggleMessagePin({ | const result = await callToggleMessagePin({ | ||||
| messageID: messageInfo.id, | messageID: messageInfo.id, | ||||
| action: modalInfo.action, | action: modalInfo.action, | ||||
| ▲ Show 20 Lines • Show All 42 Lines • Show Last 20 Lines | |||||