Skip to content

Commit 24ad513

Browse files
codemickeycodecodemickeycode
authored
Merge pull request #20 from zorexsalvo/chore/event-management
Enhance Events Management
2 parents 542d37d + ea4e37e commit 24ad513

File tree

3 files changed

+124
-128
lines changed

3 files changed

+124
-128
lines changed

Diff for: ‎README.md

+27-4
Original file line numberDiff line numberDiff line change
@@ -44,14 +44,37 @@ Contributing
4444

4545
Pull requests are welcome! :)
4646

47-
How to Create/submit a Pull Request
48-
###
47+
### How to Create/submit a Pull Request
4948

5049
More info: https://www.freecodecamp.org/news/how-to-make-your-first-pull-request-on-github-3/
5150

51+
### Adding your PyCon to the website
5252

53-
How to Test your Code Locally
54-
###
53+
To add new events or edit existing ones on the website, please make the necessary
54+
changes in the event data and submit a pull request
55+
56+
The event data is located at [EventData.js](src/views/events/EventData.js)
57+
58+
The `EventData.js` file contains three arrays:
59+
60+
1. **slides**: Highlights the incoming host for the upcoming PyCon APAC.
61+
2. **events**: Current year's PyCon events.
62+
3. **upcomingEvents**: Upcoming events for next year.
63+
64+
To add an event, append a new object to either the events or eventsNextYear array.
65+
```javascript
66+
const events = [
67+
{
68+
date: '01-02 Jan',
69+
name: 'PyCon APAC',
70+
location: 'Asia Pacific (rotating)',
71+
link: 'https://pycon.asia'
72+
},
73+
]
74+
```
75+
76+
77+
### How to Test your Code Locally
5578

5679
1. Make code changes
5780
2. `npm run start` - to check your changes locally

Diff for: ‎src/views/events/EventData.js

+91
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
// Array of events for the current year's PyCon
2+
export const events = [
3+
{
4+
date: '25-26 Feb',
5+
title: 'PyCon PH',
6+
location: 'Makati Sports Club, Makati City, Philippines',
7+
link: 'https://pycon-2024.python.ph',
8+
},
9+
{
10+
date: '24-25 Aug',
11+
title: 'PyCon MY',
12+
link: 'https://pycon.my/'
13+
},
14+
{
15+
date: '21-22 Sep',
16+
title: 'PyCon TW',
17+
link: 'https://tw.pycon.org/2024/'
18+
},
19+
{
20+
date: '20-23 Sep',
21+
title: 'PyCon India',
22+
location: 'Bengaluru, India',
23+
link: 'https://in.pycon.org/2024'
24+
},
25+
{
26+
date: '27-29 Sep',
27+
title: 'PyCon JP',
28+
location: 'Tokyo, Japan',
29+
link: 'https://2024.pycon.jp',
30+
},
31+
{
32+
date: '25-27 Oct',
33+
title: 'PyCon APAC',
34+
location: 'Yogyakarta, Indonesia',
35+
link: 'https://pycon.id',
36+
},
37+
{
38+
date: '26-27 Oct',
39+
title: 'PyCon KR',
40+
location: 'Suwon, South Korea',
41+
link: 'https://2024.pycon.kr/',
42+
},
43+
{
44+
date: '16-17 Nov',
45+
title: 'PyCon HK',
46+
location: 'Hong Kong',
47+
link: 'https://pycon.hk/2024/',
48+
},
49+
{
50+
date: '22-26 Nov',
51+
title: 'PyCon AU',
52+
location: 'Melbourne, Australia',
53+
link: 'https://2024.pycon.org.au/',
54+
}
55+
];
56+
57+
58+
// Array of upcoming events for the next year
59+
export const upcomingEvents = [
60+
{
61+
date: '1-2 March',
62+
title: 'PyCon APAC',
63+
location: 'Ateneo de Manila University, Quezon City, Philippines',
64+
link: 'https://pycon-apac.python.ph/',
65+
},
66+
{
67+
date: '26-27 Sep',
68+
title: 'PyCon JP',
69+
location: 'Hiroshima, Japan',
70+
link: 'https://2025.pycon.jp/',
71+
}
72+
];
73+
74+
75+
// Array of event slides, primarily used to showcase the incoming host for
76+
// the upcoming PyCon APAC
77+
export const slides = [
78+
{
79+
key: 1,
80+
img: 'images/event-slide-1.png',
81+
title: 'PyCon APAC 2025 ',
82+
badgeText: 'UPCOMING',
83+
badgeType: 'success',
84+
description: "PyCon APAC 2025 will be hosted by PyCon PH.",
85+
info: [
86+
"2025 March 1-2",
87+
"Metro Manila, Philippines"
88+
]
89+
},
90+
]
91+

Diff for: ‎src/views/events/Events.tsx

+6-124
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,16 @@
11
import { useState } from "react";
2+
import {slides, events, upcomingEvents} from './EventData';
23
import './style.css';
34

