use React Provider for convoListItem (#2088)
this is to avoid passing down the prop to all the componentspull/2092/head
Audric Ackermann
3 years ago
committed by
GitHub
parent
38325215e6
commit
abd146c4ca
@ -1,400 +0,0 @@
|
||||
import React, { useCallback } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { isEmpty } from 'lodash';
|
||||
import { contextMenu } from 'react-contexify';
|
||||
|
||||
import { Avatar, AvatarSize } from '../avatar/Avatar';
|
||||
import { Timestamp } from '../conversation/Timestamp';
|
||||
import { ContactName } from '../conversation/ContactName';
|
||||
import { TypingAnimation } from '../conversation/TypingAnimation';
|
||||
|
||||
import { createPortal } from 'react-dom';
|
||||
import styled from 'styled-components';
|
||||
import { PubKey } from '../../session/types';
|
||||
import {
|
||||
LastMessageType,
|
||||
openConversationWithMessages,
|
||||
ReduxConversationType,
|
||||
} from '../../state/ducks/conversations';
|
||||
import _ from 'underscore';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { SectionType } from '../../state/ducks/section';
|
||||
import { getFocusedSection } from '../../state/selectors/section';
|
||||
import { ConversationNotificationSettingType } from '../../models/conversation';
|
||||
import { forceSyncConfigurationNowIfNeeded } from '../../session/utils/syncUtils';
|
||||
import { updateUserDetailsModal } from '../../state/ducks/modalDialog';
|
||||
import { approveConversation, blockConvoById } from '../../interactions/conversationInteractions';
|
||||
import { useAvatarPath, useConversationUsername, useIsMe } from '../../hooks/useParamSelector';
|
||||
import { MessageBody } from '../conversation/message/message-content/MessageBody';
|
||||
import { OutgoingMessageStatus } from '../conversation/message/message-content/OutgoingMessageStatus';
|
||||
import { SessionIcon, SessionIconButton } from '../icon';
|
||||
import { MemoConversationListItemContextMenu } from '../menu/ConversationListItemContextMenu';
|
||||
|
||||
// tslint:disable-next-line: no-empty-interface
|
||||
export interface ConversationListItemProps extends ReduxConversationType {}
|
||||
|
||||
export const StyledConversationListItemIconWrapper = styled.div`
|
||||
svg {
|
||||
margin: 0px 2px;
|
||||
}
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
`;
|
||||
|
||||
type PropsHousekeeping = {
|
||||
style?: Object;
|
||||
isMessageRequest?: boolean;
|
||||
};
|
||||
// tslint:disable: use-simple-attributes
|
||||
|
||||
type Props = ConversationListItemProps & PropsHousekeeping;
|
||||
|
||||
const Portal = ({ children }: { children: any }) => {
|
||||
return createPortal(children, document.querySelector('.inbox.index') as Element);
|
||||
};
|
||||
|
||||
const HeaderItem = (props: {
|
||||
unreadCount: number;
|
||||
mentionedUs: boolean;
|
||||
activeAt?: number;
|
||||
conversationId: string;
|
||||
isPinned: boolean;
|
||||
currentNotificationSetting: ConversationNotificationSettingType;
|
||||
}) => {
|
||||
const {
|
||||
unreadCount,
|
||||
mentionedUs,
|
||||
activeAt,
|
||||
isPinned,
|
||||
conversationId,
|
||||
currentNotificationSetting,
|
||||
} = props;
|
||||
|
||||
let atSymbol = null;
|
||||
let unreadCountDiv = null;
|
||||
if (unreadCount > 0) {
|
||||
atSymbol = mentionedUs ? <p className="at-symbol">@</p> : null;
|
||||
unreadCountDiv = <p className="module-conversation-list-item__unread-count">{unreadCount}</p>;
|
||||
}
|
||||
|
||||
const isMessagesSection = useSelector(getFocusedSection) === SectionType.Message;
|
||||
|
||||
const pinIcon =
|
||||
isMessagesSection && isPinned ? (
|
||||
<SessionIcon iconType="pin" iconColor={'var(--color-text-subtle)'} iconSize="small" />
|
||||
) : null;
|
||||
|
||||
const NotificationSettingIcon = () => {
|
||||
if (!isMessagesSection) {
|
||||
return null;
|
||||
}
|
||||
|
||||
switch (currentNotificationSetting) {
|
||||
case 'all':
|
||||
return null;
|
||||
case 'disabled':
|
||||
return (
|
||||
<SessionIcon iconType="mute" iconColor={'var(--color-text-subtle)'} iconSize="small" />
|
||||
);
|
||||
case 'mentions_only':
|
||||
return (
|
||||
<SessionIcon iconType="bell" iconColor={'var(--color-text-subtle)'} iconSize="small" />
|
||||
);
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="module-conversation-list-item__header">
|
||||
<div
|
||||
className={classNames(
|
||||
'module-conversation-list-item__header__name',
|
||||
unreadCount > 0 ? 'module-conversation-list-item__header__name--with-unread' : null
|
||||
)}
|
||||
>
|
||||
<UserItem conversationId={conversationId} />
|
||||
</div>
|
||||
|
||||
<StyledConversationListItemIconWrapper>
|
||||
{pinIcon}
|
||||
<NotificationSettingIcon />
|
||||
</StyledConversationListItemIconWrapper>
|
||||
{unreadCountDiv}
|
||||
{atSymbol}
|
||||
|
||||
<div
|
||||
className={classNames(
|
||||
'module-conversation-list-item__header__date',
|
||||
unreadCount > 0 ? 'module-conversation-list-item__header__date--has-unread' : null
|
||||
)}
|
||||
>
|
||||
<Timestamp timestamp={activeAt} extended={false} isConversationListItem={true} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const UserItem = (props: { conversationId: string }) => {
|
||||
const { conversationId } = props;
|
||||
|
||||
const shortenedPubkey = PubKey.shorten(conversationId);
|
||||
const isMe = useIsMe(conversationId);
|
||||
const username = useConversationUsername(conversationId);
|
||||
|
||||
const displayedPubkey = username ? shortenedPubkey : conversationId;
|
||||
const displayName = isMe ? window.i18n('noteToSelf') : username;
|
||||
|
||||
let shouldShowPubkey = false;
|
||||
if ((!username || username.length === 0) && (!displayName || displayName.length === 0)) {
|
||||
shouldShowPubkey = true;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="module-conversation__user">
|
||||
<ContactName
|
||||
pubkey={displayedPubkey}
|
||||
name={username}
|
||||
profileName={displayName}
|
||||
module="module-conversation__user"
|
||||
boldProfileName={true}
|
||||
shouldShowPubkey={shouldShowPubkey}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const MessageItem = (props: {
|
||||
lastMessage?: LastMessageType;
|
||||
isTyping: boolean;
|
||||
unreadCount: number;
|
||||
isMessageRequest: boolean;
|
||||
conversationId: string;
|
||||
}) => {
|
||||
const { lastMessage, isTyping, unreadCount } = props;
|
||||
|
||||
if (!lastMessage && !isTyping) {
|
||||
return null;
|
||||
}
|
||||
const text = lastMessage?.text || '';
|
||||
|
||||
if (isEmpty(text)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="module-conversation-list-item__message">
|
||||
<div
|
||||
className={classNames(
|
||||
'module-conversation-list-item__message__text',
|
||||
unreadCount > 0 ? 'module-conversation-list-item__message__text--has-unread' : null
|
||||
)}
|
||||
>
|
||||
{isTyping ? (
|
||||
<TypingAnimation />
|
||||
) : (
|
||||
<MessageBody isGroup={true} text={text} disableJumbomoji={true} disableLinks={true} />
|
||||
)}
|
||||
</div>
|
||||
<MessageRequestButtons
|
||||
conversationId={props.conversationId}
|
||||
isMessageRequest={props.isMessageRequest}
|
||||
/>
|
||||
{lastMessage && lastMessage.status && !props.isMessageRequest ? (
|
||||
<OutgoingMessageStatus status={lastMessage.status} />
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const AvatarItem = (props: { conversationId: string; isPrivate: boolean }) => {
|
||||
const { isPrivate, conversationId } = props;
|
||||
const userName = useConversationUsername(conversationId);
|
||||
const avatarPath = useAvatarPath(conversationId);
|
||||
const dispatch = useDispatch();
|
||||
|
||||
function onPrivateAvatarClick() {
|
||||
dispatch(
|
||||
updateUserDetailsModal({
|
||||
conversationId: conversationId,
|
||||
userName: userName || '',
|
||||
authorAvatarPath: avatarPath,
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="module-conversation-list-item__avatar-container">
|
||||
<Avatar
|
||||
size={AvatarSize.S}
|
||||
pubkey={conversationId}
|
||||
onAvatarClick={isPrivate ? onPrivateAvatarClick : undefined}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const RejectMessageRequestButton = ({ conversationId }: { conversationId: string }) => {
|
||||
/**
|
||||
* Removes conversation from requests list,
|
||||
* adds ID to block list, syncs the block with linked devices.
|
||||
*/
|
||||
const handleConversationBlock = async () => {
|
||||
await blockConvoById(conversationId);
|
||||
await forceSyncConfigurationNowIfNeeded();
|
||||
};
|
||||
return (
|
||||
<SessionIconButton
|
||||
iconType="exit"
|
||||
iconSize="large"
|
||||
onClick={handleConversationBlock}
|
||||
backgroundColor="var(--color-destructive)"
|
||||
iconColor="var(--color-foreground-primary)"
|
||||
iconPadding="var(--margins-xs)"
|
||||
borderRadius="2px"
|
||||
margin="0 5px 0 0"
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const ApproveMessageRequestButton = ({ conversationId }: { conversationId: string }) => {
|
||||
return (
|
||||
<SessionIconButton
|
||||
iconType="check"
|
||||
iconSize="large"
|
||||
onClick={async () => {
|
||||
await approveConversation(conversationId);
|
||||
}}
|
||||
backgroundColor="var(--color-accent)"
|
||||
iconColor="var(--color-foreground-primary)"
|
||||
iconPadding="var(--margins-xs)"
|
||||
borderRadius="2px"
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const MessageRequestButtons = ({
|
||||
conversationId,
|
||||
isMessageRequest,
|
||||
}: {
|
||||
conversationId: string;
|
||||
isMessageRequest: boolean;
|
||||
}) => {
|
||||
if (!isMessageRequest) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<RejectMessageRequestButton conversationId={conversationId} />
|
||||
<ApproveMessageRequestButton conversationId={conversationId} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
// tslint:disable: max-func-body-length
|
||||
const ConversationListItem = (props: Props) => {
|
||||
const {
|
||||
activeAt,
|
||||
unreadCount,
|
||||
id: conversationId,
|
||||
isSelected,
|
||||
isBlocked,
|
||||
style,
|
||||
mentionedUs,
|
||||
isMe,
|
||||
isPinned,
|
||||
isTyping,
|
||||
lastMessage,
|
||||
hasNickname,
|
||||
isKickedFromGroup,
|
||||
left,
|
||||
type,
|
||||
isPublic,
|
||||
avatarPath,
|
||||
isPrivate,
|
||||
currentNotificationSetting,
|
||||
weAreAdmin,
|
||||
isMessageRequest,
|
||||
} = props;
|
||||
const triggerId = `conversation-item-${conversationId}-ctxmenu`;
|
||||
const key = `conversation-item-${conversationId}`;
|
||||
|
||||
const openConvo = useCallback(
|
||||
async (e: React.MouseEvent<HTMLDivElement>) => {
|
||||
// mousedown is invoked sooner than onClick, but for both right and left click
|
||||
if (e.button === 0) {
|
||||
await openConversationWithMessages({ conversationKey: conversationId });
|
||||
}
|
||||
},
|
||||
[conversationId]
|
||||
);
|
||||
|
||||
return (
|
||||
<div key={key}>
|
||||
<div
|
||||
role="button"
|
||||
onMouseDown={openConvo}
|
||||
onMouseUp={e => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
}}
|
||||
onContextMenu={(e: any) => {
|
||||
contextMenu.show({
|
||||
id: triggerId,
|
||||
event: e,
|
||||
});
|
||||
}}
|
||||
style={style}
|
||||
className={classNames(
|
||||
'module-conversation-list-item',
|
||||
unreadCount && unreadCount > 0 ? 'module-conversation-list-item--has-unread' : null,
|
||||
unreadCount && unreadCount > 0 && mentionedUs
|
||||
? 'module-conversation-list-item--mentioned-us'
|
||||
: null,
|
||||
isSelected ? 'module-conversation-list-item--is-selected' : null,
|
||||
isBlocked ? 'module-conversation-list-item--is-blocked' : null
|
||||
)}
|
||||
>
|
||||
<AvatarItem conversationId={conversationId} isPrivate={isPrivate || false} />
|
||||
<div className="module-conversation-list-item__content">
|
||||
<HeaderItem
|
||||
mentionedUs={!!mentionedUs}
|
||||
unreadCount={unreadCount || 0}
|
||||
activeAt={activeAt}
|
||||
isPinned={!!isPinned}
|
||||
conversationId={conversationId}
|
||||
currentNotificationSetting={currentNotificationSetting || 'all'}
|
||||
/>
|
||||
<MessageItem
|
||||
isTyping={!!isTyping}
|
||||
unreadCount={unreadCount || 0}
|
||||
lastMessage={lastMessage}
|
||||
isMessageRequest={Boolean(isMessageRequest)}
|
||||
conversationId={conversationId}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Portal>
|
||||
<MemoConversationListItemContextMenu
|
||||
triggerId={triggerId}
|
||||
conversationId={conversationId}
|
||||
hasNickname={!!hasNickname}
|
||||
isBlocked={!!isBlocked}
|
||||
isPrivate={!!isPrivate}
|
||||
isKickedFromGroup={!!isKickedFromGroup}
|
||||
isMe={!!isMe}
|
||||
isPublic={!!isPublic}
|
||||
left={!!left}
|
||||
type={type}
|
||||
currentNotificationSetting={currentNotificationSetting || 'all'}
|
||||
avatarPath={avatarPath || null}
|
||||
weAreAdmin={weAreAdmin}
|
||||
/>
|
||||
</Portal>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const MemoConversationListItemWithDetails = React.memo(ConversationListItem, _.isEqual);
|
||||
@ -0,0 +1,142 @@
|
||||
import React, { useCallback, useContext } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { contextMenu } from 'react-contexify';
|
||||
|
||||
import { Avatar, AvatarSize } from '../../avatar/Avatar';
|
||||
|
||||
import { createPortal } from 'react-dom';
|
||||
import {
|
||||
openConversationWithMessages,
|
||||
ReduxConversationType,
|
||||
} from '../../../state/ducks/conversations';
|
||||
import _ from 'underscore';
|
||||
import { useDispatch } from 'react-redux';
|
||||
import { updateUserDetailsModal } from '../../../state/ducks/modalDialog';
|
||||
|
||||
import {
|
||||
useAvatarPath,
|
||||
useConversationUsername,
|
||||
useIsPrivate,
|
||||
} from '../../../hooks/useParamSelector';
|
||||
import { MemoConversationListItemContextMenu } from '../../menu/ConversationListItemContextMenu';
|
||||
import { HeaderItem } from './HeaderItem';
|
||||
import { MessageItem } from './MessageItem';
|
||||
|
||||
// tslint:disable-next-line: no-empty-interface
|
||||
export type ConversationListItemProps = Pick<
|
||||
ReduxConversationType,
|
||||
'unreadCount' | 'id' | 'isSelected' | 'isBlocked' | 'mentionedUs' | 'unreadCount' | 'profileName'
|
||||
>;
|
||||
|
||||
/**
|
||||
* This React context is used to share deeply in the tree of the ConversationListItem what is the ID we are currently rendering.
|
||||
* This is to avoid passing the prop to all the subtree component
|
||||
*/
|
||||
export const ContextConversationId = React.createContext('');
|
||||
|
||||
type PropsHousekeeping = {
|
||||
style?: Object;
|
||||
isMessageRequest?: boolean;
|
||||
};
|
||||
// tslint:disable: use-simple-attributes
|
||||
|
||||
type Props = ConversationListItemProps & PropsHousekeeping;
|
||||
|
||||
const Portal = ({ children }: { children: any }) => {
|
||||
return createPortal(children, document.querySelector('.inbox.index') as Element);
|
||||
};
|
||||
|
||||
const AvatarItem = () => {
|
||||
const conversationId = useContext(ContextConversationId);
|
||||
const userName = useConversationUsername(conversationId);
|
||||
const isPrivate = useIsPrivate(conversationId);
|
||||
const avatarPath = useAvatarPath(conversationId);
|
||||
const dispatch = useDispatch();
|
||||
|
||||
function onPrivateAvatarClick() {
|
||||
dispatch(
|
||||
updateUserDetailsModal({
|
||||
conversationId: conversationId,
|
||||
userName: userName || '',
|
||||
authorAvatarPath: avatarPath,
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="module-conversation-list-item__avatar-container">
|
||||
<Avatar
|
||||
size={AvatarSize.S}
|
||||
pubkey={conversationId}
|
||||
onAvatarClick={isPrivate ? onPrivateAvatarClick : undefined}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// tslint:disable: max-func-body-length
|
||||
const ConversationListItem = (props: Props) => {
|
||||
const {
|
||||
unreadCount,
|
||||
id: conversationId,
|
||||
isSelected,
|
||||
isBlocked,
|
||||
style,
|
||||
mentionedUs,
|
||||
isMessageRequest,
|
||||
} = props;
|
||||
const triggerId = `conversation-item-${conversationId}-ctxmenu`;
|
||||
const key = `conversation-item-${conversationId}`;
|
||||
|
||||
const openConvo = useCallback(
|
||||
async (e: React.MouseEvent<HTMLDivElement>) => {
|
||||
// mousedown is invoked sooner than onClick, but for both right and left click
|
||||
if (e.button === 0) {
|
||||
await openConversationWithMessages({ conversationKey: conversationId });
|
||||
}
|
||||
},
|
||||
[conversationId]
|
||||
);
|
||||
|
||||
return (
|
||||
<ContextConversationId.Provider value={conversationId}>
|
||||
<div key={key}>
|
||||
<div
|
||||
role="button"
|
||||
onMouseDown={openConvo}
|
||||
onMouseUp={e => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
}}
|
||||
onContextMenu={(e: any) => {
|
||||
contextMenu.show({
|
||||
id: triggerId,
|
||||
event: e,
|
||||
});
|
||||
}}
|
||||
style={style}
|
||||
className={classNames(
|
||||
'module-conversation-list-item',
|
||||
unreadCount && unreadCount > 0 ? 'module-conversation-list-item--has-unread' : null,
|
||||
unreadCount && unreadCount > 0 && mentionedUs
|
||||
? 'module-conversation-list-item--mentioned-us'
|
||||
: null,
|
||||
isSelected ? 'module-conversation-list-item--is-selected' : null,
|
||||
isBlocked ? 'module-conversation-list-item--is-blocked' : null
|
||||
)}
|
||||
>
|
||||
<AvatarItem />
|
||||
<div className="module-conversation-list-item__content">
|
||||
<HeaderItem />
|
||||
<MessageItem isMessageRequest={Boolean(isMessageRequest)} />
|
||||
</div>
|
||||
</div>
|
||||
<Portal>
|
||||
<MemoConversationListItemContextMenu triggerId={triggerId} />
|
||||
</Portal>
|
||||
</div>
|
||||
</ContextConversationId.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export const MemoConversationListItemWithDetails = React.memo(ConversationListItem, _.isEqual);
|
||||
@ -0,0 +1,116 @@
|
||||
import classNames from 'classnames';
|
||||
import React, { useContext } from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
import styled from 'styled-components';
|
||||
import { useConversationPropsById, useIsPinned } from '../../../hooks/useParamSelector';
|
||||
import { SectionType } from '../../../state/ducks/section';
|
||||
import { getFocusedSection } from '../../../state/selectors/section';
|
||||
import { Timestamp } from '../../conversation/Timestamp';
|
||||
import { SessionIcon } from '../../icon';
|
||||
import { ContextConversationId } from './ConversationListItem';
|
||||
import { UserItem } from './UserItem';
|
||||
|
||||
const NotificationSettingIcon = (props: { isMessagesSection: boolean }) => {
|
||||
const convoSetting = useSelector(useConversationPropsById)?.currentNotificationSetting;
|
||||
|
||||
if (!props.isMessagesSection) {
|
||||
return null;
|
||||
}
|
||||
|
||||
switch (convoSetting) {
|
||||
case 'all':
|
||||
return null;
|
||||
case 'disabled':
|
||||
return (
|
||||
<SessionIcon iconType="mute" iconColor={'var(--color-text-subtle)'} iconSize="small" />
|
||||
);
|
||||
case 'mentions_only':
|
||||
return (
|
||||
<SessionIcon iconType="bell" iconColor={'var(--color-text-subtle)'} iconSize="small" />
|
||||
);
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
const StyledConversationListItemIconWrapper = styled.div`
|
||||
svg {
|
||||
margin: 0px 2px;
|
||||
}
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
`;
|
||||
|
||||
function useHeaderItemProps(conversationId: string) {
|
||||
const convoProps = useConversationPropsById(conversationId);
|
||||
if (!convoProps) {
|
||||
return null;
|
||||
}
|
||||
return {
|
||||
isPinned: !!convoProps.isPinned,
|
||||
mentionedUs: convoProps.mentionedUs || false,
|
||||
unreadCount: convoProps.unreadCount || 0,
|
||||
activeAt: convoProps.activeAt,
|
||||
};
|
||||
}
|
||||
|
||||
const ListItemIcons = () => {
|
||||
const isMessagesSection = useSelector(getFocusedSection) === SectionType.Message;
|
||||
const conversationId = useContext(ContextConversationId);
|
||||
const isPinned = useIsPinned(conversationId);
|
||||
|
||||
const pinIcon =
|
||||
isMessagesSection && isPinned ? (
|
||||
<SessionIcon iconType="pin" iconColor={'var(--color-text-subtle)'} iconSize="small" />
|
||||
) : null;
|
||||
return (
|
||||
<StyledConversationListItemIconWrapper>
|
||||
{pinIcon}
|
||||
<NotificationSettingIcon isMessagesSection={isMessagesSection} />
|
||||
</StyledConversationListItemIconWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export const HeaderItem = () => {
|
||||
const conversationId = useContext(ContextConversationId);
|
||||
|
||||
const convoProps = useHeaderItemProps(conversationId);
|
||||
if (!convoProps) {
|
||||
return null;
|
||||
}
|
||||
const { unreadCount, mentionedUs, activeAt } = convoProps;
|
||||
|
||||
let atSymbol = null;
|
||||
let unreadCountDiv = null;
|
||||
if (unreadCount > 0) {
|
||||
atSymbol = mentionedUs ? <p className="at-symbol">@</p> : null;
|
||||
unreadCountDiv = <p className="module-conversation-list-item__unread-count">{unreadCount}</p>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="module-conversation-list-item__header">
|
||||
<div
|
||||
className={classNames(
|
||||
'module-conversation-list-item__header__name',
|
||||
unreadCount > 0 ? 'module-conversation-list-item__header__name--with-unread' : null
|
||||
)}
|
||||
>
|
||||
<UserItem />
|
||||
</div>
|
||||
<ListItemIcons />
|
||||
|
||||
{unreadCountDiv}
|
||||
{atSymbol}
|
||||
|
||||
<div
|
||||
className={classNames(
|
||||
'module-conversation-list-item__header__date',
|
||||
unreadCount > 0 ? 'module-conversation-list-item__header__date--has-unread' : null
|
||||
)}
|
||||
>
|
||||
<Timestamp timestamp={activeAt} extended={false} isConversationListItem={true} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,61 @@
|
||||
import classNames from 'classnames';
|
||||
import React, { useContext } from 'react';
|
||||
import { isEmpty } from 'underscore';
|
||||
import { useConversationPropsById } from '../../../hooks/useParamSelector';
|
||||
import { MessageBody } from '../../conversation/message/message-content/MessageBody';
|
||||
import { OutgoingMessageStatus } from '../../conversation/message/message-content/OutgoingMessageStatus';
|
||||
import { TypingAnimation } from '../../conversation/TypingAnimation';
|
||||
import { ContextConversationId } from './ConversationListItem';
|
||||
import { MessageRequestButtons } from './MessageRequest';
|
||||
|
||||
function useMessageItemProps(convoId: string) {
|
||||
const convoProps = useConversationPropsById(convoId);
|
||||
if (!convoProps) {
|
||||
return null;
|
||||
}
|
||||
return {
|
||||
isTyping: !!convoProps.isTyping,
|
||||
lastMessage: convoProps.lastMessage,
|
||||
|
||||
unreadCount: convoProps.unreadCount || 0,
|
||||
};
|
||||
}
|
||||
|
||||
export const MessageItem = (props: { isMessageRequest: boolean }) => {
|
||||
const conversationId = useContext(ContextConversationId);
|
||||
const convoProps = useMessageItemProps(conversationId);
|
||||
if (!convoProps) {
|
||||
return null;
|
||||
}
|
||||
const { lastMessage, isTyping, unreadCount } = convoProps;
|
||||
|
||||
if (!lastMessage && !isTyping) {
|
||||
return null;
|
||||
}
|
||||
const text = lastMessage?.text || '';
|
||||
|
||||
if (isEmpty(text)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="module-conversation-list-item__message">
|
||||
<div
|
||||
className={classNames(
|
||||
'module-conversation-list-item__message__text',
|
||||
unreadCount > 0 ? 'module-conversation-list-item__message__text--has-unread' : null
|
||||
)}
|
||||
>
|
||||
{isTyping ? (
|
||||
<TypingAnimation />
|
||||
) : (
|
||||
<MessageBody isGroup={true} text={text} disableJumbomoji={true} disableLinks={true} />
|
||||
)}
|
||||
</div>
|
||||
<MessageRequestButtons isMessageRequest={props.isMessageRequest} />
|
||||
{lastMessage && lastMessage.status && !props.isMessageRequest ? (
|
||||
<OutgoingMessageStatus status={lastMessage.status} />
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,64 @@
|
||||
import React, { useContext } from 'react';
|
||||
import {
|
||||
approveConversation,
|
||||
blockConvoById,
|
||||
} from '../../../interactions/conversationInteractions';
|
||||
import { forceSyncConfigurationNowIfNeeded } from '../../../session/utils/syncUtils';
|
||||
import { SessionIconButton } from '../../icon';
|
||||
import { ContextConversationId } from './ConversationListItem';
|
||||
|
||||
const RejectMessageRequestButton = () => {
|
||||
const conversationId = useContext(ContextConversationId);
|
||||
|
||||
/**
|
||||
* Removes conversation from requests list,
|
||||
* adds ID to block list, syncs the block with linked devices.
|
||||
*/
|
||||
const handleConversationBlock = async () => {
|
||||
await blockConvoById(conversationId);
|
||||
await forceSyncConfigurationNowIfNeeded();
|
||||
};
|
||||
return (
|
||||
<SessionIconButton
|
||||
iconType="exit"
|
||||
iconSize="large"
|
||||
onClick={handleConversationBlock}
|
||||
backgroundColor="var(--color-destructive)"
|
||||
iconColor="var(--color-foreground-primary)"
|
||||
iconPadding="var(--margins-xs)"
|
||||
borderRadius="2px"
|
||||
margin="0 5px 0 0"
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const ApproveMessageRequestButton = () => {
|
||||
const conversationId = useContext(ContextConversationId);
|
||||
|
||||
return (
|
||||
<SessionIconButton
|
||||
iconType="check"
|
||||
iconSize="large"
|
||||
onClick={async () => {
|
||||
await approveConversation(conversationId);
|
||||
}}
|
||||
backgroundColor="var(--color-accent)"
|
||||
iconColor="var(--color-foreground-primary)"
|
||||
iconPadding="var(--margins-xs)"
|
||||
borderRadius="2px"
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export const MessageRequestButtons = ({ isMessageRequest }: { isMessageRequest: boolean }) => {
|
||||
if (!isMessageRequest) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<RejectMessageRequestButton />
|
||||
<ApproveMessageRequestButton />
|
||||
</>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,34 @@
|
||||
import React, { useContext } from 'react';
|
||||
import { useConversationUsername, useIsMe } from '../../../hooks/useParamSelector';
|
||||
import { PubKey } from '../../../session/types';
|
||||
import { ContactName } from '../../conversation/ContactName';
|
||||
import { ContextConversationId } from './ConversationListItem';
|
||||
|
||||
export const UserItem = () => {
|
||||
const conversationId = useContext(ContextConversationId);
|
||||
|
||||
const shortenedPubkey = PubKey.shorten(conversationId);
|
||||
const isMe = useIsMe(conversationId);
|
||||
const username = useConversationUsername(conversationId);
|
||||
|
||||
const displayedPubkey = username ? shortenedPubkey : conversationId;
|
||||
const displayName = isMe ? window.i18n('noteToSelf') : username;
|
||||
|
||||
let shouldShowPubkey = false;
|
||||
if ((!username || username.length === 0) && (!displayName || displayName.length === 0)) {
|
||||
shouldShowPubkey = true;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="module-conversation__user">
|
||||
<ContactName
|
||||
pubkey={displayedPubkey}
|
||||
name={username}
|
||||
profileName={displayName}
|
||||
module="module-conversation__user"
|
||||
boldProfileName={true}
|
||||
shouldShowPubkey={shouldShowPubkey}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Loading…
Reference in New Issue