@rapidmx/web-client 0.21.0 → 0.23.0

package/apps/shared/components/calendar/EventDetails.tsx

@@ -15,15 +15,16 @@ import {
     HiOutlineVideoCamera,
     HiOutlineXMark,
 } from "react-icons/hi2";
-import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
-import { AttendeeResponseInput, guestPermissionsOf, respondToEvent, visibilityOf } from "@rapidmx/react-shared/calendar/calendarApi.js";
-import { htmlToPlainText } from "@rapidmx/react-shared/calendar/eventDescription.js";
-import { deleteEventOccurrence, deleteEventSeries } from "@rapidmx/react-shared/calendar/calendarMutations.js";
-import { CalendarOccurrence, describeRecurrence } from "@rapidmx/react-shared/calendar/recurrence.js";
-import { getVideoMeeting } from "@rapidmx/react-shared/videoconf/videoMeetingsApi.js";
-import { deviceTimeZone } from "@rapidmx/react-shared/util/timeZone.js";
-import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
-import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import { ApiRequestError } from "../../../../lib/util/api.js";
+import { useApiClient } from "../../../../lib/util/apiClientContext.js";
+import { AttendeeResponseInput, guestPermissionsOf, respondToEvent, visibilityOf } from "../../../../lib/calendar/calendarApi.js";
+import { htmlToPlainText } from "../../../../lib/calendar/eventDescription.js";
+import { deleteEventOccurrence, deleteEventSeries } from "../../../../lib/calendar/calendarMutations.js";
+import { CalendarOccurrence, describeRecurrence } from "../../../../lib/calendar/recurrence.js";
+import { getVideoMeeting } from "../../../../lib/videoconf/videoMeetingsApi.js";
+import { deviceTimeZone } from "../../../../lib/util/timeZone.js";
+import Alert from "../../../../lib/components/feedback/Alert.js";
+import Button from "../../../../lib/components/buttons/Button.js";
 import { joinMeetingUrl } from "../../calendar/calendarReminders.js";
 import EventDescriptionView from "./EventDescriptionView.js";
 import RequestChangeForm from "./RequestChangeForm.js";
