Events

Part of @cobuntu/embed-react: headless, data via props, links through your router.

Event filters

EventFilters is the community app's events browse strip, minus the events: a search box, a row of category pills (and a row of sub-category pills once a category is chosen), a Filters button with When, Sort, Price and Format, Clear, and a result line. EventMiniCalendar is the month grid for jumping to a day. Neither renders event cards: you fetch with events.list and keep your own list.

The state is one plain object:

interface EventFilterState {
  q: string;
  when: "upcoming" | "past";
  category: string;      // "" = all
  subCategory: string;   // "" = all
  sort: "soonest" | "name";
  price: "" | "free" | "paid";
  format: "" | "in_person" | "online" | "hybrid";
  date: string | null;   // "YYYY-MM-DD"
}

Behaviour, as in the app:

• Choosing a different category clears the sub-category.
• Picking the selected pill again sets it back to All.
• Every option shows its count from events.facets. Upcoming and Soonest are the defaults and do not count as filters.
• Clear resets everything except the search text.

Server-side usage

Read the URL, fetch the page and the counts, render. The helpers are also exported from @cobuntu/embed-react/events, which is not a client module, so a server component can call them.

// app/events/page.tsx (server component)
import { fromSearchParams, toEventQuery, toEventFacetsQuery } from "@cobuntu/embed-react/events";
import { cobuntu } from "@/lib/cobuntu";
import { EventsBrowser } from "./EventsBrowser";
 
export default async function EventsPage({ searchParams }: { searchParams: Promise<Record<string, string>> }) {
  const state = fromSearchParams(await searchParams);
  const [list, facets] = await Promise.all([
    cobuntu.events.list({ ...toEventQuery(state), limit: 24 }),
    cobuntu.events.facets(toEventFacetsQuery(state)),
  ]);
  return <EventsBrowser initial={state} list={list} facets={facets} />;
}

URL sync

toSearchParams(state, base?) writes the state (defaults left out, other keys in base kept); fromSearchParams(params) reads it back from URLSearchParams or a page's searchParams object. The keys are q, when, categoryId, subCategoryId, sort, price, format and date.

"use client";
import { useState } from "react";
import { useRouter } from "next/navigation";
import { EventFilters, EventMiniCalendar, toSearchParams, type EventFilterState } from "@cobuntu/embed-react";
 
export function EventsBrowser({ initial, list, facets }) {
  const router = useRouter();
  const [state, setState] = useState<EventFilterState>(initial);
  const update = (next: EventFilterState) => {
    setState(next);
    const qs = toSearchParams(next, window.location.search).toString();
    router.replace(qs ? `?${qs}` : "?", { scroll: false }); // re-runs the server component
  };
  return (
    <>
      <EventFilters value={state} onChange={update} facets={facets} resultCount={list.events.length} />
      <EventMiniCalendar value={state.date} onChange={(date) => update({ ...state, date })} events={list.events} />
      <MyEventList events={list.events} />
    </>
  );
}

Debounce the search text before you navigate or fetch, if you fetch per keystroke. Without value, the component is uncontrolled: pass defaultValue and read changes from onChange.

EventFilters props

EventMiniCalendar props

Helpers

Event price

The price a card or an event page shows, read from the event's tiers. Same rules as Cobuntu's community app:

• Only paid tiers count. Tiers on sale right now are preferred; when none is on sale, every paid tier is a candidate, so an event between sales windows still shows a price.
• One candidate shows its price; more than one shows "From" the cheapest.
• No paid tier is "Free". Every tier sold out is "Sold out".
• The member price comes from the server (memberPrice, only for a signed-in member who qualifies) and is shown only when it is lower.

The helpers are pure and live in the server-safe @cobuntu/embed-react/events entry as well as the main one.

import { eventPrice, eventPriceTags, instalmentLabel } from "@cobuntu/embed-react/events";
 
const p = eventPrice(event, { locale: "en-IE", labels: { from: (x) => `from ${x}`, free: "free" } });
// { label: "from €15.00", kind: "from", amount: 1500, currency: "EUR", price: "€15.00",
//   memberAmount: 1200, memberPrice: "€12.00", memberLabel: "€12.00 for members" }

Or the headless component:

import { EventPrice } from "@cobuntu/embed-react";
 
<EventPrice event={event} locale="en-IE" labels={{ soldOut: "Sold out" }} />

EventPrice props: event, locale, labels, showMember (default true), className. Classes: cb-event-price (data-kind), __label, __member.

Class map

See the class map conventions.

Event filters

Mini calendar