feat: quotes will show the authors name where possible

cleaned up extra author props on quote and created a hook instead
pull/2757/head
William Grant 2 years ago
parent e1a6f8e3fc
commit d60d2c8c75

@ -82,7 +82,6 @@ export const MessageQuote = (props: Props) => {
attachment={quote?.attachment}
isIncoming={direction === 'incoming'}
author={quote.author}
authorName={quote?.authorName}
referencedMessageNotFound={quoteNotFound}
isFromMe={Boolean(quote.isFromMe)}
/>

@ -2,9 +2,6 @@ import React, { MouseEvent, useState } from 'react';
import * as MIME from '../../../../../types/MIME';
import { useSelector } from 'react-redux';
import { isPublicGroupConversation } from '../../../../../state/selectors/conversations';
import { QuoteAuthor } from './QuoteAuthor';
import { QuoteText } from './QuoteText';
import { QuoteIconContainer } from './QuoteIconContainer';
@ -49,12 +46,11 @@ const StyledQuoteTextContent = styled.div`
export type QuoteProps = {
attachment?: QuotedAttachmentType;
author: string;
authorProfileName?: string;
authorName?: string;
isFromMe: boolean;
isIncoming: boolean;
text: string | null;
referencedMessageNotFound: boolean;
text: string | null;
onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
};
@ -73,8 +69,6 @@ export interface QuotedAttachmentType {
}
export const Quote = (props: QuoteProps) => {
const isPublic = useSelector(isPublicGroupConversation);
const { isIncoming, attachment, text, referencedMessageNotFound, onClick } = props;
const [imageBroken, setImageBroken] = useState(false);
@ -96,13 +90,7 @@ export const Quote = (props: QuoteProps) => {
referencedMessageNotFound={referencedMessageNotFound}
/>
<StyledQuoteTextContent>
<QuoteAuthor
author={props.author}
authorName={props.authorName}
isFromMe={props.isFromMe}
isIncoming={isIncoming}
showPubkeyForAuthor={isPublic}
/>
<QuoteAuthor author={props.author} isIncoming={isIncoming} />
<QuoteText
isIncoming={isIncoming}
text={text}

@ -3,6 +3,9 @@ import { ContactName } from '../../../ContactName';
import { PubKey } from '../../../../../session/types';
import styled from 'styled-components';
import { QuoteProps } from './Quote';
import { useQuoteAuthorName } from '../../../../../hooks/useParamSelector';
import { useSelector } from 'react-redux';
import { isPublicGroupConversation } from '../../../../../state/selectors/conversations';
const StyledQuoteAuthor = styled.div<{ isIncoming: boolean }>`
color: ${props =>
@ -21,30 +24,26 @@ const StyledQuoteAuthor = styled.div<{ isIncoming: boolean }>`
}
`;
type QuoteAuthorProps = Pick<QuoteProps, 'author' | 'authorName' | 'isFromMe' | 'isIncoming'> & {
showPubkeyForAuthor: boolean;
};
type QuoteAuthorProps = Pick<QuoteProps, 'author' | 'isIncoming'>;
export const QuoteAuthor = (props: QuoteAuthorProps) => {
const { author, authorName, isFromMe, isIncoming, showPubkeyForAuthor } = props;
debugger;
const { author, isIncoming } = props;
const isPublic = useSelector(isPublicGroupConversation);
const authorName = useQuoteAuthorName(author);
if (author === '' || authorName === '') {
if (!author || author === '' || !authorName) {
return null;
}
return (
<StyledQuoteAuthor isIncoming={isIncoming}>
{isFromMe ? (
window.i18n('you')
) : (
<ContactName
pubkey={PubKey.shorten(author)}
name={authorName}
compact={true}
shouldShowPubkey={showPubkeyForAuthor}
/>
)}
<ContactName
pubkey={PubKey.shorten(author)}
name={authorName}
compact={true}
shouldShowPubkey={Boolean(authorName && isPublic)}
/>
</StyledQuoteAuthor>
);
};

@ -37,7 +37,7 @@ export function useConversationUsernameOrShorten(convoId?: string) {
}
/**
* Returns the name if that conversation.
* Returns the name of that conversation.
* This is the group name, or the realName of a user for a private conversation with a recent nickname set
*/
export function useConversationRealName(convoId?: string) {
@ -183,3 +183,12 @@ export function useMessageReactsPropsById(messageId?: string) {
return messageReactsProps;
});
}
export function useQuoteAuthorName(authorId?: string) {
const convoProps = useConversationPropsById(authorId);
return authorId === UserUtils.getOurPubKeyStrFromCache()
? window.i18n('you')
: convoProps?.nickname || convoProps?.isPrivate
? convoProps?.displayNameInProfile
: undefined;
}

@ -165,14 +165,13 @@ export type PropsForAttachment = {
};
export type PropsForQuote = {
text?: string;
attachment?: QuotedAttachmentType;
isFromMe?: boolean;
author: string;
authorName?: string;
convoId?: string;
id?: string; // this is the quoted message timestamp
isFromMe?: boolean;
referencedMessageNotFound?: boolean;
convoId?: string;
text?: string;
};
export type PropsForMessageWithoutConvoProps = {

@ -997,33 +997,39 @@ export const getMessageQuoteProps = createSelector(
return undefined;
}
const { id, author, authorName: _authorName } = msgProps.quote;
const { id, author } = msgProps.quote;
if (!id || !author) {
return undefined;
}
let isFromMe = UserUtils.isUsFromCache(author) || false;
const quoteNotFound = {
direction,
quote: { author, isFromMe, referencedMessageNotFound: true },
};
// NOTE: if the message is not found, we still want to render the quote
if (!quotesProps || isEmpty(quotesProps)) {
return { direction, quote: { author, referencedMessageNotFound: true } };
return quoteNotFound;
}
const sourceMessage = quotesProps[`${id}-${author}`];
if (!sourceMessage) {
return { direction, quote: { author, referencedMessageNotFound: true } };
return quoteNotFound;
}
const sourceMsgProps = sourceMessage.propsForMessage;
if (!sourceMsgProps || sourceMsgProps.isDeleted) {
return { direction, quote: { author, referencedMessageNotFound: true } };
return quoteNotFound;
}
const convo = getConversationController().get(sourceMsgProps.convoId);
if (!convo) {
return { direction, quote: { author, referencedMessageNotFound: true } };
return quoteNotFound;
}
const attachment = sourceMsgProps.attachments && sourceMsgProps.attachments[0];
let isFromMe = convo ? UserUtils.isUsFromCache(author) : false;
if (convo.isPublic() && PubKey.hasBlindedPrefix(sourceMsgProps.sender)) {
const room = OpenGroupData.getV2OpenGroupRoom(sourceMsgProps.convoId);
@ -1038,16 +1044,11 @@ export const getMessageQuoteProps = createSelector(
}
}
const authorName = isFromMe
? window.i18n('you')
: convo.getNicknameOrRealUsernameOrPlaceholder();
const quote: PropsForQuote = {
text: sourceMsgProps.text,
attachment: attachment ? processQuoteAttachment(attachment) : undefined,
isFromMe,
author: sourceMsgProps.sender,
authorName,
id: sourceMsgProps.id,
referencedMessageNotFound: false,
convoId: convo.id,

Loading…
Cancel
Save