feat: create new events page (#1014)

* feat: create new events page

* chore: add params for pagination

src/data/bos-components.ts

@@ -59,6 +59,7 @@ type NetworkComponents = {
   widgetMetadata: string;
   widgetMetadataEditor: string;
   wrapper: string;
+  eventsPage: string;
 };
 
 export const componentsByNetworkId = ((): Record<NetworkId, NetworkComponents | undefined> => {
@@ -127,6 +128,7 @@ export const componentsByNetworkId = ((): Record<NetworkId, NetworkComponents |
       widgetMetadata: 'eugenethedream/widget/WidgetMetadata',
       widgetMetadataEditor: `${testnetTLA}/widget/WidgetMetadataEditor`,
       wrapper: `${testnetTLA}/widget/GatewayWrapper`,
+      eventsPage: `${testnetTLA}/widget/Events.Index`,
     },
 
     mainnet: {
@@ -188,6 +190,7 @@ export const componentsByNetworkId = ((): Record<NetworkId, NetworkComponents |
       widgetMetadata: 'mob.near/widget/WidgetMetadata',
       widgetMetadataEditor: 'near/widget/WidgetMetadataEditor',
       wrapper: 'near/widget/GatewayWrapper',
+      eventsPage: 'near/widget/Events.Index',
     },
   };
 })();

src/pages/[...arbitrary].tsx

@@ -24,7 +24,6 @@ const finiteRoutes: Record<string, string> = {
   defi: 'https://pages.near.org/defi',
   'educate-old': 'https://pages.near.org/educate-old',
   education: 'https://pages.near.org/education',
-  events: 'https://pages.near.org/events',
   examples: 'https://pages.near.org/examples',
   lisbon: 'https://pages.near.org/lisbon',
   meetings: 'https://pages.near.org/meetings',

src/pages/events.tsx

@@ -0,0 +1,26 @@
+import { ComponentWrapperPage } from '@/components/near-org/ComponentWrapperPage';
+import { useBosComponents } from '@/hooks/useBosComponents';
+import { useDefaultLayout } from '@/hooks/useLayout';
+import type { NextPageWithLayout } from '@/utils/types';
+
+import { fetchEventsList } from '@/utils/events';
+
+const EventsPage: NextPageWithLayout = () => {
+  const components = useBosComponents();
+  return (
+    <ComponentWrapperPage
+      src={components.eventsPage}
+      meta={{
+        title: 'NEAR | Events',
+        description: 'Join NEAR for one of our upcoming in-person, virtual, or hybrid events.',
+      }}
+      componentProps={{
+        fetchEventsList,
+      }}
+    />
+  );
+};
+
+EventsPage.getLayout = useDefaultLayout;
+
+export default EventsPage;

src/utils/config.ts

@@ -64,6 +64,8 @@ export const notificationsGatewayUrl = process.env.NEXT_PUBLIC_NOTIFICATIONS_GAT
 export const notificationsLocalStorageKey = 'push-notifications-v0';
 export const localStorageAccountIdKey = 'near-social-vm:v01::accountId:';
 export const isLocalEnvironment = process.env.NEXT_PUBLIC_LOCAL_ENVIRONMENT === 'true';
+export const eventsApiUrl = process.env.NEXT_PUBLIC_EVENTS_API_URL;
+export const eventsApiKey = process.env.NEXT_PUBLIC_EVENTS_API_KEY;
 
 export const commitModalBypassAuthorIds = (process.env.NEXT_PUBLIC_COMMIT_MODAL_BYPASS_AUTHOR_IDS ?? '')
   .split(',')

src/utils/events.ts

@@ -0,0 +1,37 @@
+import { eventsApiUrl, eventsApiKey } from './config';
+
+type EventData = {
+  api_id: string;
+  event: {
+    api_id: string;
+    name: string;
+    start_at: string;
+    cover_url: string;
+    url: string;
+  };
+};
+
+type EventsListData = {
+  entries: EventData[];
+  hasMore: boolean;
+};
+
+export const fetchEventsList = async (limit: number, offset: number): Promise<EventsListData> => {
+  const queryLimit = `pagination_limit=${limit ?? 10}`;
+  const queryOffset = offset ? `pagination_offset=${offset}` : '';
+  const queryParams = `${queryLimit}${queryOffset ? `&${queryOffset}` : ''}`;
+  const res = await fetch(`${eventsApiUrl}/calendar/list-events?${queryParams}`, {
+    method: 'GET',
+    headers: {
+      accept: 'application/json',
+      'x-luma-api-key': eventsApiKey as string,
+    },
+  });
+
+  if (!res.ok) {
+    throw new Error('Failed to fetch data');
+  }
+
+  const data = (await res.json()) as { entries: EventData[]; has_more: boolean };
+  return { entries: data.entries, hasMore: data.has_more };
+};