From 19a4dbaa8e4dbd5cbd542b955f7887e6dd0d7d62 Mon Sep 17 00:00:00 2001 From: yosuva Rajendran Date: Mon, 16 Dec 2024 11:59:56 +0530 Subject: [PATCH] Feat: Format event date --- .../member-irl-contributions.tsx | 18 ++++++++++------- .../team-details/team-irl-contributions.tsx | 20 ++++++++++++------- package-lock.json | 10 ++++++++++ package.json | 1 + 4 files changed, 35 insertions(+), 14 deletions(-) diff --git a/components/page/member-details/member-irl-contributions.tsx b/components/page/member-details/member-irl-contributions.tsx index 367c49b5..5343da17 100644 --- a/components/page/member-details/member-irl-contributions.tsx +++ b/components/page/member-details/member-irl-contributions.tsx @@ -6,10 +6,9 @@ import { IMember } from '@/types/members.types'; import { IAnalyticsUserInfo, IUserInfo } from '@/types/shared.types'; import { useMemberAnalytics } from '@/analytics/members.analytics'; import React from 'react'; -import { getFormattedDateString } from '@/utils/member.utils'; import { Tooltip } from '@/components/core/tooltip/tooltip'; import { usePathname, useRouter } from 'next/navigation'; -import { toZonedTime } from 'date-fns-tz'; +import { format, toZonedTime } from 'date-fns-tz'; interface IEvent { uid: string; @@ -81,13 +80,13 @@ const IrlMemberContribution = (props: IMemberRepositories) => { const handleEventClick = (details: any, role: any) => { analytics.onClickEventIrlContribution(userInfo); - // const isActive = new Date(details?.endDate) > new Date(); const isActive = checkTimeZone(details) const type = isActive ? "upcoming" : "past"; - const location = details.location.location ?? ""; + const location = details?.location?.location ?? ""; + const locationName = location.split(",")[0].trim(); const baseUrl = window.location.origin; - let url = `irl?location=${location}&type=${type}`; + let url = `irl?location=${locationName}&type=${type}`; if (role === "Attendee" && type === "upcoming") { url += `&attending=${details.name}`; @@ -110,6 +109,11 @@ const IrlMemberContribution = (props: IMemberRepositories) => { return endDateInTargetTimezone.getTime() > currentDateInTargetTimezone.getTime(); } + const getFormattedDateString = (date: string, timeZone: string) => { + const dateInTargetTimezone = toZonedTime(date, timeZone); + return format(dateInTargetTimezone, 'MMM dd', { timeZone }); + } + return ( <>
@@ -127,7 +131,7 @@ const IrlMemberContribution = (props: IMemberRepositories) => { {role}
- {visibleEvents.map((details: { name: any; startDate: any; endDate: any }, index: React.Key | null | undefined) => { + {visibleEvents.map((details: any, index: React.Key | null | undefined) => { const isActive = checkTimeZone(details); return (
{ } />
- {getFormattedDateString(details?.startDate, details?.endDate)} + {getFormattedDateString(details?.startDate, details?.location?.timezone)}
); diff --git a/components/page/team-details/team-irl-contributions.tsx b/components/page/team-details/team-irl-contributions.tsx index 561cbe77..a0e79b9d 100644 --- a/components/page/team-details/team-irl-contributions.tsx +++ b/components/page/team-details/team-irl-contributions.tsx @@ -9,7 +9,7 @@ import { getFormattedDateString } from '@/utils/member.utils'; import { Tooltip } from '@/components/core/tooltip/tooltip'; import { ITeam } from '@/types/teams.types'; import { useTeamAnalytics } from '@/analytics/teams.analytics'; -import { toZonedTime } from 'date-fns-tz'; +import { format, toZonedTime } from 'date-fns-tz'; interface IEvent { uid: string; @@ -73,13 +73,13 @@ const TeamIrlContributions = (props: ITeamMembers) => { const handleEventClick = (details: any, role: any) => { analytics.onClickTeamIrlContribution(userInfo); - // const isActive = new Date(details?.endDate) > new Date(); const isActive = checkTimeZone(details) const type = isActive ? "upcoming" : "past"; - const location = details.location.location ?? ""; + const location = details?.location?.location ?? ""; + const locationName = location?.split(",")[0].trim(); const baseUrl = window.location.origin; - let url = `irl?location=${location}&type=${type}`; + let url = `irl?location=${locationName}&type=${type}`; if (type === "past") { url += `&event=${details.slugURL}`; @@ -92,11 +92,17 @@ const TeamIrlContributions = (props: ITeamMembers) => { const checkTimeZone = (details: any) => { const timezone = details?.location?.timezone; - const endDateInTargetTimezone = toZonedTime(new Date(details?.endDate), timezone); + const endDateInTargetTimezone = toZonedTime(details?.endDate, timezone); const currentDateInTargetTimezone = toZonedTime(new Date(), timezone); return endDateInTargetTimezone.getTime() > currentDateInTargetTimezone.getTime(); } + + const getFormattedDateString = (date: string, timeZone: string) => { + const dateInTargetTimezone = toZonedTime(date, timeZone); + return format(dateInTargetTimezone, 'MMM dd', { timeZone }); + } + return ( <>
@@ -113,7 +119,7 @@ const TeamIrlContributions = (props: ITeamMembers) => { {role}
- {visibleEvents.map((details: { name: any; startDate: any; endDate: any }, index: React.Key | null | undefined) => { + {visibleEvents.map((details: any, index: React.Key | null | undefined) => { const isActive = checkTimeZone(details); return (
{ } />
- {getFormattedDateString(details?.startDate, details?.endDate)} + {getFormattedDateString(details?.startDate, details?.location?.timeZone)}
); diff --git a/package-lock.json b/package-lock.json index edc27051..49b3c78c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "@radix-ui/react-tooltip": "^1.0.7", "@testing-library/user-event": "^14.5.2", "@tinymce/tinymce-react": "^5.1.1", + "date-fns": "^4.1.0", "date-fns-tz": "^3.2.0", "embla-carousel-react": "^8.1.8", "isomorphic-dompurify": "^2.13.0", @@ -6351,6 +6352,15 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/date-fns": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz", + "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/kossnocorp" + } + }, "node_modules/date-fns-tz": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-3.2.0.tgz", diff --git a/package.json b/package.json index a764ebb7..411ae1b0 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "@radix-ui/react-tooltip": "^1.0.7", "@testing-library/user-event": "^14.5.2", "@tinymce/tinymce-react": "^5.1.1", + "date-fns": "^4.1.0", "date-fns-tz": "^3.2.0", "embla-carousel-react": "^8.1.8", "isomorphic-dompurify": "^2.13.0",