45
export default function Events() {
56
const [currentSlide, changeCurrentSlide] = useState(1);
6-
const slides = [
7-
{
8-
key: 1,
9-
img: 'images/event-slide-1.png',
10-
title: 'PyCon APAC 2025 ',
11-
badgeText: 'UPCOMING',
12-
badgeType: 'danger',
13-
description: "PyCon APAC 2025 will be hosted by PyCon PH.",
14-
info: [
15-
"2025 March 1-2",
16-
"Metro Manila, Philippines"
17-
]
18-
},
19-
/* test {
20-
key: 2,
21-
img: 'images/event-slide-1.png',
22-
title: 'Pycon APAC 2022',
23-
badgeText: 'UPCOMING',
24-
badgeType: 'info',
25-
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.",
26-
info: [
27-
"2022 September 1, 8:00AM - 5:00PM CST",
28-
"Taipei International Convention Center (TICC)"
29-
]
30-
},
31-
{
32-
key: 3,
33-
img: 'images/event-slide-1.png',
34-
title: 'Pycon APAC 2022',
35-
badgeText: 'UPCOMING',
36-
badgeType: 'warning',
37-
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.",
38-
info: [
39-
"2022 September 1, 8:00AM - 5:00PM CST",
40-
"Taipei International Convention Center (TICC)"
41-
]
42-
},
43-
{
44-
key: 4,
45-
img: 'images/event-slide-1.png',
46-
title: 'Pycon APAC 2022',
47-
badgeText: 'UPCOMING',
48-
badgeType: 'success',
49-
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.",
50-
info: [
51-
"2022 September 1, 8:00AM - 5:00PM CST",
52-
"Taipei International Convention Center (TICC)"
53-
]
54-
},*/
55-
]
567

578
const setCurrentSlide = (data: any, idx: number):void => {
589
data.preventDefault();
5910
changeCurrentSlide(idx);
6011
}
6112

6213
const nextPrevSlide = (idx: number) => {
63-
console.log('nextPrevSlide', idx)
6414
if (idx > slides.length) {
6515
changeCurrentSlide(1);
6616
}else if (idx < 1) {
@@ -70,77 +20,6 @@ export default function Events() {
7020
}
7121
}
7222

73-
const events: any = [
74-
{
75-
date: '25-26 Feb',
76-
title: 'PyCon PH',
77-
location: 'Makati Sports Club, Makati City, Philippines',
78-
link: 'https://pycon-2024.python.ph',
79-
},
80-
{
81-
date: '24-25 Aug',
82-
title: 'PyCon MY',
83-
link: 'https://pycon.my/'
84-
},
85-
{
86-
date: '21-22 Sep',
87-
title: 'PyCon TW',
88-
link: 'https://tw.pycon.org/2024/'
89-
},
90-
{
91-
date: '20-23 Sep',
92-
title: 'PyCon India',
93-
location: 'Bengaluru, India',
94-
link: 'https://in.pycon.org/2024'
95-
},
96-
{
97-
date: '27-29 Sep',
98-
title: 'PyCon JP',
99-
location: 'Tokyo, Japan',
100-
link: 'https://2024.pycon.jp',
101-
},
102-
{
103-
date: '25-27 Oct',
104-
title: 'PyCon APAC',
105-
location: 'Yogyakarta, Indonesia',
106-
link: 'https://pycon.id',
107-
},
108-
{
109-
date: '26-27 Oct',
110-
title: 'PyCon KR',
111-
location: 'Suwon, South Korea',
112-
link: 'https://2024.pycon.kr/',
113-
},
114-
{
115-
date: '16-17 Nov',
116-
title: 'PyCon HK',
117-
location: 'Hong Kong',
118-
link: 'https://pycon.hk/2024/',
119-
},
120-
{
121-
date: '22-26 Nov',
122-
title: 'PyCon AU',
123-
location: 'Melbourne, Australia',
124-
link: 'https://2024.pycon.org.au/',
125-
}
126-
127-
];
128-
129-
const eventsNextYear: any = [
130-
{
131-
date: '1-2 March',
132-
title: 'PyCon APAC',
133-
location: 'Ateneo de Manila University, Quezon City, Philippines',
134-
link: 'https://pycon-apac.python.ph/',
135-
},
136-
{
137-
date: '26-27 Sep',
138-
title: 'PyCon JP',
139-
location: 'Hiroshima, Japan',
140-
link: 'https://2025.pycon.jp/',
141-
}
142-
];
143-
14423
return (
14524
<div className="events-container">
14625
<div className="container">
@@ -163,7 +42,7 @@ export default function Events() {
16342
</div>
16443
</div>
16544
</div>
166-
{eventsNextYear.length > 0 && (
45+
{upcomingEvents.length > 0 && (
16746
<div className="row">
16847
<div className="col-lg-6 col-xs-12">
16948
<div className="left-text-content">
@@ -174,7 +53,7 @@ export default function Events() {
17453
</div>
17554
<div className="medium-text text-white" style={{opacity: '60%'}}>
17655
<ul>
177-
{eventsNextYear.map((event: any, index: number) => (
56+
{upcomingEvents.map((event: any, index: number) => (
17857
<li key={index}>{event.date}: <strong>{event.title}</strong> {event.location} {event.link && <a href={event.link}>🔗</a>}</li>
17958
))}
18059
</ul>
@@ -223,6 +102,8 @@ export default function Events() {
223102
</div>
224103
</div>
225104
))}
105+
106+
{slides.length > 1 && (
226107
<div className="mt-4 slide-changer">
227108
<div className="pagination">
228109
{slides.map((slide, index) => (
@@ -252,6 +133,7 @@ export default function Events() {
252133
</div>
253134
</div>
254135
</div>
136+
)}
255137
</div>
256138
</div>
257139
</div>

0 commit comments

Comments
 (0)