Merge pull request #12000 from ethereum/add2024Events

Add 2024 community events and refactor to typescript

Author: corwintines

src/components/UpcomingEventsList.tsx

@@ -1,39 +1,30 @@
 import { useEffect, useState } from "react"
+import { useTranslation } from "next-i18next"
 import { Box } from "@chakra-ui/react"
 
-import Translation from "@/components/Translation"
+import type { CommunityConference } from "@/lib/types"
+
+import { Button } from "@/components/Buttons"
+import EventCard from "@/components/EventCard"
+import InfoBanner from "@/components/InfoBanner"
+import InlineLink from "@/components/Link"
 
 import { trackCustomEvent } from "@/lib/utils/matomo"
 
-import events from "../data/community-events.json"
-
-import { Button } from "./Buttons"
-import EventCard from "./EventCard"
-import InfoBanner from "./InfoBanner"
-import InlineLink from "./Link"
-
-interface ICommunityEventData {
-  title: string
-  to: string
-  sponsor: string | null
-  location: string
-  description: string
-  startDate: string
-  endDate: string
-}
+import communityConferences from "@/data/community-events"
 
-interface IOrderedUpcomingEventType extends ICommunityEventData {
+type OrderedUpcomingEvent = CommunityConference & {
   date: string
   formattedDetails: string
 }
 
-const UpcomingEventsList: React.FC = () => {
+const UpcomingEventsList = () => {
+  const { t } = useTranslation("page-community")
   const eventsPerLoad = 10
   const [orderedUpcomingEvents, setOrderedUpcomingEvents] = useState<
-    Array<IOrderedUpcomingEventType>
+    OrderedUpcomingEvent[]
   >([])
   const [maxRange, setMaxRange] = useState<number>(eventsPerLoad)
-  const [isVisible, setIsVisible] = useState<boolean>(true)
 
   // Create Date object from each YYYY-MM-DD JSON date string
   const dateParse = (dateString: string): Date => {
@@ -46,7 +37,7 @@ const UpcomingEventsList: React.FC = () => {
   }
 
   useEffect(() => {
-    const eventsList: Array<ICommunityEventData> = [...events]
+    const eventsList: CommunityConference[] = [...communityConferences]
     const yesterday = new Date()
     yesterday.setDate(yesterday.getDate() - 1)
 
@@ -70,9 +61,7 @@ const UpcomingEventsList: React.FC = () => {
               event.endDate
             ).toLocaleDateString()}`
 
-      const details = `${event.sponsor ? "(" + event.sponsor + ")" : ""} ${
-        event.description
-      }`
+      const details = `${event.description}`
 
       return {
         ...event,
@@ -86,7 +75,6 @@ const UpcomingEventsList: React.FC = () => {
 
   const loadMoreEvents = () => {
     setMaxRange((counter) => counter + eventsPerLoad)
-    setIsVisible(maxRange + eventsPerLoad <= orderedUpcomingEvents.length)
     trackCustomEvent({
       eventCategory: "more events button",
       eventAction: "click",
@@ -97,9 +85,9 @@ const UpcomingEventsList: React.FC = () => {
   if (orderedUpcomingEvents.length === 0) {
     return (
       <InfoBanner emoji=":information_source:">
-        <Translation id="page-community-upcoming-events-no-events" />{" "}
+        {t("page-community-upcoming-events-no-events")}{" "}
         <InlineLink to="https://github.com/ethereum/ethereum-org-website/blob/dev/src/data/community-events.json">
-          <Translation id="page-community:page-community-please-add-to-page" />
+          {t("page-community-please-add-to-page")}
         </InlineLink>
       </InfoBanner>
     )
@@ -151,9 +139,9 @@ const UpcomingEventsList: React.FC = () => {
         maxWidth="620px"
         marginTop="5"
       >
-        {isVisible && (
+        {maxRange <= orderedUpcomingEvents.length && (
           <Button onClick={loadMoreEvents}>
-            <Translation id="page-community:page-community-upcoming-events-load-more" />
+            {t("page-community-upcoming-events-load-more")}
           </Button>
         )}
       </Box>