Show names in members (#160)

This commit is contained in:
Szymon Szlachtowicz 2021-12-22 12:06:24 +01:00 committed by GitHub
parent 51802fa03d
commit 2e91024490
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 28 additions and 21 deletions

View File

@ -31,7 +31,7 @@ interface ChatInputProps {
}
export function ChatInput({ reply, setReply }: ChatInputProps) {
const { sendMessage } = useMessengerContext();
const { sendMessage, contacts } = useMessengerContext();
const theme = useTheme() as Theme;
const [content, setContent] = useState("");
const [clearComponent, setClearComponent] = useState("");
@ -254,7 +254,8 @@ export function ChatInput({ reply, setReply }: ChatInputProps) {
<ReplyTo>
{" "}
<ReplySvg width={18} height={18} className="input" />{" "}
{reply.sender}
{contacts[reply.sender]?.customName ??
contacts[reply.sender].trueName}
</ReplyTo>
<ReplyOn>{reply.content}</ReplyOn>
{reply.image && <ImagePreview src={reply.image} />}

View File

@ -6,6 +6,7 @@ import { Contact } from "../../models/Contact";
import { ContactMenu } from "../Form/ContactMenu";
import { Icon } from "../Icons/Icon";
import { UserIcon } from "../Icons/UserIcon";
import { UserAddress } from "../Messages/Styles";
interface MemberProps {
contact: Contact;
@ -47,7 +48,10 @@ export function Member({
{showMenu && <ContactMenu id={contact.id} setShowMenu={setShowMenu} />}
<UserIcon memberView={true} />
</MemberIcon>
<MemberName>{contact?.customName ?? contact.id}</MemberName>
<MemberName>{contact?.customName ?? contact.trueName}</MemberName>
<UserAddress>
{contact.id.slice(0, 5)}...{contact.id.slice(-3)}
</UserAddress>
</MemberData>
);
}
@ -69,6 +73,7 @@ export const MemberName = styled.p`
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
margin-right: 4px;
`;
export const MemberIcon = styled(Icon)`

View File

@ -1,6 +1,7 @@
import React, { useCallback } from "react";
import styled from "styled-components";
import { useMessengerContext } from "../../contexts/messengerProvider";
import { ChatMessage } from "../../models/ChatMessage";
import { ReplyOn, ReplyTo } from "../Chat/ChatInput";
import { QuoteSvg } from "../Icons/QuoteIcon";
@ -21,6 +22,7 @@ type MessageQuoteProps = {
};
export function MessageQuote({ quote }: MessageQuoteProps) {
const { contacts } = useMessengerContext();
const quoteClick = useCallback(() => {
if (quote) {
const quoteDiv = document.getElementById(quote.id);
@ -42,13 +44,15 @@ export function MessageQuote({ quote }: MessageQuoteProps) {
}
}, [quote]);
if (quote) {
if (quote && quote.sender) {
return (
<QuoteWrapper onClick={quoteClick}>
<QuoteSvg width={22} height={calcHeight(quote)} />
<QuoteSender>
{" "}
<UserIcon memberView={true} /> {quote.sender}
<UserIcon memberView={true} />{" "}
{contacts[quote.sender]?.customName ??
contacts[quote.sender].trueName}
</QuoteSender>
<Quote>{quote.content}</Quote>
{quote.image && <QuoteImage src={quote.image} />}

View File

@ -23,7 +23,12 @@ export const SearchBlock = ({
const searchList = useMemo(() => {
return Object.values(contacts)
.filter((member) => member.id.includes(query))
.filter(
(member) =>
member.id.includes(query) ||
member?.customName?.includes(query) ||
member.trueName.includes(query)
)
.filter((member) => !discludeList.includes(member.id));
}, [query, discludeList, contacts]);
@ -35,10 +40,7 @@ export const SearchBlock = ({
style={{ [onBotttom ? "bottom" : "top"]: "calc(100% + 24px)" }}
>
<ContactsList>
{Object.values(contacts)
.filter((member) => member.id.includes(query))
.filter((member) => !discludeList.includes(member.id))
.map((member) => (
{searchList.map((member) => (
<Member
key={member.id}
contact={member}

View File

@ -223,7 +223,6 @@ export class Messenger {
callback(messages.filter(isDefined));
}
};
console.log(`querying ${chat.contentTopic} for ${startTime} to ${endTime}`);
const allMessages = await this.waku.store.queryHistory(
[chat.contentTopic],
{
@ -231,10 +230,6 @@ export class Messenger {
callback: _callback,
}
);
console.log(
`ended querying ${chat.contentTopic} for ${startTime} to ${endTime}`
);
return allMessages.length;
}