fix: resolved calender button render issue (#3466)

Co-authored-by: Ansh Goyal <[email protected]>

components/CommunityEvents.tsx

@@ -0,0 +1,48 @@
+import React, { useState } from 'react';
+
+import EventFilter from '@/components/navigation/EventFilter';
+import EventPostItem from '@/components/navigation/EventPostItem';
+import Heading from '@/components/typography/Heading';
+import Paragraph from '@/components/typography/Paragraph';
+import meetings from '@/config/meetings.json';
+import type { Event } from '@/types/pages/community/Community';
+import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading';
+import { ParagraphTypeStyle } from '@/types/typography/Paragraph';
+import { getEvents } from '@/utils/staticHelpers';
+
+/**
+ * CommunityEvents component for displaying all events
+ */
+const CommunityEvents = () => {
+  const [events, setEvents] = useState(getEvents(meetings));
+
+  return (
+    <div className='mt-20'>
+      <div className='items-center justify-between sm:flex'>
+        <Heading level={HeadingLevel.h2} typeStyle={HeadingTypeStyle.md}>
+          All Events
+        </Heading>
+        <div className='mt-5 sm:mt-0'>
+          <EventFilter data={meetings} setData={setEvents} />
+        </div>
+      </div>
+      <div className='mt-10'>
+        {!events || events.length === 0 ? (
+          <div className='flex content-center justify-center'>
+            <Paragraph typeStyle={ParagraphTypeStyle.md} className='mx-auto mt-5 max-w-2xl'>
+              No Events. Check back later!
+            </Paragraph>
+          </div>
+        ) : (
+          <ul className='grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3'>
+            {events.map((event: Event, index: number) => {
+              return <EventPostItem key={index} id={event.title} post={event} />;
+            })}
+          </ul>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default CommunityEvents;

components/Meeting.tsx

@@ -1,5 +1,5 @@
 import { ArrowRightIcon } from '@heroicons/react/outline';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { ParagraphTypeStyle } from '@/types/typography/Paragraph';
 
@@ -34,6 +34,14 @@ export default function Meeting({
   youtube = '',
   bg = ''
 }: MeetingProps) {
+  const [isClient, setIsClient] = useState(false);
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  if (!isClient) return null;
+
   return (
     <a href={youtube} target='_blank' rel='noreferrer' data-testid='Meeting-link'>
       <div

pages/community/events/index.tsx

@@ -1,30 +1,29 @@
 /* eslint-disable react/no-unescaped-entities */
 import { ArrowRightIcon } from '@heroicons/react/outline';
-import React, { useState } from 'react';
 
-import type { Event } from '@/types/pages/community/Community';
+import CommunityEvents from '@/components/CommunityEvents';
 import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading';
 import { ParagraphTypeStyle } from '@/types/typography/Paragraph';
+import { makeStaticProps } from '@/utils/getStatic';
 
 import GoogleCalendarButton from '../../../components/buttons/GoogleCalendarButton';
 import ICSFileButton from '../../../components/buttons/ICSFileButton';
 import GenericLayout from '../../../components/layout/GenericLayout';
 import Meeting from '../../../components/Meeting';
-import EventFilter from '../../../components/navigation/EventFilter';
-import EventPostItem from '../../../components/navigation/EventPostItem';
 import NewsletterSubscribe from '../../../components/NewsletterSubscribe';
 import Heading from '../../../components/typography/Heading';
 import Paragraph from '../../../components/typography/Paragraph';
 import TextLink from '../../../components/typography/TextLink';
-import meetings from '../../../config/meetings.json';
-import { getEvents } from '../../../utils/staticHelpers';
+
+const getStaticProps = makeStaticProps(['landing-page', 'footer', 'common']);
+
+export { getStaticProps };
 
 /**
  * @description This is the events page which displays all the events and meetings.
  */
 export default function EventIndex() {
   const image = '/img/social/community-events.webp';
-  const [events, setEvents] = useState(getEvents(meetings));
 
   return (
     <GenericLayout title='AsyncAPI events' description='Our catalogs of events and meetups' image={image} wide>
@@ -89,31 +88,7 @@ export default function EventIndex() {
           </div>
         </div>
       </div>
-      <div className='mt-20'>
-        <div className='items-center justify-between sm:flex'>
-          <Heading level={HeadingLevel.h2} typeStyle={HeadingTypeStyle.md}>
-            All Events
-          </Heading>
-          <div className='mt-5 sm:mt-0'>
-            <EventFilter data={meetings} setData={setEvents} />
-          </div>
-        </div>
-        <div className='mt-10'>
-          {!events || events.length === 0 ? (
-            <div className='flex content-center justify-center'>
-              <Paragraph typeStyle={ParagraphTypeStyle.md} className='mx-auto mt-5 max-w-2xl'>
-                No Events. Check back later!
-              </Paragraph>
-            </div>
-          ) : (
-            <ul className='grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3'>
-              {events.map((event: Event, index: number) => {
-                return <EventPostItem key={index} id={event.title} post={event} />;
-              })}
-            </ul>
-          )}
-        </div>
-      </div>
+      <CommunityEvents />
       <div className='mt-24'>
         <div className='lg:flex lg:justify-between' data-testid='EventTypesCard'>
           <div className='lg:w-[30%]'>

utils/getStatic.ts

@@ -29,7 +29,7 @@ export const getStaticPaths = () => ({
  * @returns An object containing the internationalization props.
  */
 export async function getI18nProps(ctx: any, ns = ['common']) {
-  const locale = ctx?.params?.lang;
+  const locale = ctx?.params?.lang ? ctx.params.lang : 'en';
   const props = {
     ...(await serverSideTranslations(locale, ns))
   };