Show date for msgs older than a day

Signed-off-by: Ajay Bura <ajbura@gmail.com>
This commit is contained in:
Ajay Bura 2021-12-08 13:37:25 +05:30
parent e20b9d054d
commit ca55141276
4 changed files with 20 additions and 13 deletions

View file

@ -412,7 +412,7 @@ function getEditedBody(editedMEvent) {
}
function Message({
mEvent, isBodyOnly, roomTimeline, focus,
mEvent, isBodyOnly, roomTimeline, focus, time
}) {
const [isEditing, setIsEditing] = useState(false);
@ -431,7 +431,6 @@ function Message({
let { body } = content;
const avatarSrc = mEvent.sender.getAvatarUrl(initMatrix.matrixClient.baseUrl, 36, 36, 'crop');
const username = getUsernameOfRoomMember(mEvent.sender);
const time = `${dateFormat(mEvent.getDate(), 'hh:MM TT')}`;
if (typeof body === 'undefined') return null;
if (msgType === 'm.emote') className.push('message--type-emote');
@ -627,6 +626,7 @@ Message.propTypes = {
isBodyOnly: PropTypes.bool,
roomTimeline: PropTypes.shape({}).isRequired,
focus: PropTypes.bool,
time: PropTypes.string.isRequired,
};
export { Message, MessageReply, PlaceholderMessage };

View file

@ -15,7 +15,7 @@ import cons from '../../../client/state/cons';
import navigation from '../../../client/state/navigation';
import { openProfileViewer } from '../../../client/action/navigation';
import {
diffMinutes, isNotInSameDay, Throttle, getScrollInfo,
diffMinutes, isInSameDay, Throttle, getScrollInfo,
} from '../../../util/common';
import Divider from '../../atoms/divider/Divider';
@ -87,6 +87,10 @@ function renderEvent(roomTimeline, mEvent, prevMEvent, isFocus = false) {
&& diffMinutes(mEvent.getDate(), prevMEvent.getDate()) <= MAX_MSG_DIFF_MINUTES
&& prevMEvent.getSender() === mEvent.getSender()
);
const mDate = mEvent.getDate();
const isToday = isInSameDay(mDate, new Date());
const time = dateFormat(mDate, isToday ? 'hh:MM TT' : 'dd/mm/yyyy');
if (mEvent.getType() === 'm.room.member') {
const timelineChange = parseTimelineChange(mEvent);
@ -96,7 +100,7 @@ function renderEvent(roomTimeline, mEvent, prevMEvent, isFocus = false) {
key={mEvent.getId()}
variant={timelineChange.variant}
content={timelineChange.content}
time={`${dateFormat(mEvent.getDate(), 'hh:MM TT')}`}
time={time}
/>
);
}
@ -107,6 +111,7 @@ function renderEvent(roomTimeline, mEvent, prevMEvent, isFocus = false) {
isBodyOnly={isBodyOnly}
roomTimeline={roomTimeline}
focus={isFocus}
time={time}
/>
);
}
@ -578,7 +583,7 @@ function RoomViewContent({ eventId, roomTimeline }) {
itemCountIndex += 1;
if (jumpToItemIndex === -1) jumpToItemIndex = itemCountIndex;
}
const dayDivider = prevMEvent && isNotInSameDay(mEvent.getDate(), prevMEvent.getDate());
const dayDivider = prevMEvent && !isInSameDay(mEvent.getDate(), prevMEvent.getDate());
if (dayDivider) {
tl.push(<Divider key={`divider-${mEvent.getId()}`} text={`${dateFormat(mEvent.getDate(), 'mmmm dd, yyyy')}`} />);
itemCountIndex += 1;

View file

@ -22,9 +22,9 @@ function useJumpToEvent(roomTimeline) {
roomTimeline.loadEventTimeline(eventId);
};
const cancelJumpToEvent = (mEvent) => {
const cancelJumpToEvent = () => {
roomTimeline.markAllAsRead();
setEventId(null);
if (!mEvent) roomTimeline.markAllAsRead();
};
useEffect(() => {
@ -35,10 +35,12 @@ function useJumpToEvent(roomTimeline) {
if (!readEventId.startsWith('~') && !roomTimeline.hasEventInTimeline(readEventId)) {
setEventId(readEventId);
}
roomTimeline.on(cons.events.roomTimeline.MARKED_AS_READ, cancelJumpToEvent);
const handleMarkAsRead = () => setEventId(null);
roomTimeline.on(cons.events.roomTimeline.MARKED_AS_READ, handleMarkAsRead);
return () => {
roomTimeline.removeListener(cons.events.roomTimeline.MARKED_AS_READ, cancelJumpToEvent);
roomTimeline.removeListener(cons.events.roomTimeline.MARKED_AS_READ, handleMarkAsRead);
setEventId(null);
};
}, [roomTimeline]);

View file

@ -13,11 +13,11 @@ export function diffMinutes(dt2, dt1) {
return Math.abs(Math.round(diff));
}
export function isNotInSameDay(dt2, dt1) {
export function isInSameDay(dt2, dt1) {
return (
dt2.getDay() !== dt1.getDay()
|| dt2.getMonth() !== dt1.getMonth()
|| dt2.getYear() !== dt1.getYear()
dt2.getDay() === dt1.getDay()
&& dt2.getMonth() === dt1.getMonth()
&& dt2.getYear() === dt1.getYear()
);
}