Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: resolved calender button render issue #3466

Merged
merged 7 commits into from
Dec 21, 2024
+65 −34
Merged

fix: resolved calender button render issue #3466

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
7646868
Fixed calender button render issue
SahilDahekar Dec 12, 2024
7233788
Fixed lint issues
SahilDahekar Dec 12, 2024
8e3e8a1
Merge branch 'asyncapi:master' into issue_3465
SahilDahekar Dec 16, 2024
027c1ca
Merge branch 'asyncapi:master' into issue_3465
SahilDahekar Dec 17, 2024
bfb5a45
Merge branch 'asyncapi:master' into issue_3465
SahilDahekar Dec 21, 2024
1d1a3e2
add comment
anshgoyalevil Dec 21, 2024
2524dde
Merge branch 'issue_3465' of https://github.com/SahilDahekar/website …
anshgoyalevil Dec 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 48 additions & 0 deletions components/CommunityEvents.tsx
View file
Open in desktop
anshgoyalevil marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
@@ -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 = () => {
anshgoyalevil marked this conversation as resolved.
Show resolved Hide resolved
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>
) : (
Comment on lines +30 to +36
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Add loading state and improve error handling

The empty state handling could be improved by:

  1. Adding a loading state while events are being initialized
  2. Handling potential errors from getEvents
  3. Making the empty state message more informative
+const [loading, setLoading] = useState(true);
+const [error, setError] = useState<Error | null>(null);

+useEffect(() => {
+  try {
+    const eventData = getEvents(meetings);
+    setEvents(eventData);
+  } catch (err) {
+    setError(err as Error);
+  } finally {
+    setLoading(false);
+  }
+}, []);

-{!events || events.length === 0 ? (
+{loading ? (
+  <div className="flex content-center justify-center">
+    <Paragraph typeStyle={ParagraphTypeStyle.md}>Loading events...</Paragraph>
+  </div>
+) : error ? (
+  <div className="flex content-center justify-center">
+    <Paragraph typeStyle={ParagraphTypeStyle.md}>Error loading events: {error.message}</Paragraph>
+  </div>
+) : !events || events.length === 0 ? (

Committable suggestion skipped: line range outside the PR's diff.

<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>
Comment on lines +37 to +41
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Improve accessibility of events list

The events list needs accessibility improvements:

  1. Add ARIA labels
  2. Add semantic list structure
  3. Add keyboard navigation support
-<ul className='grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3'>
+<ul 
+  className='grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3'
+  aria-label="List of community events"
+  role="list"
+>
   {events.map((event: Event, index: number) => {
-    return <EventPostItem key={index} id={event.title} post={event} />;
+    return (
+      <li key={`${event.title}-${event.date}`} role="listitem" tabIndex={0}>
+        <EventPostItem id={event.title} post={event} />
+      </li>
+    );
   })}
 </ul>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<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>
<ul
className='grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3'
aria-label="List of community events"
role="list"
>
{events.map((event: Event, index: number) => {
return (
<li key={`${event.title}-${event.date}`} role="listitem" tabIndex={0}>
<EventPostItem id={event.title} post={event} />
</li>
);
})}
</ul>

)}
</div>
</div>
);
};

export default CommunityEvents;
10 changes: 9 additions & 1 deletion components/Meeting.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';

Expand Down Expand Up @@ -34,6 +34,14 @@ export default function Meeting({
youtube = '',
bg = ''
}: MeetingProps) {
const [isClient, setIsClient] = useState(false);

useEffect(() => {
setIsClient(true);
}, []);

if (!isClient) return null;

SahilDahekar marked this conversation as resolved.
Show resolved Hide resolved
return (
<a href={youtube} target='_blank' rel='noreferrer' data-testid='Meeting-link'>
<div
Expand Down
39 changes: 7 additions & 32 deletions pages/community/events/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand Down Expand Up @@ -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%]'>
Expand Down
2 changes: 1 addition & 1 deletion utils/getStatic.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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))
};
Expand Down
Loading