church-website/src/pageComponents/Home/HomeView.tsx

import { Blog, Worship, EventOccurrence, Highlight } from '@/payload-types'
import { Banner } from '@/components/Banner/Banner'
import { Container } from '@/components/Container/Container'
import { Section } from '@/components/Section/Section'
import { MainText } from '@/components/MainText/MainText'
import { HR } from '@/components/HorizontalRule/HorizontalRule'
import { Title } from '@/components/Title/Title'
import { MassGrid } from '@/components/MassTable/MassGrid'
import { ImageCardSlider } from '@/compositions/ImageCardSlider/ImageCardSlider'
import { blogToSlides } from '@/utils/dto/blog'
import { siteConfig } from '@/config/site'
import forest from '@/assets/map.jpg'
import { ContentWithSlider } from '@/compositions/ContentWithSlider/ContentWithSlider'
import { EventRow } from '@/components/EventRow/EventRow'
import { highlightLink } from '@/utils/dto/highlight'
import { Events } from '@/compositions/Events/Events'
import { transformOccurrences } from '@/utils/dto/events'
import { ContactSection } from '@/compositions/ContactSection/ContactSection'
import { CollapsibleImageWithText } from '@/compositions/CollapsibleImageWithText/CollapsibleImageWithText'
import { MoreInformation } from '@/pageComponents/Home/MoreInformation'
import { Button } from '@/components/Button/Button'
import styles from "./styles.module.scss"
import { Link, PopupButton } from '@/components/PopupButton/PopupButton'
import type { ReactNode } from 'react'

type HomeViewProps = {
  events: EventOccurrence[],
  worship: Worship[],
  blog: Blog[],
  highlights: Highlight[],
  announcements: Link[],
  calendars: Link[],
  publicationAndNewsletter?: ReactNode
}

const sortWorship = (worship: Worship[]) => {
  const map = new Map<string, Worship[]>()

  worship.map(w => {
    if (typeof w.location === 'object') {
      const title = w.location.name

      if (map.has(title)) {
        map.get(title)?.push(w)
      } else {
        map.set(title, [w])
      }
    }
  })

  return map
}


export const HomeView = ({
  events,
  worship,
  blog,
  highlights,
  announcements,
  calendars,
  publicationAndNewsletter,
}: HomeViewProps) => {
    const worshipPerLocation = Array.from(
    sortWorship(worship).entries(),
  ).sort(
    (a, b) => {
      const nameA = a[0]
      const nameB = b[0]

      if (nameA < nameB) {
        return -1
      }
      if (nameA > nameB) {
        return 1
      }

      // names must be equal
      return 0
    },
  )

  return (
    <>
      <Banner />

      <Container>
        <Section>
          <MainText
            text={`Willkommen bei der Pfarrei Heilige Drei Könige Nord-Neukölln! Hier begegnen wir einander – spirituell, kulturell, sozial – und gestalten gemeinsam eine lebendige Kirche. Trete ein und entdecke einen Ort, der inspiriert, verbindet und bewegt.`} />
        </Section>
      </Container>

      <HR />

      <Container>
        {blog && blog.length > 0 &&
          <Section>
            <Title title={'Aktuelles'} color={"contrast"} />
            <ImageCardSlider slides={blogToSlides(blog)} />
          </Section>
        }
      </Container>

      <Section paddingBottom={'medium'}>
        <Title
          title={'Nächste Gottesdienste'}
          subtitle={'Komm einfach vorbei!'}
          color={"contrast"}
          align={'center'}
        />

        <Section padding={'small'}>
          <MassGrid
            locations={worshipPerLocation.map(([name, masses]) => ({
              id: name,
              name,
              masses,
            }))}
          />
        </Section>

        <Section padding={'small'}>
          <div className={styles.center}>

            { announcements.length > 0 &&
              <PopupButton
                text={"Vermeldungen"}
                title={"Vermeldungen"}
                links={announcements}
                schema={"shade"}
              />
            }

            { calendars.length > 0 &&
              <PopupButton
                text={"Liturgischer Kalender"}
                title={"Kalender"}
                links={calendars}
                schema={"shade"}
              />
            }

            <Button
              href={"/gottesdienst"}
              size={"md"}
            >Alle Gottesdienste</Button>
          </div>
        </Section>

      </Section>

      <CollapsibleImageWithText
        backgroundColor={'soft'}
        title={'Über uns'}
        schema={"base"}
        text={'Unsere Pfarrei Hl. Drei Könige wurde am 01.01.2020 gegründet. Am 12.01.2020 feierte Erzbischof Dr. Heiner Koch mit den Gemeinden die Gründung in einer feierlichen Hl. Messe in der katholischen Marienschule. Anwesende Gäste waren Bürgermeister Martin Hikel, Christian Nottmeier, der Superintendent des evangelischen Kirchenkreises Neukölln und viele Akteuren aus Kiez und Ökumene. Die Vielfalt der Glaubenswege in unserer Pfarrei sehen wir als Schatz. Wie die drei Weisen aus dem Morgenland wollen wir uns immer wieder neu auf den Weg machen.'}
        image={forest}
        content={<MoreInformation />}
      />

      <ContentWithSlider slider={<>
        <Title title={'Aktuelle Highlights'} size={'md'} fontStyle={'sans-serif'} color={'white'} />
        {highlights.map(highlight => (
          <EventRow
            color={'white'}
            key={highlight.id}
            date={highlight.date}
            showDate={false}
            title={highlight.text}
            href={highlightLink(highlight)}
            cancelled={false}
          />
        ))}
      </>}>
        <Section>
          <Title
            color={"contrast"}
            title={'Veranstaltungen'}
          />
          <Events
            events={transformOccurrences(events)}
            n={6}
            schema={"contrast"}
          />
        </Section>
      </ContentWithSlider>

      {publicationAndNewsletter}

      <ContactSection
        title={'Kontakt'}
        description={'Haben Sie Fragen zum Glauben, zu den Sakramenten oder unseren Angeboten? Benötigen Sie Hilfe in einer schwierigen Situation oder möchten Sie einfach Ihre Gedanken mit uns teilen?\n' +
          '\n' +
          'Zögern Sie nicht, uns über das Kontaktformular zu schreiben.  Wir freuen uns über jede Nachricht und sind gerne für Sie da.'}
        schema={"base"}
        toEmail={siteConfig.email}
      />
    </>

  )
}