Merge pull request #4132 from urbit/mp/landscape/chat-fix

chat: fixes two regressions
This commit is contained in:
matildepark 2020-12-11 15:55:57 -05:00 committed by GitHub
commit 745b04d39c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 38 additions and 15 deletions

View File

@ -144,12 +144,12 @@ export default class ChatMessage extends Component<ChatMessageProps> {
style={style}
mb={1}
>
{dayBreak && !isLastRead ? <DayBreak when={msg.when} /> : null}
{dayBreak && !isLastRead ? <DayBreak when={msg['time-sent']} /> : null}
{renderSigil
? <MessageWithSigil {...messageProps} />
: <MessageWithoutSigil {...messageProps} />}
<Box flexShrink={0} fontSize={0} position='relative' width='100%' overflow='visible' style={unreadContainerStyle}>{isLastRead
? <UnreadMarker dayBreak={dayBreak} when={msg.when} ref={unreadMarkerRef} />
? <UnreadMarker dayBreak={dayBreak} when={msg['time-sent']} ref={unreadMarkerRef} />
: null}</Box>
</Box>
);
@ -261,6 +261,8 @@ export class MessageWithSigil extends PureComponent<MessageProps> {
measure={measure}
fontSize={fontSize}
group={group}
hideNicknames={hideNicknames}
hideAvatars={hideAvatars}
/>)}
</ContentBox>
</Box>
@ -276,16 +278,25 @@ const ContentBox = styled(Box)`
`;
export const MessageWithoutSigil = ({ timestamp, contacts, msg, remoteContentPolicy, measure, group }) => (
export const MessageWithoutSigil = ({ timestamp, contacts, msg, remoteContentPolicy, measure, group, hideNicknames, hideAvatars }) => (
<>
<Text flexShrink={0} mono gray display='inline-block' pt='2px' lineHeight='tall' className="child">{timestamp}</Text>
<ContentBox flexShrink={0} fontSize='14px' className="clamp-message" style={{ flexGrow: 1 }}>
{msg.contents.map(c => (<MessageContent contacts={contacts} content={c} group={group} remoteContentPolicy={remoteContentPolicy} measure={measure}/>))}
{msg.contents.map((c, i) => (
<MessageContent
key={i}
contacts={contacts}
content={c}
group={group}
remoteContentPolicy={remoteContentPolicy}
measure={measure}
hideNicknames={hideNicknames}
hideAvatars={hideAvatars}/>))}
</ContentBox>
</>
);
export const MessageContent = ({ content, contacts, remoteContentPolicy, measure, fontSize, group }) => {
export const MessageContent = ({ content, contacts, remoteContentPolicy, measure, fontSize, group, hideNicknames, hideAvatars }) => {
if ('code' in content) {
return <CodeContent content={content} />;
} else if ('url' in content) {
@ -314,7 +325,7 @@ export const MessageContent = ({ content, contacts, remoteContentPolicy, measure
} else if ('text' in content) {
return <TextContent fontSize={fontSize} content={content} />;
} else if ('mention' in content) {
return <Mention group={group} ship={content.mention} contacts={contacts} />
return <Mention group={group} ship={content.mention} contact={contacts?.[content.mention]} hideNicknames={hideNicknames} hideAvatars={hideAvatars} />
} else {
return null;
}

View File

@ -82,6 +82,8 @@ export function CommentItem(props: CommentItemProps) {
group={group}
content={post?.contents}
remoteContentPolicy={remoteContentPolicy}
hideNicknames={props.hideNicknames}
hideAvatars={props.hideAvatars}
/>
</Box>
</Box>

View File

@ -2,6 +2,7 @@ import React, { useState, useCallback } from "react";
import _ from "lodash";
import { Text, Box } from "@tlon/indigo-react";
import {
Contact,
Contacts,
Content,
LocalUpdateRemoteContentPolicy,
@ -13,13 +14,16 @@ import { ProfileOverlay } from "./ProfileOverlay";
import {useHistory} from "react-router-dom";
interface MentionTextProps {
contacts: Contacts;
contact?: Contact;
contacts?: Contacts;
content: Content[];
group: Group;
remoteContentPolicy: LocalUpdateRemoteContentPolicy;
hideNicknames: boolean;
hideAvatars: boolean;
}
export function MentionText(props: MentionTextProps) {
const { content, contacts, group } = props;
const { content, contacts, contact, group, hideNicknames, hideAvatars } = props;
return (
<>
@ -36,7 +40,7 @@ export function MentionText(props: MentionTextProps) {
);
} else if ("mention" in c) {
return (
<Mention key={idx} contacts={contacts || {}} group={group} ship={c.mention} />
<Mention key={idx} contacts={contacts || {}} contact={contact || {}} group={group} ship={c.mention} hideNicknames={hideNicknames} hideAvatars={hideAvatars} />
);
}
return null;
@ -47,12 +51,18 @@ export function MentionText(props: MentionTextProps) {
export function Mention(props: {
ship: string;
contacts: Contacts;
contact: Contact;
contacts?: Contacts;
group: Group;
hideNicknames: boolean;
hideAvatars: boolean;
}) {
const { contacts, ship } = props;
const contact = contacts[ship];
const showNickname = !!contact?.nickname;
const { contacts, ship, hideNicknames, hideAvatars } = props;
let { contact } = props;
contact = (contact?.nickname) ? contact : contacts?.[ship];
const showNickname = (Boolean(contact?.nickname) && !hideNicknames);
const name = showNickname ? contact?.nickname : cite(ship);
const [showOverlay, setShowOverlay] = useState(false);
const onDismiss = useCallback(() => {
@ -79,8 +89,8 @@ export function Mention(props: {
color={`#${uxToHex(contact?.color ?? '0x0')}`}
group={group}
onDismiss={onDismiss}
hideAvatars={false}
hideNicknames={false}
hideAvatars={hideAvatars || false}
hideNicknames={hideNicknames}
history={history}
/>
)}