feat: migrate community page folder and their related components to typescript

components/Calendar.tsx

@@ -1,3 +1,4 @@
+import moment from 'moment';
 import { twMerge } from 'tailwind-merge';
 
 import type { IEvent } from '@/types/event';
@@ -38,13 +39,13 @@ export default function Calendar({ className = '', size }: ICalendarProps) {
           <li key={index} data-testid='Calendar-list-item'>
             <a href={event.url} className='mb-1 mt-2 flex grow flex-col items-start sm:flex-row sm:items-center'>
               <div className='inline-flex h-12 min-w-12 flex-row rounded-full bg-pink-500 font-bold text-white'>
-                <span className='flex-1 self-center text-center'>{event.date.format('D')}</span>
+                <span className='flex-1 self-center text-center'>{moment(event.date).format('D')}</span>
               </div>
               <div className='grow text-left sm:mt-0 sm:pl-6'>
                 <h2 className='title-font text-xl font-medium text-gray-900 hover:text-gray-500'>{event.title}</h2>
                 <p className='text-gray-600'>
-                  {event.date.local().format('LLLL')} UTC
-                  {event.date.local().format('Z')}
+                  {moment(event.date).local().format('LLLL')} UTC
+                  {moment(event.date).local().format('Z')}
                 </p>
               </div>
             </a>

components/Meeting.tsx

@@ -0,0 +1,69 @@
+import { ArrowRightIcon } from '@heroicons/react/outline';
+
+import { ParagraphTypeStyle } from '@/types/typography/Paragraph';
+
+import Paragraph from './typography/Paragraph';
+import TextLink from './typography/TextLink';
+
+interface MeetingProps {
+  name?: string;
+  purpose?: string;
+  host?: string;
+  hostProfile?: string;
+  youtube?: string;
+  bg?: string;
+}
+
+/**
+ * @description This is the meeting card component.
+ *
+ * @param {MeetingProps} props - The props of the component.
+ * @param {string} props.name - The name of the meeting.
+ * @param {string} props.purpose - The purpose of the meeting.
+ * @param {string} props.host - The host of the meeting.
+ * @param {string} props.hostProfile - The host profile of the meeting.
+ * @param {string} props.youtube - The youtube link of the meeting.
+ * @param {string} props.bg - The background color of the meeting.
+ */
+export default function Meeting({
+  name = '',
+  purpose = '',
+  host = '',
+  hostProfile = '',
+  youtube = '',
+  bg = ''
+}: MeetingProps) {
+  return (
+    <a href={youtube} target='_blank' rel='noreferrer' data-testid='Meeting-link'>
+      <div
+        className={`meeting-card bg-overflow-hidden flex h-[300px] w-full cursor-pointer flex-col justify-between p-4 hover:bg-dark hover:text-white lg:w-[300px] ${bg}`}
+      >
+        <div>
+          <h3 className='text-xl' data-testid='Meeting-heading'>
+            {name}
+          </h3>
+          <div data-testid='Meeting-paragraph'>
+            <Paragraph typeStyle={ParagraphTypeStyle.sm} className='my-4' textColor='white'>
+              {purpose}
+            </Paragraph>
+          </div>
+        </div>
+        <div className='flex items-center justify-between'>
+          <Paragraph typeStyle={ParagraphTypeStyle.md} className='my-4'>
+            <strong data-testid='Meeting-host'>Host:&nbsp;</strong>
+            {hostProfile ? (
+              <TextLink href={hostProfile} target='_blank' className='hover:text-primary-500'>
+                {host}
+              </TextLink>
+            ) : (
+              `${host}.`
+            )}
+          </Paragraph>
+          <div>
+            <ArrowRightIcon className='ml-3 w-[20px] text-slate-400' />
+          </div>
+        </div>
+      </div>
+    </a>
+  );
+}

components/NewsletterSubscribe.tsx

@@ -36,7 +36,7 @@ interface NewsletterSubscribeProps {
  * @param {string} props.type - The type of subscription.
  */
 export default function NewsletterSubscribe({
-  className = 'p-8 text-center',
+  className = 'p-8 text-center text-black',
   dark = false,
   title = 'Subscribe to our newsletter to receive news about AsyncAPI.',
   subtitle = 'We respect your inbox. No spam, promise ✌️',

components/buttons/GithubButton.tsx

@@ -1,10 +1,9 @@
 import { ButtonIconPosition, ButtonSize } from '@/types/components/buttons/ButtonPropsType';
 
+import { useTranslation } from '../../utils/i18n';
 import IconGithub from '../icons/Github';
 import Button from './Button';
 import type { IButtonDefaultProps } from './types';
-// TODO: add this again when we have i18n
-// import { useTranslation } from '../../lib/i18n'
 
 interface IGithubButtonProps extends IButtonDefaultProps {
   inNav?: boolean;
@@ -26,14 +25,11 @@ export default function GithubButton({
   className,
   inNav
 }: IGithubButtonProps) {
-  // TODO: add this again when we have i18n
-  // const { t } = useTranslation("common");
+  const { t } = useTranslation('common');
 
   return (
     <Button
-      // TODO: add this again when we have i18n
-      // text={t(text)}
-      text={text}
+      text={t(text)}
       icon={<IconGithub className='-mt-1 inline-block size-6' />}
       href={href}
       iconPosition={iconPosition}

components/buttons/GoogleCalendarButton.tsx

@@ -1,10 +1,9 @@
 import { ButtonIconPosition } from '@/types/components/buttons/ButtonPropsType';
 
+import { useTranslation } from '../../utils/i18n';
 import IconGoogleCalendar from '../icons/GoogleCalendar';
 import Button from './Button';
 import type { IButtonDefaultProps } from './types';
-// TODO: add this again when we have i18n
-// import { useTranslation } from '../../lib/i18n';
 
 interface IGoogleCalendarButtonProps extends IButtonDefaultProps {}
 
@@ -23,14 +22,11 @@ export default function GoogleCalendarButton({
   iconPosition = ButtonIconPosition.LEFT,
   className
 }: IGoogleCalendarButtonProps) {
-  // TODO: add this again when we have i18n
-  // const { t } = useTranslation('common');
+  const { t } = useTranslation('common');
 
   return (
     <Button
-      // TODO: add this again when we have i18n
-      // text={t(text)}
-      text={text}
+      text={t(text)}
       icon={<IconGoogleCalendar />}
       href={href}
       iconPosition={iconPosition}

components/buttons/ICSFileButton.tsx

@@ -1,9 +1,8 @@
 import { ButtonIconPosition } from '@/types/components/buttons/ButtonPropsType';
 
+import { useTranslation } from '../../utils/i18n';
 import IconCalendar from '../icons/Calendar';
 import Button from './Button';
-// TODO: add this again when we have i18n
-// import { useTranslation } from '../../lib/i18n';
 import type { IButtonDefaultProps } from './types';
 
 interface IICSFButtonProps extends IButtonDefaultProps {}
@@ -23,14 +22,11 @@ export default function ICSFButton({
   iconPosition = ButtonIconPosition.LEFT,
   className
 }: IICSFButtonProps) {
-  // TODO: add this again when we have i18n
-  // const { t } = useTranslation('common');
+  const { t } = useTranslation('common');
 
   return (
     <Button
-      // TODO: add this again when we have i18n
-      // text={t(text)}
-      text={text}
+      text={t(text)}
       icon={<IconCalendar />}
       href={href}
       iconPosition={iconPosition}

components/buttons/SubscribeButton.tsx

@@ -1,8 +1,8 @@
 import { ButtonIconPosition } from '@/types/components/buttons/ButtonPropsType';
 
+import { useTranslation } from '../../utils/i18n';
 import IconSubscribe from '../icons/Subscribe';
 import Button from './Button';
-// import { useTranslation } from '../../lib/i18n';
 import type { IButtonDefaultProps } from './types';
 
 interface IGoogleCalendarButtonProps extends IButtonDefaultProps {}
@@ -22,13 +22,11 @@ export default function GoogleCalendarButton({
   iconPosition = ButtonIconPosition.LEFT,
   className
 }: IGoogleCalendarButtonProps) {
-  // const { t } = useTranslation('common');
+  const { t } = useTranslation('common');
 
   return (
     <Button
-      // TODO: add this again when we have i18n
-      // text={t(text)}
-      text={text}
+      text={t(text)}
       icon={<IconSubscribe />}
       href={href}
       iconPosition={iconPosition}

components/community/Card.tsx

@@ -12,13 +12,13 @@ import Paragraph from '../typography/Paragraph';
 interface CardProps {
   icon: string;
   tagline: string;
-  taglineBg: string;
+  taglineBg?: string;
   type?: CardType;
   heading: string;
   description: string;
   bg: string;
-  btnText: string;
-  btnBg: string;
+  btnText?: string;
+  btnBg?: string;
   link: string;
 }
 
@@ -38,13 +38,13 @@ interface CardProps {
 export default function Card({
   icon,
   tagline,
-  taglineBg,
+  taglineBg = '',
   type = CardType.LARGE,
   heading,
   description,
   bg,
-  btnText,
-  btnBg,
+  btnText = '',
+  btnBg = '',
   link
 }: CardProps) {
   if (type === CardType.SMALL) {
@@ -63,7 +63,7 @@ export default function Card({
             </Heading>
           </div>
           <div className='mt-2' data-testid='Card-desc'>
-            <Paragraph textColor={bg ? 'text-black' : 'text-gray-600'} typeStyle={ParagraphTypeStyle.sm}>
+            <Paragraph textColor={bg === 'bg-white' ? 'text-gray-600' : 'text-black'} typeStyle={ParagraphTypeStyle.sm}>
               {description}
             </Paragraph>
           </div>
@@ -81,7 +81,7 @@ export default function Card({
       data-testid='Card-lg-bg'
     >
       <div
-        className={`flex w-min justify-between rounded-xl p-2 text-center text-xs ${taglineBg}`}
+        className={`flex w-min justify-between rounded-xl p-2 text-center text-xs text-black ${taglineBg}`}
         data-testid='Card-lg-tagline'
       >
         <span>{icon}</span> <span className='ml-[5px]'>{tagline}</span>

components/community/Header.tsx

@@ -36,7 +36,7 @@ export default function Header({ className = '' }: HeaderProps) {
           level={HeadingLevel.h2}
           typeStyle={HeadingTypeStyle.bodyMd}
           textColor='text-gray-700'
-          className='text-sm text-slate-500'
+          className='text-slate-500'
         >
           We're an OSS community that's passionate about AsyncAPI. Join us in building the future of Event
           Driven APIs by asking questions, sharing ideas, and building connections.

components/community/HomeCard.tsx

@@ -42,7 +42,7 @@ export default function HomeCards({ headline, title, description, btnText, link,
             level={HeadingLevel.h2}
             typeStyle={HeadingTypeStyle.bodyLg}
             textColor='text-gray-700'
-            className='mt-10 text-sm text-slate-500'
+            className='mt-10 text-slate-500'
           >
             {description}
           </Heading>

components/dashboard/Button.tsx

@@ -0,0 +1,24 @@
+interface ButtonProps {
+  text: string;
+  onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}
+
+/**
+ * @description Button component.
+ *
+ * @param {ButtonProps} props - The props of the component.
+ * @param {string} props.text - The text of the button.
+ * @param {Function} props.onClick - The function to be called when the button is clicked.
+ */
+function Button({ text, onClick }: ButtonProps) {
+  return (
+    <button
+      onClick={onClick}
+      className='rounded-r bg-gray-300 px-4 py-2 text-sm font-semibold text-gray-800 hover:bg-gray-400'
+    >
+      {text}
+    </button>
+  );
+}
+
+export default Button;

components/dashboard/GoodFirstIssues.tsx

@@ -0,0 +1,84 @@
+import { useState } from 'react';
+
+import type { Issue } from '@/types/components/dashboard/TableTypes';
+
+import GoodFirstIssuesTip from './GoodFirstIssuesTip';
+import Filters from './table/Filters';
+import Table from './table/Table';
+
+interface FiltersType {
+  selectedRepo: string;
+  selectedArea: string;
+}
+
+interface GoodFirstIssuesProps {
+  issues: Issue[];
+}
+
+/**
+ * @description Filter issues based on selected repo and area.
+ *
+ * @param {Issue[]} issues - The list of issues to filter.
+ * @param {FiltersType} filters - The filters to apply.
+ * @returns {Issue[]} The filtered list of issues.
+ */
+export function filterIssues(issues: Issue[], filters: FiltersType): Issue[] {
+  let result = issues;
+
+  if (filters.selectedRepo !== 'Repository - All') {
+    result = result.filter((issue) => issue.repo === filters.selectedRepo);
+  }
+  if (filters.selectedArea !== 'Area - All') {
+    result = result.filter((issue) => issue.area === filters.selectedArea);
+  }
+
+  return result;
+}
+
+/**
+ * @description Component that displays a list of good first issues.
+ *
+ * @param {GoodFirstIssuesProps} props - The props for the component.
+ * @param {Issue[]} props.issues - The list of good first issues.
+ */
+export default function GoodFirstIssues({ issues }: GoodFirstIssuesProps) {
+  const [selectedRepo, setSelectedRepo] = useState('All');
+  const [selectedArea, setSelectedArea] = useState('All');
+
+  // Get current issues
+
+  let filteredIssues = issues;
+
+  const allIssues = issues;
+
+  if (selectedRepo !== 'All') {
+    filteredIssues = filteredIssues.filter((issue) => issue.repo === selectedRepo);
+  }
+  if (selectedArea !== 'All') {
+    filteredIssues = filteredIssues.filter((issue) => issue.area === selectedArea);
+  }
+
+  return (
+    <Table
+      title={
+        <div className='flex gap-3' data-testid='GoodFirstIssues-main-div'>
+          <span>Good First Issues</span>
+          <GoodFirstIssuesTip />
+          <Filters
+            className='ml-auto'
+            data-testid='GoodFirstIssues-filter-component'
+            issues={filteredIssues}
+            allIssues={allIssues}
+            setSelectedRepo={setSelectedRepo}
+            setSelectedArea={setSelectedArea}
+            selectedArea={selectedArea}
+            selectedRepo={selectedRepo}
+          />
+        </div>
+      }
+      data={filteredIssues.slice(0, 24)}
+      className='grow'
+      listClassName='lg:grid-cols-2'
+    />
+  );
+}