feat: ✨ fix #423 (#438)

* feat: ✨ fix #423

* fix: 🐛 unique event per month

* feat: 🎨 Better month management for future navigation

* feat: 💄 month are clickable, then style it

page/src/App.js

@@ -37,7 +37,11 @@ const App = () => {
 
       <CalendarGrid year={selectedYear} />
 
-      <SelectedEvents events={userState.events} date={userState.selectedDate} />
+      <SelectedEvents
+        events={userState.events}
+        date={userState.selectedDate}
+        month={userState.month}
+      />
     </CustomContext.Provider>
   );
 };

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;

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 key={`week_${w}`}>
-          {week.map((day, i) => (
-            <Day key={`day_${i}`} date={day.date} events={day.events} />
-          ))}
+          {week.map((day, i) => {
+            if (day.events) {
+              day.events.map(e => events.push(e));
+            }
+            return <Day key={`day_${i}`} date={day.date} events={day.events} />;
+          })}
         </Week>
       ))
     );
+    setEvents([...new Map(events.map(item => [item.name, item])).values()]);
   }, [days]);
 
   return (
     <div>
-      <div className="header">
-        <span>{MonthsName[month]}</span>
+      <div
+        className="header"
+        onClick={() =>
+          userDispatch({
+            type: 'define',
+            payload: {events, selectedDate: new Date(), month: month},
+          })
+        }
+      >
+        <span>{getMonthName(month)}</span>
       </div>
       <div className="dayList">
         {DaysName.map((d, i) => (

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 (
     <div
       className={'date' + invisible + intensity}
-      onClick={() => userDispatch({type: 'define', payload: {events, selectedDate: date}})}
+      onClick={() =>
+        userDispatch({type: 'define', payload: {events, selectedDate: date, month: false}})
+      }
     >
       {date?.getDate() || ''}
     </div>

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 (
     <div className="eventCell">
-      <b>{name}</b>
-      <a href={hyperlink}>{new URL(hyperlink).hostname}</a>
-      <span>{location}</span>
-      <p dangerouslySetInnerHTML={{__html: misc}}></p>
+      <div className="content">
+        <b>{name}</b>
+        {hyperlink ? <a href={hyperlink}>{new URL(hyperlink).hostname}</a> : ''}
+        <span>{location}</span>
+        <p dangerouslySetInnerHTML={{__html: misc}}></p>
+      </div>
+      <span className="when">{formatEventDates(date)}</span>
     </div>
   );
 };

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(' -> ');

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 ? (
         <>
           <h3 className="eventDateDisplay" ref={scrollToRef}>
-            {formatDate(date)}
+            {getMonthName(month) || formatDate(date)}
           </h3>
           <div className="eventsGridDisplay">{evnts}</div>
         </>

page/src/styles/Calendar.css

@@ -1,5 +1,8 @@
 .header {
   text-align: center;
+  cursor: pointer;
+  font-weight: bold;
+  text-decoration: underline;
 }
 
 .dayList {

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;
+}

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];