Skip to content

Commit 4f5b10c

Browse files
HoonBaekHoonBaek
authored
fix: Add the time stamp rendering case for before this year (#380)
* Add the time stamp rendering case for before this year * Modify the format yyyy/MM/dd to yyyy/M/d (over this year) * Modify the foramt MMM dd to MMM d (in this year) * Add stringSet * MESSAGE_STATUS__YESTERDAY: 'Yesterday' * Use it in the getLastMessageCreatedAt of ChannelPreview/utils * Use it in the getCreatedAt of MessageSearchFileItem/utils * Use it in the getCreatedAt of MessageSearchItem/getCreatedAt * Modify the props type of getLastMessageCreatedAt and getCreatedAt to objective type * Use jest.fakeTimer in the tests
1 parent 3535566 commit 4f5b10c

File tree

16 files changed

+207
-38
lines changed

16 files changed

+207
-38
lines changed

‎scripts/index_d_ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2094,6 +2094,7 @@ declare module '@sendbird/uikit-react/ui/MessageStatus' {
20942094
className?: string;
20952095
message: UserMessage | FileMessage;
20962096
channel: GroupChannel;
2097+
isDateSeparatorConsidered?: boolean;
20972098
}
20982099
const MessageStatus: React.FC<MessageStatusProps>;
20992100
export default MessageStatus;

‎src/index.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1715,6 +1715,7 @@ declare module '@sendbird/uikit-react/ui/MessageStatus' {
17151715
className?: string;
17161716
message: UserMessage | FileMessage;
17171717
channel: GroupChannel;
1718+
isDateSeparatorConsidered?: boolean;
17181719
}
17191720
type MessageStatus = React.FC<MessageStatusProps>;
17201721
export default MessageStatus;

‎src/smart-components/ChannelList/components/ChannelPreview/__tests__/ChannelPreview.spec.js‎

Lines changed: 53 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,15 @@ import {
33
getChannelTitle,
44
getTotalMembers,
55
getChannelUnreadMessageCount,
6+
getLastMessageCreatedAt,
67
} from '../utils';
78
import { LabelStringSet } from '../../../../../ui/Label'
89

10+
jest.useFakeTimers();
11+
jest.setSystemTime(new Date('March 2, 2022 08:15:52'));
12+
913
describe('ChannelPreview', () => {
10-
it('utils/getLastMessage: should return lastMessage', function () {
14+
test('utils/getLastMessage returns lastMessage', function () {
1115
const text = 'example-text';
1216
const channel = {};
1317
const channel2 = { lastMessage: { message: '' } };
@@ -23,7 +27,7 @@ describe('ChannelPreview', () => {
2327
).toBe(text);
2428
});
2529

26-
it('utils/getChannelTitle: should return channelTitle', function () {
30+
test('utils/getChannelTitle returns channelTitle', function () {
2731
const text = 'example-text';
2832
const channel = {};
2933
const channel2 = { name: text };
@@ -61,7 +65,7 @@ describe('ChannelPreview', () => {
6165
).toBe('Two');
6266
});
6367

64-
it('utils/getTotalMembers: should return totalMembers', function () {
68+
test('utils/getTotalMembers returns totalMembers', function () {
6569
const channel = { memberCount: 1 };
6670
const channel2 = { memberCount: 100 };
6771
expect(
@@ -75,7 +79,7 @@ describe('ChannelPreview', () => {
7579
).toBe(channel2.memberCount);
7680
});
7781

78-
it('utils/getChannelUnreadMessageCount: should return unreadMessageCount', function () {
82+
test('utils/getChannelUnreadMessageCount returns unreadMessageCount', function () {
7983
const channel = {};
8084
const channel2 = { unreadMessageCount: 1 };
8185
const channel3 = { unreadMessageCount: 100 };
@@ -92,4 +96,48 @@ describe('ChannelPreview', () => {
9296
getChannelUnreadMessageCount(channel3)
9397
).toBe(channel3.unreadMessageCount);
9498
});
95-
});
99+
100+
test('utils/getLastMessageCreatedAt returns time if ts is created today', () => {
101+
const nowTime = new Date(Date.now());
102+
const isPM = nowTime?.getHours() > 12;
103+
expect(
104+
getLastMessageCreatedAt({
105+
channel: { lastMessage: { createdAt: nowTime } },
106+
})
107+
).toBe(`${nowTime?.getHours() - (isPM ? 12 : 0)}:${nowTime?.getMinutes()} ${isPM ? 'PM' : 'AM'}`);
108+
});
109+
110+
test('utils/getLastMessageCreatedAt returns "Yesterday" if ts is created yesterday', () => {
111+
const nowTime = new Date(Date.now());
112+
nowTime.setDate(nowTime.getDate() - 1);
113+
expect(
114+
getLastMessageCreatedAt({
115+
channel: { lastMessage: { createdAt: nowTime } },
116+
})
117+
).toBe("Yesterday");
118+
});
119+
120+
test('utils/getLastMessageCreatedAt returns month and date if ts is created in this year', () => {
121+
const nowTime = new Date(Date.now());
122+
nowTime.setDate(nowTime.getDate() - 2);
123+
const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
124+
if (!(nowTime.getMonth() === 0 && (nowTime.getDate() === 0 || nowTime.getDate() === 1))) {
125+
// This test will fail on Jan 1st and 2nd
126+
expect(
127+
getLastMessageCreatedAt({
128+
channel: { lastMessage: { createdAt: nowTime } },
129+
})
130+
).toBe(`${months[nowTime?.getMonth()]} ${nowTime?.getDate()}`)
131+
}
132+
});
133+
134+
test('utils/getLastMessageCreatedAt returns year, month, and date if ts is created last year', () => {
135+
const nowTime = new Date(Date.now());
136+
nowTime.setFullYear(nowTime.getFullYear() - 1);
137+
expect(
138+
getLastMessageCreatedAt({
139+
channel: { lastMessage: { createdAt: nowTime } },
140+
})
141+
).toBe(`${nowTime?.getFullYear()}/${nowTime?.getMonth() + 1}/${nowTime?.getDate()}`);
142+
});
143+
});

‎src/smart-components/ChannelList/components/ChannelPreview/index.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -146,6 +146,7 @@ const ChannelPreview: React.FC<ChannelPreviewInterface> = ({
146146
className="sendbird-channel-preview__content__upper__last-message-at"
147147
channel={channel}
148148
message={channel?.lastMessage as UserMessage | FileMessage}
149+
isDateSeparatorConsidered={false}
149150
/>
150151
)
151152
: (
@@ -154,7 +155,11 @@ const ChannelPreview: React.FC<ChannelPreviewInterface> = ({
154155
type={LabelTypography.CAPTION_3}
155156
color={LabelColors.ONBACKGROUND_2}
156157
>
157-
{utils.getLastMessageCreatedAt(channel, dateLocale)}
158+
{utils.getLastMessageCreatedAt({
159+
channel,
160+
locale: dateLocale,
161+
stringSet,
162+
})}
158163
</Label>
159164
)
160165
}

‎src/smart-components/ChannelList/components/ChannelPreview/utils.js‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import isToday from 'date-fns/isToday';
22
import format from 'date-fns/format';
3-
import formatRelative from 'date-fns/formatRelative';
3+
import isThisYear from 'date-fns/isThisYear';
44
import isYesterday from 'date-fns/isYesterday';
55

66
import { truncateString } from '../../../../utils';
@@ -22,7 +22,11 @@ export const getChannelTitle = (channel = {}, currentUserId, stringSet = LabelSt
2222
.join(', ');
2323
};
2424

25-
export const getLastMessageCreatedAt = (channel, locale) => {
25+
export const getLastMessageCreatedAt = ({
26+
channel,
27+
locale,
28+
stringSet,
29+
}) => {
2630
const createdAt = channel?.lastMessage?.createdAt;
2731
const optionalParam = locale ? { locale } : null;
2832
if (!createdAt) {
@@ -32,9 +36,12 @@ export const getLastMessageCreatedAt = (channel, locale) => {
3236
return format(createdAt, 'p', optionalParam);
3337
}
3438
if (isYesterday(createdAt)) {
35-
return formatRelative(createdAt, new Date(), optionalParam);
39+
return stringSet?.MESSAGE_STATUS__YESTERDAY || 'Yesterday';
3640
}
37-
return format(createdAt, 'MMM dd', optionalParam);
41+
if (isThisYear(createdAt)) {
42+
return format(createdAt, 'MMM d', optionalParam);
43+
}
44+
return format(createdAt, 'yyyy/M/d', optionalParam);
3845
};
3946

4047
export const getTotalMembers = (channel) => (

‎src/ui/Label/stringSet.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ const getStringSet = (lang = 'en') => {
4848
MESSAGE_INPUT__PLACE_HOLDER__MUTED: 'Chat is unavailable because you\'re muted',
4949
MESSAGE_INPUT__PLACE_HOLDER__MUTED_SHORT: 'You\'re muted',
5050
MESSAGE_INPUT__QUOTE_REPLY__PLACE_HOLDER: 'Reply to message',
51+
MESSAGE_STATUS__YESTERDAY: 'Yesterday',
5152
CHANNEL__MESSAGE_LIST__NOTIFICATION__NEW_MESSAGE: 'new message(s) since',
5253
CHANNEL__MESSAGE_LIST__NOTIFICATION__ON: 'on',
5354
CHANNEL_SETTING__HEADER__TITLE: 'Channel information',

‎src/ui/MessageSearchFileItem/__tests__/MessageSearchFileItem.spec.js‎

Lines changed: 42 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,10 @@ import {
99
// audioMock,
1010
// imageMock,
1111
} from '../mockFileMessage';
12+
import { getCreatedAt } from '../utils';
1213

13-
jest.mock('date-fns/format', () => () => ('mock-date'));
14-
14+
jest.useFakeTimers();
15+
jest.setSystemTime(new Date('January 23, 2022 17:17:52'));
1516

1617
describe('ui/MessageSearchFileItem', () => {
1718
// should add test cases for each file types
@@ -28,4 +29,43 @@ describe('ui/MessageSearchFileItem', () => {
2829
);
2930
expect(asFragment()).toMatchSnapshot();
3031
});
32+
33+
test('utils/getCreatedAt returns time if ts is created today', () => {
34+
const nowTime = new Date(Date.now());
35+
const isPM = nowTime?.getHours() > 12;
36+
expect(
37+
getCreatedAt({ createdAt: nowTime })
38+
).toBe(`${nowTime?.getHours() - (isPM ? 12 : 0)}:${nowTime?.getMinutes()} ${isPM ? 'PM' : 'AM'}`);
39+
});
40+
41+
test('utils/getCreatedAt returns "Yesterday" if ts is created yesterday', () => {
42+
const nowTime = new Date(Date.now());
43+
nowTime.setDate(nowTime.getDate() - 1);
44+
expect(
45+
getCreatedAt({ createdAt: nowTime })
46+
).toBe("Yesterday");
47+
})
48+
49+
test('utils/getCreatedAt returns month and date if ts is created in this year', () => {
50+
const nowTime = new Date(Date.now());
51+
nowTime.setDate(nowTime.getDate() - 2);
52+
const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
53+
expect(
54+
getCreatedAt({ createdAt: nowTime })
55+
).toBe(`${months[nowTime?.getMonth()]} ${nowTime?.getDate()}`);
56+
expect(
57+
getCreatedAt({ createdAt: nowTime })
58+
).toBe('Jan 21');
59+
});
60+
61+
test('utils/getCreatedAt returns year, month, and date if ts is created last year', () => {
62+
const nowTime = new Date(Date.now());
63+
nowTime.setFullYear(nowTime.getFullYear() - 1);
64+
expect(
65+
getCreatedAt({ createdAt: nowTime })
66+
).toBe(`${nowTime?.getFullYear()}/${nowTime?.getMonth() + 1}/${nowTime?.getDate()}`);
67+
expect(
68+
getCreatedAt({ createdAt: nowTime })
69+
).toBe('2021/1/23');
70+
});
3171
});

‎src/ui/MessageSearchFileItem/__tests__/__snapshots__/MessageSearchFileItem.spec.js.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ exports[`ui/MessageSearchFileItem should do a snapshot test of the MessageSearch
6363
<span
6464
class="sendbird-message-search-file-item__message-created-at sendbird-label sendbird-label--caption-3 sendbird-label--color-onbackground-2"
6565
>
66-
mock-date
66+
2020/1/23
6767
</span>
6868
<div
6969
class="sendbird-message-search-file-item__right-footer"

‎src/ui/MessageSearchFileItem/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ export default function MessageSearchFileItem(props: Props): ReactElement {
8181
type={LabelTypography.CAPTION_3}
8282
color={LabelColors.ONBACKGROUND_2}
8383
>
84-
{getCreatedAt(createdAt, dateLocale)}
84+
{getCreatedAt({ createdAt, locale: dateLocale, stringSet})}
8585
</Label>
8686
<div className="sendbird-message-search-file-item__right-footer" />
8787
</div>

‎src/ui/MessageSearchFileItem/mockFileMessage.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ export const docMock = {
44
channelUrl: 'sendbird_group_channel_11985956_fa67b79d39e6aa5abbeda4413cde24ce1685eedb',
55
data: '',
66
customType: '',
7-
createdAt: 1583104552977,
7+
createdAt: 1579767478896,
88
updatedAt: 0,
99
channelType: 'group',
1010
metaArrays: [],
@@ -41,7 +41,7 @@ export const imageMock = {
4141
channelUrl: 'sendbird_group_channel_11985956_fa67b79d39e6aa5abbeda4413cde24ce1685eedb',
4242
data: '',
4343
customType: '',
44-
createdAt: 1583104552977,
44+
createdAt: 1579767478896,
4545
updatedAt: 0,
4646
channelType: 'group',
4747
metaArrays: [],
@@ -78,7 +78,7 @@ export const audioMock = {
7878
channelUrl: 'sendbird_group_channel_11985956_fa67b79d39e6aa5abbeda4413cde24ce1685eedb',
7979
data: '',
8080
customType: '',
81-
createdAt: 1583104552977,
81+
createdAt: 1579767478896,
8282
updatedAt: 0,
8383
channelType: 'group',
8484
metaArrays: [],
@@ -115,7 +115,7 @@ export const videoMock = {
115115
channelUrl: 'sendbird_group_channel_11985956_fa67b79d39e6aa5abbeda4413cde24ce1685eedb',
116116
data: '',
117117
customType: '',
118-
createdAt: 1583104552977,
118+
createdAt: 1579767478896,
119119
updatedAt: 0,
120120
channelType: 'group',
121121
metaArrays: [],
@@ -152,7 +152,7 @@ export const gifMock = {
152152
channelUrl: 'sendbird_group_channel_11985956_fa67b79d39e6aa5abbeda4413cde24ce1685eedb',
153153
data: '',
154154
customType: '',
155-
createdAt: 1583104552977,
155+
createdAt: 1579767478896,
156156
updatedAt: 0,
157157
channelType: 'group',
158158
metaArrays: [],

0 commit comments

Comments
 (0)