feat: add event cont for day, month and year (#565)

* feat: add event cont for day, month and year

* chore: clean up

* refactor: remove console.log

* refactor: @gouz feedback

* refactor: typo + run prettier

page/src/components/EventCount/EventCount.jsx

@@ -0,0 +1,12 @@
+const getCountText = count => {
+  if (count) {
+    const plural = count > 1 ? 's' : '';
+    return `${count} event${plural}`;
+  }
+  return 'no event';
+};
+
+const EventCount = ({events}) => {
+  return <p className="eventCount">{getCountText(events.length)}</p>;
+};
+export default EventCount;

page/src/components/SelectedEvents/SelectedEvents.jsx

@@ -2,6 +2,7 @@ import {useMemo, useRef, useState} from 'react';
 
 import 'styles/SelectedEvents.css';
 import EventDisplay from '../EventDisplay/EventDisplay';
+import EventCount from '../EventCount/EventCount'
 import {formatDate, getMonthName} from '../../utils';
 import {useCustomContext} from 'app.context';
 import { ArrowLeftCircle, ArrowRightCircle } from 'lucide-react';
@@ -97,7 +98,8 @@ const SelectedEvents = ({year, month, date}) => {
             {previous}
             <span>{getMonthName(month) || formatDate(date)}</span>
             {next}
-          </h3>
+            </h3>
+            <EventCount events={events} />
           <div className="eventsGridDisplay">{events}</div>
         </>
       ) : (

page/src/components/YearSelector/YearSelector.jsx

@@ -4,13 +4,21 @@ import { ArrowLeftCircle, ArrowRightCircle } from 'lucide-react';
 
 
 import 'styles/YearSelector.css';
+import { getYearEvents } from 'utils';
+import EventCount from 'components/EventCount/EventCount';
 
-const YearSelector = ({year, onChange}) => {
+const YearSelector = ({ year, onChange }) => {
   return (
-    <div className="yearNavigator">
-      <ArrowLeftCircle onClick={() => onChange(year - 1)} />
-      <h2 className="bigYearLabel">{year}</h2>
-      <ArrowRightCircle onClick={() => onChange(year + 1)} />
+    <div>
+      <div className="yearNavigator">
+        <ArrowLeftCircle onClick={() => onChange(year - 1)} />
+        <h2 className="bigYearLabel">{year}</h2>
+        <ArrowRightCircle onClick={() => onChange(year + 1)} />
+
+      </div>
+      <div>
+        <EventCount events={getYearEvents(year)} />
+      </div>
     </div>
   );
 };

page/src/styles/SelectedEvents.css

@@ -20,3 +20,8 @@
 .eventDateDisplay span {
   padding: 0 1rem;
 }
+
+.eventCount {
+  text-align: center;
+  font-weight: normal;
+}

page/src/utils.js

@@ -30,6 +30,12 @@ export const getEventsByYear = () => {
   window.dev_events = events;
 };
 
+export const getYearEvents = (year) => {
+  const events = allEvents.filter(e => new Date(e.date[0]).getFullYear() === year)
+
+  return events
+}
+
 export const hasEvents = (year) => Boolean(allEvents.find(e => new Date(e.date[0]).getFullYear() === year))
 
 const lpad2 = number => ('0' + number).slice(-2);