Skip to content

Commit

Permalink
feat: add event cont for day, month and year (#565)
Browse files Browse the repository at this point in the history
* feat: add event cont for day, month and year

* chore: clean up

* refactor: remove console.log

* refactor: @gouz feedback

* refactor: typo + run prettier
  • Loading branch information
edouard-lopez authored Aug 2, 2023
1 parent b44f2a0 commit 31ff128
Show file tree
Hide file tree
Showing 5 changed files with 39 additions and 6 deletions.
12 changes: 12 additions & 0 deletions page/src/components/EventCount/EventCount.jsx
Original file line number Diff line number Diff line change
@@ -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;
4 changes: 3 additions & 1 deletion page/src/components/SelectedEvents/SelectedEvents.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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>
</>
) : (
Expand Down
18 changes: 13 additions & 5 deletions page/src/components/YearSelector/YearSelector.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
};
Expand Down
5 changes: 5 additions & 0 deletions page/src/styles/SelectedEvents.css
Original file line number Diff line number Diff line change
Expand Up @@ -20,3 +20,8 @@
.eventDateDisplay span {
padding: 0 1rem;
}

.eventCount {
text-align: center;
font-weight: normal;
}
6 changes: 6 additions & 0 deletions page/src/utils.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down

0 comments on commit 31ff128

Please sign in to comment.