Feat: Format event date

memser-spaceport · Dec 16, 2024 · 19a4dba · 19a4dba
1 parent e6c996f
commit 19a4dba
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 14 deletions.
diff --git 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 (
     <>
       <div className="root">
@@ -127,7 +131,7 @@ const IrlMemberContribution = (props: IMemberRepositories) => {
                   {role}
                 </div>
                 <div className="root__irlCrbts__col__event">
-                  {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 (
                       <div
@@ -149,7 +153,7 @@ const IrlMemberContribution = (props: IMemberRepositories) => {
                           }
                         />
                         <div className="root__irlCrbts__col__event__cnt__date">
-                          {getFormattedDateString(details?.startDate, details?.endDate)}
+                          {getFormattedDateString(details?.startDate, details?.location?.timezone)}
                         </div>
                       </div>
                     );

diff --git 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 (
     <>
       <div className="root">
@@ -113,7 +119,7 @@ const TeamIrlContributions = (props: ITeamMembers) => {
                   {role}
                 </div>
                 <div className="root__irlCrbts__col__event">
-                  {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 (
                       <div
@@ -135,7 +141,7 @@ const TeamIrlContributions = (props: ITeamMembers) => {
                           }
                         />
                         <div className="root__irlCrbts__col__event__cnt__date">
-                          {getFormattedDateString(details?.startDate, details?.endDate)}
+                          {getFormattedDateString(details?.startDate, details?.location?.timeZone)}
                         </div>
                       </div>
                     );

diff --git a/package-lock.json b/package-lock.json
diff --git 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",