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

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,6 +22,15 @@ export function ChatMessages({ messages, theme }: ChatMessagesProps) {
return ( return (
<MessagesWrapper ref={ref}> <MessagesWrapper ref={ref}>
{messages.map((message, idx) => ( {messages.map((message, idx) => (
<MessageOuterWrapper>
{(idx === 0 ||
messages[idx - 1].date.getDay() != messages[idx].date.getDay()) && (
<DateSeparator>
{message.date.getDay() === today
? "Today"
: message.date.toLocaleDateString()}
</DateSeparator>
)}
<MessageWrapper key={idx}> <MessageWrapper key={idx}>
<Icon> <Icon>
<UserIcon theme={theme} /> <UserIcon theme={theme} />
@ -38,6 +48,7 @@ export function ChatMessages({ messages, theme }: ChatMessagesProps) {
<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;