Merge pull request #13123 from mezonai/bug26b/webdesktop/Incorrect-data-Member-Since-in-member-page-in-clan

260520 - WEB/DESKTOP - Incorrect data Member Since in member-page in clan

Author: huybuidoanquang

apps/chat/src/app/pages/member/TableMember.tsx

@@ -1,5 +1,4 @@
 import type { IUsersClan } from '@mezon/utils';
-import { getTimeDifferenceDate } from '@mezon/utils';
 import React, { useMemo } from 'react';
 import TableMemberHeader from './TableMemberHeader';
 import TableMemberItem from './TableMemberItem';
@@ -21,20 +20,22 @@ const TableMember: React.FC<ITableMemberProps> = ({ currentPage, pageSize, dataM
 		<div className="flex flex-col gap-2 flex-1 min-h-[48px]">
 			<TableMemberHeader />
 			<div className="flex flex-col overflow-y-auto px-4 py-2 border-b-theme-primary">
-				{displayUsersClan.map((user) => (
-					<TableMemberItem
-						key={user.id}
-						username={user.user?.username ?? ''}
-						avatar={user.clan_avatar || user.user?.avatar_url || ''}
-						mezonJoinTime={getTimeDifferenceDate((user.user?.create_time_seconds || 0) * 1000 || '')}
-						clanJoinTime={new Date(
-							(user.user?.create_time_seconds ??
-								(user.user?.create_time_seconds ? new Date(user.user.create_time_seconds).getTime() / 1000 : 0)) * 1000
-						).toISOString()}
-						userId={user.id}
-						displayName={user.prioritizeName!}
-					/>
-				))}
+				{displayUsersClan.map((user) => {
+					const accountCreatedSeconds = Number(user.user?.create_time_seconds ?? user.create_time_seconds ?? 0);
+					const memberSinceSeconds = Number(user.user?.join_time_seconds ?? user.join_time_seconds ?? 0);
+
+					return (
+						<TableMemberItem
+							key={user.id}
+							username={user.user?.username ?? ''}
+							avatar={user.clan_avatar || user.user?.avatar_url || ''}
+							mezonJoinTime={accountCreatedSeconds ? new Date(accountCreatedSeconds * 1000).toISOString() : undefined}
+							clanJoinTime={memberSinceSeconds ? new Date(memberSinceSeconds * 1000).toISOString() : undefined}
+							userId={user.id}
+							displayName={user.prioritizeName!}
+						/>
+					);
+				})}
 			</div>
 		</div>
 	);

apps/chat/src/app/pages/member/TableMemberItem.tsx

@@ -15,7 +15,7 @@ import {
 import { HighlightMatchBold, Icons } from '@mezon/ui';
 import type { ChannelMembersEntity } from '@mezon/utils';
 import { DEFAULT_ROLE_COLOR, EPermission, EVERYONE_ROLE_TITLE, createImgproxyUrl, generateE2eId, getDateLocale } from '@mezon/utils';
-import { formatDistance } from 'date-fns';
+import { format } from 'date-fns';
 import Tooltip from 'rc-tooltip';
 import type { MouseEvent } from 'react';
 import { useMemo, useRef, useState } from 'react';
@@ -181,6 +181,20 @@ const TableMemberItem = ({ userId, username, avatar, clanJoinTime, mezonJoinTime
 		openUserProfile();
 	};
 
+	const memberSinceLabel = useMemo(() => {
+		if (!clanJoinTime) return '';
+		const d = new Date(clanJoinTime);
+		if (Number.isNaN(d.getTime())) return '';
+		return format(d, 'MMM dd, yyyy', { locale: getDateLocale(i18n.language) });
+	}, [clanJoinTime, i18n.language]);
+
+	const joinedMezonLabel = useMemo(() => {
+		if (!mezonJoinTime) return '';
+		const d = new Date(mezonJoinTime);
+		if (Number.isNaN(d.getTime())) return '';
+		return format(d, 'MMM dd, yyyy', { locale: getDateLocale(i18n.language) });
+	}, [mezonJoinTime, i18n.language]);
+
 	return (
 		<div
 			className="flex flex-row justify-between items-center h-[48px]  bg-item-hover cursor-pointer  border-b-theme-primary no-divider-last "
@@ -215,15 +229,13 @@ const TableMemberItem = ({ userId, username, avatar, clanJoinTime, mezonJoinTime
 				</div>
 			</div>
 			<div className="flex-1 p-1 text-center">
-				<span className="text-xs  font-medium uppercase" data-e2e={generateE2eId('clan_page.member_list.member_since')}>
-					{clanJoinTime
-						? formatDistance(clanJoinTime as string, new Date(), { addSuffix: true, locale: getDateLocale(i18n.language) })
-						: '-'}
+				<span className="text-xs font-medium" data-e2e={generateE2eId('clan_page.member_list.member_since')}>
+					{memberSinceLabel || '-'}
 				</span>
 			</div>
 			<div className="flex-1 p-1 text-center">
-				<span className="text-xs  font-medium uppercase" data-e2e={generateE2eId('clan_page.member_list.join_mezon')}>
-					{mezonJoinTime ? t('memberTable:timeAgo', { time: mezonJoinTime }) : '-'}
+				<span className="text-xs font-medium" data-e2e={generateE2eId('clan_page.member_list.join_mezon')}>
+					{joinedMezonLabel || '-'}
 				</span>
 			</div>
 			<div className="flex-2 p-1 text-center">

libs/utils/src/lib/types/index.ts

@@ -91,6 +91,8 @@ export type IPermissionUser = ApiPermission & {
 export type IUsersClan = ClanUserListClanUser & {
 	prioritizeName?: string;
 	id: string;
+	join_time_seconds?: number;
+	create_time_seconds?: number;
 };
 
 export type IRolesClan = ApiRole & {