aljaz/landscape-template
1
0
Fork 0
mirror of https://github.com/aljazceru/landscape-template.git synced 2026-01-15 12:24:21 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix: handle multi months & multi days case in event card/modal

Browse Source
This commit is contained in:
MTG2000
2022-09-12 18:03:12 +03:00
parent 5279e51e10
commit 1e4bdd8036
2 changed files with 26 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/features/Tournaments/pages/EventsPage/EventCard/EventCard.tsx
View File

@@ -21,6 +21,22 @@ interface Props {
>
}
export const getSpanDate = (_date1: string, _date2: string) => {
const date1 = new Date(_date1);
const date2 = new Date(_date2);
const isSameMonth = date1.getMonth() === date2.getMonth();
if (!isSameMonth)
return `${dayjs(_date1).format('Do MMM')} - ${dayjs(_date2).format('Do MMM')}`
const isSameDay = date1.getDay() === date2.getDay();
if (!isSameDay)
return `${dayjs(_date1).format('Do')} - ${dayjs(_date2).format('Do MMM')}`
// Same Day
return `${dayjs(_date1).format('H:mm')} - ${dayjs(_date2).format('H:mm, Do MMM')}`
}
export default function EventCard({ event }: Props) {
const dispatch = useAppDispatch()
@@ -35,6 +51,13 @@ export default function EventCard({ event }: Props) {
}))
}
// If single day => show time
// If multi-days:
// if same month: show months
// if diff month: hide month
return (
<div
role='button'
@@ -48,9 +71,7 @@ export default function EventCard({ event }: Props) {
{event.title}
</h3>
<p className="text-body4 font-medium text-gray-900">
{`${dayjs(event.starts_at).format('H:mm')} - ${dayjs(event.ends_at).format('H:mm, Do MMM')}`}
{getSpanDate(event.starts_at, event.ends_at)}
</p>
<p className="text-body4 font-medium text-gray-600">
<IoLocationOutline className="mr-4" /> <span className="align-middle">{event.location}</span>

4
src/features/Tournaments/pages/EventsPage/EventModal/EventModal.tsx
View File

@@ -5,7 +5,7 @@ import { useMediaQuery } from 'src/utils/hooks';
import { Tournament, } from 'src/graphql';
import { MEDIA_QUERIES } from 'src/utils/theme';
import { IoGlobe, IoLocationOutline } from 'react-icons/io5';
import { mapTypeToBadge } from '../EventCard/EventCard';
import { getSpanDate, mapTypeToBadge } from '../EventCard/EventCard';
import dayjs from 'dayjs';
@@ -45,7 +45,7 @@ export default function ProjectDetailsCard({ direction, event, ...props }: Props
<div className="p-16 md:p-24">
<h1 className="text-body1 font-bold">{event.title}</h1>
<p className="text-body4 font-medium text-gray-900 mt-8">
{`${dayjs(event.starts_at).format('H:mm')} - ${dayjs(event.ends_at).format('H:mm, Do MMM')}`}
{getSpanDate(event.starts_at, event.ends_at)}
</p>
<div className="flex gap-16 mt-8">
<p className="text-body4 font-medium text-primary-600 shrink-0">