From 13ac64e3a84cce9ae1044cb283d714f8f78e9925 Mon Sep 17 00:00:00 2001
From: saurabhburade <sburade3@gmail.com>
Date: Thu, 11 Jul 2024 00:00:21 +0530
Subject: [PATCH 01/17] chore: redesign event card & list

---
 public/images/events/event-placeholder.png | Bin 0 -> 1849 bytes
 src/components/EventCard.tsx               | 162 ++++++++++++---------
 src/components/UpcomingEventsList.tsx      | 147 ++++++++++++-------
 src/lib/utils/date.ts                      |  53 +++++++
 4 files changed, 238 insertions(+), 124 deletions(-)
 create mode 100644 public/images/events/event-placeholder.png

diff --git a/public/images/events/event-placeholder.png b/public/images/events/event-placeholder.png
new file mode 100644
index 0000000000000000000000000000000000000000..4a15165452a73dcca0848bd2b768daf3f8b34c0c
GIT binary patch
literal 1849
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

literal 0
HcmV?d00001

diff --git a/src/components/EventCard.tsx b/src/components/EventCard.tsx
index b39405ad27f..51f796fdbf1 100644
--- a/src/components/EventCard.tsx
+++ b/src/components/EventCard.tsx
@@ -1,8 +1,11 @@
 import React from "react"
-import { Box, Heading } from "@chakra-ui/react"
+import { BsCalendar3 } from "react-icons/bs"
+import { Box, Flex, Heading, Icon } from "@chakra-ui/react"
+import { Image } from "@chakra-ui/react"
+
+import { formatDateRange } from "@/lib/utils/date"
 
 import { ButtonLink } from "./Buttons"
-import Emoji from "./Emoji"
 import Text from "./OldText"
 
 const clearStyles = {
@@ -16,87 +19,108 @@ export type EventCardProps = {
   title: string
   to: string
   date: string
+  startDate: string
+  endDate: string
   description: string
   className?: string
   location: string
   isEven: boolean
+  imageUrl?: string
 }
 
 const EventCard = ({
   title,
   to,
-  date,
   description,
   className,
   location,
-  isEven,
-}: EventCardProps) => (
-  <Box
-    className={className}
-    position="relative"
-    marginTop={{ base: "30px", md: 0 }}
-    _before={clearStyles}
-    _after={clearStyles}
-  >
-    <Box
-      w="24px"
-      h="24px"
-      position="absolute"
-      top="0"
-      insetInlineStart="50%"
-      overflow="hidden"
-      ms="-12px"
-      backgroundColor="primary.base"
-      display={{ base: "none", md: "block" }}
-    />
+  imageUrl,
+  endDate,
+  startDate,
+}: EventCardProps) => {
+  const formatedDate = formatDateRange(startDate, endDate)
+  return (
     <Box
-      width={{ base: "100%", md: "45%" }}
-      padding={6}
-      backgroundColor="ednBackground"
-      borderRadius="sm"
-      border="1px solid"
-      borderColor="lightBorder"
-      float={isEven ? "inline-end" : { base: "inline-end", md: "none" }}
-      marginTop={isEven ? { base: 0, md: "-25%" } : 0}
-      _before={{
-        content: '""',
-        position: "absolute",
-        top: "10px",
-        width: 0,
-        height: "3px",
-        display: { base: "none", md: "inline" },
-        ...(isEven
-          ? {
-              insetInlineStart: "inherit",
-              insetInlineEnd: "45%",
-              borderInlineStart: 0,
-              borderInlineEnd: "25px solid",
-            }
-          : {
-              insetInlineStart: "45%",
-              borderInlineStart: "25px solid",
-              borderInlineEnd: 0,
-            }),
-        borderColor: "primary.base",
-      }}
+      className={className}
+      position="relative"
+      marginTop={{ base: "0", md: 0 }}
+      _before={clearStyles}
+      _after={clearStyles}
+      width={{ base: "100%", md: "100%", xl: "100%" }}
+      height={"100%"}
     >
-      <Text color="primary.base" marginBottom={0} textAlign="end">
-        {date}
-        <Emoji text=":spiral_calendar:" fontSize="md" ms={2} />
-      </Text>
-      <Text marginBottom={0} textAlign="end">
-        <Text as="span" opacity={0.6}>
-          {location}
-        </Text>
-        <Emoji text=":round_pushpin:" fontSize="md" ms={2} />
-      </Text>
-      <Heading as="h3" marginTop={0} fontWeight="semibold" lineHeight={1.4}>
-        {title}
-      </Heading>
-      <Text>{description}</Text>
-      <ButtonLink to={to}>View Event</ButtonLink>
+      <Flex
+        borderRadius="sm"
+        border="1px solid"
+        borderColor="lightBorder"
+        height={"100%"}
+        direction={"column"}
+        justifyContent={"space-between"}
+        rounded={"4px"}
+      >
+        <Box>
+          <Flex
+            alignItems={"center"}
+            justifyContent={"center"}
+            background={"grayBackground"}
+            padding={2}
+            gap={2}
+            borderBottom="1px solid"
+            borderColor="primary.base"
+            roundedTop={"4px"}
+          >
+            <Icon as={BsCalendar3} boxSize={6} color="primary.base" />
+
+            <Text color="primary.base" marginBottom={0} textAlign="end">
+              {formatedDate}
+            </Text>
+          </Flex>
+
+          {/* TODO : add image hostname to next config or add event image to public dir  */}
+          <Flex
+            alignItems="center"
+            justifyContent="center"
+            boxShadow="rgb(0 0 0 / 10%) 0px -1px 0px inset;"
+          >
+            <Image
+              src={imageUrl ? imageUrl : "/images/events/event-placeholder.png"}
+              alt={title}
+              width={{ base: "100%", sm: "100%" }}
+              height={{ base: "224px", xl: "124px" }}
+              objectFit={"cover"}
+              fallbackSrc="/images/events/event-placeholder.png"
+            />
+          </Flex>
+          <Box padding={4}>
+            <Box textAlign={"center"}>
+              <Heading
+                as="h3"
+                fontSize={{ base: "md", md: "2xl" }}
+                marginTop={0}
+                fontWeight="semibold"
+                lineHeight={1.4}
+              >
+                {title}
+              </Heading>
+              <Text as="span" opacity={0.6}>
+                {location}
+              </Text>
+            </Box>
+            <Box>
+              <Text fontSize={{ base: "sm", md: "sm" }} mb={0} noOfLines={4}>
+                {description}
+              </Text>
+            </Box>
+          </Box>
+        </Box>
+        <Box padding={4} paddingTop={0} width={"100%"}>
+          <ButtonLink to={to} width={"100%"} variant="outline">
+            View Event
+          </ButtonLink>
+        </Box>
+      </Flex>
     </Box>
-  </Box>
-)
+  )
+}
 
 export default EventCard