@@ -84,6 +85,7 @@ export default function EventDetails({
     onSaved,
     onDeleted,
 }: EventDetailsProps) {
+    const client = useApiClient();
     const [error, setError] = useState<string | null>(null);
     const [busy, setBusy] = useState(false);
     const [confirmingDelete, setConfirmingDelete] = useState(false);
@@ -99,7 +101,7 @@ export default function EventDetails({
             return;
         }
         let cancelled = false;
-        void getVideoMeeting(videoMeetingUid)
+        void getVideoMeeting(videoMeetingUid, client)
             .then((meeting) => meeting.organizerJoinUrl ?? null)
             .catch(() => null)
             .then((url) => {
@@ -110,7 +112,7 @@ export default function EventDetails({
         return () => {
             cancelled = true;
         };
-    }, [videoMeetingUid]);
+    }, [videoMeetingUid, client]);
     // The same scheme allow-list a reminder's own location gets: a hostile or malformed join link never reaches `window.open()`.
     const joinUrl = joinMeetingUrl(organizerJoinUrl);
 
@@ -119,9 +121,9 @@ export default function EventDetails({
         setBusy(true);
         try {
             if (occurrence.isRecurringOccurrence && scope === "occurrence") {
-                await deleteEventOccurrence(occurrence);
+                await deleteEventOccurrence(occurrence, client);
             } else {
-                await deleteEventSeries(occurrence);
+                await deleteEventSeries(occurrence, client);
             }
             onDeleted();
         } catch (err) {
@@ -136,7 +138,7 @@ export default function EventDetails({
         setError(null);
         setBusy(true);
         try {
-            await respondToEvent(occurrence.uid, responseStatus);
+            await respondToEvent(occurrence.uid, responseStatus, client);
             // A decline soft-deletes the mailbox's own copy server-side - treat it the same as a
             // delete rather than a save so the calendar view drops it immediately.
             if (responseStatus === "declined") {

package/apps/shared/components/calendar/EventEditor.tsx

@@ -4,7 +4,8 @@
 ///////////////////////////////////////////////////////////////////////////////
 import React, { FormEvent, MutableRefObject, useEffect, useMemo, useState } from "react";
 import { format } from "date-fns";
-import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import { ApiClient, ApiRequestError } from "../../../../lib/util/api.js";
+import { useApiClient } from "../../../../lib/util/apiClientContext.js";
 import {
     Attendee,
     CalendarEvent,
@@ -14,18 +15,18 @@ import {
     guestPermissionsOf,
     updateCalendarEvent,
     visibilityOf,
-} from "@rapidmx/react-shared/calendar/calendarApi.js";
+} from "../../../../lib/calendar/calendarApi.js";
 import {
     VideoMeetingInvitee,
     createVideoMeeting,
     getVideoMeeting,
     updateVideoMeeting,
-} from "@rapidmx/react-shared/videoconf/videoMeetingsApi.js";
-import { detachOccurrence, saveEventSeries } from "@rapidmx/react-shared/calendar/calendarMutations.js";
-import { toDatetimeLocal } from "@rapidmx/react-shared/util/dateInput.js";
-import { deviceTimeZone, timeZoneOptions } from "@rapidmx/react-shared/util/timeZone.js";
-import { Mailbox } from "@rapidmx/react-shared/mail/mailApi.js";
-import { CalendarOccurrence, fromEventWallClock, toEventWallClock } from "@rapidmx/react-shared/calendar/recurrence.js";
+} from "../../../../lib/videoconf/videoMeetingsApi.js";
+import { detachOccurrence, saveEventSeries } from "../../../../lib/calendar/calendarMutations.js";
+import { toDatetimeLocal } from "../../../../lib/util/dateInput.js";
+import { deviceTimeZone, timeZoneOptions } from "../../../../lib/util/timeZone.js";
+import { Mailbox } from "../../../../lib/mail/mailApi.js";
+import { CalendarOccurrence, fromEventWallClock, toEventWallClock } from "../../../../lib/calendar/recurrence.js";
 import { addDaysToKey, allDayDateKey, allDayInstant, recurrenceUntilDateKey, recurrenceUntilInstant, startWeekdayCode } from "./allDay.js";
 import { joinMeetingUrl } from "../../calendar/calendarReminders.js";
 import EventExpandedForm from "./EventExpandedForm.js";
@@ -81,7 +82,7 @@ function wallTimeOfDayMs(instantMs: number, timezone: string | undefined): numbe
  * hours later (into the next day), never 22 hours earlier. The master's new start is converted back from
  * that wall clock, so a master on the other side of a DST change keeps the chosen local time.
  */
-async function toSeriesFields(occurrence: CalendarOccurrence, fields: EventFields): Promise<EventFields> {
+async function toSeriesFields(occurrence: CalendarOccurrence, fields: EventFields, client?: ApiClient): Promise<EventFields> {
     const { startDate, endDate, ...rest } = fields;
     if (sameMinute(startDate as string, occurrence.startDate) && sameMinute(endDate as string, occurrence.endDate)) {
         // `saveEventSeries()` treats *any* `timezone`/`allDay` in the update as a possible reinterpretation of
@@ -90,7 +91,7 @@ async function toSeriesFields(occurrence: CalendarOccurrence, fields: EventField
         const { timezone, allDay, ...others } = rest;
         return timezone === occurrence.timezone && allDay === occurrence.allDay ? others : rest;
     }
-    const master = await getCalendarEvent(occurrence.uid);
+    const master = await getCalendarEvent(occurrence.uid, client);
     const timezone = fields.timezone as string;
     const newStart = new Date(startDate as string).getTime();
     const durationMs = new Date(endDate as string).getTime() - newStart;
@@ -173,6 +174,7 @@ export default function EventEditor({
     initialAllDay,
     quickCreate,
 }: EventEditorProps) {
+    const client = useApiClient();
     const [deviceZone] = useState(() => deviceTimeZone());
     const [values, setValues] = useState<EventFormValues>(() => {
         let start: string;
@@ -256,7 +258,7 @@ export default function EventEditor({
             return;
         }
         let cancelled = false;
-        void getVideoMeeting(uid)
+        void getVideoMeeting(uid, client)
             .then((meeting) => meeting.organizerJoinUrl ?? null)
             .catch(() => null)
             .then((url) => {
@@ -267,7 +269,7 @@ export default function EventEditor({
         return () => {
             cancelled = true;
         };
-    }, [occurrence?.videoMeetingUid]);
+    }, [occurrence?.videoMeetingUid, client]);
 
     // "This event only" detaches a standalone, non-repeating copy - the series' rule doesn't apply to it.
     const editingSingleOccurrence = !!occurrence?.isRecurringOccurrence && editScope === "occurrence";
@@ -407,32 +409,38 @@ export default function EventEditor({
                     setVideoError("Add at least one attendee other than yourself to add video conferencing.");
                     return { event: saved, failed: true };
                 }
-                const result = await createVideoMeeting({
-                    mailboxUid: saved.mailboxUid,
-                    title: saved.title.slice(0, MAX_MEETING_TITLE_LENGTH),
-                    visibility: "private",
-                    calendarEventUid: saved.uid,
-                    startTime: saved.startDate,
-                    endTime: saved.endDate,
-                    invitees,
-                });
-                const patched = await updateCalendarEvent({
-                    uid: saved.uid,
-                    version: saved.version,
-                    location: VIDEO_LOCATION_PLACEHOLDER,
-                    videoMeetingUid: result.meeting.uid,
-                });
+                const result = await createVideoMeeting(
+                    {
+                        mailboxUid: saved.mailboxUid,
+                        title: saved.title.slice(0, MAX_MEETING_TITLE_LENGTH),
+                        visibility: "private",
+                        calendarEventUid: saved.uid,
+                        startTime: saved.startDate,
+                        endTime: saved.endDate,
+                        invitees,
+                    },
+                    client,
+                );
+                const patched = await updateCalendarEvent(
+                    {
+                        uid: saved.uid,
+                        version: saved.version,
+                        location: VIDEO_LOCATION_PLACEHOLDER,
+                        videoMeetingUid: result.meeting.uid,
+                    },
+                    client,
+                );
                 setVideoMeetingUid(result.meeting.uid);
                 setOrganizerJoinUrl(result.organizerJoinUrl ?? null);
                 update({ location: VIDEO_LOCATION_PLACEHOLDER });
                 return { event: patched, failed: false };
             }
-            await updateVideoMeeting(videoMeetingUid!, { status: "cancelled" });
+            await updateVideoMeeting(videoMeetingUid!, { status: "cancelled" }, client);
             const restoredLocation = location.trim() === VIDEO_LOCATION_PLACEHOLDER ? "" : location.trim();
             // A stored event clears a field with an explicit `null` (see `EventFields`) - an omitted one would
             // leave the placeholder (and the link to the now-cancelled meeting) in place.
             const patch: EventFields = { location: restoredLocation || null, videoMeetingUid: null };
-            const patched = await updateCalendarEvent({ uid: saved.uid, version: saved.version, ...(patch as Partial<CalendarEventInput>) });
+            const patched = await updateCalendarEvent({ uid: saved.uid, version: saved.version, ...(patch as Partial<CalendarEventInput>) }, client);
             setVideoMeetingUid(undefined);
             setOrganizerJoinUrl(undefined);
             update({ location: restoredLocation });
@@ -536,23 +544,30 @@ export default function EventEditor({
                 // update exactly the record the first attempt left behind, whichever branch below created it.
                 // A series' own exception/detached-occurrence re-pointing already ran on that attempt and has
                 // nothing left to shift - the dates being sent again are the ones it moved everything to.
-                saved = await updateCalendarEvent({ uid: savedEvent.uid, version: savedEvent.version, ...(fields as Partial<CalendarEventInput>) });
+                saved = await updateCalendarEvent({ uid: savedEvent.uid, version: savedEvent.version, ...(fields as Partial<CalendarEventInput>) }, client);
             } else if (!occurrence) {
                 // The organizer is only ever set on create - an edit keeps the event's own organizer.
-                saved = await createCalendarEvent({
-                    mailboxUid: values.targetMailboxUid,
-                    folderUid: values.targetFolderUid,
-                    ...fields,
-                    organizer: { address: effectiveOrganizerAddress, type: "to" },
-                } as CalendarEventInput);
+                saved = await createCalendarEvent(
+                    {
+                        mailboxUid: values.targetMailboxUid,
+                        folderUid: values.targetFolderUid,
+                        ...fields,
+                        organizer: { address: effectiveOrganizerAddress, type: "to" },
+                    } as CalendarEventInput,
+                    client,
+                );
             } else if (editingSingleOccurrence) {
-                saved = await detachOccurrence(occurrence, fields as Partial<CalendarEventInput>);
+                saved = await detachOccurrence(occurrence, fields as Partial<CalendarEventInput>, client);
             } else if (occurrence.isRecurringOccurrence) {
-                const series = await saveEventSeries(occurrence, (await toSeriesFields(occurrence, fields)) as Partial<CalendarEventInput>);
+                const series = await saveEventSeries(
+                    occurrence,
+                    (await toSeriesFields(occurrence, fields, client)) as Partial<CalendarEventInput>,
+                    client,
+                );
                 saved = series;
                 detachedSyncFailed = !!series.detachedOccurrenceSyncFailed;
             } else {
-                saved = await updateCalendarEvent({ uid: occurrence.uid, version: occurrence.version, ...(fields as Partial<CalendarEventInput>) });
+                saved = await updateCalendarEvent({ uid: occurrence.uid, version: occurrence.version, ...(fields as Partial<CalendarEventInput>) }, client);
             }
             const video = await applyVideoConferencing(saved, merged.attendees);
             if (video.failed) {

package/apps/shared/components/calendar/EventExpandedForm.tsx

@@ -4,9 +4,9 @@
 ///////////////////////////////////////////////////////////////////////////////
 import React, { KeyboardEvent, useRef, useState } from "react";
 import { HiOutlineBriefcase, HiOutlineCalendarDays, HiOutlineXMark } from "react-icons/hi2";
-import { BusyStatus } from "@rapidmx/react-shared/calendar/calendarApi.js";
-import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
-import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import { BusyStatus } from "../../../../lib/calendar/calendarApi.js";
+import Alert from "../../../../lib/components/feedback/Alert.js";
+import Button from "../../../../lib/components/buttons/Button.js";
 import FindATime from "./FindATime.js";
 import {
     CalendarField,

package/apps/shared/components/calendar/EventFormParts.tsx

@@ -4,8 +4,8 @@
 ///////////////////////////////////////////////////////////////////////////////
 import React, { ReactNode, useRef, useState } from "react";
 import { HiOutlineBars3BottomLeft, HiOutlineBell, HiOutlineMapPin, HiOutlineUserGroup, HiOutlineVideoCamera, HiOutlineXMark } from "react-icons/hi2";
-import { AttendeeRole, EventVisibility, RecurrenceRule, WeekdayCode } from "@rapidmx/react-shared/calendar/calendarApi.js";
-import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import { AttendeeRole, EventVisibility, RecurrenceRule, WeekdayCode } from "../../../../lib/calendar/calendarApi.js";
+import Button from "../../../../lib/components/buttons/Button.js";
 import GuestInput from "./GuestInput.js";
 import LazyDescriptionEditor from "./LazyDescriptionEditor.js";
 import RecurrenceEditor from "./RecurrenceEditor.js";

package/apps/shared/components/calendar/EventModal.tsx

@@ -3,11 +3,11 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import React, { useRef, useState } from "react";
-import { Mailbox } from "@rapidmx/react-shared/mail/mailApi.js";
-import { CalendarOccurrence } from "@rapidmx/react-shared/calendar/recurrence.js";
-import Modal from "@rapidmx/react-shared/components/overlays/Modal.js";
-import Button from "@rapidmx/react-shared/components/buttons/Button.js";
-import useIsMobile from "@rapidmx/react-shared/util/useIsMobile.js";
+import { Mailbox } from "../../../../lib/mail/mailApi.js";
+import { CalendarOccurrence } from "../../../../lib/calendar/recurrence.js";
+import Modal from "../../../../lib/components/overlays/Modal.js";
+import Button from "../../../../lib/components/buttons/Button.js";
+import useIsMobile from "../../../../lib/util/useIsMobile.js";
 import EventDetails from "./EventDetails.js";
 import EventEditor from "./EventEditor.js";
 import EventShell, { EventAnchor, EventShellVariant } from "./EventShell.js";

package/apps/shared/components/calendar/EventQuickForm.tsx

@@ -4,9 +4,9 @@
 ///////////////////////////////////////////////////////////////////////////////
 import React, { HTMLAttributes, ReactNode, useContext, useState } from "react";
 import { HiOutlineBars2, HiOutlineCalendarDays, HiOutlineClock, HiOutlineXMark } from "react-icons/hi2";
-import { describeRecurrence } from "@rapidmx/react-shared/calendar/recurrence.js";
-import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
-import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import { describeRecurrence } from "../../../../lib/calendar/recurrence.js";
+import Alert from "../../../../lib/components/feedback/Alert.js";
+import Button from "../../../../lib/components/buttons/Button.js";
 import { EventShellContext } from "./EventShell.js";
 import { CalendarField, DateTimeControls, DescriptionRow, GuestsRow, IconRow, LocationRow, VideoConferencingRow } from "./EventFormParts.js";
 import { EventFormController } from "./eventForm.js";

package/apps/shared/components/calendar/EventShell.tsx

@@ -4,7 +4,7 @@
 ///////////////////////////////////////////////////////////////////////////////
 import React, { createContext, ReactNode, useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
-import { OverlayDepthContext, useOverlayDialog } from "@rapidmx/react-shared/components/overlays/overlayStack.js";
+import { OverlayDepthContext, useOverlayDialog } from "../../../../lib/components/overlays/overlayStack.js";
 
 /**
  * Where a new event's quick-create popover hangs: the rectangle (viewport coordinates) of what was clicked - a time slot, a day cell, the

package/apps/shared/components/calendar/FindATime.tsx

@@ -14,8 +14,9 @@ import {
     suggestTimes,
     summarizeAvailability,
     withoutOwnBlock,
-} from "@rapidmx/react-shared/calendar/freeBusyApi.js";
-import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+} from "../../../../lib/calendar/freeBusyApi.js";
+import Button from "../../../../lib/components/buttons/Button.js";
+import { useApiClient } from "../../../../lib/util/apiClientContext.js";
 import { addDaysToKey } from "./allDay.js";
 import { EventFormController } from "./eventForm.js";
 import { formatFormWhen, localDateFromKey, msToWallString, wallStringToMs } from "./eventFormat.js";
@@ -90,6 +91,7 @@ function stateText(state: AvailabilityState | undefined, status: PersonAvailabil
  */
 export default function FindATime({ c }: { c: EventFormController }) {
     const { values, deviceZone, organizerAddress, occurrence } = c;
+    const client = useApiClient();
     const { start, end, allDay, formZone } = values;
     const startDay = start.slice(0, 10);
     const [dayKey, setDayKey] = useState(() => (isDayKey(startDay) ? startDay : format(new Date(), "yyyy-MM-dd")));
@@ -133,7 +135,7 @@ export default function FindATime({ c }: { c: EventFormController }) {
         let current = true;
         setLookUp((previous) => ({ status: "loading", people: previous.people }));
         const timer = setTimeout(() => {
-            getFreeBusy(addresses, new Date(rangeStart), new Date(rangeEnd)).then(
+            getFreeBusy(addresses, new Date(rangeStart), new Date(rangeEnd), client).then(
                 (response) => current && setLookUp({ status: "ready", people: availabilityOf(response) }),
                 (err: unknown) => current && setLookUp({ status: "error", people: [], message: freeBusyErrorMessage(err) }),
             );
@@ -143,7 +145,7 @@ export default function FindATime({ c }: { c: EventFormController }) {
             clearTimeout(timer);
         };
         // `addresses` is what `addressesKey` says.
-    }, [addressesKey, rangeStart, rangeEnd, allDay, retry]);
+    }, [addressesKey, rangeStart, rangeEnd, allDay, retry, client]);
 
     // The event's own time, when it is being rescheduled, is on the calendars of the people already invited: not their conflict with themselves.
     const people = useMemo(() => {

package/apps/shared/components/calendar/GuestInput.tsx

@@ -3,8 +3,8 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import React from "react";
-import type { Attendee } from "@rapidmx/react-shared/calendar/calendarApi.js";
-import type { ContactSuggestionOptions, RecipientSuggestion } from "@rapidmx/react-shared/mail/directoryApi.js";
+import type { Attendee } from "../../../../lib/calendar/calendarApi.js";
+import type { ContactSuggestionOptions, RecipientSuggestion } from "../../../../lib/mail/directoryApi.js";
 import RecipientInput from "../mail/compose/RecipientInput.js";
 import { applyGuestChips, guestChip } from "./eventFormat.js";
 

package/apps/shared/components/calendar/MonthView.tsx

@@ -5,8 +5,8 @@
 import React from "react";
 import { useDraggable, useDroppable } from "@dnd-kit/core";
 import { addDays, eachDayOfInterval, endOfMonth, endOfWeek, format, isSameMonth, isToday, startOfMonth, startOfWeek } from "date-fns";
-import { dayDropId, eventDragId } from "@rapidmx/react-shared/calendar/calendarDragIds.js";
-import { CalendarOccurrence } from "@rapidmx/react-shared/calendar/recurrence.js";
+import { dayDropId, eventDragId } from "../../../../lib/calendar/calendarDragIds.js";
+import { CalendarOccurrence } from "../../../../lib/calendar/recurrence.js";
 import { occursOnDay, startsOnDay } from "./allDay.js";
 import { EventAnchor, anchorOf } from "./EventShell.js";
 

package/apps/shared/components/calendar/QuickCreateFaces.tsx

@@ -3,7 +3,7 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import React, { MutableRefObject, useEffect, useRef, useState } from "react";
-import { deviceTimeZone } from "@rapidmx/react-shared/util/timeZone.js";
+import { deviceTimeZone } from "../../../../lib/util/timeZone.js";
 import AppointmentQuickForm, { initialAppointmentDraft } from "./AppointmentQuickForm.js";
 import EventExpandedForm from "./EventExpandedForm.js";
 import EventQuickForm from "./EventQuickForm.js";

package/apps/shared/components/calendar/QuickFaceFrame.tsx

@@ -4,7 +4,7 @@
 ///////////////////////////////////////////////////////////////////////////////
 import React, { FormEvent, ReactNode, useContext } from "react";
 import { HiOutlineBars2, HiOutlineXMark } from "react-icons/hi2";
-import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Alert from "../../../../lib/components/feedback/Alert.js";
 import { EventShellContext } from "./EventShell.js";
 import { EventFormController } from "./eventForm.js";
 import { QuickTab, quickPanelProps } from "./QuickCreateTabs.js";

package/apps/shared/components/calendar/RecurrenceEditor.tsx

@@ -4,8 +4,8 @@
 ///////////////////////////////////////////////////////////////////////////////
 import React from "react";
 import { format } from "date-fns";
-import { RecurrenceFrequency, RecurrenceRule, WeekdayCode } from "@rapidmx/react-shared/calendar/calendarApi.js";
-import { WEEKDAY_CODES, WEEKDAY_LABELS, describeRecurrence } from "@rapidmx/react-shared/calendar/recurrence.js";
+import { RecurrenceFrequency, RecurrenceRule, WeekdayCode } from "../../../../lib/calendar/calendarApi.js";
+import { WEEKDAY_CODES, WEEKDAY_LABELS, describeRecurrence } from "../../../../lib/calendar/recurrence.js";
 import { recurrenceUntilDateKey, recurrenceUntilInstant } from "./allDay.js";
 
 const SELECT_CLASS =

package/apps/shared/components/calendar/RequestChangeForm.tsx

@@ -4,11 +4,12 @@
 ///////////////////////////////////////////////////////////////////////////////
 import React, { FormEvent, useState } from "react";
 import { HiOutlineXMark } from "react-icons/hi2";
-import { Attendee, EventChangeRequest, requestEventChange } from "@rapidmx/react-shared/calendar/calendarApi.js";
-import { htmlToPlainText, sanitizeEventDescriptionHtml } from "@rapidmx/react-shared/calendar/eventDescription.js";
-import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
-import Button from "@rapidmx/react-shared/components/buttons/Button.js";
-import { toDatetimeLocal } from "@rapidmx/react-shared/util/dateInput.js";
+import { Attendee, EventChangeRequest, requestEventChange } from "../../../../lib/calendar/calendarApi.js";
+import { htmlToPlainText, sanitizeEventDescriptionHtml } from "../../../../lib/calendar/eventDescription.js";
+import Alert from "../../../../lib/components/feedback/Alert.js";
+import Button from "../../../../lib/components/buttons/Button.js";
+import { toDatetimeLocal } from "../../../../lib/util/dateInput.js";
+import { useApiClient } from "../../../../lib/util/apiClientContext.js";
 import { notifyApiError } from "../../notifications/apiErrors.js";
 import { notify } from "../../notifications/store.js";
 import { INPUT_CLASS } from "./EventFormParts.js";
@@ -61,6 +62,7 @@ function sameMinute(a: string, b: string): boolean {
  * A title or location can be changed, not cleared (the server refuses that), and the time of a series or an all-day event is not offered.
  */
 export default function RequestChangeForm({ subject, canChange, canInvite, onSent, onCancel }: RequestChangeFormProps) {
+    const client = useApiClient();
     const canChangeTime = canChange && !subject.allDay && !subject.recurring && !!subject.startDate && !!subject.endDate;
     const [title, setTitle] = useState(subject.title);
     const [location, setLocation] = useState(subject.location ?? "");
@@ -145,7 +147,7 @@ export default function RequestChangeForm({ subject, canChange, canInvite, onSen
 
         setSending(true);
         try {
-            await requestEventChange(subject.uid, request);
+            await requestEventChange(subject.uid, request, client);
             notify({
                 kind: "success",
                 title: "Your change was sent to the organizer",

package/apps/shared/components/calendar/ResourcePicker.tsx

@@ -3,9 +3,10 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import React, { RefObject, useEffect, useState } from "react";
-import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
-import { Mailbox, listResourceMailboxes } from "@rapidmx/react-shared/mail/mailApi.js";
-import PopoverPortal from "@rapidmx/react-shared/components/overlays/PopoverPortal.js";
+import { ApiRequestError } from "../../../../lib/util/api.js";
+import { useApiClient } from "../../../../lib/util/apiClientContext.js";
+import { Mailbox, listResourceMailboxes } from "../../../../lib/mail/mailApi.js";
+import PopoverPortal from "../../../../lib/components/overlays/PopoverPortal.js";
 
 export interface ResourcePickerProps {
     anchorRef: RefObject<HTMLElement | null>;
@@ -25,15 +26,16 @@ export interface ResourcePickerProps {
  * endpoint for mailboxes and the resource-mailbox count in any one org is expected to be small.
  */
 export default function ResourcePicker({ anchorRef, onClose, onSelect, excludeAddresses }: ResourcePickerProps) {
+    const client = useApiClient();
     const [resources, setResources] = useState<Mailbox[] | null>(null);
     const [error, setError] = useState<string | null>(null);
     const [query, setQuery] = useState("");
 
     useEffect(() => {
-        listResourceMailboxes({ limit: 100 })
+        listResourceMailboxes({ limit: 100 }, client)
             .then(setResources)
             .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load resources."));
-    }, []);
+    }, [client]);
 
     const excluded = new Set(excludeAddresses);
     const filtered = (resources ?? []).filter((mailbox) => {

package/apps/shared/components/calendar/SplitDayView.tsx

@@ -4,7 +4,7 @@
 ///////////////////////////////////////////////////////////////////////////////
 import React from "react";
 import { addDays, addMinutes, format, startOfDay } from "date-fns";
-import { CalendarOccurrence } from "@rapidmx/react-shared/calendar/recurrence.js";
+import { CalendarOccurrence } from "../../../../lib/calendar/recurrence.js";
 import { occursOnDay } from "./allDay.js";
 import { EventAnchor, anchorOf } from "./EventShell.js";
 

package/apps/shared/components/calendar/TaskQuickForm.tsx

@@ -14,9 +14,10 @@ import {
     HiOutlineSun,
     HiOutlineXMark,
 } from "react-icons/hi2";
-import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
-import { TaskList, TaskPriority, createTask, listTaskLists } from "@rapidmx/react-shared/tasks/tasksApi.js";
-import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import { ApiRequestError } from "../../../../lib/util/api.js";
+import { useApiClient } from "../../../../lib/util/apiClientContext.js";
+import { TaskList, TaskPriority, createTask, listTaskLists } from "../../../../lib/tasks/tasksApi.js";
+import Button from "../../../../lib/components/buttons/Button.js";
 import { findWellKnownFolderUid } from "../../mail/findWellKnownFolderUid.js";
 import { notify } from "../../notifications/store.js";
 import { EventFormController } from "./eventForm.js";
@@ -75,6 +76,7 @@ export interface TaskQuickFormProps {
  */
 export default function TaskQuickForm({ c, draft, onDraftChange, tabs, expanded, onExpand }: TaskQuickFormProps) {
     const { values } = c;
+    const client = useApiClient();
     const [lists, setLists] = useState<TaskList[]>([]);
     const [error, setError] = useState<string | null>(null);
     const [saving, setSaving] = useState(false);
@@ -83,7 +85,7 @@ export default function TaskQuickForm({ c, draft, onDraftChange, tabs, expanded,
     useEffect(() => {
         let cancelled = false;
         setLists([]);
-        void listTaskLists(values.targetMailboxUid)
+        void listTaskLists(values.targetMailboxUid, {}, client)
             .catch((): TaskList[] => [])
             .then((result) => {
                 if (!cancelled) {
@@ -93,7 +95,7 @@ export default function TaskQuickForm({ c, draft, onDraftChange, tabs, expanded,
         return () => {
             cancelled = true;
         };
-    }, [values.targetMailboxUid]);
+    }, [values.targetMailboxUid, client]);
 
     const mailboxChoices = c.mailboxOptions && c.mailboxOptions.length > 1 ? c.mailboxOptions : undefined;
     // A list of another mailbox that was chosen before the mailbox changed is no longer one.
@@ -114,23 +116,26 @@ export default function TaskQuickForm({ c, draft, onDraftChange, tabs, expanded,
         setSaving(true);
         try {
             const mailboxUid = values.targetMailboxUid;
-            const folderUid = await findWellKnownFolderUid(mailboxUid, "tasks");
+            const folderUid = await findWellKnownFolderUid(mailboxUid, "tasks", client);
             if (!folderUid) {
                 setError("That mailbox has no Tasks folder.");
                 return;
             }
-            await createTask({
-                mailboxUid,
-                folderUid,
-                title,
-                body: draft.body.trim() || undefined,
-                // A date-only due date is the local day's midnight, the way the Tasks app writes one.
-                dueDate: draft.dueDate ? parseISO(draft.allDay ? draft.dueDate : `${draft.dueDate}T${draft.dueTime}`).toISOString() : undefined,
-                priority: draft.priority,
-                reminderDate: draft.reminder ? parseISO(draft.reminder).toISOString() : undefined,
-                taskListUid: listUid || undefined,
-                myDay: draft.myDay || undefined,
-            });
+            await createTask(
+                {
+                    mailboxUid,
+                    folderUid,
+                    title,
+                    body: draft.body.trim() || undefined,
+                    // A date-only due date is the local day's midnight, the way the Tasks app writes one.
+                    dueDate: draft.dueDate ? parseISO(draft.allDay ? draft.dueDate : `${draft.dueDate}T${draft.dueTime}`).toISOString() : undefined,
+                    priority: draft.priority,
+                    reminderDate: draft.reminder ? parseISO(draft.reminder).toISOString() : undefined,
+                    taskListUid: listUid || undefined,
+                    myDay: draft.myDay || undefined,
+                },
+                client,
+            );
             notify({ kind: "success", title: "Task added", message: `“${title}” was added to Tasks.` });
             c.onCancel();
         } catch (err) {

package/apps/shared/components/calendar/TimeGridView.tsx

@@ -5,8 +5,8 @@
 import React from "react";
 import { useDraggable, useDroppable } from "@dnd-kit/core";
 import { addDays, addMinutes, format, isToday, startOfDay } from "date-fns";
-import { dayDropId, eventDragId, resizeDragId, slotDropId } from "@rapidmx/react-shared/calendar/calendarDragIds.js";
-import { CalendarOccurrence } from "@rapidmx/react-shared/calendar/recurrence.js";
+import { dayDropId, eventDragId, resizeDragId, slotDropId } from "../../../../lib/calendar/calendarDragIds.js";
+import { CalendarOccurrence } from "../../../../lib/calendar/recurrence.js";
 import { occursOnDay, startsOnDay } from "./allDay.js";
 import { EventAnchor, anchorOf } from "./EventShell.js";
 
@@ -73,7 +73,9 @@ export default function TimeGridView({ days, occurrences, folderColors, onSelect
             <div className="flex flex-1">
                 <div className="w-14 shrink-0">
                     {HOURS.map((hour) => (
-                        <div key={hour} style={{ height: HOUR_HEIGHT_PX }} className="text-[10px] text-text-muted text-right pr-1.5 -mt-1.5">
+                        // Each label sits on its hour line, raised by half its own height with `relative`/`-top-1.5`: a negative margin here would
+                        // also shorten the row, and the labels would drift up a little more with every hour (48px lines, 42px labels).
+                        <div key={hour} style={{ height: HOUR_HEIGHT_PX }} className="relative -top-1.5 text-[10px] text-text-muted text-right pr-1.5">
                             {hour === 0 ? "" : format(new Date(2000, 0, 1, hour), "ha")}
                         </div>
                     ))}