diff --git a/page/src/App.js b/page/src/App.js index 17783f38c8..1ca51e9819 100644 --- a/page/src/App.js +++ b/page/src/App.js @@ -37,7 +37,11 @@ const App = () => { - + ); }; diff --git a/page/src/app.reducer.js b/page/src/app.reducer.js index 912825a186..40ff42edd5 100644 --- a/page/src/app.reducer.js +++ b/page/src/app.reducer.js @@ -1,4 +1,4 @@ -const reducer = (state = {events: [], selectedDate: null}, action) => { +const reducer = (state = {events: [], selectedDate: null, month: -1}, action) => { switch (action.type) { case 'define': return action.payload; diff --git a/page/src/components/Calendar/Calendar.js b/page/src/components/Calendar/Calendar.js index 9c586be22d..cd7b9abcfb 100644 --- a/page/src/components/Calendar/Calendar.js +++ b/page/src/components/Calendar/Calendar.js @@ -4,43 +4,45 @@ 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', -]; +import {useCustomContext} from 'app.context'; +import {getMonthName} from 'utils'; const DaysName = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']; const Calendar = ({month, days}) => { const [daysEvents, setDaysEvents] = useState(null); + const [events, setEvents] = useState([]); + const userDispatch = useCustomContext().userDispatch; useMemo(() => { + const events = []; setDaysEvents( daysToWeeks(days).map((week, w) => ( - {week.map((day, i) => ( - - ))} + {week.map((day, i) => { + if (day.events) { + day.events.map(e => events.push(e)); + } + return ; + })} )) ); + setEvents([...new Map(events.map(item => [item.name, item])).values()]); }, [days]); return (
-
- {MonthsName[month]} +
+ userDispatch({ + type: 'define', + payload: {events, selectedDate: new Date(), month: month}, + }) + } + > + {getMonthName(month)}
{DaysName.map((d, i) => ( diff --git a/page/src/components/Day/Day.js b/page/src/components/Day/Day.js index 48c0de052d..083b5302e2 100644 --- a/page/src/components/Day/Day.js +++ b/page/src/components/Day/Day.js @@ -3,16 +3,15 @@ import {useCustomContext} from 'app.context'; const Day = ({date, events}) => { const userDispatch = useCustomContext().userDispatch; - let invisible = date?.getDate() ? '' : ' invisible'; - let intensity = events?.length ?? 0; - - if (intensity > 10) intensity = 10; - intensity = ` intensity-${intensity}`; + const invisible = date?.getDate() ? '' : ' invisible'; + const intensity = ` intensity-${Math.min(events?.length ?? 0, 10)}`; return (
userDispatch({type: 'define', payload: {events, selectedDate: date}})} + onClick={() => + userDispatch({type: 'define', payload: {events, selectedDate: date, month: false}}) + } > {date?.getDate() || ''}
diff --git a/page/src/components/EventDisplay/EventDisplay.js b/page/src/components/EventDisplay/EventDisplay.js index 494984c38b..797b7178d0 100644 --- a/page/src/components/EventDisplay/EventDisplay.js +++ b/page/src/components/EventDisplay/EventDisplay.js @@ -1,12 +1,16 @@ import 'styles/EventDisplay.css'; +import {formatEventDates} from './EventDisplay.utils'; -const EventDisplay = ({name, hyperlink, location, misc}) => { +const EventDisplay = ({name, hyperlink, location, misc, date}) => { return (
- {name} - {new URL(hyperlink).hostname} - {location} -

+
+ {name} + {hyperlink ? {new URL(hyperlink).hostname} : ''} + {location} +

+
+ {formatEventDates(date)}
); }; diff --git a/page/src/components/EventDisplay/EventDisplay.utils.js b/page/src/components/EventDisplay/EventDisplay.utils.js new file mode 100644 index 0000000000..8c1a120576 --- /dev/null +++ b/page/src/components/EventDisplay/EventDisplay.utils.js @@ -0,0 +1,3 @@ +import {formatDate} from 'utils'; + +export const formatEventDates = dates => [...dates].map(d => formatDate(new Date(d))).join(' -> '); diff --git a/page/src/components/SelectedEvents/SelectedEvents.js b/page/src/components/SelectedEvents/SelectedEvents.js index 106c6b8283..ffc5b93a19 100644 --- a/page/src/components/SelectedEvents/SelectedEvents.js +++ b/page/src/components/SelectedEvents/SelectedEvents.js @@ -2,9 +2,9 @@ import {useMemo, useRef, useState} from 'react'; import 'styles/SelectedEvents.css'; import EventDisplay from '../EventDisplay/EventDisplay'; -import {formatDate} from './SelectedEvents.utils'; +import {formatDate, getMonthName} from '../../utils'; -const SelectedEvents = ({events, date}) => { +const SelectedEvents = ({events, date, month}) => { const [evnts, setEvnts] = useState(null); const scrollToRef = useRef(); @@ -24,7 +24,7 @@ const SelectedEvents = ({events, date}) => { {date ? ( <>

- {formatDate(date)} + {getMonthName(month) || formatDate(date)}

{evnts}
diff --git a/page/src/components/SelectedEvents/SelectedEvents.utils.js b/page/src/components/SelectedEvents/SelectedEvents.utils.js deleted file mode 100644 index ec53e216cd..0000000000 --- a/page/src/components/SelectedEvents/SelectedEvents.utils.js +++ /dev/null @@ -1,4 +0,0 @@ -const lpad2 = number => ('0' + number).slice(-2); - -export const formatDate = date => - date.getFullYear() + '-' + lpad2(date.getMonth() + 1) + '-' + lpad2(date.getDate()); diff --git a/page/src/styles/Calendar.css b/page/src/styles/Calendar.css index 6db7adf56a..614e7d14d6 100644 --- a/page/src/styles/Calendar.css +++ b/page/src/styles/Calendar.css @@ -1,5 +1,8 @@ .header { text-align: center; + cursor: pointer; + font-weight: bold; + text-decoration: underline; } .dayList { diff --git a/page/src/styles/EventDisplay.css b/page/src/styles/EventDisplay.css index 28e6a34cb4..63f4ff501a 100644 --- a/page/src/styles/EventDisplay.css +++ b/page/src/styles/EventDisplay.css @@ -6,3 +6,17 @@ flex-direction: column; border: 1px solid #ccc; } + +.eventCell .content { + display: flex; + flex-direction: column; + flex-grow: 1; +} + +.eventCell a { + color: blue; +} + +.eventCell .when { + font-size: 0.8em; +} diff --git a/page/src/utils.js b/page/src/utils.js index 256074656c..4133729d6b 100644 --- a/page/src/utils.js +++ b/page/src/utils.js @@ -26,3 +26,24 @@ export const exportYear = selectedYear => { link.download = `developer-conference-${selectedYear}.ics`; link.click(); }; + +const lpad2 = number => ('0' + number).slice(-2); + +export const formatDate = date => + date.getFullYear() + '-' + lpad2(date.getMonth() + 1) + '-' + lpad2(date.getDate()); + +export const getMonthName = month => + [ + 'January', + 'February', + 'March', + 'April', + 'May', + 'June', + 'July', + 'August', + 'September', + 'October', + 'November', + 'December', + ][month];