From 1f82d70da60074738ea1f6efcf45ef0a11a5bf10 Mon Sep 17 00:00:00 2001 From: Zorex Salvo Date: Tue, 5 Nov 2024 03:09:53 +0800 Subject: [PATCH 1/4] Separate data from the componnet logic for better maintainability --- README.md | 24 +++++++ src/views/events/EventData.js | 91 ++++++++++++++++++++++++ src/views/events/Events.tsx | 130 ++-------------------------------- 3 files changed, 121 insertions(+), 124 deletions(-) create mode 100644 src/views/events/EventData.js diff --git a/README.md b/README.md index fde82a0..5180fb4 100644 --- a/README.md +++ b/README.md @@ -49,6 +49,30 @@ How to Create/submit a Pull Request More info: https://www.freecodecamp.org/news/how-to-make-your-first-pull-request-on-github-3/ +Adding your PyCon to the website +### +To add new or edit events to the website, make an edit and submit a pull request +to this repository: + +The event data is located at [EventData.js](src/views/events/EventData.js) + +The `EventData.js` file contains three arrays: + +1. **slides**: Highlights the incoming host for the upcoming PyCon APAC. +2. **events**: Current year's PyCon events. +3. **upcomingEvents**: Upcoming events for next year. + +To add an event, append a new object to either the events or eventsNextYear array. +```javascript +const events = [ + { + name: "New Event Title", + date: "2024-06-15", + location: "Location Name", + description: "Description of the new event." + }, +] +``` How to Test your Code Locally ### diff --git a/src/views/events/EventData.js b/src/views/events/EventData.js new file mode 100644 index 0000000..ad3fa1f --- /dev/null +++ b/src/views/events/EventData.js @@ -0,0 +1,91 @@ +// Array of events for the current year's PyCon +export const events = [ + { + date: '25-26 Feb', + title: 'PyCon PH', + location: 'Makati Sports Club, Makati City, Philippines', + link: 'https://pycon-2024.python.ph', + }, + { + date: '24-25 Aug', + title: 'PyCon MY', + link: 'https://pycon.my/' + }, + { + date: '21-22 Sep', + title: 'PyCon TW', + link: 'https://tw.pycon.org/2024/' + }, + { + date: '20-23 Sep', + title: 'PyCon India', + location: 'Bengaluru, India', + link: 'https://in.pycon.org/2024' + }, + { + date: '27-29 Sep', + title: 'PyCon JP', + location: 'Tokyo, Japan', + link: 'https://2024.pycon.jp', + }, + { + date: '25-27 Oct', + title: 'PyCon APAC', + location: 'Yogyakarta, Indonesia', + link: 'https://pycon.id', + }, + { + date: '26-27 Oct', + title: 'PyCon KR', + location: 'Suwon, South Korea', + link: 'https://2024.pycon.kr/', + }, + { + date: '16-17 Nov', + title: 'PyCon HK', + location: 'Hong Kong', + link: 'https://pycon.hk/2024/', + }, + { + date: '22-26 Nov', + title: 'PyCon AU', + location: 'Melbourne, Australia', + link: 'https://2024.pycon.org.au/', + } + ]; + + +// Array of upcoming events for the next year +export const upcomingEvents = [ + { + date: '1-2 March', + title: 'PyCon APAC', + location: 'Ateneo de Manila University, Quezon City, Philippines', + link: 'https://pycon-apac.python.ph/', + }, + { + date: '26-27 Sep', + title: 'PyCon JP', + location: 'Hiroshima, Japan', + link: 'https://2025.pycon.jp/', + } + ]; + + +// Array of event slides, primarily used to showcase the incoming host for +// the upcoming PyCon APAC +export const slides = [ + { + key: 1, + img: 'images/event-slide-1.png', + title: 'PyCon APAC 2025 ', + badgeText: 'UPCOMING', + badgeType: 'success', + description: "PyCon APAC 2025 will be hosted by PyCon PH.", + info: [ + "2025 March 1-2", + "Metro Manila, Philippines" + ] + }, + ] + diff --git a/src/views/events/Events.tsx b/src/views/events/Events.tsx index f46a361..d1b7fc8 100644 --- a/src/views/events/Events.tsx +++ b/src/views/events/Events.tsx @@ -1,58 +1,9 @@ import { useState } from "react"; +import {slides, events, upcomingEvents} from './EventData'; import './style.css'; export default function Events() { const [currentSlide, changeCurrentSlide] = useState(1); - const slides = [ - { - key: 1, - img: 'images/event-slide-1.png', - title: 'PyCon APAC 2025 ', - badgeText: 'UPCOMING', - badgeType: 'danger', - description: "PyCon APAC 2025 will be hosted by PyCon PH.", - info: [ - "2025 March 1-2", - "Metro Manila, Philippines" - ] - }, -/* test { - key: 2, - img: 'images/event-slide-1.png', - title: 'Pycon APAC 2022', - badgeText: 'UPCOMING', - badgeType: 'info', - description: "Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna,vel scelerisque nisl consectetur et. Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean lacinia bibendum nulla sed consectetur. Vestibulum id ligula porta felis euismod semper.", - info: [ - "2022 September 1, 8:00AM - 5:00PM CST", - "Taipei International Convention Center (TICC)" - ] - }, - { - key: 3, - img: 'images/event-slide-1.png', - title: 'Pycon APAC 2022', - badgeText: 'UPCOMING', - badgeType: 'warning', - description: "Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna,vel scelerisque nisl consectetur et. Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean lacinia bibendum nulla sed consectetur. Vestibulum id ligula porta felis euismod semper.", - info: [ - "2022 September 1, 8:00AM - 5:00PM CST", - "Taipei International Convention Center (TICC)" - ] - }, - { - key: 4, - img: 'images/event-slide-1.png', - title: 'Pycon APAC 2022', - badgeText: 'UPCOMING', - badgeType: 'success', - description: "Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna,vel scelerisque nisl consectetur et. Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean lacinia bibendum nulla sed consectetur. Vestibulum id ligula porta felis euismod semper.", - info: [ - "2022 September 1, 8:00AM - 5:00PM CST", - "Taipei International Convention Center (TICC)" - ] - },*/ - ] const setCurrentSlide = (data: any, idx: number):void => { data.preventDefault(); @@ -60,7 +11,6 @@ export default function Events() { } const nextPrevSlide = (idx: number) => { - console.log('nextPrevSlide', idx) if (idx > slides.length) { changeCurrentSlide(1); }else if (idx < 1) { @@ -70,77 +20,6 @@ export default function Events() { } } - const events: any = [ - { - date: '25-26 Feb', - title: 'PyCon PH', - location: 'Makati Sports Club, Makati City, Philippines', - link: 'https://pycon-2024.python.ph', - }, - { - date: '24-25 Aug', - title: 'PyCon MY', - link: 'https://pycon.my/' - }, - { - date: '21-22 Sep', - title: 'PyCon TW', - link: 'https://tw.pycon.org/2024/' - }, - { - date: '20-23 Sep', - title: 'PyCon India', - location: 'Bengaluru, India', - link: 'https://in.pycon.org/2024' - }, - { - date: '27-29 Sep', - title: 'PyCon JP', - location: 'Tokyo, Japan', - link: 'https://2024.pycon.jp', - }, - { - date: '25-27 Oct', - title: 'PyCon APAC', - location: 'Yogyakarta, Indonesia', - link: 'https://pycon.id', - }, - { - date: '26-27 Oct', - title: 'PyCon KR', - location: 'Suwon, South Korea', - link: 'https://2024.pycon.kr/', - }, - { - date: '16-17 Nov', - title: 'PyCon HK', - location: 'Hong Kong', - link: 'https://pycon.hk/2024/', - }, - { - date: '22-26 Nov', - title: 'PyCon AU', - location: 'Melbourne, Australia', - link: 'https://2024.pycon.org.au/', - } - - ]; - - const eventsNextYear: any = [ - { - date: '1-2 March', - title: 'PyCon APAC', - location: 'Ateneo de Manila University, Quezon City, Philippines', - link: 'https://pycon-apac.python.ph/', - }, - { - date: '26-27 Sep', - title: 'PyCon JP', - location: 'Hiroshima, Japan', - link: 'https://2025.pycon.jp/', - } - ]; - return (
@@ -163,7 +42,7 @@ export default function Events() {
- {eventsNextYear.length > 0 && ( + {upcomingEvents.length > 0 && (
@@ -174,7 +53,7 @@ export default function Events() {
    - {eventsNextYear.map((event: any, index: number) => ( + {upcomingEvents.map((event: any, index: number) => (
  • {event.date}: {event.title} {event.location} {event.link && 🔗}
    • ))}
@@ -223,6 +102,8 @@ export default function Events() {
))} + + {slides.length > 1 && (
{slides.map((slide, index) => ( @@ -252,6 +133,7 @@ export default function Events() {
+ )} From daf0b1ad1b56bf0eb16ae38d8a49fe4cc4938edf Mon Sep 17 00:00:00 2001 From: Zorex Salvo Date: Tue, 5 Nov 2024 03:13:41 +0800 Subject: [PATCH 2/4] Update README.md, added instructions to add/update events --- README.md | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 5180fb4..fae54b9 100644 --- a/README.md +++ b/README.md @@ -44,13 +44,12 @@ Contributing Pull requests are welcome! :) -How to Create/submit a Pull Request -### +### How to Create/submit a Pull Request More info: https://www.freecodecamp.org/news/how-to-make-your-first-pull-request-on-github-3/ -Adding your PyCon to the website -### +### Adding your PyCon to the website + To add new or edit events to the website, make an edit and submit a pull request to this repository: @@ -67,15 +66,15 @@ To add an event, append a new object to either the events or eventsNextYear arra const events = [ { name: "New Event Title", - date: "2024-06-15", + date: "2024-01-01", location: "Location Name", - description: "Description of the new event." + link: "https://pycon.asia" }, ] ``` -How to Test your Code Locally -### + +### How to Test your Code Locally 1. Make code changes 2. `npm run start` - to check your changes locally From 7b90f77e2887300dc44a88a594c5eafa739b014d Mon Sep 17 00:00:00 2001 From: Zorex Salvo Date: Tue, 5 Nov 2024 03:29:21 +0800 Subject: [PATCH 3/4] Update README.md sample with the actual key-value --- README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index fae54b9..8f08f1a 100644 --- a/README.md +++ b/README.md @@ -65,10 +65,10 @@ To add an event, append a new object to either the events or eventsNextYear arra ```javascript const events = [ { - name: "New Event Title", - date: "2024-01-01", - location: "Location Name", - link: "https://pycon.asia" + date: '01-02 Jan', + name: 'PyCon APAC', + location: 'Asia Pacific (rotating)', + link: 'https://pycon.asia' }, ] ``` From ea4e37efc00b8cbd4c9c0bf821c74cd5e1d4faf0 Mon Sep 17 00:00:00 2001 From: Zorex Salvo Date: Tue, 5 Nov 2024 03:52:12 +0800 Subject: [PATCH 4/4] Improve README.md language on adding events to the website --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 8f08f1a..172dce6 100644 --- a/README.md +++ b/README.md @@ -50,8 +50,8 @@ More info: https://www.freecodecamp.org/news/how-to-make-your-first-pull-request ### Adding your PyCon to the website -To add new or edit events to the website, make an edit and submit a pull request -to this repository: +To add new events or edit existing ones on the website, please make the necessary +changes in the event data and submit a pull request The event data is located at [EventData.js](src/views/events/EventData.js)