diff --git a/src/components/UpcomingEventsList.tsx b/src/components/UpcomingEventsList.tsx
index f5e093cb6ef..38b28390bc4 100644
--- a/src/components/UpcomingEventsList.tsx
+++ b/src/components/UpcomingEventsList.tsx
@@ -1,7 +1,8 @@
 import { useEffect, useState } from "react"
+import _ from "lodash"
 import { useRouter } from "next/router"
 import { useTranslation } from "next-i18next"
-import { Box } from "@chakra-ui/react"
+import { Box, Grid, Heading } from "@chakra-ui/react"
 
 import type { CommunityConference, Lang } from "@/lib/types"
 
@@ -10,24 +11,20 @@ import EventCard from "@/components/EventCard"
 import InfoBanner from "@/components/InfoBanner"
 import InlineLink from "@/components/Link"
 
+import { months } from "@/lib/utils/date"
 import { trackCustomEvent } from "@/lib/utils/matomo"
 import { getLocaleTimestamp } from "@/lib/utils/time"
 
 import communityEvents from "@/data/community-events.json"
 
-type OrderedUpcomingEvent = CommunityConference & {
-  date: string
-  formattedDetails: string
-}
-
 const UpcomingEventsList = () => {
   const { locale } = useRouter()
   const { t } = useTranslation("page-community")
-  const eventsPerLoad = 10
-  const [orderedUpcomingEvents, setOrderedUpcomingEvents] = useState<
-    OrderedUpcomingEvent[]
-  >([])
-  const [maxRange, setMaxRange] = useState<number>(eventsPerLoad)
+  const monthsPerLoad = 1
+
+  const [monthGroupedEvents, setMonthGroupedEvents] = useState({})
+
+  const [maxRange, setMaxRange] = useState<number>(monthsPerLoad)
 
   // Create Date object from each YYYY-MM-DD JSON date string
   const dateParse = (dateString: string): Date => {
@@ -73,13 +70,21 @@ const UpcomingEventsList = () => {
         formattedDetails: details,
       }
     })
+    const groupedEvents = _.groupBy(formattedEvents, ({ startDate }) => {
+      // .replace(/-/g, "/") ==> Fixes Safari Invalid date
+      const month = new Date(startDate.replace(/-/g, "/")).getMonth()
+      const year = new Date(startDate.replace(/-/g, "/")).getFullYear()
+      const monthName = months[month]
+      return `${monthName} ${year}`
+    })
+
+    setMonthGroupedEvents(groupedEvents)
 
