perf: ⚡ Refactoring to improve performances

.github/workflows/ghpages.yml

@@ -20,7 +20,7 @@ jobs:
  cache: npm
  cache-dependency-path: '**/package-lock.json'
  - working-directory: page
- run: npm install -D
+ run: npm install -D --force
  - name: Parse Markdowns
  working-directory: tools
  run: |

page/package.json

@@ -30,5 +30,10 @@
  "last 1 firefox version",
  "last 1 safari version"
  ]
- }
+ },
+ "devDependencies": {
+ "prettier": "^2.8.8",
+ "prettier-airbnb-config": "^1.0.0"
+ },
+ "prettier": "prettier-airbnb-config"
 }

page/public/index.html

@@ -4,10 +4,16 @@
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
 
- <meta name="description" content="This website lists a maximum of conference dates and CFP link to help conference organizers, speakers, sponsors and attendees.">
- <meta name="author" content="Aurélie Vache" value="Aurélie Vache"/>
- <meta name="robots" content="index, follow" value="index, follow"/>
- <meta name="keywords" content="conferences, talks, events, speaker, sponsor, organizer, attendee">
+ <meta
+ name="description"
+ content="This website lists a maximum of conference dates and CFP link to help conference organizers, speakers, sponsors and attendees."
+ />
+ <meta name="author" content="Aurélie Vache" value="Aurélie Vache" />
+ <meta name="robots" content="index, follow" value="index, follow" />
+ <meta
+ name="keywords"
+ content="conferences, talks, events, speaker, sponsor, organizer, attendee"
+ />
 
  <title>Developer Conferences Agenda</title>
  </head>
@@ -17,17 +23,43 @@
  <footer>
  <div class="content">
  <p>
- Created by <a href="https://twitter.com/aurelievache" target="_blank" class="footer">Aurélie Vache</a> & maintaned by the <a href="https://github.com/scraly/developers-conferences-agenda/graphs/contributors" target="_blank" class="footer">community</a> with ❤️
+ Created by
+ <a href="https://twitter.com/aurelievache" target="_blank" class="footer">Aurélie Vache</a>
+ & maintained by the
+ <a
+ href="https://github.com/scraly/developers-conferences-agenda/graphs/contributors"
+ target="_blank"
+ class="footer"
+ >community</a
+ >
+ with ❤️
  </p>
  <p>
- Contribute now: create a <a href="https://github.com/scraly/developers-conferences-agenda/pulls" target="_blank" class="footer">Pull Request</a> or an <a href="https://github.com/scraly/developers-conferences-agenda/issues" target="_blank" class="footer">issue</a>.
+ Contribute now: create a
+ <a
+ href="https://github.com/scraly/developers-conferences-agenda/pulls"
+ target="_blank"
+ class="footer"
+ >Pull Request</a
+ >
+ or an
+ <a
+ href="https://github.com/scraly/developers-conferences-agenda/issues"
+ target="_blank"
+ class="footer"
+ >issue</a
+ >.
  </p>
  <p>
- <a href="https://developers.events/all-events.json" target="_blank" class="footer">Full events list</a>
+ <a href="https://developers.events/all-events.json" target="_blank" class="footer"
+ >Full events list</a
+ >
  </p>
  <p>
- <a href="https://developers.events/all-cfps.json" target="_blank" class="footer">Full CFPs list</a>
+ <a href="https://developers.events/all-cfps.json" target="_blank" class="footer"
+ >Full CFPs list</a
+ >
  </p>
  </div>
-  </footer>
+ </footer>
 </html>

page/src/App.js

@@ -1,98 +1,45 @@
-import React, { createRef } from 'react';
+import {useReducer, useState} from 'react';
 
-import { IonIcon } from '@ionic/react';
-import { arrowDownCircle } from 'ionicons/icons';
+import {IonIcon} from '@ionic/react';
+import {arrowDownCircle} from 'ionicons/icons';
 
-import { VCALENDAR, VEVENT } from 'ics-js';
-
-import YearSelector from 'components/YearSelector';
-import CalendarGrid, { getEventsOnDate } from 'components/CalendarGrid';
-import SelectedEvents from 'components/SelectedEvents';
-
-import allEvents from 'misc/all-events.json';
+import YearSelector from 'components/YearSelector/YearSelector';
+import CalendarGrid from 'components/CalendarGrid/CalendarGrid';
 
 import 'misc/fonts/inter/inter.css';
 import 'styles/App.css';
