Merge pull request #971 from amitamrutiya/master

amitamrutiya · web-flow · commit b6752575157f · 2025-03-11T13:12:50.000+05:30
feat: update date formate for the table
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -104,7 +104,7 @@
     "billboard.js": "^3.14.3",
     "js-yaml": "^4.1.0",
     "lodash": "^4.17.21",
-    "moment": "^2.30.1",
+    "moment-timezone": "^0.5.47",
     "mui-datatables": "*",
     "re-resizable": "^6.10.3",
     "react-draggable": "^4.4.6",
diff --git a/src/custom/CatalogDesignTable/CatalogDesignTable.tsx b/src/custom/CatalogDesignTable/CatalogDesignTable.tsx
@@ -4,6 +4,7 @@ import { MUIDataTableColumn } from 'mui-datatables';
 import { useCallback, useMemo, useRef } from 'react';
 import { PublishIcon } from '../../icons';
 import { CHARCOAL } from '../../theme';
+import { FormattedTime } from '../../utils';
 import { Pattern } from '../CustomCatalog/CustomCard';
 import { ErrorBoundary } from '../ErrorBoundary';
 import { ColView } from '../Helpers/ResponsiveColumns/responsive-coulmns.tsx/responsive-column';
@@ -56,16 +57,6 @@ export const CatalogDesignsTable: React.FC<CatalogDesignsTableProps> = ({
 }) => {
   const modalRef = useRef<PromptRef>(null);
 
-  const formatDate = useCallback((date: string | Date): string => {
-    const dateOptions: Intl.DateTimeFormatOptions = {
-      weekday: 'short',
-      day: 'numeric',
-      month: 'long',
-      year: 'numeric'
-    };
-    return new Date(date).toLocaleDateString('en-US', dateOptions);
-  }, []);
-
   const processedColumns: MUIDataTableColumn[] = useMemo(() => {
     return columns.map((col) => {
       const newCol = { ...col };
@@ -86,16 +77,16 @@ export const CatalogDesignsTable: React.FC<CatalogDesignsTableProps> = ({
           if (!value || value === 'NA') return <>NA</>;
           if (typeof value === 'object' && 'Valid' in value) {
             if (value.Valid && value.Time) {
-              return <>{formatDate(value.Time)}</>;
+              return <FormattedTime date={value.Time} />;
             }
             return <>NA</>;
           }
-          return <>{formatDate(value)}</>;
+          return <FormattedTime date={value.Time} />;
         };
       }
       return newCol;
     });
-  }, [columns, columnVisibility, formatDate]);
+  }, [columns, columnVisibility]);
 
   const handleTableChange = useCallback(
     (action: string, tableState: any) => {
diff --git a/src/custom/CatalogDetail/UserInfo.tsx b/src/custom/CatalogDetail/UserInfo.tsx
@@ -1,11 +1,11 @@
 import { Avatar } from '../../base';
 import { CLOUD_URL } from '../../constants/constants';
 import { LockIcon, PublicIcon } from '../../icons';
+import { getFormatDate } from '../../utils';
 import { Pattern } from '../CustomCatalog/CustomCard';
 import { getVersion } from '../CustomCatalog/Helper';
 import { VisibilityChipMenu } from '../VisibilityChipMenu';
 import { VIEW_VISIBILITY } from '../VisibilityChipMenu/VisibilityChipMenu';
-import { formatDate } from './helper';
 import { ContentDetailsPoints, ContentDetailsText, ContentRow, RedirectLink } from './style';
 import { UserProfile } from './types';
 
@@ -56,11 +56,11 @@ const UserInfo: React.FC<UserInfoProps> = ({
       </ContentRow>
       <ContentRow>
         <ContentDetailsPoints>CREATED AT</ContentDetailsPoints>
-        <ContentDetailsText>{formatDate(details?.created_at)}</ContentDetailsText>
+        <ContentDetailsText>{getFormatDate(details?.created_at.toString())}</ContentDetailsText>
       </ContentRow>
       <ContentRow>
         <ContentDetailsPoints>UPDATED AT</ContentDetailsPoints>
-        <ContentDetailsText>{formatDate(details?.updated_at)}</ContentDetailsText>
+        <ContentDetailsText>{getFormatDate(details?.updated_at.toString())}</ContentDetailsText>
       </ContentRow>
       {showVersion && (
         <ContentRow>
diff --git a/src/custom/CatalogDetail/helper.ts b/src/custom/CatalogDetail/helper.ts
@@ -56,12 +56,6 @@ export const formatToTitleCase = (value: string): string => {
   return '';
 };
 
-export const formatDate = (date: Date) => {
-  const options = { year: 'numeric', month: 'short', day: 'numeric' };
-  const formattedDate = new Date(date).toLocaleDateString('en-US', options);
-  return formattedDate;
-};
-
 interface HeadingProps {
   type: string;
   userProfile?: {
diff --git a/src/custom/DashboardWidgets/RecentDesignWidget.tsx b/src/custom/DashboardWidgets/RecentDesignWidget.tsx
@@ -17,9 +17,9 @@ import {
 import { iconMedium } from '../../constants/iconsSizes';
 import { AddIcon, OpenInNewIcon } from '../../icons';
 import { useTheme } from '../../theme';
+import { getFullFormattedTime, getRelativeTime } from '../../utils';
 import { CustomTooltip } from '../CustomTooltip';
 import { Modal, ModalBody } from '../Modal';
-import { formatDateTime, formatRelativeDate } from './utils';
 
 interface Resource {
   link: string;
@@ -297,15 +297,15 @@ interface RelativeFormattedDateProps {
 
 const RelativeFormattedDate: React.FC<RelativeFormattedDateProps> = ({ date, style }) => {
   return (
-    <Tooltip title={formatDateTime(date)} placement="top">
+    <Tooltip title={getFullFormattedTime(date)} placement="top">
       <div>
         <Typography
           style={{
             fontStyle: 'italic',
             ...style
           }}
         >
-          {formatRelativeDate(date)}
+          {getRelativeTime(date)}
         </Typography>
       </div>
     </Tooltip>
diff --git a/src/custom/DashboardWidgets/WorkspaceActivityWidget.tsx b/src/custom/DashboardWidgets/WorkspaceActivityWidget.tsx
@@ -1,6 +1,6 @@
 import { SelectChangeEvent } from '@mui/material';
 import { styled } from '@mui/material/styles';
-import moment from 'moment';
+import moment from 'moment-timezone';
 import {
   Box,
   Button,
diff --git a/src/custom/DashboardWidgets/utils.ts b/src/custom/DashboardWidgets/utils.ts
diff --git a/src/custom/ResourceDetailFormatters/useResourceCleanData.ts b/src/custom/ResourceDetailFormatters/useResourceCleanData.ts
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import _ from 'lodash';
-import moment from 'moment';
+import moment from 'moment-timezone';
 import { GetResourceCleanDataProps, NumberState } from './types';
 
 export const useResourceCleanData = () => {
diff --git a/src/custom/ResponsiveDataTable.tsx b/src/custom/ResponsiveDataTable.tsx
@@ -3,6 +3,7 @@ import React, { useCallback } from 'react';
 import { Checkbox, Collapse, ListItemIcon, ListItemText, Menu, MenuItem } from '../base';
 import { ShareIcon } from '../icons';
 import { EllipsisIcon } from '../icons/Ellipsis';
+import { FormattedTime } from '../utils';
 import { styled, useTheme } from './../theme';
 import { ColView } from './Helpers/ResponsiveColumns/responsive-coulmns.tsx';
 import { TooltipIcon } from './TooltipIconButton';
@@ -156,17 +157,6 @@ const ResponsiveDataTable = ({
   rowsPerPageOptions = [10, 25, 50, 100],
   ...props
 }: ResponsiveDataTableProps): JSX.Element => {
-  const formatDate = (date: Date): string => {
-    const dateOptions: Intl.DateTimeFormatOptions = {
-      weekday: 'short',
-      day: 'numeric',
-      month: 'long',
-      year: 'numeric'
-    };
-
-    return new Intl.DateTimeFormat('en-US', dateOptions).format(date);
-  };
-
   const updatedOptions = {
     ...options,
     print: false,
@@ -226,14 +216,12 @@ const ResponsiveDataTable = ({
             } else if (typeof value === 'object' && 'Valid' in value) {
               const obj = value as { Valid: boolean; Time: string | undefined };
               if (obj.Valid && obj.Time) {
-                const date = new Date(obj.Time);
-                return <>{formatDate(date)}</>;
+                return <FormattedTime date={obj.Time} />;
               } else {
                 return <>NA</>;
               }
             } else if (typeof value === 'string') {
-              const date = new Date(value);
-              return <>{formatDate(date)}</>;
+              return <FormattedTime date={value} />;
             } else {
               return <>{value}</>;
             }
diff --git a/src/custom/Workspaces/helper.ts b/src/custom/Workspaces/helper.ts
@@ -1,4 +1,4 @@
-import { formatDate } from '../CatalogDetail/helper';
+import { getFormatDate } from '../../utils';
 
 /**
  * Helper function to parse and format the value of a field representing a deletion timestamp in the provided data object.
@@ -11,8 +11,7 @@ export const parseDeletionTimestamp = (data: {
   deleted_at: { Valid: boolean; Time: string | number | Date };
 }) => {
   if (data && data.deleted_at && data.deleted_at.Valid === true) {
-    const date = new Date(data.deleted_at.Time);
-    return formatDate(date);
+    return getFormatDate(data.deleted_at.Time as string);
   } else {
     return DEFAULT_DATE;
   }
diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -1 +1,2 @@
 export * from './components';
+export * from './time.utils';
diff --git a/src/utils/time.utils.tsx b/src/utils/time.utils.tsx
@@ -0,0 +1,25 @@
+import moment from 'moment-timezone';
+import { CustomTooltip } from '../custom';
+
+export const getRelativeTime = (date: string): string => {
+  return moment(date).fromNow();
+};
+
+export const getFullFormattedTime = (date: string): string => {
+  const timezone = moment.tz.guess();
+  return moment(date).tz(timezone).format('ddd, MMM D, YYYY h:mm A, z');
+};
+
+export const getFormatDate = (date: string) => {
+  const options = { year: 'numeric' as const, month: 'short' as const, day: 'numeric' as const };
+  const formattedDate = new Date(date).toLocaleDateString('en-US', options);
+  return formattedDate;
+};
+
+export const FormattedTime = ({ date }: { date: string }) => {
+  return (
+    <CustomTooltip title={getFullFormattedTime(date)} disableInteractive>
+      <div>{getRelativeTime(date)}</div>
+    </CustomTooltip>
+  );
+};
