add date break with full date when older than a week

pull/1884/head
audric 4 years ago
parent 2825b66ef6
commit 2e9cd0ada6

@ -15,15 +15,19 @@ const DateBreakText = styled.div`
color: ${props => props.theme.colors.lastSeenIndicatorTextColor}; color: ${props => props.theme.colors.lastSeenIndicatorTextColor};
`; `;
export const MessageDateBreak = (props: { timestamp: number }) => { export const MessageDateBreak = (props: { timestamp: number; messageId: string }) => {
const { timestamp } = props; const { timestamp, messageId } = props;
moment().calendar(); const text = moment(timestamp).calendar(undefined, {
lastDay: '[Yesterday at] LT',
const text = moment().calendar(timestamp, { sameDay: '[Today at] LT',
nextDay: '[Tomorrow at] LT',
lastWeek: '[last] dddd [at] LT',
nextWeek: 'dddd [at] LT',
sameElse: 'llll', sameElse: 'llll',
}); });
return ( return (
<DateBreakContainer id={`date-break-${timestamp}`}> <DateBreakContainer id={`date-break-${messageId}`}>
<DateBreakText>{text}</DateBreakText> <DateBreakText>{text}</DateBreakText>
</DateBreakContainer> </DateBreakContainer>
); );

@ -33,6 +33,7 @@ export const SessionMessagesList = (props: {
<MessageDateBreak <MessageDateBreak
key={`date-break-${messageId}`} key={`date-break-${messageId}`}
timestamp={messageProps.showDateBreak} timestamp={messageProps.showDateBreak}
messageId={messageId}
/> />
) : null; ) : null;
if (messageProps.message?.messageType === 'group-notification') { if (messageProps.message?.messageType === 'group-notification') {

Loading…
Cancel
Save