-    setOrderedUpcomingEvents(formattedEvents)
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   const loadMoreEvents = () => {
-    setMaxRange((counter) => counter + eventsPerLoad)
+    setMaxRange((counter) => counter + monthsPerLoad)
     trackCustomEvent({
       eventCategory: "more events button",
       eventAction: "click",
@@ -87,7 +92,7 @@ const UpcomingEventsList = () => {
     })
   }
 
-  if (orderedUpcomingEvents.length === 0) {
+  if (Object.keys(monthGroupedEvents)?.length === 0) {
     return (
       <InfoBanner emoji=":information_source:">
         {t("page-community-upcoming-events-no-events")}{" "}
@@ -100,56 +105,88 @@ const UpcomingEventsList = () => {
 
   return (
     <>
+      {Object.keys(monthGroupedEvents)
+        ?.slice(0, maxRange)
+        ?.map((month) => {
+          const events = monthGroupedEvents[month]
+          return (
+            <Box key={`events_in_${month}`}>
+              <Heading
+                as="h3"
+                fontSize={{ base: "xl", md: "2xl" }}
+                py={4}
+                fontWeight="semibold"
+                lineHeight={1.4}
+              >
+                {month}
+              </Heading>
+              <Grid
+                width={{ base: "100%" }}
+                templateColumns={{
+                  base: "repeat(1,1fr)",
+                  md: "repeat(2,1fr)",
+                  lg: "repeat(3,1fr)",
+                }}
+                justifyContent={"center"}
+                alignItems={"center"}
+                alignSelf={"center"}
+                gap={5}
+                overflow={"hidden"}
+              >
+                {events.map(
+                  (
+                    {
+                      title,
+                      to,
+                      formattedDetails,
+                      date,
+                      location,
+                      imageUrl,
+                      startDate,
+                      endDate,
+                    },
+                    idx
+                  ) => {
+                    return (
+                      <EventCard
+                        key={idx}
+                        title={title}
+                        to={to}
+                        date={date}
+                        description={formattedDetails}
+                        location={location}
+                        isEven={(idx + 1) % 2 === 0}
+                        imageUrl={imageUrl}
+                        startDate={startDate}
+                        endDate={endDate}
+                      />
+                    )
+                  }
+                )}
+              </Grid>
+            </Box>
+          )
+        })}
+
       <Box
         width="100%"
         margin="30px auto"
         position="relative"
         padding="0 10px"
         transition="all 0.4s ease"
-        _before={{
-          content: '""',
-          position: "absolute",
-          width: "3px",
-          height: "full",
-          background: "primary.base",
-          top: 0,
-          insetInlineStart: "50%",
-        }}
-        _after={{
-          content: '""',
-          display: "table",
-          width: "100%",
-          clear: "both",
-        }}
-      >
-        {orderedUpcomingEvents
-          ?.slice(0, maxRange)
-          .map(({ title, to, formattedDetails, date, location }, idx) => {
-            return (
-              <EventCard
-                key={idx}
-                title={title}
-                to={to}
-                date={date}
-                description={formattedDetails}
-                location={location}
-                isEven={(idx + 1) % 2 === 0}
-              />
-            )
-          })}
-      </Box>
-      <Box
-        display="flex"
-        justifyContent="center"
-        maxWidth="620px"
-        marginTop="5"
-      >
-        {maxRange <= orderedUpcomingEvents.length && (
+      ></Box>
+      {Object.keys(monthGroupedEvents)?.length !== maxRange && (
+        <Box
+          display="flex"
+          justifyContent="center"
+          maxWidth="620px"
+          marginTop="5"
+        >
           <Button onClick={loadMoreEvents}>
             {t("page-community-upcoming-events-load-more")}
           </Button>
-        )}
-      </Box>
+        </Box>
+      )}
     </>
   )
 }
diff --git a/src/lib/utils/date.ts b/src/lib/utils/date.ts
index 54c57803232..03a30ae23b4 100644
--- a/src/lib/utils/date.ts
+++ b/src/lib/utils/date.ts
@@ -1,2 +1,55 @@
 export const dateToString = (published: Date | string) =>
   new Date(published).toISOString().split("T")[0]
+
+// Define an array of month names
+export const months = [
+  "Jan",
+  "Feb",
+  "Mar",
+  "Apr",
+  "May",
+  "Jun",
+  "Jul",
+  "Aug",
+  "Sep",
+  "Oct",
+  "Nov",
+  "Dec",
+]
+
+export const formatDateRange = (startDate: string, endDate: string) => {
+  // Parse the input dates
+  // .replace(/-/g, "/") ==> Fixes Safari Invalid date
+  const start = new Date(startDate.replace(/-/g, "/"))
+  const end = new Date(endDate.replace(/-/g, "/"))
+
+  // Extract day and month from the start and end dates
+  const startDay = start.getDate()
+  const startMonth = months[start.getMonth()]
+  const endDay = end.getDate()
+  const endMonth = months[end.getMonth()]
+
+  // Extract year from start and end dates
+  const startYear = start.getFullYear()
+  const endYear = end.getFullYear()
+
+  // Format the year (if start and end years are the same, only show the year once)
+  const startYearFormatted = startYear.toString()
+  const endYearFormatted = endYear.toString()
+
+  // Format the date range string
+  let dateRangeString
+
+  if (startYear === endYear && start.getMonth() === end.getMonth()) {
+    dateRangeString = `${startDay}-${endDay} ${startMonth} ${startYearFormatted}`
+  } else if (startYear === endYear) {
+    dateRangeString = `${startDay} ${startMonth} - ${endDay} ${endMonth} ${startYearFormatted}`
+  } else {
+    dateRangeString = `${startDay} ${startMonth} ${startYearFormatted} - ${endDay} ${endMonth} ${endYearFormatted}`
+  }
+  if (startDate === endDate) {
+    dateRangeString = `${startDay} ${startMonth} ${startYearFormatted}`
+  }
+
+  return dateRangeString
+}

From 5e14750063f9b41a3eb4f7db3f07ea585d18c32f Mon Sep 17 00:00:00 2001
From: saurabhburade <sburade3@gmail.com>
Date: Thu, 11 Jul 2024 13:11:48 +0530
Subject: [PATCH 02/17] chore: update MeetupList row

---
 src/components/MeetupList.tsx | 38 +++++++++++++++++------------------
 1 file changed, 18 insertions(+), 20 deletions(-)

diff --git a/src/components/MeetupList.tsx b/src/components/MeetupList.tsx
index 6b4c9ed3472..8f1829d5555 100644
--- a/src/components/MeetupList.tsx
+++ b/src/components/MeetupList.tsx
@@ -1,13 +1,14 @@
 import { useState } from "react"
 import sortBy from "lodash/sortBy"
+import { FaChevronRight } from "react-icons/fa6"
 import {
   Box,
   Flex,
+  Icon,
   LinkBox,
   LinkOverlay,
   List,
   ListItem,
-  useColorModeValue,
   useToken,
   VisuallyHidden,
 } from "@chakra-ui/react"
@@ -23,7 +24,6 @@ import { trackCustomEvent } from "@/lib/utils/matomo"
 
 import meetups from "@/data/community-meetups.json"
 
-import { useRtlFlip } from "@/hooks/useRtlFlip"
 
 export interface Meetup {
   title: string
@@ -49,13 +49,7 @@ const sortedMeetups: Array<Meetup> = sortBy(meetups, ["emoji", "location"])
 // TODO prop if ordered list or unordered
 const MeetupList = () => {
   const [searchField, setSearchField] = useState<string>("")
-  const { flipForRtl } = useRtlFlip()
   const filteredMeetups = filterMeetups(searchField)
-  const listBoxShadow = useColorModeValue("tableBox.light", "tableBox.dark")
-  const listItemBoxShadow = useColorModeValue(
-    "tableItemBox.light",
-    "tableItemBox.dark"
-  )
 
   const handleSearch = (event: React.ChangeEvent<HTMLInputElement>): void => {
     setSearchField(event.target.value)
@@ -81,14 +75,18 @@ const MeetupList = () => {
         results update as you type
       </VisuallyHidden>
 
-      <List m={0} boxShadow={listBoxShadow} aria-label="Event meetup results">
+      <List
+        m={0}
+        border={"2px solid"}
+        borderColor={"offBackground"}
+        aria-label="Event meetup results"
+      >
         {filteredMeetups.map((meetup, idx) => (
           <LinkBox
             as={ListItem}
             key={idx}
             display="flex"
             justifyContent="space-between"
-            boxShadow={listItemBoxShadow}
             mb={0.25}
             p={4}
             w="100%"
@@ -98,6 +96,8 @@ const MeetupList = () => {
               boxShadow: `0 0 1px ${primaryBaseColor}`,
               bg: "tableBackgroundHover",
             }}
+            borderBottom={"2px solid"}
+            borderColor={"offBackground"}
           >
             <Flex flex="1 1 75%" me={4}>
               <Box me={4} opacity="0.4">
@@ -133,16 +133,14 @@ const MeetupList = () => {
                 {meetup.location}
               </Text>
             </Flex>
-            <Box
-              as="span"
-              _after={{
-                content: '"↗"',
-                ms: 0.5,
-                me: 1.5,
-                transform: flipForRtl,
-                display: "inline-block",
-              }}
-            ></Box>
+            <Flex alignItems={"center"}>
+              <Icon
+                as={FaChevronRight}
+                width={{ base: "14px", xl: "18px" }}
+                height={{ base: "14px", xl: "18px" }}
+                color={"text"}
+              />
+            </Flex>
           </LinkBox>
         ))}
       </List>

From 097eb7acad562b669ea3dbd92ec1b73ab9afd46d Mon Sep 17 00:00:00 2001
From: saurabhburade <sburade3@gmail.com>
Date: Thu, 11 Jul 2024 17:32:54 +0530
Subject: [PATCH 03/17] chore: double month padding

---
 src/components/UpcomingEventsList.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/UpcomingEventsList.tsx b/src/components/UpcomingEventsList.tsx
index 38b28390bc4..b96cdffa604 100644
--- a/src/components/UpcomingEventsList.tsx
+++ b/src/components/UpcomingEventsList.tsx
@@ -114,7 +114,7 @@ const UpcomingEventsList = () => {
               <Heading
                 as="h3"
                 fontSize={{ base: "xl", md: "2xl" }}
-                py={4}
+                py={8}
                 fontWeight="semibold"
                 lineHeight={1.4}
               >

From 10e647ce9f83d40cfdb573477967b077ef283ea0 Mon Sep 17 00:00:00 2001
From: saurabhburade <sburade3@gmail.com>
Date: Thu, 11 Jul 2024 17:33:48 +0530
Subject: [PATCH 04/17] chore: update monthsPerLoad

---
 src/components/UpcomingEventsList.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/UpcomingEventsList.tsx b/src/components/UpcomingEventsList.tsx
index b96cdffa604..2454062ea02 100644
--- a/src/components/UpcomingEventsList.tsx
+++ b/src/components/UpcomingEventsList.tsx
@@ -20,7 +20,7 @@ import communityEvents from "@/data/community-events.json"
 const UpcomingEventsList = () => {
   const { locale } = useRouter()
   const { t } = useTranslation("page-community")
-  const monthsPerLoad = 1
+  const monthsPerLoad = 2
 
   const [monthGroupedEvents, setMonthGroupedEvents] = useState({})
 

From 4755d948b26fc899f67a8ce3ec8bdbfba78ba5f0 Mon Sep 17 00:00:00 2001
From: saurabhburade <sburade3@gmail.com>
Date: Thu, 11 Jul 2024 18:01:41 +0530
Subject: [PATCH 05/17] fix: loading remaining items at end

---
 src/components/UpcomingEventsList.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/UpcomingEventsList.tsx b/src/components/UpcomingEventsList.tsx
index 2454062ea02..a3cc0a0e84b 100644
--- a/src/components/UpcomingEventsList.tsx
+++ b/src/components/UpcomingEventsList.tsx
@@ -84,7 +84,11 @@ const UpcomingEventsList = () => {
   }, [])
 
   const loadMoreEvents = () => {
-    setMaxRange((counter) => counter + monthsPerLoad)
+    setMaxRange((counter) => {
+      if (counter + monthsPerLoad > Object.keys(monthGroupedEvents)?.length)
+        return Object.keys(monthGroupedEvents)?.length
+      return counter + monthsPerLoad
+    })
     trackCustomEvent({
       eventCategory: "more events button",
       eventAction: "click",

From 4d0120f76e9d34615b72a4ae9c0d0d07b2b5b653 Mon Sep 17 00:00:00 2001
From: saurabhburade <sburade3@gmail.com>
Date: Wed, 24 Jul 2024 15:55:49 +0530
Subject: [PATCH 06/17] chore: remove explicit return

---
 src/components/UpcomingEventsList.tsx | 30 +++++++++++++--------------
 1 file changed, 14 insertions(+), 16 deletions(-)

diff --git a/src/components/UpcomingEventsList.tsx b/src/components/UpcomingEventsList.tsx
index a3cc0a0e84b..7d850d45874 100644
--- a/src/components/UpcomingEventsList.tsx
+++ b/src/components/UpcomingEventsList.tsx
@@ -150,22 +150,20 @@ const UpcomingEventsList = () => {
                       endDate,
                     },
                     idx
-                  ) => {
-                    return (
-                      <EventCard
-                        key={idx}
-                        title={title}
-                        to={to}
-                        date={date}
-                        description={formattedDetails}
-                        location={location}
-                        isEven={(idx + 1) % 2 === 0}
-                        imageUrl={imageUrl}
-                        startDate={startDate}
-                        endDate={endDate}
-                      />
-                    )
-                  }
+                  ) => (
+                    <EventCard
+                      key={idx}
+                      title={title}
+                      to={to}
+                      date={date}
+                      description={formattedDetails}
+                      location={location}
+                      isEven={(idx + 1) % 2 === 0}
+                      imageUrl={imageUrl}
+                      startDate={startDate}
+                      endDate={endDate}
+                    />
+                  )
                 )}
               </Grid>
             </Box>

From 30a08ef6fae22d1a02538839c0bdc54cf606dba2 Mon Sep 17 00:00:00 2001
From: saurabhburade <sburade3@gmail.com>
Date: Wed, 24 Jul 2024 15:59:03 +0530
Subject: [PATCH 07/17] chore: remove isEven prop [deprecated]

---
 src/components/EventCard.tsx          | 1 -
 src/components/UpcomingEventsList.tsx | 1 -
 2 files changed, 2 deletions(-)

diff --git a/src/components/EventCard.tsx b/src/components/EventCard.tsx
index 51f796fdbf1..49e9a1efef7 100644
--- a/src/components/EventCard.tsx
+++ b/src/components/EventCard.tsx
@@ -24,7 +24,6 @@ export type EventCardProps = {
   description: string
   className?: string
   location: string
-  isEven: boolean
   imageUrl?: string
 }
 
diff --git a/src/components/UpcomingEventsList.tsx b/src/components/UpcomingEventsList.tsx
index 7d850d45874..f9877ebe551 100644
--- a/src/components/UpcomingEventsList.tsx
+++ b/src/components/UpcomingEventsList.tsx
@@ -158,7 +158,6 @@ const UpcomingEventsList = () => {
                       date={date}
                       description={formattedDetails}
                       location={location}
-                      isEven={(idx + 1) % 2 === 0}
                       imageUrl={imageUrl}
                       startDate={startDate}
                       endDate={endDate}

From ad86dfff97a009153d3ec79583df0a27d455fdcb Mon Sep 17 00:00:00 2001
From: saurabhburade <sburade3@gmail.com>
Date: Wed, 24 Jul 2024 16:45:10 +0530
Subject: [PATCH 08/17] chore: refactor ui & View Event link

---
 src/components/EventCard.tsx          | 2 +-
 src/components/UpcomingEventsList.tsx | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/EventCard.tsx b/src/components/EventCard.tsx
index 49e9a1efef7..fe2c139313e 100644
--- a/src/components/EventCard.tsx
+++ b/src/components/EventCard.tsx
@@ -113,7 +113,7 @@ const EventCard = ({
           </Box>
         </Box>
         <Box padding={4} paddingTop={0} width={"100%"}>
-          <ButtonLink to={to} width={"100%"} variant="outline">
+          <ButtonLink href={to} width={"100%"} variant="outline">
             View Event
           </ButtonLink>
         </Box>
diff --git a/src/components/UpcomingEventsList.tsx b/src/components/UpcomingEventsList.tsx
index f9877ebe551..ce083154633 100644
--- a/src/components/UpcomingEventsList.tsx
+++ b/src/components/UpcomingEventsList.tsx
@@ -182,6 +182,7 @@ const UpcomingEventsList = () => {
           justifyContent="center"
           maxWidth="620px"
           marginTop="5"
+          paddingY="8"
         >
           <Button onClick={loadMoreEvents}>
             {t("page-community-upcoming-events-load-more")}

From d73d63421f9209c7bc8652c0fe3366158b1f781b Mon Sep 17 00:00:00 2001
From: saurabhburade <sburade3@gmail.com>
Date: Wed, 24 Jul 2024 17:13:36 +0530
Subject: [PATCH 09/17] fix: change DateTimeFormat to Intl

---
 src/components/UpcomingEventsList.tsx | 11 +++--
 src/lib/utils/date.ts                 | 69 +++++++++++----------------
 2 files changed, 35 insertions(+), 45 deletions(-)

diff --git a/src/components/UpcomingEventsList.tsx b/src/components/UpcomingEventsList.tsx
index ce083154633..bd77a6a962b 100644
--- a/src/components/UpcomingEventsList.tsx
+++ b/src/components/UpcomingEventsList.tsx
@@ -11,7 +11,6 @@ import EventCard from "@/components/EventCard"
 import InfoBanner from "@/components/InfoBanner"
 import InlineLink from "@/components/Link"
 
-import { months } from "@/lib/utils/date"
 import { trackCustomEvent } from "@/lib/utils/matomo"
 import { getLocaleTimestamp } from "@/lib/utils/time"
 
@@ -72,10 +71,12 @@ const UpcomingEventsList = () => {
     })
     const groupedEvents = _.groupBy(formattedEvents, ({ startDate }) => {
       // .replace(/-/g, "/") ==> Fixes Safari Invalid date
-      const month = new Date(startDate.replace(/-/g, "/")).getMonth()
-      const year = new Date(startDate.replace(/-/g, "/")).getFullYear()
-      const monthName = months[month]
-      return `${monthName} ${year}`
+      const start = new Date(startDate.replace(/-/g, "/"))
+      const formatYearMonth = new Intl.DateTimeFormat(undefined, {
+        month: "short",
+        year: "numeric",
+      }).format(start)
+      return `${formatYearMonth}`
     })
 
     setMonthGroupedEvents(groupedEvents)
diff --git a/src/lib/utils/date.ts b/src/lib/utils/date.ts
index 03a30ae23b4..537bfe178c6 100644
--- a/src/lib/utils/date.ts
+++ b/src/lib/utils/date.ts
@@ -1,54 +1,43 @@
 export const dateToString = (published: Date | string) =>
   new Date(published).toISOString().split("T")[0]
 
-// Define an array of month names
-export const months = [
-  "Jan",
-  "Feb",
-  "Mar",
-  "Apr",
-  "May",
-  "Jun",
-  "Jul",
-  "Aug",
-  "Sep",
-  "Oct",
-  "Nov",
-  "Dec",
-]
-
 export const formatDateRange = (startDate: string, endDate: string) => {
   // Parse the input dates
   // .replace(/-/g, "/") ==> Fixes Safari Invalid date
+
   const start = new Date(startDate.replace(/-/g, "/"))
   const end = new Date(endDate.replace(/-/g, "/"))
 
-  // Extract day and month from the start and end dates
-  const startDay = start.getDate()
-  const startMonth = months[start.getMonth()]
-  const endDay = end.getDate()
-  const endMonth = months[end.getMonth()]
-
-  // Extract year from start and end dates
-  const startYear = start.getFullYear()
-  const endYear = end.getFullYear()
-
-  // Format the year (if start and end years are the same, only show the year once)
-  const startYearFormatted = startYear.toString()
-  const endYearFormatted = endYear.toString()
-
-  // Format the date range string
+  // Formatter for day and month
+  // undefined :: denotes to use automatic user's locale
+  const dayMonthFormatter = new Intl.DateTimeFormat(undefined, {
+    day: "numeric",
+    month: "short",
+  })
+
+  // Extract formatted strings
+  const startDayMonth = dayMonthFormatter.format(start)
+  const endDayMonth = dayMonthFormatter.format(end)
+  const startMonth = new Intl.DateTimeFormat(undefined, {
+    month: "short",
+  }).format(start)
+  const endMonth = new Intl.DateTimeFormat(undefined, {
+    month: "short",
+  }).format(end)
+
+  // Determine the date range string
   let dateRangeString
-
-  if (startYear === endYear && start.getMonth() === end.getMonth()) {
-    dateRangeString = `${startDay}-${endDay} ${startMonth} ${startYearFormatted}`
-  } else if (startYear === endYear) {
-    dateRangeString = `${startDay} ${startMonth} - ${endDay} ${endMonth} ${startYearFormatted}`
+  if (start.toDateString() === end.toDateString()) {
+    dateRangeString = startDayMonth // If the start and end dates are the same
+  } else if (
+    startMonth === endMonth &&
+    start.getFullYear() === end.getFullYear()
+  ) {
+    // Output as "12-14 Jul" in the user's locale format
+    dateRangeString = `${start.getDate()}-${end.getDate()} ${startMonth}`
   } else {
-    dateRangeString = `${startDay} ${startMonth} ${startYearFormatted} - ${endDay} ${endMonth} ${endYearFormatted}`
-  }
-  if (startDate === endDate) {
-    dateRangeString = `${startDay} ${startMonth} ${startYearFormatted}`
+    // If different months or years, show as "12 Jul - 14 Aug"
+    dateRangeString = `${startDayMonth}-${endDayMonth}`
   }
 
   return dateRangeString

From 4b874a971ff365ff3373dc22f80b6904aafef92d Mon Sep 17 00:00:00 2001
From: saurabhburade <sburade3@gmail.com>
Date: Sun, 28 Jul 2024 00:38:58 +0530
Subject: [PATCH 10/17] chore: resolve [dev] conflicts

---
 src/components/EventCard.tsx          | 2 +-
 src/components/UpcomingEventsList.tsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/EventCard.tsx b/src/components/EventCard.tsx
index af296b1ba97..fe2c139313e 100644
--- a/src/components/EventCard.tsx
+++ b/src/components/EventCard.tsx
@@ -17,7 +17,7 @@ const clearStyles = {
 
 export type EventCardProps = {
   title: string
-  href: string
+  to: string
   date: string
   startDate: string
   endDate: string
diff --git a/src/components/UpcomingEventsList.tsx b/src/components/UpcomingEventsList.tsx
index a93c55f37c9..f146e76d03f 100644
--- a/src/components/UpcomingEventsList.tsx
+++ b/src/components/UpcomingEventsList.tsx
@@ -143,6 +143,7 @@ const UpcomingEventsList = () => {
                     {
                       title,
                       to,
+                      href,
                       formattedDetails,
                       date,
                       location,
@@ -155,7 +156,7 @@ const UpcomingEventsList = () => {
                     <EventCard
                       key={idx}
                       title={title}
-                      to={to}
+                      to={to || href}
                       date={date}
                       description={formattedDetails}
                       location={location}
@@ -185,7 +186,6 @@ const UpcomingEventsList = () => {
           marginTop="5"
           paddingY="8"
         >
-
           <Button onClick={loadMoreEvents}>
             {t("page-community-upcoming-events-load-more")}
           </Button>

From 539e7d132745bdeabcc36d82e3637bfd832fa9b6 Mon Sep 17 00:00:00 2001
From: saurabhburade <sburade3@gmail.com>
Date: Mon, 29 Jul 2024 18:49:24 +0530
Subject: [PATCH 11/17] chore: add `View Event` to en translations

---
 src/components/EventCard.tsx    | 4 +++-
 src/intl/en/page-community.json | 1 +
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/EventCard.tsx b/src/components/EventCard.tsx
index fe2c139313e..e289bf2925b 100644
--- a/src/components/EventCard.tsx
+++ b/src/components/EventCard.tsx
@@ -1,4 +1,5 @@
 import React from "react"
+import { useTranslation } from "react-i18next"
 import { BsCalendar3 } from "react-icons/bs"
 import { Box, Flex, Heading, Icon } from "@chakra-ui/react"
 import { Image } from "@chakra-ui/react"
@@ -37,6 +38,7 @@ const EventCard = ({
   endDate,
   startDate,
 }: EventCardProps) => {
+  const { t } = useTranslation("page-community")
   const formatedDate = formatDateRange(startDate, endDate)
   return (
     <Box
@@ -114,7 +116,7 @@ const EventCard = ({
         </Box>
         <Box padding={4} paddingTop={0} width={"100%"}>
           <ButtonLink href={to} width={"100%"} variant="outline">
-            View Event
+            {t("page-community-upcoming-events-view-event")}
           </ButtonLink>
         </Box>
       </Flex>
diff --git a/src/intl/en/page-community.json b/src/intl/en/page-community.json
index 6e2435fd642..488aacc7dbc 100644
--- a/src/intl/en/page-community.json
+++ b/src/intl/en/page-community.json
@@ -44,6 +44,7 @@
   "page-community-try-ethereum": "Try Ethereum for yourself",
   "page-community-upcoming-events-no-events": "We're not aware of any upcoming events. Know of one?",
   "page-community-upcoming-events-load-more": "Load more",
+  "page-community-upcoming-events-view-event": "View event",
   "page-community-why-get-involved-title": "Why get involved?",
   "page-community-why-get-involved-card-1-title": "Find your tribe",
   "page-community-why-get-involved-card-1-description": "There is a tribe for everyone. Find and connect with like minded individuals to discuss, ponder, and celebrate Ethereum together.",

From 68b1c7a91f4c93f53e50ec9fd0d592fbf18ce1e3 Mon Sep 17 00:00:00 2001
From: saurabhburade <sburade3@gmail.com>
Date: Tue, 30 Jul 2024 09:42:33 +0530
Subject: [PATCH 12/17] chore: refactor date format, use locale

---
 src/components/EventCard.tsx          | 10 +++++++---
 src/components/UpcomingEventsList.tsx |  2 +-
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/EventCard.tsx b/src/components/EventCard.tsx
index e289bf2925b..39f9c91bac1 100644
--- a/src/components/EventCard.tsx
+++ b/src/components/EventCard.tsx
@@ -1,11 +1,10 @@
 import React from "react"
+import { useRouter } from "next/router"
 import { useTranslation } from "react-i18next"
 import { BsCalendar3 } from "react-icons/bs"
 import { Box, Flex, Heading, Icon } from "@chakra-ui/react"
 import { Image } from "@chakra-ui/react"
 
-import { formatDateRange } from "@/lib/utils/date"
-
 import { ButtonLink } from "./Buttons"
 import Text from "./OldText"
 
@@ -38,8 +37,13 @@ const EventCard = ({
   endDate,
   startDate,
 }: EventCardProps) => {
+  const { locale } = useRouter()
   const { t } = useTranslation("page-community")
-  const formatedDate = formatDateRange(startDate, endDate)
+  const formatedDate = new Intl.DateTimeFormat(locale, {
+    day: "2-digit",
+    month: "short",
+  }).formatRange(new Date(startDate), new Date(endDate))
+
   return (
     <Box
       className={className}
diff --git a/src/components/UpcomingEventsList.tsx b/src/components/UpcomingEventsList.tsx
index f146e76d03f..10754ab1f78 100644
--- a/src/components/UpcomingEventsList.tsx
+++ b/src/components/UpcomingEventsList.tsx
@@ -72,7 +72,7 @@ const UpcomingEventsList = () => {
     const groupedEvents = _.groupBy(formattedEvents, ({ startDate }) => {
       // .replace(/-/g, "/") ==> Fixes Safari Invalid date
       const start = new Date(startDate.replace(/-/g, "/"))
-      const formatYearMonth = new Intl.DateTimeFormat(undefined, {
+      const formatYearMonth = new Intl.DateTimeFormat(locale, {
         month: "short",
         year: "numeric",
       }).format(start)

From 420731d0522b26d9795c8ef825a0cd5fcd271bb2 Mon Sep 17 00:00:00 2001
From: saurabhburade <sburade3@gmail.com>
Date: Tue, 30 Jul 2024 09:43:30 +0530
Subject: [PATCH 13/17] chore: remove unused formatDateRange

---
 src/lib/utils/date.ts | 42 ------------------------------------------
 1 file changed, 42 deletions(-)

diff --git a/src/lib/utils/date.ts b/src/lib/utils/date.ts
index 537bfe178c6..54c57803232 100644
--- a/src/lib/utils/date.ts
+++ b/src/lib/utils/date.ts
@@ -1,44 +1,2 @@
 export const dateToString = (published: Date | string) =>
   new Date(published).toISOString().split("T")[0]
-
-export const formatDateRange = (startDate: string, endDate: string) => {
-  // Parse the input dates
-  // .replace(/-/g, "/") ==> Fixes Safari Invalid date
-
-  const start = new Date(startDate.replace(/-/g, "/"))
-  const end = new Date(endDate.replace(/-/g, "/"))
-
-  // Formatter for day and month
-  // undefined :: denotes to use automatic user's locale
-  const dayMonthFormatter = new Intl.DateTimeFormat(undefined, {
-    day: "numeric",
-    month: "short",
-  })
-
-  // Extract formatted strings
-  const startDayMonth = dayMonthFormatter.format(start)
-  const endDayMonth = dayMonthFormatter.format(end)
-  const startMonth = new Intl.DateTimeFormat(undefined, {
-    month: "short",
-  }).format(start)
-  const endMonth = new Intl.DateTimeFormat(undefined, {
-    month: "short",
-  }).format(end)
-
-  // Determine the date range string
-  let dateRangeString
-  if (start.toDateString() === end.toDateString()) {
-    dateRangeString = startDayMonth // If the start and end dates are the same
-  } else if (
-    startMonth === endMonth &&
-    start.getFullYear() === end.getFullYear()
-  ) {
-    // Output as "12-14 Jul" in the user's locale format
-    dateRangeString = `${start.getDate()}-${end.getDate()} ${startMonth}`
-  } else {
-    // If different months or years, show as "12 Jul - 14 Aug"
-    dateRangeString = `${startDayMonth}-${endDayMonth}`
-  }
-
-  return dateRangeString
-}

From fa591908235e1a94fa76b629e143f4d13c8745ff Mon Sep 17 00:00:00 2001
From: saurabhburade <sburade3@gmail.com>
Date: Tue, 30 Jul 2024 09:51:08 +0530
Subject: [PATCH 14/17] chore: refactor  to

---
 src/components/EventCard.tsx          | 6 +++---
 src/components/UpcomingEventsList.tsx | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/EventCard.tsx b/src/components/EventCard.tsx
index 39f9c91bac1..b5bb6c15dad 100644
--- a/src/components/EventCard.tsx
+++ b/src/components/EventCard.tsx
@@ -17,7 +17,7 @@ const clearStyles = {
 
 export type EventCardProps = {
   title: string
-  to: string
+  href: string
   date: string
   startDate: string
   endDate: string
@@ -29,7 +29,7 @@ export type EventCardProps = {
 
 const EventCard = ({
   title,
-  to,
+  href,
   description,
   className,
   location,
@@ -119,7 +119,7 @@ const EventCard = ({
           </Box>
         </Box>
         <Box padding={4} paddingTop={0} width={"100%"}>
-          <ButtonLink href={to} width={"100%"} variant="outline">
+          <ButtonLink href={href} width={"100%"} variant="outline">
             {t("page-community-upcoming-events-view-event")}
           </ButtonLink>
         </Box>
diff --git a/src/components/UpcomingEventsList.tsx b/src/components/UpcomingEventsList.tsx
index 10754ab1f78..1bc062cc221 100644
--- a/src/components/UpcomingEventsList.tsx
+++ b/src/components/UpcomingEventsList.tsx
@@ -156,7 +156,7 @@ const UpcomingEventsList = () => {
                     <EventCard
                       key={idx}
                       title={title}
-                      to={to || href}
+                      href={to || href}
                       date={date}
                       description={formattedDetails}
                       location={location}

From 29991722b66b0d82d11b915d4d056e9184e876f4 Mon Sep 17 00:00:00 2001
From: saurabhburade <sburade3@gmail.com>
Date: Tue, 30 Jul 2024 11:11:47 +0530
Subject: [PATCH 15/17] chore: extend event description to full length

---
 src/components/EventCard.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/EventCard.tsx b/src/components/EventCard.tsx
index b5bb6c15dad..85bcf3b7aba 100644
--- a/src/components/EventCard.tsx
+++ b/src/components/EventCard.tsx
@@ -112,9 +112,7 @@ const EventCard = ({
               </Text>
             </Box>
             <Box>
-              <Text fontSize={{ base: "sm", md: "sm" }} mb={0} noOfLines={4}>
-                {description}
-              </Text>
+              <Text fontSize={{ base: "sm", md: "sm" }}>{description}</Text>
             </Box>
           </Box>
         </Box>

From 3f3593e48ffa2a59474dbe2155b97b48a7502ef9 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Wed, 31 Jul 2024 13:51:29 -0700
Subject: [PATCH 16/17] chore: review clean up

---
 src/components/EventCard.tsx | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/components/EventCard.tsx b/src/components/EventCard.tsx
index 85bcf3b7aba..2ec911c39ba 100644
--- a/src/components/EventCard.tsx
+++ b/src/components/EventCard.tsx
@@ -48,20 +48,19 @@ const EventCard = ({
     <Box
       className={className}
       position="relative"
-      marginTop={{ base: "0", md: 0 }}
+      mt="0"
       _before={clearStyles}
       _after={clearStyles}
-      width={{ base: "100%", md: "100%", xl: "100%" }}
-      height={"100%"}
+      w="full"
+      h="full"
     >
       <Flex
-        borderRadius="sm"
         border="1px solid"
         borderColor="lightBorder"
         height={"100%"}
         direction={"column"}
         justifyContent={"space-between"}
-        rounded={"4px"}
+        rounded="base"
       >
         <Box>
           <Flex
@@ -88,9 +87,9 @@ const EventCard = ({
             boxShadow="rgb(0 0 0 / 10%) 0px -1px 0px inset;"
           >
             <Image
-              src={imageUrl ? imageUrl : "/images/events/event-placeholder.png"}
+              src={imageUrl || "/images/events/event-placeholder.png"}
               alt={title}
-              width={{ base: "100%", sm: "100%" }}
+              w="full"
               height={{ base: "224px", xl: "124px" }}
               objectFit={"cover"}
               fallbackSrc="/images/events/event-placeholder.png"
@@ -102,7 +101,6 @@ const EventCard = ({
                 as="h3"
                 fontSize={{ base: "md", md: "2xl" }}
                 marginTop={0}
-                fontWeight="semibold"
                 lineHeight={1.4}
               >
                 {title}
@@ -112,7 +110,7 @@ const EventCard = ({
               </Text>
             </Box>
             <Box>
-              <Text fontSize={{ base: "sm", md: "sm" }}>{description}</Text>
+              <Text fontSize="sm">{description}</Text>
             </Box>
           </Box>
         </Box>

From f85cb38ac2a20a7da82a72f3bb2bde4bb3ca731c Mon Sep 17 00:00:00 2001
From: saurabhburade <sburade3@gmail.com>
Date: Mon, 5 Aug 2024 15:52:51 +0530
Subject: [PATCH 17/17] fix: Safari invalid date issue

---
 src/components/EventCard.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/EventCard.tsx b/src/components/EventCard.tsx
index 2ec911c39ba..e4da86a39b6 100644
--- a/src/components/EventCard.tsx
+++ b/src/components/EventCard.tsx
@@ -42,7 +42,11 @@ const EventCard = ({
   const formatedDate = new Intl.DateTimeFormat(locale, {
     day: "2-digit",
     month: "short",
-  }).formatRange(new Date(startDate), new Date(endDate))
+  }).formatRange(
+    // .replace(/-/g, "/") ==> Fixes Safari Invalid date
+    new Date(startDate?.replace(/-/g, "/")),
+    new Date(endDate?.replace(/-/g, "/"))
+  )
 
   return (
     <Box