fix: rendering issue with few components using next-i18n on community pages

components/CommunityEvents.tsx

@@ -0,0 +1,45 @@
+import React, { useState } from 'react';
+import EventFilter from '@/components/navigation/EventFilter';
+import EventPostItem from '@/components/navigation/EventPostItem';
+import type { Event } from '@/types/pages/community/Community';
+import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading';
+import { ParagraphTypeStyle } from '@/types/typography/Paragraph';
+import Heading from '@/components/typography/Heading';
+import Paragraph from '@/components/typography/Paragraph';
+import meetings from '@/config/meetings.json';
+import { getEvents } from '@/utils/staticHelpers';
+
+
+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;

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 { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading';
 import { ParagraphTypeStyle } from '@/types/typography/Paragraph';
 
 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';
+import CommunityEvents from '@/components/CommunityEvents';
+
+import { makeStaticProps } from '@/utils/getStatic';
+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%]'>

pages/community/index.tsx

@@ -13,6 +13,11 @@ import NewsletterSubscribe from '../../components/NewsletterSubscribe';
 import Heading from '../../components/typography/Heading';
 import eventsData from '../../config/meetings.json';
 import { getEvents } from '../../utils/staticHelpers';
+import { makeStaticProps } from '@/utils/getStatic';
+
+const getStaticProps = makeStaticProps(['common']);
+
+export { getStaticProps };
 
 interface Event {
   title: string;

pages/community/tsc.tsx

@@ -1,5 +1,4 @@
 import { sortBy } from 'lodash';
-import React, { useState } from 'react';
 
 import type { Tsc } from '@/types/pages/community/Community';
 
@@ -10,6 +9,11 @@ import GenericLayout from '../../components/layout/GenericLayout';
 import NewsletterSubscribe from '../../components/NewsletterSubscribe';
 import TextLink from '../../components/typography/TextLink';
 import TSCMembersList from '../../config/MAINTAINERS.json';
+import { makeStaticProps } from '@/utils/getStatic';
+
+const getStaticProps = makeStaticProps(['common']);
+
+export { getStaticProps };
 
 interface SocialLinkProps {
   href: string;
@@ -66,11 +70,10 @@ function addAdditionalUserInfo(user: Tsc) {
  * @returns The Twitter SVG component.
  */
 function TwitterSVG() {
-  const [isHovered, setIsHovered] = useState(false);
 
   return (
-    <div className='size-5' onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
-      <IconTwitter className={isHovered ? 'hover:fill-black' : ''} />
+    <div className='size-5'>
+      <IconTwitter className={'hover:fill-black'} />
     </div>
   );
 }
@@ -81,11 +84,10 @@ function TwitterSVG() {
  * @returns The GitHub SVG component.
  */
 function GitHubSVG() {
-  const [isHovered, setIsHovered] = useState(false);
 
   return (
-    <div className='size-5' onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
-      <IconGithub className={isHovered ? 'hover:fill-black' : ''} />
+    <div className='size-5'>
+      <IconGithub className={'hover:fill-black'} />
     </div>
   );
 }
@@ -96,12 +98,11 @@ function GitHubSVG() {
  * @returns The LinkedIn SVG component.
  */
 function LinkedInSVG() {
-  const [isHovered, setIsHovered] = useState(false);
 
   return (
-    <div className='size-5' onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
+    <div className='size-5'>
       {/* Use the imported SVG icon component */}
-      <IconLinkedIn className={isHovered ? 'hover:fill-linkedin' : ''} />
+      <IconLinkedIn className={'hover:fill-linkedin'} />
     </div>
   );
 }

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))
   };