Skip to content

Commit 1f82d70

Browse files
zorexsalvozorexsalvo
committed
Separate data from the componnet logic for better maintainability
1 parent 542d37d commit 1f82d70

File tree

3 files changed

+121
-124
lines changed

3 files changed

+121
-124
lines changed

‎README.md‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,30 @@ How to Create/submit a Pull Request
4949

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

52+
Adding your PyCon to the website
53+
###
54+
To add new or edit events to the website, make an edit and submit a pull request
55+
to this repository:
56+
57+
The event data is located at [EventData.js](src/views/events/EventData.js)
58+
59+
The `EventData.js` file contains three arrays:
60+
61+
1. **slides**: Highlights the incoming host for the upcoming PyCon APAC.
62+
2. **events**: Current year's PyCon events.
63+
3. **upcomingEvents**: Upcoming events for next year.
64+
65+
To add an event, append a new object to either the events or eventsNextYear array.
66+
```javascript
67+
const events = [
68+
{
69+
name: "New Event Title",
70+
date: "2024-06-15",
71+
location: "Location Name",
72+
description: "Description of the new event."
73+
},
74+
]
75+
```
5276

5377
How to Test your Code Locally
5478
###

‎src/views/events/EventData.js‎

Lines changed: 91 additions & 0 deletions
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+

‎src/views/events/Events.tsx‎

Lines changed: 6 additions & 124 deletions
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)