@rapidmx/web-client 0.23.0 → 0.25.1

package/lib/util/api.ts

@@ -157,10 +157,33 @@ export async function apiFetch<T = unknown>(path: string, init: RequestInit = {}
     applyCsrfHeader(headers, init.method);
     const credentials = apiBaseUrl ? "include" : init.credentials;
 
-    const res = await fetch(apiUrl(path), { ...init, headers, credentials });
+    let res = await fetch(apiUrl(path), { ...init, headers, credentials });
+    // The access token has run out (a sleeping tab or laptop stops the timer that renews it in time): renew the session, and ask again once.
+    if (res.status === 401 && sessionRecovery && (await recoverSession())) {
+        res = await fetch(apiUrl(path), { ...init, headers, credentials });
+    }
     return decodeApiResponse<T>(res, (error) => unauthorizedObserver?.(error));
 }
 
+let sessionRecovery: (() => Promise<boolean>) | undefined;
+
+/**
+ * Registers what `apiFetch()` does when the server answers `401`: try to renew the signed-in session and, when that worked, send the request once
+ * more. `recovery` resolves whether the session was renewed. The app frame registers it while a session is open (`useSessionRefresh()`); pass
+ * `undefined` to remove it. A rejection counts as "not renewed".
+ */
+export function setApiSessionRecovery(recovery: (() => Promise<boolean>) | undefined): void {
+    sessionRecovery = recovery;
+}
+
+async function recoverSession(): Promise<boolean> {
+    try {
+        return await sessionRecovery!();
+    } catch {
+        return false;
+    }
+}
+
 /**
  * `fetch()` against auth-server's API — a *different* origin than this app, unlike `apiFetch()` above. Used
  * only for the handful of actions that must be issued by auth-server itself (e.g. admin impersonation, which

package/lib/util/timeZone.ts

@@ -19,7 +19,70 @@ export function deviceTimeZone(): string {
 }
 
 /**
- * Every time zone the browser can name, for a picker: `Intl.supportedValuesOf("timeZone")` where there is one (it leaves out `UTC`,
+ * What `zone`'s clock is called and how far it is from UTC at `at`: `{ abbreviation: "PDT", offset: "-07:00" }`. `null` for a zone the runtime doesn't
+ * know. The abbreviation is the runtime's own (`GMT+1` where it has no name for a zone), the offset counts daylight saving on that date.
+ */
+export function zoneClock(zone: string, at: Date = new Date()): { abbreviation: string; offset: string } | null {
+    try {
+        const part = (style: "short" | "longOffset") =>
+            formatterFor(zone, style).formatToParts(at).find((p) => p.type === "timeZoneName")!.value;
+        return { abbreviation: part("short"), offset: part("longOffset").replace("GMT", "") || "+00:00" };
+    } catch {
+        return null;
+    }
+}
+
+/** Building an `Intl.DateTimeFormat` is by far the costly part of naming a zone's clock, and a list names hundreds: each is made once. */
+const formatters = new Map<string, Intl.DateTimeFormat>();
+
+function formatterFor(zone: string, style: "short" | "longOffset"): Intl.DateTimeFormat {
+    const key = `${style}|${zone}`;
+    let formatter = formatters.get(key);
+    if (!formatter) {
+        // Throws for a zone the runtime doesn't know, which is then not remembered.
+        formatter = new Intl.DateTimeFormat("en-US", { timeZone: zone, timeZoneName: style });
+        formatters.set(key, formatter);
+    }
+    return formatter;
+}
+
+/** A zone id split into its city and the region it is in: "America/Argentina/Buenos_Aires" is "Buenos Aires" in "America/Argentina"; "UTC" is in none. */
+function zoneNames(zone: string): { city: string; region: string } {
+    const parts = zone.split("/");
+    const city = parts.pop()!.replace(/_/g, " ");
+    return { city, region: parts.join("/").replace(/_/g, " ") };
+}
+
+/**
+ * A zone as a list or a line of text names it, city first, with how far its clock is from UTC: "Los Angeles, America (GMT-07:00)". Daylight saving
+ * is read at `at` (now, unless a date matters). A zone the runtime doesn't know is just its name.
+ */
+export function describeTimeZone(zone: string, at: Date = new Date()): string {
+    const clock = zoneClock(zone, at);
+    if (!clock) {
+        return zone.replace(/_/g, " ");
+    }
+    const { city, region } = zoneNames(zone);
+    return `${city}${region ? `, ${region}` : ""} (GMT${clock.offset})`;
+}
+
+/**
+ * Orders zones for a list: by how far their clocks are from UTC at `at` (the westernmost first), then by city, then by id. A zone the runtime
+ * doesn't know comes last.
+ */
+export function sortTimeZones(zones: readonly string[], at: Date = new Date()): string[] {
+    // Each zone's offset is read once, not once per comparison.
+    const keyed = zones.map((zone) => {
+        const offset = zoneClock(zone, at)?.offset;
+        const minutes = offset ? (offset.startsWith("-") ? -1 : 1) * (Number(offset.slice(1, 3)) * 60 + Number(offset.slice(4, 6))) : Number.POSITIVE_INFINITY;
+        return { zone, minutes, city: zoneNames(zone).city };
+    });
+    keyed.sort((a, b) => (a.minutes === b.minutes ? 0 : a.minutes < b.minutes ? -1 : 1) || a.city.localeCompare(b.city) || a.zone.localeCompare(b.zone));
+    return keyed.map((entry) => entry.zone);
+}
+
+/**
+ * Every time zone the browser can name, for a picker (sorted by offset from UTC as it is now, then by city): `Intl.supportedValuesOf("timeZone")` where there is one (it leaves out `UTC`,
  * which is added), else just `extra` - the zones the caller already holds, such as a mailbox's current one.
  */
 export function timeZoneOptions(...extra: string[]): string[] {
@@ -29,5 +92,5 @@ export function timeZoneOptions(...extra: string[]): string[] {
     } catch {
         zones = [];
     }
-    return [...new Set([DEFAULT_TIME_ZONE, ...zones, ...extra.filter(Boolean)])].sort((a, b) => a.localeCompare(b));
+    return sortTimeZones([...new Set([DEFAULT_TIME_ZONE, ...zones, ...extra.filter(Boolean)])]);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rapidmx/web-client",
-  "version": "0.23.0",
+  "version": "0.25.1",
   "description": "RapidMX's webmail and admin console React UI for web-based clients.",
   "type": "module",
   "repository": "https://github.com/rapidmx/web-client",