feature: Add string set for date format (#1221)

[CLNP-5163](https://sendbird.atlassian.net/browse/CLNP-5163)
[SBISSUE-17143](https://sendbird.atlassian.net/browse/SBISSUE-17143)

#### ChangeLog
##### Features
- Added stringSet for date format and applied them
  | Key | Value |
  | --- | ----- |
  | DATE_FORMAT__MESSAGE_CREATED_AT | `'p'` |
  | DATE_FORMAT__UNREAD_SINCE | `'p MMM dd'` |
  | DATE_FORMAT__LAST_MESSAGE_CREATED_AT__TODAY | `'p'` |
  | DATE_FORMAT__LAST_MESSAGE_CREATED_AT__THIS_YEAR | `'MMM d'` |
  | DATE_FORMAT__LAST_MESSAGE_CREATED_AT__PREVIOUS_YEAR | `'yyyy/M/d'` |

[CLNP-5163]:
https://sendbird.atlassian.net/browse/CLNP-5163?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ
[SBISSUE-17143]:
https://sendbird.atlassian.net/browse/SBISSUE-17143?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

Author: HoonBaek

src/modules/Channel/context/dux/__tests__/reducers.spec.js

@@ -7,6 +7,12 @@ import * as actionTypes from '../actionTypes';
 import reducers from '../reducers';
 import initialState from '../initialState';
 import { uuidv4 } from '../../../../../utils/uuid';
+import { useLocalization } from '../../../../../lib/LocalizationContext';
+
+jest.mock('../../../../../lib/LocalizationContext', () => ({
+  ...jest.requireActual('../../../../../lib/LocalizationContext'),
+  useLocalization: jest.fn(),
+}));
 
 const getLastMessageOf = (messageList) => messageList[messageList.length - 1];
 
@@ -15,6 +21,16 @@ describe('Messages-Reducers', () => {
     ...initialState,
     currentGroupChannel: { url: generateMockChannel().currentGroupChannel.url },
   };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    useLocalization.mockReturnValue({
+      stringSet: {
+        DATE_FORMAT__UNREAD_SINCE: 'p MMM dd',
+      },
+    });
+  });
+
   it('should setloading true FETCH_INITIAL_MESSAGES_START', () => {
     const nextState = reducers(initialState, {
       type: actionTypes.FETCH_INITIAL_MESSAGES_START,

src/modules/Channel/context/dux/reducers.ts

@@ -17,6 +17,7 @@ import {
   isSendableMessage,
 } from '../../../../utils';
 import { ChannelInitialStateType } from './initialState';
+import { useLocalization } from '../../../../lib/LocalizationContext';
 
 const getOldestMessageTimeStamp = (messages: CoreMessageType[] = []) => {
   const oldestMessage = messages[0];
@@ -37,6 +38,8 @@ export default function channelReducer(
   state: ChannelInitialStateType,
   action: ChannelActionTypes,
 ): ChannelInitialStateType {
+  const { stringSet } = useLocalization();
+
   return match(action)
     .with({ type: channelActions.RESET_MESSAGES }, () => {
       return {
@@ -268,7 +271,7 @@ export default function channelReducer(
       return {
         ...state,
         currentGroupChannel: channel,
-        unreadSince: state.unreadSince ?? format(new Date(), 'p MMM dd'),
+        unreadSince: state.unreadSince ?? format(new Date(), stringSet.DATE_FORMAT__UNREAD_SINCE),
         unreadSinceDate: state.unreadSinceDate ?? new Date(),
         allMessages: passUnsuccessfullMessages(state.allMessages, message),
       };

src/modules/Channel/context/utils.ts

@@ -5,6 +5,7 @@ import format from 'date-fns/format';
 
 import { CoreMessageType, SendableMessageType } from '../../../utils';
 import { BaseMessage, SendingStatus } from '@sendbird/chat/message';
+import { useLocalization } from '../../../lib/LocalizationContext';
 
 export const scrollToRenderedMessage = (
   scrollRef: React.RefObject<HTMLElement>,
@@ -115,7 +116,10 @@ export const mergeAndSortMessages = (oldMessages: BaseMessage[], newMessages: Ba
   return sortByCreatedAt(unique);
 };
 
-export const getMessageCreatedAt = (message: BaseMessage) => format(message.createdAt, 'p');
+export const getMessageCreatedAt = (message: BaseMessage) => {
+  const { stringSet } = useLocalization();
+  return format(message.createdAt, stringSet.DATE_FORMAT__MESSAGE_CREATED_AT);
+};
 
 export const passUnsuccessfullMessages = (
   allMessages: (CoreMessageType | SendableMessageType)[],

src/modules/GroupChannel/components/MessageList/__test__/getMessagePartsInfo.spec.js

@@ -1,5 +1,11 @@
+import { useLocalization } from "../../../../../lib/LocalizationContext";
 import { getMessagePartsInfo } from "../getMessagePartsInfo";
 
+jest.mock('../../../../../lib/LocalizationContext', () => ({
+  ...jest.requireActual('../../../../../lib/LocalizationContext'),
+  useLocalization: jest.fn(),
+}));
+
 const mockChannel = {
   isGroupChannel: () => true,
   getUnreadMemberCount: () => 0,
@@ -40,6 +46,14 @@ const messageGroup3 = [1, 2, 3].map((n, i) => ({
 }));
 
 describe('getMessagePartsInfo', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    useLocalization.mockReturnValue({
+      stringSet: {
+        DATE_FORMAT__MESSAGE_CREATED_AT: 'p',
+      },
+    });
+  });
   it('should group messages that are sent at same time', () => {
     const defaultSetting = {
       allMessages: messageGroup1,

src/modules/GroupChannelList/components/GroupChannelListItem/utils.ts

@@ -29,15 +29,15 @@ export const getLastMessageCreatedAt = ({ channel, locale, stringSet = LabelStri
     return '';
   }
   if (isToday(createdAt)) {
-    return format(createdAt, 'p', optionalParam);
+    return format(createdAt, stringSet.DATE_FORMAT__LAST_MESSAGE_CREATED_AT__TODAY, optionalParam);
   }
   if (isYesterday(createdAt)) {
     return stringSet.MESSAGE_STATUS__YESTERDAY || 'Yesterday';
   }
   if (isThisYear(createdAt)) {
-    return format(createdAt, 'MMM d', optionalParam);
+    return format(createdAt, stringSet.DATE_FORMAT__LAST_MESSAGE_CREATED_AT__THIS_YEAR, optionalParam);
   }
-  return format(createdAt, 'yyyy/M/d', optionalParam);
+  return format(createdAt, stringSet.DATE_FORMAT__LAST_MESSAGE_CREATED_AT__PREVIOUS_YEAR, optionalParam);
 };
 
 export const getTotalMembers = (channel?: GroupChannel) => (channel?.memberCount ? channel.memberCount : 0);

src/modules/OpenChannel/context/utils.ts

@@ -5,8 +5,12 @@ import format from 'date-fns/format';
 
 import { Logger } from '../../../lib/SendbirdState';
 import { SendableMessageType } from '../../../utils';
+import { useLocalization } from '../../../lib/LocalizationContext';
 
-export const getMessageCreatedAt = (message: SendableMessageType): string => format(message.createdAt, 'p');
+export const getMessageCreatedAt = (message: SendableMessageType): string => {
+  const { stringSet } = useLocalization();
+  return format(message.createdAt, stringSet.DATE_FORMAT__MESSAGE_CREATED_AT);
+};
 
 export const shouldFetchMore = (messageLength: number, maxMessages?: number): boolean => {
   if (typeof maxMessages !== 'number') {

src/modules/Thread/components/ParentMessageInfo/index.tsx

@@ -47,7 +47,7 @@ export default function ParentMessageInfo({
   const { stores, config } = useSendbirdStateContext();
   const { isOnline, userMention, logger, groupChannel } = config;
   const userId = stores.userStore.user?.userId ?? '';
-  const { dateLocale } = useLocalization();
+  const { dateLocale, stringSet } = useLocalization();
   const {
     currentChannel,
     parentMessage,
@@ -301,7 +301,7 @@ export default function ParentMessageInfo({
             type={LabelTypography.CAPTION_3}
             color={LabelColors.ONBACKGROUND_2}
           >
-            {format(parentMessage?.createdAt || 0, 'p', { locale: dateLocale })}
+            {format(parentMessage?.createdAt || 0, stringSet.DATE_FORMAT__MESSAGE_CREATED_AT, { locale: dateLocale })}
           </Label>
         </div>
         {/* message content body */}

src/modules/Thread/components/ThreadList/ThreadListItemContent.tsx

@@ -98,7 +98,7 @@ export default function ThreadListItemContent(props: ThreadListItemContentProps)
   } = deleteNullish(props);
 
   const { isMobile } = useMediaQueryContext();
-  const { dateLocale } = useLocalization();
+  const { dateLocale, stringSet } = useLocalization();
   const { config, eventHandlers } = useSendbirdStateContext?.() || {};
   const { logger } = config;
   const onPressUserProfileHandler = eventHandlers?.reaction?.onPressUserProfile;
@@ -272,7 +272,7 @@ export default function ThreadListItemContent(props: ThreadListItemContentProps)
               type={LabelTypography.CAPTION_3}
               color={LabelColors.ONBACKGROUND_2}
             >
-              {format(message?.createdAt || 0, 'p', {
+              {format(message?.createdAt || 0, stringSet.DATE_FORMAT__MESSAGE_CREATED_AT, {
                 locale: dateLocale,
               })}
             </Label>

src/modules/Thread/context/utils.ts

@@ -2,6 +2,7 @@ import format from 'date-fns/format';
 import { GroupChannel, Member } from '@sendbird/chat/groupChannel';
 import { getOutgoingMessageState, OutgoingMessageStates } from '../../../utils/exports/getOutgoingMessageState';
 import { SendableMessageType } from '../../../utils';
+import { useLocalization } from '../../../lib/LocalizationContext';
 
 export const getNicknamesMapFromMembers = (members: Member[] = []): Map<string, string> => {
   const nicknamesMap = new Map();
@@ -57,7 +58,10 @@ export function compareIds(a: number | string, b: number | string): boolean {
   return aString === bString;
 }
 
-export const getMessageCreatedAt = (message: SendableMessageType): string => format(message.createdAt, 'p');
+export const getMessageCreatedAt = (message: SendableMessageType): string => {
+  const { stringSet } = useLocalization();
+  return format(message.createdAt, stringSet.DATE_FORMAT__MESSAGE_CREATED_AT);
+};
 export const isReadMessage = (channel: GroupChannel, message: SendableMessageType): boolean => (
   getOutgoingMessageState(channel, message) === OutgoingMessageStates.READ
 );

src/ui/Label/stringSet.ts

@@ -217,6 +217,11 @@ const stringSet = {
     DATE_FORMAT__MESSAGE_LIST__NOTIFICATION__UNREAD_SINCE: 'p \'on\' MMM dd',
     DATE_FORMAT__MESSAGE_LIST__DATE_SEPARATOR: 'MMMM dd, yyyy',
     DATE_FORMAT__THREAD_LIST__DATE_SEPARATOR: 'MMM dd, yyyy',
+    DATE_FORMAT__MESSAGE_CREATED_AT: 'p',
+    DATE_FORMAT__UNREAD_SINCE: 'p MMM dd',
+    DATE_FORMAT__LAST_MESSAGE_CREATED_AT__TODAY: 'p',
+    DATE_FORMAT__LAST_MESSAGE_CREATED_AT__THIS_YEAR: 'MMM d',
+    DATE_FORMAT__LAST_MESSAGE_CREATED_AT__PREVIOUS_YEAR: 'yyyy/M/d',
     // File upload
     FILE_UPLOAD_NOTIFICATION__COUNT_LIMIT: 'Up to %d files can be attached.',
     FILE_UPLOAD_NOTIFICATION__SIZE_LIMIT: 'The maximum size per file is %d MB.',