@tribe-nest/forge 3.42.1 → 3.48.0

package/src/index.ts

@@ -120,6 +120,12 @@ export * from "./data/queries/useAccount";
 export * from "./data/queries/useMyTickets";
 export * from "./data/queries/usePassTransfers";
 export * from "./data/queries/useMyBookings";
+// The member's own call calendar. Beside `useMyBookings` and `useMyTickets`
+// because it answers the same shape of question: what have I got coming up
+// with this artist, and where do I go for it.
+export * from "./data/queries/useMembershipCalls";
+// The host's recording control, for ANY call: it addresses the call, not a domain.
+export * from "./data/queries/useCallRecording";
 export * from "./data/queries/useEventWaitlist";
 export * from "./data/queries/useWalletPass";
 export * from "./data/queries/useFinalize";
@@ -137,6 +143,7 @@ export * from "./data/queries/useWebsite";
 export * from "./data/queries/useWebsiteAgent";
 export * from "./data/queries/useCurrencies";
 export * from "./data/queries/useChat";
+export * from "./data/queries/useCallChat";
 export * from "./data/queries/useAnalytics";
 export * from "./data/queries/useCommunity";
 export * from "./data/queries/useReviews";

package/src/ui/headless/memberHome/index.ts

@@ -5,3 +5,7 @@ export {
   type MemberHomeNavKey,
   type UseMemberHomeNavOptions,
 } from "./useMemberHomeNav";
+
+// The member call calendar's model. Grouping lives here so the two rendering
+// surfaces cannot disagree about which calls are "today".
+export { useMemberCalls, type MemberCalendarDay, type UseMemberCallsOptions } from "./useMemberCalls";

package/src/ui/headless/memberHome/useMemberCalls.ts

