Changeset View
Changeset View
Standalone View
Standalone View
web/chat/message.react.js
// @flow | // @flow | ||||
import invariant from 'invariant'; | import invariant from 'invariant'; | ||||
import * as React from 'react'; | import * as React from 'react'; | ||||
import { type ChatMessageInfoItem } from 'lib/selectors/chat-selectors.js'; | import { type ChatMessageInfoItem } from 'lib/selectors/chat-selectors.js'; | ||||
import { messageTypes } from 'lib/types/message-types-enum.js'; | import { messageTypes } from 'lib/types/message-types-enum.js'; | ||||
import { type ThreadInfo } from 'lib/types/thread-types.js'; | import { type ThreadInfo } from 'lib/types/thread-types.js'; | ||||
import { longAbsoluteDate } from 'lib/utils/date-utils.js'; | import { longAbsoluteDate } from 'lib/utils/date-utils.js'; | ||||
import css from './chat-message-list.css'; | import css from './chat-message-list.css'; | ||||
import { useEditModalContext } from './edit-message-provider.js'; | |||||
import { ComposedEditTextMessage } from './edit-text-message.react.js'; | |||||
import MultimediaMessage from './multimedia-message.react.js'; | import MultimediaMessage from './multimedia-message.react.js'; | ||||
import RobotextMessage from './robotext-message.react.js'; | import RobotextMessage from './robotext-message.react.js'; | ||||
import TextMessage from './text-message.react.js'; | import TextMessage from './text-message.react.js'; | ||||
type Props = { | type Props = { | ||||
+item: ChatMessageInfoItem, | +item: ChatMessageInfoItem, | ||||
+threadInfo: ThreadInfo, | +threadInfo: ThreadInfo, | ||||
+shouldDisplayPinIndicator: boolean, | +shouldDisplayPinIndicator: boolean, | ||||
}; | }; | ||||
function Message(props: Props): React.Node { | function Message(props: Props): React.Node { | ||||
const { item } = props; | const { item } = props; | ||||
let conversationHeader = null; | let conversationHeader = null; | ||||
if (item.startsConversation) { | if (item.startsConversation) { | ||||
conversationHeader = ( | conversationHeader = ( | ||||
<div className={css.conversationHeader}> | <div className={css.conversationHeader}> | ||||
{longAbsoluteDate(item.messageInfo.time)} | {longAbsoluteDate(item.messageInfo.time)} | ||||
</div> | </div> | ||||
); | ); | ||||
} | } | ||||
const { editState } = useEditModalContext(); | |||||
let message; | let message; | ||||
if (item.messageInfo.type === messageTypes.TEXT) { | if ( | ||||
item.messageInfo.id && | |||||
editState?.messageInfo.messageInfo?.id === item.messageInfo.id | |||||
) { | |||||
message = ( | |||||
<ComposedEditTextMessage | |||||
item={props.item} | |||||
threadInfo={props.threadInfo} | |||||
background={true} | |||||
/> | |||||
); | |||||
} else if (item.messageInfo.type === messageTypes.TEXT) { | |||||
message = ( | message = ( | ||||
<TextMessage | <TextMessage | ||||
item={item} | item={item} | ||||
threadInfo={props.threadInfo} | threadInfo={props.threadInfo} | ||||
shouldDisplayPinIndicator={props.shouldDisplayPinIndicator} | shouldDisplayPinIndicator={props.shouldDisplayPinIndicator} | ||||
/> | /> | ||||
); | ); | ||||
} else if ( | } else if ( | ||||
Show All 23 Lines |