-
-class App extends React.Component {
- constructor(props) {
- super(props);
-
- this.eventsGrid = createRef();
- this.state = {
- selectedYear: new Date().getFullYear(),
- events: [],
- selectedDate: new Date()
- };
- }
-
- renderYear(year) {
- this.setState((state) => {
- return { selectedYear: year };
- });
- }
-
- displayDate(date) {
- this.setState((state) => {
- return { events: getEventsOnDate(date), selectedDate: date };
- });
- }
-
- exportYear() {
- let cal = new VCALENDAR();
- cal.addProp('VERSION', 2);
- cal.addProp('PRODID', 'DCA');
-
- for (const event of allEvents) {
- let eventYear = new Date(event.date[0]).getFullYear();
- if (eventYear !== this.state.selectedYear) continue;
- let vevent = new VEVENT();
- vevent.addProp('UID', `${Math.random()}@dca`);
- vevent.addProp('DTSTAMP', new Date());
- vevent.addProp('DTSTART', new Date(event.date[0]));
- vevent.addProp('DTEND', new Date(event.date[1] ?? event.date[0]));
- vevent.addProp('LOCATION', event.location || 'unspecified');
- vevent.addProp('SUMMARY', event.name);
- vevent.addProp('URL', event.hyperlink || 'unspecified');
- cal.addComponent(vevent);
- }
-
- let blob = cal.toBlob();
- let link = document.createElement('a');
- link.href = URL.createObjectURL(blob);
- link.download = `developer-conference-${this.state.selectedYear}.ics`;
- link.click();
- }
-
- componentDidUpdate(prevProps, prevState) {
- if (prevState.selectedDate !== this.state.selectedDate) {
- this.eventsGrid.current?.scrollIntoView({ behavior: 'smooth' });
- }
- }
-
- render() {
- return (
- <>
- <h2 className="dcaTitle">Developer Conferences Agenda</h2>
- <YearSelector
- year={this.state.selectedYear}
- onChange={this.renderYear.bind(this)} />
-
- <div className="downloadButton" onClick={this.exportYear.bind(this)}>
- <IonIcon icon={arrowDownCircle} />
- Download {this.state.selectedYear} Calendar
- </div>
-
- <CalendarGrid
- year={this.state.selectedYear}
- displayDate={this.displayDate.bind(this)} />
-
- <div ref={this.eventsGrid}>
- <SelectedEvents events={this.state.events} date={this.state.selectedDate} />
- </div>
- </>
- );
- }
-}
+import {exportYear} from 'utils';
+import reducer from 'app.reducer';
+import SelectedEvents from 'components/SelectedEvents/SelectedEvents';
+import CustomContext from 'app.context';
+
+const App = () => {
+ const [selectedYear, setSelectedYear] = useState(new Date().getFullYear());
+ const [userState, userDispatch] = useReducer(reducer, {});
+ const providerState = {
+ userState,
+ userDispatch,
+ };
+
+ return (
+ <CustomContext.Provider value={providerState}>
+ <h1 className="dcaTitle">Developer Conferences Agenda</h1>
+ <YearSelector
+ year={selectedYear}
+ onChange={year => {
+ setSelectedYear(year);
+ }}
+ />
+ <div className="downloadButton" onClick={() => exportYear(selectedYear)}>
+ <IonIcon icon={arrowDownCircle} />
+ Download {selectedYear} Calendar
+ </div>
+
+ <CalendarGrid year={selectedYear} />
+
+ <SelectedEvents events={userState.events} date={userState.selectedDate} />
+ </CustomContext.Provider>
+ );
+};
 
 export default App;

page/src/app.context.js

@@ -0,0 +1,7 @@
+import {createContext, useContext} from 'react';
+
+const CustomContext = createContext();
+
+export const useCustomContext = () => useContext(CustomContext);
+
+export default CustomContext;

page/src/app.reducer.js

@@ -0,0 +1,10 @@
+const reducer = (state = {events: [], selectedDate: null}, action) => {
+ switch (action.type) {
+ case 'define':
+ return action.payload;
+ default:
+ return state;
+ }
+};
+
+export default reducer;

page/src/components/Calendar/Calendar.js

@@ -0,0 +1,55 @@
+import Day from 'components/Day/Day';
+import Week from 'components/Week/Week';
+import {useMemo, useState} from 'react';
+
+import 'styles/Calendar.css';
+import {daysToWeeks} from './Calendar.utils';
+
+const MonthsName = [
+ 'January',
+ 'February',
+ 'March',
+ 'April',
+ 'May',
+ 'June',
+ 'July',
+ 'August',
+ 'September',
+ 'October',
+ 'November',
+ 'December',
+];
+
+const DaysName = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
+
+const Calendar = ({month, days}) => {
+ const [daysEvents, setDaysEvents] = useState(null);
+
+ useMemo(() => {
+ setDaysEvents(
+ daysToWeeks(days).map((week, w) => (
+ <Week key={`week_${w}`}>
+ {week.map((day, i) => (
+ <Day key={`day_${i}`} date={day.date} events={day.events} />
+ ))}
+ </Week>
+ ))
+ );
+ }, [days]);
+
+ return (
+ <div>
+ <div className="header">
+ <span>{MonthsName[month]}</span>
+ </div>
+ <div className="dayList">
+ {DaysName.map((d, i) => (
+ <span key={`d_${i}`}>{d}</span>
+ ))}
+ </div>
+ <div className="weeks">{daysEvents}</div>
+ </div>
+ );
+};
+
+export default Calendar;