@@ -0,0 +1,137 @@
+import { useMemo, useState } from "react";
+import { useMyMembershipCalls, type MyMembershipCall } from "../../../data/queries/useMembershipCalls";
+
+/**
+ * Headless model for the member CALENDAR: a month you can page through, with
+ * upcoming calls and past ones side by side.
+ *
+ * ## Why a month and not a list
+ *
+ * A list can only ever run forwards. A member who missed Tuesday has nowhere to
+ * go looking for it, and a member wondering what is on next month cannot ask.
+ * The month is the unit people already think in for "when is that call", and
+ * paging it is what makes both directions reachable.
+ *
+ * ## The zone
+ *
+ * A call carries the creator's `timezone` when they set one. When they did not,
+ * the fallback is the VIEWER's zone rather than UTC - the instant is absolute
+ * either way, and UTC is a time nobody is in. This deliberately differs from
+ * `EventDetail`, whose UTC fallback is about a published page that must read the
+ * same to everybody who links to it; a personal calendar has every reason to be
+ * local.
+ *
+ * The GRID, though, is laid out in one zone - the viewer's - because a month has
+ * to have one shape. A call at 1am Tokyo on the 1st is on the 1st in the grid if
+ * that is where the viewer's clock puts it, and its own row still prints the
+ * creator's time.
+ */
+
+export interface MemberCalendarDay {
+  /** `YYYY-MM-DD` in the viewer's zone. Stable key for a cell. */
+  key: string;
+  date: Date;
+  /** False for the leading and trailing days that pad the grid to whole weeks. */
+  inMonth: boolean;
+  isToday: boolean;
+  isPast: boolean;
+  calls: MyMembershipCall[];
+}
+
+export interface UseMemberCallsOptions {
+  limit?: number;
+  enabled?: boolean;
+  /**
+   * Injected so a test can pin it. Not a prop anybody passes in production -
+   * "today" is genuinely now, and a stale value would mark the wrong cell.
+   */
+  now?: Date;
+  /** Monday-first. The repo's `utils/recurrence` fixes the same convention. */
+  weekStartsOn?: 0 | 1;
+}
+
+const dayKey = (date: Date): string => date.toLocaleDateString("en-CA");
+
+/** Midnight local on the first of the month `offset` months from `from`. */
+const monthStart = (from: Date, offset = 0): Date =>
+  new Date(from.getFullYear(), from.getMonth() + offset, 1);
+
+export function useMemberCalls(options: UseMemberCallsOptions = {}) {
+  const now = options.now ?? new Date();
+  const weekStartsOn = options.weekStartsOn ?? 1;
+
+  /** Which month is on screen, as an offset from the one containing `now`. */
+  const [monthOffset, setMonthOffset] = useState(0);
+  const visibleMonth = monthStart(now, monthOffset);
+
+  /**
+   * The window fetched, which is the whole GRID rather than the month.
+   *
+   * A month view shows the tail of the previous month and the head of the next,
+   * and a call in one of those cells is a real call the member can act on.
+   * Fetching only the month would render those days permanently empty, which
+   * reads as "nothing on" rather than "not asked about".
+   */
+  const gridStart = useMemo(() => {
+    const first = new Date(visibleMonth);
+    const shift = (first.getDay() - weekStartsOn + 7) % 7;
+    return new Date(first.getFullYear(), first.getMonth(), first.getDate() - shift);
+  }, [visibleMonth.getTime(), weekStartsOn]);
+
+  // Six weeks always, so the grid does not change height as you page - a layout
+  // that jumps between months is one the eye has to re-find every click.
+  const gridEnd = useMemo(
+    () => new Date(gridStart.getFullYear(), gridStart.getMonth(), gridStart.getDate() + 42),
+    [gridStart.getTime()],
+  );
+
+  const query = useMyMembershipCalls({
+    from: gridStart,
+    to: gridEnd,
+    limit: options.limit,
+    enabled: options.enabled,
+  });
+
+  const days: MemberCalendarDay[] = useMemo(() => {
+    const byDay = new Map<string, MyMembershipCall[]>();
+    for (const call of query.data ?? []) {
+      // Bucketed by the VIEWER's day, which is the grid's zone. See the header.
+      const key = dayKey(new Date(call.startsAt));
+      const existing = byDay.get(key);
+      if (existing) existing.push(call);
+      else byDay.set(key, [call]);
+    }
+
+    const todayKey = dayKey(now);
+    return Array.from({ length: 42 }, (_, index) => {
+      const date = new Date(gridStart.getFullYear(), gridStart.getMonth(), gridStart.getDate() + index);
+      const key = dayKey(date);
+      return {
+        key,
+        date,
+        inMonth: date.getMonth() === visibleMonth.getMonth() && date.getFullYear() === visibleMonth.getFullYear(),
+        isToday: key === todayKey,
+        isPast: key < todayKey,
+        calls: byDay.get(key) ?? [],
+      };
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [query.data, gridStart.getTime(), visibleMonth.getTime(), now.getTime()]);
+
+  return {
+    /** 42 cells, six whole weeks. */
+    days,
+    visibleMonth,
+    monthLabel: visibleMonth.toLocaleDateString("en-US", { month: "long", year: "numeric" }),
+    /** True when the grid is showing the month `now` falls in. */
+    isCurrentMonth: monthOffset === 0,
+    goToPreviousMonth: () => setMonthOffset((offset) => offset - 1),
+    goToNextMonth: () => setMonthOffset((offset) => offset + 1),
+    goToToday: () => setMonthOffset(0),
+    /** Every call in the fetched window, chronological. Drives the list beneath the grid. */
+    calls: query.data ?? [],
+    isLoading: query.isLoading,
+    error: query.error as Error | null,
+    refetch: query.refetch,
+  };
+}

package/src/ui/headless/memberHome/useMemberHomeNav.ts

@@ -2,15 +2,16 @@ import { useMemo } from "react";
 import { useGetPostCollections } from "../../../data/queries/usePostCollections";
 import { useCommunitySpaces } from "../../../data/queries/useCommunity";
 import { useChatChannels } from "../../../data/queries/useChat";
+import { useMyMembershipCalls } from "../../../data/queries/useMembershipCalls";
 
-export type MemberHomeNavKey = "posts" | "collections" | "spaces" | "chat" | "membership";
+export type MemberHomeNavKey = "posts" | "collections" | "spaces" | "calendar" | "chat" | "membership";
 
 export interface MemberHomeNavItem {
   key: MemberHomeNavKey;
   label: string;
   /** Absolute in-site href (already run through `buildHref` when supplied). */
   href: string;
-  /** Conditional tabs (Collections/Spaces/Chat) are hidden until the profile has content for them. */
+  /** Conditional tabs (Collections/Spaces/Calendar/Chat) are hidden until the profile has content for them. */
   visible: boolean;
   /** Whether `currentPath` falls inside this tab. */
   active: boolean;
@@ -52,10 +53,29 @@ export function useMemberHomeNav(opts: UseMemberHomeNavOptions = {}) {
   const collectionsQ = useGetPostCollections({ page: 1 });
   const spacesQ = useCommunitySpaces();
   const channelsQ = useChatChannels();
+  /**
+   * Upcoming calls this member may join. Already filtered by the server against
+   * their membership, so a non-empty list IS the visibility rule - there is no
+   * second "can they get in" check to make here, and no way for the tab to
+   * appear over an empty page.
+   */
+  /**
+   * ANY call this viewer may see, ever - not just an upcoming one.
+   *
+   * The Calendar is a month you can page backwards through, so it has something
+   * to show from the moment the creator has ever run a call. Keying the tab on
+   * upcoming calls alone hid the whole history the hour the last one ended,
+   * which is precisely when somebody goes looking for the recording.
+   *
+   * `limit: 1` because this is an existence check: the calendar fetches its own
+   * window, and the answer here is only "draw the tab or not".
+   */
+  const callsQ = useMyMembershipCalls({ from: new Date(0), limit: 1 });
 
   const hasCollections = (collectionsQ.data?.data?.length ?? 0) > 0;
   const hasSpaces = (spacesQ.data?.length ?? 0) > 0;
   const hasChannels = (channelsQ.data?.length ?? 0) > 0;
+  const hasCalls = (callsQ.data?.length ?? 0) > 0;
 
   const items: MemberHomeNavItem[] = useMemo(() => {
     const isUnder = (segment: string) =>
@@ -64,19 +84,23 @@ export function useMemberHomeNav(opts: UseMemberHomeNavOptions = {}) {
       { key: "posts", label: "Posts", path: basePath, visible: true, external: false, active: currentPath === normalize(basePath) },
       { key: "collections", label: "Collections", path: `${basePath}/collections`, visible: hasCollections, external: false, active: isUnder("collections") },
       { key: "spaces", label: "Spaces", path: `${basePath}/spaces`, visible: hasSpaces, external: false, active: isUnder("spaces") },
+      // Scheduled calls. Sits above Chat because a call has a TIME on it: it is
+      // the one tab whose content stops being useful if it is found late.
+      { key: "calendar", label: "Calendar", path: `${basePath}/calendar`, visible: hasCalls, external: false, active: isUnder("calendar") },
       { key: "chat", label: "Chat", path: `${basePath}/chat`, visible: hasChannels, external: false, active: isUnder("chat") },
       { key: "membership", label: "My membership", path: membershipHref, visible: true, external: true, active: false },
     ];
     return defs.map(({ path, ...d }) => ({ ...d, href: buildHref(path) }));
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [basePath, membershipHref, currentPath, hasCollections, hasSpaces, hasChannels]);
+  }, [basePath, membershipHref, currentPath, hasCollections, hasSpaces, hasCalls, hasChannels]);
 
   return {
     items,
     /** Visible items only — what a shell actually renders. */
     visibleItems: items.filter((i) => i.visible),
     activeKey: items.find((i) => i.active)?.key ?? null,
-    /** True once the three visibility queries have settled (avoids tab flash). */
-    isReady: !collectionsQ.isLoading && !spacesQ.isLoading && !channelsQ.isLoading,
+    /** True once every visibility query has settled (avoids tab flash). */
+    isReady:
+      !collectionsQ.isLoading && !spacesQ.isLoading && !callsQ.isLoading && !channelsQ.isLoading,
   };
 }