feat(CLNP-1344): add date format string set (#823)

## Description

Add `DATE_FORMAT__THREAD_LIST__DATE_SEPARATOR` to customize date format
of `DateSeparator`
Add `DATE_FORMAT__MESSAGE_LIST__DATE_SEPARATOR` to customize date format
of `DateSeparator`
>
![image](https://github.com/sendbird/sendbird-uikit-react/assets/26326015/3a66f7af-080b-4036-a7ae-492aba38a76b)

Add `DATE_FORMAT__MESSAGE_LIST__NOTIFICATION__UNREAD_SINCE` to customize
date format of `UnreadCount`
>
![image](https://github.com/sendbird/sendbird-uikit-react/assets/26326015/02936378-88f5-4a2d-b343-47e6785a4bfe)


## Changelogs

* Provide new string sets, you can directly customize the date format of
`DateSeparator` and `UnreadCount`.
- `DATE_FORMAT__THREAD_LIST__DATE_SEPARATOR`: 'MMM dd, yyyy' → Used on
the date separator of thread list
- `DATE_FORMAT__MESSAGE_LIST__DATE_SEPARATOR`: 'MMMM dd, yyyy' → Used on
the date separator of message list
- `DATE_FORMAT__MESSAGE_LIST__NOTIFICATION__UNREAD_SINCE`: 'p \'on\' MMM
dd' → Used on the unread notification of message list
  ```javascript
  import SendbirdProvider from '@sendbird/uikit-react/SendbirdProvider'
  const CustomApp = () => {
    return (
      <SendbirdProvider
        stringSet={{
          DATE_FORMAT__THREAD_LIST__DATE_SEPARATOR: 'MMM dd, yyyy',
          DATE_FORMAT__MESSAGE_LIST__DATE_SEPARATOR: 'MMMM dd, yyyy',
DATE_FORMAT__MESSAGE_LIST__NOTIFICATION__UNREAD_SINCE: 'p \'on\' MMM
dd',
        }}
      >
        {/* implement custom application */}
      </SendbirdProvider>
    )
  }
  ```

* Deprecate a
`CHANNEL__MESSAGE_LIST__NOTIFICATION__UNREAD_SINCE_FORMAT`, please use
`DATE_FORMAT__MESSAGE_LIST__NOTIFICATION__UNREAD_SINCE` instead.

##

ticket: [CLNP-1344]



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

Author: bang9

src/modules/App/stories/index.stories.js

@@ -257,6 +257,9 @@ export const Korean = () => fitPageSize(
       MESSAGE_INPUT__PLACE_HOLDER: '메시지 보내기',
       MESSAGE_INPUT__PLACE_HOLDER__DISABLED: '입력이 불가능 합니다',
       MESSAGE_INPUT__PLACE_HOLDER__MUTED: '음소거 되었습니다',
+      DATE_FORMAT__MESSAGE_LIST__DATE_SEPARATOR: "yyyy'년' MMMM do '('ccc')'",
+      DATE_FORMAT__THREAD_LIST__DATE_SEPARATOR: "yyyy'년' MMM do '('ccc')'",
+      DATE_FORMAT__MESSAGE_LIST__NOTIFICATION__UNREAD_SINCE: "p '의' MMM dd",
     }}
     isMentionEnabled
     isTypingIndicatorEnabledOnChannelList

src/modules/Channel/components/Message/index.tsx

@@ -54,7 +54,7 @@ const Message = ({
   renderMessage,
   renderMessageContent,
 }: MessageUIProps): React.ReactElement => {
-  const { dateLocale } = useLocalization();
+  const { dateLocale, stringSet } = useLocalization();
   const globalStore = useSendbirdStateContext();
 
   const {
@@ -234,7 +234,7 @@ const Message = ({
           hasSeparator && (renderedCustomSeparator || (
             <DateSeparator>
               <Label type={LabelTypography.CAPTION_2} color={LabelColors.ONBACKGROUND_2}>
-                {format(message.createdAt, 'MMMM dd, yyyy', {
+                {format(message.createdAt, stringSet.DATE_FORMAT__MESSAGE_LIST__DATE_SEPARATOR, {
                   locale: dateLocale,
                 })}
               </Label>
@@ -347,7 +347,7 @@ const Message = ({
         hasSeparator && (renderedCustomSeparator || (
           <DateSeparator>
             <Label type={LabelTypography.CAPTION_2} color={LabelColors.ONBACKGROUND_2}>
-              {format(message.createdAt, 'MMMM dd, yyyy', {
+              {format(message.createdAt, stringSet.DATE_FORMAT__MESSAGE_LIST__DATE_SEPARATOR, {
                 locale: dateLocale,
               })}
             </Label>

src/modules/Channel/components/MessageList/index.tsx

@@ -58,6 +58,7 @@ const MessageList: React.FC<MessageListProps> = ({
     loading,
     isScrolled,
     unreadSince,
+    unreadSinceDate,
   } = useChannelContext();
 
   const store = useSendbirdStateContext();
@@ -244,11 +245,12 @@ const MessageList: React.FC<MessageListProps> = ({
         {currentGroupChannel?.isFrozen && (
           <FrozenNotification className="sendbird-conversation__messages__notification" />
         )}
-        {unreadSince && (
+        {(unreadSince || unreadSinceDate) && (
           <UnreadCount
             className="sendbird-conversation__messages__notification"
             count={currentGroupChannel?.unreadMessageCount}
             time={unreadSince}
+            lastReadAt={unreadSinceDate}
             onClick={() => {
               if (scrollRef?.current?.scrollTop) {
                 scrollRef.current.scrollTop = (scrollRef?.current?.scrollHeight ?? 0) - (scrollRef?.current?.offsetHeight ?? 0);

src/modules/Channel/components/UnreadCount/index.tsx

@@ -1,26 +1,39 @@
-import React, { useContext } from 'react';
+import React, { useContext, useMemo } from 'react';
 
 import './unread-count.scss';
 import { LocalizationContext } from '../../../../lib/LocalizationContext';
 import Label, { LabelTypography, LabelColors } from '../../../../ui/Label';
 import Icon, { IconTypes, IconColors } from '../../../../ui/Icon';
+import format from 'date-fns/format';
 
 export interface UnreadCountProps {
   className?: string;
   count: number | undefined;
-  time: string;
   onClick(): void;
+  lastReadAt?: Date | null;
+  /** @deprecated Please use `lastReadAt` instead * */
+  time?: string;
 }
 
 const UnreadCount: React.FC<UnreadCountProps> = ({
   className = '',
   count = 0,
   time = '',
   onClick,
+  lastReadAt,
 }: UnreadCountProps) => {
   const { stringSet } = useContext(LocalizationContext);
-  const timeArray = time?.toString?.()?.split(' ') || [];
-  timeArray?.splice(-2, 0, stringSet.CHANNEL__MESSAGE_LIST__NOTIFICATION__ON);
+
+  const unreadSince = useMemo(() => {
+    // TODO: Remove this on v4
+    if (stringSet.CHANNEL__MESSAGE_LIST__NOTIFICATION__ON !== 'on') {
+      const timeArray = time?.toString?.()?.split(' ') || [];
+      timeArray?.splice(-2, 0, stringSet.CHANNEL__MESSAGE_LIST__NOTIFICATION__ON);
+      return timeArray.join(' ');
+    } else if (lastReadAt) {
+      return format(lastReadAt, stringSet.DATE_FORMAT__MESSAGE_LIST__NOTIFICATION__UNREAD_SINCE);
+    }
+  }, [time, lastReadAt]);
 
   return (
     <div
@@ -30,7 +43,7 @@ const UnreadCount: React.FC<UnreadCountProps> = ({
       <Label className="sendbird-notification__text" color={LabelColors.ONCONTENT_1} type={LabelTypography.CAPTION_2}>
         {`${count} `}
         {stringSet.CHANNEL__MESSAGE_LIST__NOTIFICATION__NEW_MESSAGE}
-        {` ${timeArray.join(' ')}`}
+        {` ${unreadSince}`}
       </Label>
       <Icon
         width="24px"

src/modules/Channel/context/ChannelProvider.tsx

@@ -109,7 +109,9 @@ interface MessageStoreInterface {
   localMessages: CoreMessageType[];
   loading: boolean;
   initialized: boolean;
+  /** @deprecated Please use `unreadSinceDate` instead * */
   unreadSince: string;
+  unreadSinceDate: Date | null;
   isInvalid: boolean;
   currentGroupChannel: Nullable<GroupChannel>;
   hasMorePrev: boolean;
@@ -241,6 +243,7 @@ const ChannelProvider: React.FC<ChannelContextProps> = (props: ChannelContextPro
     loading,
     initialized,
     unreadSince,
+    unreadSinceDate,
     isInvalid,
     currentGroupChannel,
     hasMorePrev,
@@ -473,6 +476,7 @@ const ChannelProvider: React.FC<ChannelContextProps> = (props: ChannelContextPro
       loading,
       initialized,
       unreadSince,
+      unreadSinceDate,
       isInvalid,
       currentGroupChannel,
       hasMorePrev,

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

@@ -8,7 +8,9 @@ export interface ChannelInitialStateType {
   localMessages: (SendableMessageType | CoreMessageType)[];
   loading: boolean;
   initialized: boolean;
+  /** @deprecated Please use `unreadSinceDate` instead. * */
   unreadSince: string;
+  unreadSinceDate: Date | null;
   isInvalid: boolean;
   currentGroupChannel: GroupChannel | null;
   hasMorePrev: boolean;
@@ -39,11 +41,13 @@ const initialState: ChannelInitialStateType = {
   hasMoreNext: false,
   latestMessageTimeStamp: 0,
   emojiContainer: { emojiCategories: [], emojiHash: '' },
+  /** @deprecated Please use `unreadSinceDate` instead. * */
   unreadSince: null,
   /**
-   * unreadSince is a formatted date information string
-   * It's used only for the {unreadSince && <UnreadCount time={unreadSince} />}
+   * unreadSinceDate is a date information about message unread.
+   * It's used only for the {unreadSinceDate && <UnreadCount unreadSinceDate={unreadSinceDate} />}
    */
+  unreadSinceDate: null,
   isInvalid: false,
   readStatus: null,
   messageListParams: null,

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

@@ -208,7 +208,7 @@ export default function channelReducer(
       const { channel, message } = action.payload;
       const { members } = channel;
       const { sender } = message;
-      const { currentGroupChannel, unreadSince } = state;
+      const { currentGroupChannel } = state;
 
       const currentGroupChannelUrl = currentGroupChannel?.url;
 
@@ -257,9 +257,8 @@ export default function channelReducer(
       return {
         ...state,
         currentGroupChannel: channel,
-        unreadSince: state?.unreadSince
-          ? unreadSince
-          : format(new Date(), 'p MMM dd'),
+        unreadSince: state.unreadSince ?? format(new Date(), 'p MMM dd'),
+        unreadSinceDate: state.unreadSinceDate ?? new Date(),
         allMessages: passUnsuccessfullMessages(state.allMessages, message),
       };
     })
@@ -334,6 +333,7 @@ export default function channelReducer(
       return {
         ...state,
         unreadSince: null,
+        unreadSinceDate: null,
       };
     })
     .with({ type: channelActions.ON_MESSAGE_DELETED }, (action) => {

src/modules/OpenChannel/components/OpenChannelMessage/index.tsx

@@ -56,7 +56,7 @@ export default function MessagOpenChannelMessageeHoc(props: OpenChannelMessagePr
     updateMessage,
     resendMessage,
   } = useOpenChannelContext();
-  const { dateLocale } = useLocalization();
+  const { dateLocale, stringSet } = useLocalization();
   const editDisabled = currentOpenChannel?.isFrozen;
 
   const globalState = useSendbirdStateContext();
@@ -126,9 +126,7 @@ export default function MessagOpenChannelMessageeHoc(props: OpenChannelMessagePr
         (hasSeparator && message?.createdAt) && (
           <DateSeparator>
             <Label type={LabelTypography.CAPTION_2} color={LabelColors.ONBACKGROUND_2}>
-              {format(message?.createdAt, 'MMMM dd, yyyy', {
-                locale: dateLocale,
-              })}
+              {format(message?.createdAt, stringSet.DATE_FORMAT__MESSAGE_LIST__DATE_SEPARATOR, { locale: dateLocale })}
             </Label>
           </DateSeparator>
         )

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

@@ -48,7 +48,7 @@ export default function ThreadListItem({
     logger,
   } = config;
   const userId = stores?.userStore?.user?.userId;
-  const { dateLocale } = useLocalization();
+  const { dateLocale, stringSet } = useLocalization();
   const threadContext = useThreadContext?.();
   const {
     currentChannel,
@@ -226,7 +226,7 @@ export default function ThreadListItem({
               type={LabelTypography.CAPTION_2}
               color={LabelColors.ONBACKGROUND_2}
             >
-              {format(message?.createdAt, 'MMM dd, yyyy', { locale: dateLocale })}
+              {format(message?.createdAt, stringSet.DATE_FORMAT__THREAD_LIST__DATE_SEPARATOR, { locale: dateLocale })}
             </Label>
           </DateSeparator>
         ))

src/ui/Label/stringSet.ts

@@ -11,6 +11,7 @@ const stringSet = {
     // Group Channel - Conversation
     MESSAGE_STATUS__YESTERDAY: 'Yesterday',
     CHANNEL__MESSAGE_LIST__NOTIFICATION__NEW_MESSAGE: 'new message(s) since',
+    /** @deprecated Please use `DATE_FORMAT__MESSAGE_LIST__NOTIFICATION__UNREAD_SINCE` instead * */
     CHANNEL__MESSAGE_LIST__NOTIFICATION__ON: 'on',
     // Channel List
     CHANNEL_PREVIEW_MOBILE_LEAVE: 'Leave channel',
@@ -201,6 +202,10 @@ const stringSet = {
     CHANNEL_PREVIEW_LAST_MESSAGE_FILE_TYPE_AUDIO: 'Audio',
     CHANNEL_PREVIEW_LAST_MESSAGE_FILE_TYPE_VOICE_MESSAGE: 'Voice message',
     CHANNEL_PREVIEW_LAST_MESSAGE_FILE_TYPE_GENERAL: 'File',
+    // Date format
+    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',
   },
 };