diff --git a/e2e/events.spec.ts b/e2e/events.spec.ts new file mode 100644 index 0000000..b3d218e --- /dev/null +++ b/e2e/events.spec.ts @@ -0,0 +1,19 @@ +import { test, expect } from '@playwright/test'; + +test.beforeEach(async ({ page }) => { + await page.goto('http://localhost:3000'); +}); + +test.describe('Test if see more link is clickable', () => { + test('should navigate to the correct URL when See More is clicked', async ({ + page, + }) => { + const [newPage] = await Promise.all([ + page.waitForEvent('popup'), + page.locator('#events >> text="See More"').click(), + ]); + await expect(newPage).toHaveURL( + 'https://kommunity.com/reactjs-developer-community-kenya-reactdevske/events' + ); + }); +}); diff --git a/public/images/community_sessions.png b/public/images/community_sessions.png new file mode 100644 index 0000000..2ca94b1 Binary files /dev/null and b/public/images/community_sessions.png differ diff --git a/public/images/no-image.jpeg b/public/images/no-image.jpeg new file mode 100644 index 0000000..ca3bd1d Binary files /dev/null and b/public/images/no-image.jpeg differ diff --git a/public/images/physical_meetup.jpg b/public/images/physical_meetup.jpg new file mode 100644 index 0000000..5467629 Binary files /dev/null and b/public/images/physical_meetup.jpg differ diff --git a/public/images/weekly_standups.png b/public/images/weekly_standups.png new file mode 100644 index 0000000..5dc1e40 Binary files /dev/null and b/public/images/weekly_standups.png differ diff --git a/src/components/EventsDisplay/DisplayRC.tsx b/src/components/Events/DisplayRC.tsx similarity index 57% rename from src/components/EventsDisplay/DisplayRC.tsx rename to src/components/Events/DisplayRC.tsx index a76d360..10ce297 100644 --- a/src/components/EventsDisplay/DisplayRC.tsx +++ b/src/components/Events/DisplayRC.tsx @@ -2,23 +2,22 @@ import React, { useState } from 'react'; import Image from 'next/image'; import { booleanFilter } from '../../util/booleanFilter'; import type { EventData } from '../../types'; +import Link from 'next/link'; type DisplayRCProps = EventData; export default function DisplayRC({ - name, - src, - event, + title, + image_url: src, description, - venue, - date, + target, }: DisplayRCProps) { const [loading, setLoading] = useState(true); return ( -
-
+
+
setLoading(false)} />
-

{name}

- {event ? ( -
-

Venue: {venue}

-

Date: {date}

-
- ) : ( -

{description}

- )} +

+ + {title} + +

+

{description}

); } diff --git a/src/components/Events/Events.tsx b/src/components/Events/Events.tsx new file mode 100644 index 0000000..da4bd74 --- /dev/null +++ b/src/components/Events/Events.tsx @@ -0,0 +1,88 @@ +import Link from 'next/link'; +import React from 'react'; +import type { EventData } from '../../types/index'; +import DisplayRC from './DisplayRC'; + +const events: EventData[] = [ + { + id: 1, + title: 'Physical Meetups', + description: 'Physical meetups where we share, learn and network.', + image_url: '/images/physical_meetup.jpg', + target: + 'https://kommunity.com/reactjs-developer-community-kenya-reactdevske/events', + }, + { + id: 2, + title: 'Weekly Online Standups', + description: + 'Weekly open calls in the community’s Telegram group discussing industry-related topics.', + image_url: '/images/weekly_standups.png', + target: 'https://bit.ly/joinreactdevske', + }, + { + id: 3, + title: 'Community Power Sessions', + description: + 'Community members meet and share technical concepts with other members of the community.', + image_url: '/images/community_sessions.png', + target: 'https://www.youtube.com/channel/UC9_eVcPBk4T-DcZLHpQfy4w/videos', + }, + { + id: 4, + title: 'Joint Meetups', + description: 'Meetups hosted in collaboration with other tech communities.', + image_url: 'https://bit.ly/placeholder-img', + target: + 'https://kommunity.com/reactjs-developer-community-kenya-reactdevske/events', + }, + { + id: 5, + title: 'Monthly Online Standups', + description: + 'Monthly open calls on Google Meet bringing together people from different communities.', + image_url: '/images/physical_meetup.jpg', + target: + 'https://kommunity.com/reactjs-developer-community-kenya-reactdevske/events', + }, + { + id: 6, + title: 'Community Challenges', + description: + 'We organize open source challenges to keep the community engaged.', + image_url: '/images/physical_meetup.jpg', + target: 'https://github.com/reactdeveloperske/community-coding-challenges', + }, +]; + +export default function Events() { + return ( +
+

+ Events +

+

Community Events

+
+ {events.map((event) => ( + + ))} + +
+ + See More + +
+
+
+ ); +} diff --git a/src/components/EventsDisplay/index.ts b/src/components/EventsDisplay/index.ts deleted file mode 100644 index e162ec8..0000000 --- a/src/components/EventsDisplay/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './DisplayRC'; diff --git a/src/pages/events/index.page.tsx b/src/pages/events/index.page.tsx deleted file mode 100644 index 37b8b21..0000000 --- a/src/pages/events/index.page.tsx +++ /dev/null @@ -1,124 +0,0 @@ -import React from 'react'; -import DisplayRC from '../../components/EventsDisplay'; -import logo from '../../../public/reactdevske.svg'; -import Head from 'next/head'; -import type { GetStaticProps } from 'next'; -import type { EventData } from '../../types'; - -type EventsProps = { - data: Array; -}; - -export const getStaticProps: GetStaticProps = async () => { - const data = [ - { - name: 'Event 1', - src: 'https://bit.ly/placeholder-img', - event: true, - description: 'This is a description for event 1', - venue: 'iHub', - date: '2022-06-15', - }, - { - name: 'Event 2', - src: 'https://bit.ly/placeholder-img', - event: true, - description: 'This is a description for event 1', - venue: 'iHub', - date: '2022-06-15', - }, - { - name: 'Event 3', - src: 'https://bit.ly/placeholder-img', - event: true, - description: 'This is a description for event 1', - venue: 'iHub', - date: '2022-06-15', - }, - { - name: 'Event 4', - src: 'https://bit.ly/placeholder-img', - event: true, - description: 'This is a description for event 1', - venue: 'iHub', - date: '2022-06-15', - }, - { - name: 'Event 5', - src: 'https://bit.ly/placeholder-img', - event: true, - description: 'This is a description for event 1', - venue: 'iHub', - date: '2022-06-15', - }, - { - name: 'Event 6', - src: 'https://bit.ly/placeholder-img', - event: true, - description: 'This is a description for event 1', - venue: 'iHub', - date: '2022-06-15', - }, - { - name: 'Reactjs Developer Community in Kenya', - src: logo, - event: false, - description: - 'React js Developer Community Kenya is a community of react js developers using react related technologies in the Kenyan software development eco system.', - venue: 'iHub', - date: '2022-06-15', - }, - { - name: 'Reactjs Developer Community in Kenya', - src: logo, - event: false, - description: - 'React js Developer Community Kenya is a community of react js developers using react related technologies in the Kenyan software development eco system.', - venue: 'iHub', - date: '2022-06-15', - }, - { - name: 'Event 7', - src: 'https://bit.ly/placeholder-img', - event: true, - description: 'This is a description for event 1', - venue: 'iHub', - date: '2022-06-15', - }, - ]; - return { - props: { - data, - }, - }; -}; - -export default function Events({ data }: EventsProps) { - return ( -
- - Reactjs Developer Community in Kenya - Forum - -
-

Community Events

-

- {' '} - We organise several events for the community. -

-
- {data.map((event, index) => ( - - ))} -
-
-
- ); -} diff --git a/src/pages/index.page.tsx b/src/pages/index.page.tsx index d07197d..728a0ea 100644 --- a/src/pages/index.page.tsx +++ b/src/pages/index.page.tsx @@ -1,6 +1,7 @@ import Head from 'next/head'; import Image from 'next/image'; import logo from '../../public/reactdevske.svg'; +import Events from '../components/Events/Events'; export default function Home() { return ( @@ -20,13 +21,13 @@ export default function Home() {
-

+

React Developer Community Kenya

-

+

A Community of Reactjs developers in Kenya

-
+
-

+

🚧Under construction...

+
); diff --git a/src/types/index.ts b/src/types/index.ts index f261eb5..86cdc9d 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -1,8 +1,7 @@ export type EventData = { - name: string; - src: string; - event: boolean; + id: number; + title: string; + image_url: string; description: string; - venue: string; - date: string; + target: string; };