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

use actual occurrences in date list

Browse Source
This commit is contained in:
Jonas Braathen
2024-06-05 23:00:07 +02:00
parent 4842dcc7f5
commit c974e296ef
5 changed files with 98 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
web/src/app/arrangementer/[slug]/page.tsx
View File

@ -1,6 +1,6 @@
import { getClient } from "@/app/client";
import { Blocks } from "@/components/blocks/Blocks";
import { DateList } from "@/components/events/DateList";
import { DateList, DateListDemo } from "@/components/events/DateList";
import { DateListOld } from "@/components/events/DateListOld";
import { EventHeader } from "@/components/events/EventHeader";
import { BgPig } from "@/components/general/BgPig";
@ -54,7 +54,8 @@ export default async function Page({ params }: { params: { slug: string } }) {
<main className="site-main" id="main">
<EventHeader event={event} />
<section className="pageContent">
<DateList />
<DateList event={event} />
<DateListDemo />
<DateListOld />
<Blocks blocks={event.body} />
</section>

83
web/src/components/events/DateList.tsx
View File

@ -1,6 +1,85 @@
import styles from "./dateList.module.scss";
"use client";
export const DateList = () => {
import { useState } from "react";
import { formatDate, isTodayOrFuture } from "@/lib/date";
import { EventFragment, EventOccurrence, compareDates } from "@/lib/event";
import styles from "./dateList.module.scss";
import Link from "next/link";
const DateListItem = ({ occurrence }: { occurrence: EventOccurrence }) => {
const dateFormat = "EEEE dd.MM.yyyy";
const timeFormat = "'kl.' HH:mm";
return (
<li className={styles.date}>
<div className={styles.time}>
<span>{formatDate(occurrence.start, dateFormat)}</span>&nbsp;
<span>{formatDate(occurrence.start, timeFormat)}</span>
</div>
<div className={styles.venue}>
<span>
{occurrence.venue?.preposition + " " ?? ""}
{occurrence.venue?.url && (
<Link href={occurrence.venue?.url}>{occurrence.venue?.title}</Link>
)}
{!occurrence.venue?.url && <>{occurrence.venue?.title}</>}
</span>
</div>
</li>
);
};
export const DateList = ({ event }: { event: EventFragment }) => {
const [showPast, setShowPast] = useState(false);
const futureOccurrences = event.occurrences
.filter((occurrence) => isTodayOrFuture(occurrence.start))
.sort((a, b) => compareDates(a.start, b.start));
const pastOccurrences = event.occurrences
.filter((occurrence) => !isTodayOrFuture(occurrence.start))
.sort((a, b) => compareDates(a.start, b.start));
// TODO: end date/time?
// TODO: past occurrences?
return (
<div className={styles.dateWrapper}>
<h2 className="circlehead">
<span className="circle"></span>
<span className="circle"></span>
<span className="circle"></span>
Kommende datoer{" "}
<span className="number">({futureOccurrences.length})</span>
</h2>
<ul className={styles.dateList}>
{futureOccurrences.map((occurrence) => (
<DateListItem key={occurrence.id} occurrence={occurrence} />
))}
</ul>
{/* <div onClick={() => setShowPast(!showPast)}>
{showPast ? "Skjul" : "Vis"} tidligere
</div>
{showPast && (
<>
<h2 className="circlehead">
<span className="circle"></span>
<span className="circle"></span>
<span className="circle"></span>
Tidligere datoer{" "}
<span className="number">({pastOccurrences.length})</span>
</h2>
<ul className={styles.dateList}>
{pastOccurrences.map((occurrence) => (
<DateListItem key={occurrence.id} occurrence={occurrence} />
))}
</ul>
</>
)} */}
</div>
);
};
export const DateListDemo = ({ event }: { event: EventFragment }) => {
return (
<div className={styles.dateWrapper}>
<h2 className="circlehead">

4
web/src/gql/gql.ts
View File

@ -33,7 +33,7 @@ const documents = {
"\n query home {\n events: eventIndex {\n ... on EventIndex {\n futureEvents {\n ... on EventPage {\n ...Event\n }\n }\n }\n }\n home: page(contentType: \"home.HomePage\", urlPath: \"/home/\") {\n ... on HomePage {\n ...Home\n }\n }\n news: pages(contentType: \"news.newsPage\", limit: 3) {\n ... on NewsPage {\n ...News\n }\n }\n }\n ": types.HomeDocument,
"\n fragment Blocks on StreamFieldInterface {\n id\n blockType\n field\n ... on RichTextBlock {\n rawValue\n value\n }\n ... on ImageWithTextBlock {\n image {\n ...Image\n }\n imageFormat\n text\n }\n ... on ImageSliderBlock {\n images {\n ... on ImageSliderItemBlock {\n image {\n ...Image\n }\n text\n }\n }\n }\n ... on HorizontalRuleBlock {\n color\n }\n ... on FeaturedBlock {\n title\n featuredBlockText: text\n linkText\n imagePosition\n featuredPage {\n contentType\n pageType\n url\n ... on EventPage {\n featuredImage {\n ...Image\n }\n }\n ... on NewsPage {\n featuredImage {\n ...Image\n }\n }\n }\n featuredImageOverride {\n ...Image\n }\n }\n }\n": types.BlocksFragmentDoc,
"\n fragment Image on CustomImage {\n id\n url\n width\n height\n alt\n attribution\n }\n": types.ImageFragmentDoc,
"\n fragment Event on EventPage {\n __typename\n id\n slug\n title\n body {\n id\n blockType\n field\n ... on RichTextBlock {\n rawValue\n value\n }\n }\n featuredImage {\n ...Image\n }\n pig\n facebookUrl\n ticketUrl\n priceRegular\n priceMember\n priceStudent\n categories {\n ... on EventCategory {\n name\n slug\n }\n }\n occurrences {\n ... on EventOccurrence {\n __typename\n id\n start\n end\n venue {\n __typename\n id\n slug\n title\n }\n }\n }\n }\n": types.EventFragmentDoc,
"\n fragment Event on EventPage {\n __typename\n id\n slug\n title\n body {\n id\n blockType\n field\n ... on RichTextBlock {\n rawValue\n value\n }\n }\n featuredImage {\n ...Image\n }\n pig\n facebookUrl\n ticketUrl\n priceRegular\n priceMember\n priceStudent\n categories {\n ... on EventCategory {\n name\n slug\n }\n }\n occurrences {\n ... on EventOccurrence {\n __typename\n id\n start\n end\n venue {\n __typename\n id\n slug\n title\n preposition\n url\n }\n }\n }\n }\n": types.EventFragmentDoc,
"\n query futureEvents {\n events: eventIndex {\n ... on EventIndex {\n futureEvents {\n ... on EventPage {\n ...Event\n }\n }\n }\n }\n eventCategories: eventCategories {\n ... on EventCategory {\n name\n slug\n showInFilters\n }\n }\n }\n": types.FutureEventsDocument,
"\n fragment News on NewsPage {\n __typename\n id\n slug\n title\n firstPublishedAt\n excerpt\n featuredImage {\n ...Image\n }\n body {\n ...Blocks\n }\n }\n": types.NewsFragmentDoc,
"\n fragment NewsIndex on NewsIndex {\n __typename\n id\n slug\n title\n lead\n }\n": types.NewsIndexFragmentDoc,
@ -137,7 +137,7 @@ export function graphql(source: "\n fragment Image on CustomImage {\n id\n
/**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/
export function graphql(source: "\n fragment Event on EventPage {\n __typename\n id\n slug\n title\n body {\n id\n blockType\n field\n ... on RichTextBlock {\n rawValue\n value\n }\n }\n featuredImage {\n ...Image\n }\n pig\n facebookUrl\n ticketUrl\n priceRegular\n priceMember\n priceStudent\n categories {\n ... on EventCategory {\n name\n slug\n }\n }\n occurrences {\n ... on EventOccurrence {\n __typename\n id\n start\n end\n venue {\n __typename\n id\n slug\n title\n }\n }\n }\n }\n"): (typeof documents)["\n fragment Event on EventPage {\n __typename\n id\n slug\n title\n body {\n id\n blockType\n field\n ... on RichTextBlock {\n rawValue\n value\n }\n }\n featuredImage {\n ...Image\n }\n pig\n facebookUrl\n ticketUrl\n priceRegular\n priceMember\n priceStudent\n categories {\n ... on EventCategory {\n name\n slug\n }\n }\n occurrences {\n ... on EventOccurrence {\n __typename\n id\n start\n end\n venue {\n __typename\n id\n slug\n title\n }\n }\n }\n }\n"];
export function graphql(source: "\n fragment Event on EventPage {\n __typename\n id\n slug\n title\n body {\n id\n blockType\n field\n ... on RichTextBlock {\n rawValue\n value\n }\n }\n featuredImage {\n ...Image\n }\n pig\n facebookUrl\n ticketUrl\n priceRegular\n priceMember\n priceStudent\n categories {\n ... on EventCategory {\n name\n slug\n }\n }\n occurrences {\n ... on EventOccurrence {\n __typename\n id\n start\n end\n venue {\n __typename\n id\n slug\n title\n preposition\n url\n }\n }\n }\n }\n"): (typeof documents)["\n fragment Event on EventPage {\n __typename\n id\n slug\n title\n body {\n id\n blockType\n field\n ... on RichTextBlock {\n rawValue\n value\n }\n }\n featuredImage {\n ...Image\n }\n pig\n facebookUrl\n ticketUrl\n priceRegular\n priceMember\n priceStudent\n categories {\n ... on EventCategory {\n name\n slug\n }\n }\n occurrences {\n ... on EventOccurrence {\n __typename\n id\n start\n end\n venue {\n __typename\n id\n slug\n title\n preposition\n url\n }\n }\n }\n }\n"];
/**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/

10
web/src/gql/graphql.ts
View File

File diff suppressed because one or more lines are too long

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

@ -63,6 +63,8 @@ const EventFragmentDefinition = graphql(`
id
slug
title
preposition
url
}
}
}
@ -102,9 +104,13 @@ export function getSingularEvents(events: EventFragment[]): SingularEvent[] {
.flat();
}
export function compareDates(a: Date | string, b: Date | string) {
return compareAsc(new Date(a), new Date(b));
}
export function sortSingularEvents(events: SingularEvent[]) {
return events.sort((a, b) =>
compareAsc(new Date(a.occurrence.start), new Date(b.occurrence.start))
compareDates(a.occurrence.start, b.occurrence.start)
);
}
interface EventsByDate {