Merge pull request #723 from near/feat/sync-home-page-events

Sync Home Page Events (2/2)

src/NearOrg/HomePage.jsx

@@ -1,3 +1,5 @@
+let { fetchEventsList } = props;
+
 const ipfsImages = {
   apps: {
     bosAllStars: "bafkreicgnsizdxoc436tbln3ucqo45hdauumd7if4gltrqh3tbxgosi3q4",
@@ -1193,6 +1195,7 @@ return (
                     ))}
                   </>
                 ),
+                fetchEventsList,
               }}
             />
           </Grid>

src/NearOrg/LatestEvents.jsx

@@ -1,31 +1,60 @@
-/*
-  There's currently no way of dynamically fetching events due to the data being stored in WordPress.
-  So for now we have to hard code the data from this page:
-  https://near.org/events
-*/
-
-const events = [
-  {
-    title: "ETHGlobal Paris",
-    date: "Jul 21 - Jul 23, 2023",
-    location: "Paris, France",
-    thumbnail: "https://pages.near.org/wp-content/uploads/2022/11/roadmap22-23-social-600x333.png",
-    url: "https://ethglobal.com/events/paris2023",
-  },
-  {
-    title: "NEAR APAC",
-    date: "Sep 8 – Sep 12, 2023",
-    location: "Ho Chi Minh, Vietnam",
-    thumbnail: "https://pages.near.org/wp-content/uploads/2023/06/Screenshot-2023-06-06-at-4.06.38-PM-600x333.png",
-    url: "https://nearapac.org/",
-  },
-  {
-    title: "Nearcon 2023",
-    date: "Nov 7 – Nov 10, 2023",
-    location: "Lisbon, Portugal",
-    thumbnail: "https://pages.near.org/wp-content/uploads/2023/06/Screenshot-2023-06-06-at-4.11.07-PM-600x333.png",
-    url: "https://nearcon.org/",
-  },
-];
+let { fetchEventsList } = props;
+
+const LIMIT = 3;
+const [events, setEvents] = useState([]);
+
+const fetchEvents = () => {
+  fetchEventsList()
+    .then((eventsData) => {
+      const { entries: events } = eventsData;
+      const sortedEvents = [...events]
+        .sort((a, b) => new Date(a.event.start_at) - new Date(b.event.start_at))
+        .slice(0, LIMIT);
+      const mappedEvents = sortedEvents.map((item) => {
+        return {
+          date: formatDate(item.event.start_at, item.event.end_at),
+          location: formatLocation(item.event.geo_address_json),
+          thumbnail: item.event.cover_url,
+          title: item.event.name,
+          url: item.event.url,
+        };
+      });
+      setEvents(mappedEvents);
+    })
+    .catch((error) => {
+      console.error(error);
+    });
+};
+
+const formatDate = (startAt, endAt) => {
+  // Example Format: "Jul 21 - Jul 23, 2023"
+
+  const startAtDate = new Date(startAt);
+  const endAtDate = new Date(endAt);
+
+  const startAtDateFormatted = startAtDate.toLocaleDateString(undefined, {
+    month: "short",
+    day: "numeric",
+  });
+
+  const endAtDateFormatted = endAtDate.toLocaleDateString(undefined, {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+  });
+
+  return `${startAtDateFormatted} - ${endAtDateFormatted}`;
+};
+
+const formatLocation = (location) => {
+  if (location.city || location.city_state) {
+    return `${location.city ?? location.city_state}, ${location.country}`;
+  }
+  return location.address;
+};
+
+useEffect(() => {
+  fetchEvents();
+}, []);
 
 return props.children(events);