You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
103 lines
3.7 KiB
TypeScript
103 lines
3.7 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import { isEmpty } from 'lodash';
|
|
|
|
import { useIsPrivate, useIsPublic } from '../../../hooks/useParamSelector';
|
|
import { MessageBody } from '../../conversation/message/message-content/MessageBody';
|
|
import { assertUnreachable } from '../../../types/sqlSharedTypes';
|
|
import {
|
|
ConversationInteractionProps,
|
|
ConversationInteractionStatus,
|
|
ConversationInteractionType,
|
|
clearConversationInteractionState,
|
|
} from '../../../interactions/conversationInteractions';
|
|
import styled from 'styled-components';
|
|
import { getConversationController } from '../../../session/conversations';
|
|
import { LastMessageType } from '../../../state/ducks/conversations';
|
|
|
|
const StyledInteractionItemText = styled.div<{ isError: boolean }>`
|
|
${props => props.isError && 'color: var(--danger-color) !important;'}
|
|
`;
|
|
|
|
type InteractionItemProps = ConversationInteractionProps & {
|
|
lastMessage?: LastMessageType | null;
|
|
};
|
|
|
|
export const InteractionItem = (props: InteractionItemProps) => {
|
|
const { conversationId, interactionStatus, interactionType, lastMessage } = props;
|
|
const isGroup = !useIsPrivate(conversationId);
|
|
const isCommunity = useIsPublic(conversationId);
|
|
|
|
const [storedLastMessageId, setStoredLastMessageId] = useState(lastMessage?.id);
|
|
const [storedLastMessageText, setStoredLastMessageText] = useState(lastMessage?.text);
|
|
|
|
// NOTE we want to reset the interaction state when the last message changes
|
|
useEffect(() => {
|
|
if (conversationId) {
|
|
const convo = getConversationController().get(conversationId);
|
|
|
|
window.log.debug(
|
|
`WIP: storedLastMessageId "${storedLastMessageId}" convo.get('lastMessageId') "${convo.get(
|
|
'lastMessageId'
|
|
)}' storedLastMessageText ${storedLastMessageText} text ${text}`
|
|
);
|
|
|
|
if (storedLastMessageId !== convo.get('lastMessageId')) {
|
|
setStoredLastMessageId(convo.get('lastMessageId'));
|
|
setStoredLastMessageText(convo.get('lastMessage'));
|
|
void clearConversationInteractionState({ conversationId });
|
|
}
|
|
}
|
|
}, [conversationId, interactionStatus, lastMessage?.id]);
|
|
|
|
if (isEmpty(conversationId) || isEmpty(interactionType) || isEmpty(interactionStatus)) {
|
|
return null;
|
|
}
|
|
|
|
let text = storedLastMessageText || '';
|
|
let failText = '';
|
|
switch (interactionType) {
|
|
case ConversationInteractionType.Hide:
|
|
failText = window.i18n('hideConversationFailed');
|
|
text =
|
|
interactionStatus === ConversationInteractionStatus.Error
|
|
? failText
|
|
: interactionStatus === ConversationInteractionStatus.Loading
|
|
? window.i18n('hiding')
|
|
: text;
|
|
break;
|
|
case ConversationInteractionType.Leave:
|
|
failText = isCommunity
|
|
? window.i18n('leaveCommunityFailed')
|
|
: isGroup
|
|
? window.i18n('leaveGroupFailed')
|
|
: window.i18n('deleteConversationFailed');
|
|
text =
|
|
interactionStatus === ConversationInteractionStatus.Error
|
|
? failText
|
|
: interactionStatus === ConversationInteractionStatus.Loading
|
|
? window.i18n('leaving')
|
|
: text;
|
|
break;
|
|
default:
|
|
assertUnreachable(
|
|
interactionType,
|
|
`InteractionItem: Missing case error "${interactionType}"`
|
|
);
|
|
}
|
|
|
|
if (isEmpty(text)) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className="module-conversation-list-item__message">
|
|
<StyledInteractionItemText
|
|
className="module-conversation-list-item__message__text"
|
|
isError={Boolean(interactionStatus === ConversationInteractionStatus.Error)}
|
|
>
|
|
<MessageBody text={text} disableJumbomoji={true} disableLinks={true} isGroup={isGroup} />
|
|
</StyledInteractionItemText>
|
|
</div>
|
|
);
|
|
};
|