edb/neuf-www
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

change formatting of dates in event list mode

Browse Source
This commit is contained in:
Jonas Braathen
2024-06-23 15:10:56 +02:00
parent 94e809c010
commit 19d3866934
3 changed files with 18 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
web/src/components/events/EventItem.tsx
View File

@ -6,10 +6,12 @@ import Image from "../general/Image";
import { import {
SingularEvent, SingularEvent,
EventFragment, EventFragment,
getClosestOccurrence, getFutureOccurrences,
} from "@/lib/event"; } from "@/lib/event";
import { formatDate, formatExtendedDateTime } from "@/lib/date"; import { formatDate, formatExtendedDateTime } from "@/lib/date";
const DATES_TO_SHOW = 2;
export const EventItem = ({ export const EventItem = ({
event, event,
mode, mode,
@ -19,8 +21,9 @@ export const EventItem = ({
mode: "list" | "calendar" | "singular"; mode: "list" | "calendar" | "singular";
size?: "small" | "medium" | "large"; size?: "small" | "medium" | "large";
}) => { }) => {
const nextOccurrence = getClosestOccurrence(event); const futureOccurrences = getFutureOccurrences(event);
const numOccurrences = event?.occurrences?.length ?? 0; const numOccurrences = event?.occurrences?.length ?? 0;
const nextOccurrence = numOccurrences ? futureOccurrences[0] : null;
const featuredImage: any = event.featuredImage; const featuredImage: any = event.featuredImage;
return ( return (
@ -43,16 +46,15 @@ export const EventItem = ({
<div className={styles.time}> <div className={styles.time}>
{mode === "list" && nextOccurrence && ( {mode === "list" && nextOccurrence && (
<div className={styles.dates}> <div className={styles.dates}>
{numOccurrences === 1 && nextOccurrence?.start && ( {futureOccurrences.slice(0, DATES_TO_SHOW).map((occurrence) => (
<span>{formatExtendedDateTime(nextOccurrence.start)}</span> <span key={occurrence.id} className={styles.datePill}>
)} {formatDate(occurrence.start, "d. MMMM")}
{numOccurrences > 1 && nextOccurrence?.start && ( </span>
<> ))}
<span>{formatExtendedDateTime(nextOccurrence.start)}</span> {futureOccurrences.length > DATES_TO_SHOW && (
<p className={styles.moreDates}> <span className={styles.moreDates}>{`+${
Flere datoer ({numOccurrences}) futureOccurrences.length - DATES_TO_SHOW
</p> }`}</span>
</>
)} )}
</div> </div>
)} )}
@ -60,7 +62,7 @@ export const EventItem = ({
"occurrence" in event && "occurrence" in event &&
event.occurrence?.start && ( event.occurrence?.start && (
<p className={styles.dates}> <p className={styles.dates}>
{formatExtendedDateTime(nextOccurrence.start)} {formatExtendedDateTime(event.occurrence.start)}
</p> </p>
)} )}
{mode === "calendar" && {mode === "calendar" &&

2
web/src/components/events/eventItem.module.scss
View File

@ -111,7 +111,7 @@
align-items: center; align-items: center;
} }
.moreDates { .datePill, .moreDates {
display: inline-block; display: inline-block;
background: var(--color-background-secondary); background: var(--color-background-secondary);
color: var(--color-chateauBlue); color: var(--color-chateauBlue);

6
web/src/lib/event.ts
View File

@ -197,18 +197,16 @@ export function organizeEventsByDate(events: SingularEvent[]): EventsByDate {
return eventsByDate; return eventsByDate;
} }
export function getClosestOccurrence(event: EventFragment) { export function getFutureOccurrences(event: EventFragment): EventOccurrence[] {
const today = startOfToday(); const today = startOfToday();
const occurrences = event?.occurrences ?? []; const occurrences = event?.occurrences ?? [];
const futureOccurrences = occurrences.filter((occurrence) => const futureOccurrences = occurrences.filter((occurrence) =>
isAfter(toLocalTime(occurrence.start), today) isAfter(toLocalTime(occurrence.start), today)
); );
futureOccurrences.sort( futureOccurrences.sort(
(a, b) => parseISO(a.start).getTime() - parseISO(b.start).getTime() (a, b) => parseISO(a.start).getTime() - parseISO(b.start).getTime()
); );
return futureOccurrences as EventOccurrence[];
return futureOccurrences[0];
} }
export function getEventPig(event: EventFragment): string | null { export function getEventPig(event: EventFragment): string | null {