-
-
Notifications
You must be signed in to change notification settings - Fork 415
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
perf: ⚡ Refactoring to improve performances (#435)
* feat: 👷 Prettier for an unique code format * perf: ⚡ Refactoring to improve performances * fix: 🐛 If no SelectedEvents it crashes * fix: 🐛 fix #434 * fix: dev dependencies * feat: 👷 pnpm to npm * feat: new package-lock * revert: ⏪ fix #434 * fix: 🐛 cause a conflict * ci: 👷 force --------- Co-authored-by: Aurelie Vache <scraly@gmail.com>
- Loading branch information
Showing
31 changed files
with
2,033 additions
and
14,861 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| import {createContext, useContext} from 'react'; | ||
|
|
||
| const CustomContext = createContext(); | ||
|
|
||
| export const useCustomContext = () => useContext(CustomContext); | ||
|
|
||
| export default CustomContext; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
Oops, something went wrong.