status-im
/
dappconnect-sdks
mirror of https://github.com/status-im/dappconnect-sdks.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Add date separator (#22)

This commit is contained in:
Szymon Szlachtowicz 2021-09-30 11:20:39 +02:00 committed by GitHub
parent 0f9572cbfb
commit d260c51939
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 52 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
packages/react-chat/src/components/Chat/ChatMessages.tsx
View File

@ -1,4 +1,4 @@
import React, { useEffect, useRef } from "react"; import React, { useEffect, useMemo, useRef } from "react";
import styled from "styled-components"; import styled from "styled-components";
import { ChatMessage } from "../../models/ChatMessage"; import { ChatMessage } from "../../models/ChatMessage";
@ -12,6 +12,7 @@ type ChatMessagesProps = {
export function ChatMessages({ messages, theme }: ChatMessagesProps) { export function ChatMessages({ messages, theme }: ChatMessagesProps) {
const ref = useRef<HTMLHeadingElement>(null); const ref = useRef<HTMLHeadingElement>(null);
const today = useMemo(() => new Date().getDay(), []);
useEffect(() => { useEffect(() => {
if (ref && ref.current) { if (ref && ref.current) {
ref.current.scrollTop = ref.current.scrollHeight; ref.current.scrollTop = ref.current.scrollHeight;
@ -21,23 +22,33 @@ export function ChatMessages({ messages, theme }: ChatMessagesProps) {
return ( return (
<MessagesWrapper ref={ref}> <MessagesWrapper ref={ref}>
{messages.map((message, idx) => ( {messages.map((message, idx) => (
<MessageWrapper key={idx}> <MessageOuterWrapper>
<Icon> {(idx === 0 ||
<UserIcon theme={theme} /> messages[idx - 1].date.getDay() != messages[idx].date.getDay()) && (
</Icon> <DateSeparator>
{message.date.getDay() === today
? "Today"
: message.date.toLocaleDateString()}
</DateSeparator>
)}
<MessageWrapper key={idx}>
<Icon>
<UserIcon theme={theme} />
</Icon>
<ContentWrapper> <ContentWrapper>
<MessageHeaderWrapper> <MessageHeaderWrapper>
<UserNameWrapper theme={theme}> <UserNameWrapper theme={theme}>
{message.sender.slice(0, 10)} {message.sender.slice(0, 10)}
</UserNameWrapper> </UserNameWrapper>
<TimeWrapper theme={theme}> <TimeWrapper theme={theme}>
{message.date.toLocaleString()} {message.date.toLocaleString()}
</TimeWrapper> </TimeWrapper>
</MessageHeaderWrapper> </MessageHeaderWrapper>
<MessageText theme={theme}>{message.content}</MessageText> <MessageText theme={theme}>{message.content}</MessageText>
</ContentWrapper> </ContentWrapper>
</MessageWrapper> </MessageWrapper>
</MessageOuterWrapper>
))} ))}
</MessagesWrapper> </MessagesWrapper>
); );
@ -61,6 +72,30 @@ const MessageWrapper = styled.div`
margin-bottom: 8px; margin-bottom: 8px;
`; `;
const MessageOuterWrapper = styled.div`
width: 100%;
display: flex;
flex-direction: column;
`;
const DateSeparator = styled.div`
width: 100%;
display: flex;
flex: 1;
height: 100%;
text-align: center;
justify-content: center;
align-items: center;
font-family: Inter;
font-style: normal;
font-weight: 500;
font-size: 13px;
line-height: 18px;
color: #939ba1;
margin-top: 16px;
margin-bottom: 16px;
`;
const ContentWrapper = styled.div` const ContentWrapper = styled.div`
display: flex; display: flex;
flex-direction: column; flex-direction: column;