@planningcenter/topbar 12.5.0-rc.1 → 12.5.0-rc.2

package/dist/topbar.js

@@ -3630,7 +3630,7 @@ const store = createStore(getAllPcoMeta());
 const recentlyVisitableMetadataStore = createStore({
   metadata: getRecentlyVisitableMetadata()
 });
-function sync() {
+function sync$1() {
   const nextState = getAllPcoMeta();
   if (!shallowCompare(store.getState(), nextState)) store.setState(nextState);
   const metadata = getRecentlyVisitableMetadata();
@@ -3640,7 +3640,7 @@ function sync() {
     });
   }
 }
-const observer = new MutationObserver(sync);
+const observer = new MutationObserver(sync$1);
 let hasTriggeredObserve = false;
 function observe() {
   if (hasTriggeredObserve) return;
@@ -3651,7 +3651,7 @@ function observe() {
   // never mutate afterward, so the observer alone would never catch them.
   // Re-read once now, since observe() is only called once a consumer is
   // actually mounting, which is always after the document has fully parsed.
-  sync();
+  sync$1();
   observer.observe(document.head, {
     attributes: true,
     childList: true,
@@ -3667,10 +3667,8 @@ function useRecentlyVisitableMetadata() {
   return shim.useSyncExternalStore(recentlyVisitableMetadataStore.subscribe, () => recentlyVisitableMetadataStore.getState().metadata);
 }
 
-// Entries match the ones home-mobile stores, so one list can sync across web
-// and mobile.
-const ENTRY_VERSION = 3;
 const MAX_ENTRIES = 50;
+const MAX_ENTRY_BYTES = 1024;
 const MAX_TEXT_LENGTH = 200;
 const PRODUCTS$1 = ["accounts", "calendar", "check-ins", "giving", "groups", "home", "login", "people", "publishing", "registrations", "services"];
 // Login has no pages worth returning to.
@@ -3717,8 +3715,8 @@ function entryKey(entry) {
     return `page:${entry.app}:${entry.path.split("?")[0]}`;
   }
 }
-function isEntry(value) {
-  if (!isRecord(value) || value.version !== ENTRY_VERSION || typeof value.visitedAt !== "string") {
+function hasEntryShape(value) {
+  if (!isRecord(value) || typeof value.visitedAt !== "string") {
     return false;
   } else if (value.type === "resource") {
     return typeof value.pcrl === "string" && isPcrl(value.pcrl);
@@ -3728,15 +3726,38 @@ function isEntry(value) {
     return false;
   }
 }
+function utf8Length(value) {
+  return Array.from(value).reduce((length, character) => {
+    var _a;
+    const codePoint = (_a = character.codePointAt(0)) !== null && _a !== void 0 ? _a : 0;
+    if (codePoint < 0x80) {
+      return length + 1;
+    } else if (codePoint < 0x800) {
+      return length + 2;
+    } else if (codePoint < 0x10000) {
+      return length + 3;
+    } else {
+      return length + 4;
+    }
+  }, 0);
+}
+function excessBytes(entry) {
+  return utf8Length(JSON.stringify(entry)) - MAX_ENTRY_BYTES;
+}
+// user-store-sync rejects a whole write over one entry above its size limit,
+// so an entry that can't fit isn't one this list can hold.
+function isEntry(value) {
+  return hasEntryShape(value) && excessBytes(value) <= 0;
+}
 // Cuts on code points so a surrogate pair is never split.
 function clampText(value) {
   return Array.from(value).slice(0, MAX_TEXT_LENGTH).join("");
 }
-function clampMetadata({
+function metadataFrom({
   details,
   type
 }) {
-  return {
+  const metadata = {
     ...(details && {
       details: clampText(details)
     }),
@@ -3744,39 +3765,124 @@ function clampMetadata({
       type: clampText(type)
     })
   };
+  return Object.keys(metadata).length > 0 ? {
+    metadata
+  } : {};
+}
+function pageEntry({
+  app,
+  path,
+  visitedAt
+}, {
+  details,
+  title,
+  type
+}) {
+  return {
+    app,
+    ...metadataFrom({
+      details,
+      type
+    }),
+    path,
+    title: clampText(title),
+    type: "page",
+    visitedAt
+  };
 }
-function clampVisit(visit) {
-  if (visit.type === "resource") {
-    return visit;
+function texts(entry) {
+  var _a, _b, _c, _d;
+  return {
+    details: (_b = (_a = entry.metadata) === null || _a === void 0 ? void 0 : _a.details) !== null && _b !== void 0 ? _b : "",
+    title: entry.title,
+    type: (_d = (_c = entry.metadata) === null || _c === void 0 ? void 0 : _c.type) !== null && _d !== void 0 ? _d : ""
+  };
+}
+function jsonBytes(value) {
+  return utf8Length(JSON.stringify(value)) - 2;
+}
+function longestText(entry) {
+  return Object.entries(texts(entry)).reduce((longest, candidate) => jsonBytes(candidate[1]) > jsonBytes(longest[1]) ? candidate : longest);
+}
+// Takes whole characters off the end until at least `excess` bytes are gone,
+// so a surrogate pair is never split.
+function shortenBy(value, excess, minLength) {
+  var _a;
+  const characters = Array.from(value);
+  let removed = 0;
+  while (characters.length > minLength && removed < excess) {
+    removed += jsonBytes((_a = characters.pop()) !== null && _a !== void 0 ? _a : "");
+  }
+  return characters.join("");
+}
+// Trims the longest text field by the overflow, repeating until the entry
+// fits or the title is down to one character.
+function trimTexts(entry) {
+  const excess = excessBytes(entry);
+  const [field, value] = longestText(entry);
+  const shortened = shortenBy(value, excess, field === "title" ? 1 : 0);
+  if (excess <= 0 || shortened === value) {
+    return entry;
   } else {
-    return {
-      ...visit,
-      ...(visit.metadata && {
-        metadata: clampMetadata(visit.metadata)
-      }),
-      title: clampText(visit.title.trim())
-    };
+    return trimTexts(pageEntry(entry, {
+      ...texts(entry),
+      [field]: shortened
+    }));
+  }
+}
+// The query string is the first thing to go, since it's not part of the
+// page's identity; what's left is trimmed to fit under the service's limit.
+function fitPage(entry) {
+  if (excessBytes(entry) <= 0) {
+    return entry;
+  } else {
+    return trimTexts({
+      ...entry,
+      path: entry.path.split("?")[0]
+    });
   }
 }
 function toEntry(visit, visitedAt) {
-  return {
-    ...clampVisit(visit),
-    version: ENTRY_VERSION,
+  const entry = {
+    ...visit,
     visitedAt: visitedAt.toISOString()
   };
+  if (entry.type === "resource") {
+    return entry;
+  } else {
+    return fitPage(pageEntry(entry, {
+      ...texts(entry),
+      title: entry.title.trim()
+    }));
+  }
+}
+// user-store-sync rejects a whole write over one field it doesn't know, so
+// anything else an entry carries (like the version older entries stored) is
+// dropped on the way in.
+function withKnownFields(entry) {
+  if (entry.type === "resource") {
+    return {
+      pcrl: entry.pcrl,
+      type: entry.type,
+      visitedAt: entry.visitedAt
+    };
+  } else {
+    return pageEntry(entry, texts(entry));
+  }
 }
 // Recents are disposable: anything unexpected reads as an empty list (or, for
 // a single bad entry, a list without it) rather than throwing.
+function entriesFrom(value) {
+  if (Array.isArray(value)) {
+    return value.filter(isEntry).map(withKnownFields);
+  } else {
+    return [];
+  }
+}
 function parseRecentlyVisited(value) {
-  let parsed = null;
   try {
-    parsed = JSON.parse(value !== null && value !== void 0 ? value : "null");
+    return entriesFrom(JSON.parse(value !== null && value !== void 0 ? value : "null"));
   } catch {
-    parsed = null;
-  }
-  if (Array.isArray(parsed)) {
-    return parsed.filter(isEntry);
-  } else {
     return [];
   }
 }
@@ -3784,6 +3890,38 @@ function addVisit(entries, entry) {
   const key = entryKey(entry);
   return [entry, ...entries.filter(existing => entryKey(existing) !== key)].slice(0, MAX_ENTRIES);
 }
+// The service may write timestamps with fewer fractional digits than
+// toISOString, so they're compared as times rather than strings.
+function visitTime(entry) {
+  return isRecord(entry) && typeof entry.visitedAt === "string" ? Date.parse(entry.visitedAt) || 0 : 0;
+}
+function newestFirst(entries) {
+  const seen = new Set();
+  return entries.sort((a, b) => visitTime(b) - visitTime(a)).filter(entry => {
+    if (isEntry(entry)) {
+      const key = entryKey(entry);
+      const isFirst = !seen.has(key);
+      seen.add(key);
+      return isFirst;
+    } else {
+      return true;
+    }
+  }).slice(0, MAX_ENTRIES);
+}
+// One list from several, newest visit first wherever it was recorded.
+function mergeEntries(...lists) {
+  return newestFirst(lists.flat());
+}
+// Products pin different topbar versions, so the shared list can hold entries
+// this build doesn't recognize (a newer app or type). They're kept, as stored,
+// in what's written back, so an older topbar never erases a newer client's
+// visits.
+function mergeStored(stored, local) {
+  return newestFirst([...(Array.isArray(stored) ? stored : []), ...local]);
+}
+function isSameList(a, b) {
+  return a.length === b.length && a.every((entry, index) => entryKey(entry) === entryKey(b[index]) && visitTime(entry) === visitTime(b[index]));
+}
 
 // The app whose URL, in this environment, has the current page's host.
 // Reversing pcoUrl handles every environment @planningcenter/url knows about,
@@ -3894,9 +4032,164 @@ function useCurrentPersonId() {
   return userId == null ? undefined : String(userId);
 }
 
-// Per-origin localStorage is a stopgap: each product keeps its own list until
-// PCA-409 moves this to storage shared across product subdomains. Only this
-// file should need to change when it does.
+// Tokens last 15 minutes. Refreshing a minute early keeps one from expiring
+// between reading a token and the service checking it.
+const REFRESH_MARGIN_MS = 60000;
+// A failed mint (a CSRF 422, a 5xx, a body that isn't a token) isn't retried
+// on every visit and panel open; the product is left alone for a while.
+const MINT_BACKOFF_MS = 5 * 60000;
+const MAX_ATTEMPTS = 3;
+// A product without the endpoint answers 404 for the rest of the session, so
+// it's asked once per tab rather than on every page.
+const UNAVAILABLE_UNTIL_KEY = "topbar.user_store_sync.unavailable_until";
+const END_OF_SESSION = Number.MAX_SAFE_INTEGER;
+// Per person, so switching connected people never writes one person's visits
+// with another's token.
+function tokenKey(personId) {
+  return `topbar.user_store_sync.token.${personId}`;
+}
+function readSession(key) {
+  try {
+    return sessionStorage.getItem(key);
+  } catch {
+    return null;
+  }
+}
+function writeSession(key, value) {
+  try {
+    sessionStorage.setItem(key, value);
+  } catch {
+    // Without sessionStorage the next request just mints again.
+  }
+}
+function isUserStoreSyncUnavailable() {
+  return Number(readSession(UNAVAILABLE_UNTIL_KEY)) > Date.now();
+}
+function markUnavailable(until) {
+  writeSession(UNAVAILABLE_UNTIL_KEY, String(until));
+}
+function isToken(value) {
+  return isRecord(value) && typeof value.token === "string" && typeof value.url === "string" && Number.isFinite(value.expiresAt) && typeof value.readOnly === "boolean";
+}
+function cachedToken(personId) {
+  var _a;
+  try {
+    const token = JSON.parse((_a = readSession(tokenKey(personId))) !== null && _a !== void 0 ? _a : "null");
+    if (isToken(token) && token.expiresAt - REFRESH_MARGIN_MS > Date.now()) {
+      return token;
+    } else {
+      return null;
+    }
+  } catch {
+    return null;
+  }
+}
+function tokenFrom(json) {
+  if (isRecord(json)) {
+    const token = {
+      expiresAt: typeof json.expires_at === "string" ? Date.parse(json.expires_at) : NaN,
+      readOnly: json.read_only === true,
+      token: json.token,
+      url: json.url
+    };
+    return isToken(token) ? token : null;
+  } else {
+    return null;
+  }
+}
+async function mintToken(personId) {
+  const {
+    json,
+    ok,
+    response
+  } = await apiRequest(railsCsrfFetch, `${window.location.origin}/user_store_sync/token`, {
+    method: "POST"
+  });
+  const token = ok ? tokenFrom(json) : null;
+  if (token) {
+    writeSession(tokenKey(personId), JSON.stringify(token));
+  } else if ((response === null || response === void 0 ? void 0 : response.status) === 404) {
+    markUnavailable(END_OF_SESSION);
+  } else {
+    markUnavailable(Date.now() + MINT_BACKOFF_MS);
+  }
+  return token;
+}
+async function request(personId, key, init = {}, isRetry = false) {
+  var _a;
+  const token = isRetry ? await mintToken(personId) : (_a = cachedToken(personId)) !== null && _a !== void 0 ? _a : await mintToken(personId);
+  if (token) {
+    const response = await fetch(`${token.url}/v1/data/${key}`, {
+      ...init,
+      headers: {
+        ...init.headers,
+        Authorization: `Bearer ${token.token}`
+      }
+    });
+    if (response.status === 401 && !isRetry) {
+      return request(personId, key, init, true);
+    } else {
+      return {
+        response,
+        token
+      };
+    }
+  } else {
+    return null;
+  }
+}
+// The service answers version 0 for a person with nothing stored yet, and
+// takes `If-Match: "0"` for the first write. Without a version at all, the
+// write goes unconditioned.
+function ifMatch(version) {
+  return typeof version === "number" ? {
+    "If-Match": `"${version}"`
+  } : {};
+}
+// Applies `change` to the stored value and writes the result, rereading and
+// retrying when another tab or device wrote in between. `change` returns null
+// when there's nothing to write. A read-only token (staff impersonating
+// someone) only reads, so nothing is written into the person's history.
+// Resolves to the value now stored, or null when the service couldn't be
+// reached.
+async function updateStoredValue(personId, key, change, attemptsLeft = MAX_ATTEMPTS) {
+  const read = await request(personId, key);
+  if (read === null || read === void 0 ? void 0 : read.response.ok) {
+    const {
+      value,
+      version
+    } = await read.response.json();
+    const next = read.token.readOnly ? null : change(value);
+    if (next === null) {
+      return Array.isArray(value) ? value : [];
+    } else {
+      const write = await request(personId, key, {
+        body: JSON.stringify({
+          value: next
+        }),
+        headers: {
+          "Content-Type": "application/json",
+          ...ifMatch(version)
+        },
+        method: "PUT"
+      });
+      if (write === null || write === void 0 ? void 0 : write.response.ok) {
+        return next;
+      } else if ((write === null || write === void 0 ? void 0 : write.response.status) === 409 && attemptsLeft > 1) {
+        return updateStoredValue(personId, key, change, attemptsLeft - 1);
+      } else {
+        return null;
+      }
+    }
+  } else {
+    return null;
+  }
+}
+
+// Each product keeps its own copy in localStorage, and user-store-sync joins
+// the copies up across products and devices wherever the product can mint a
+// token for it.
+const SYNC_KEY = "recently_viewed";
 function storageKey({
   env,
   personId
@@ -3915,17 +4208,60 @@ function readRecentlyVisited(scope) {
     return [];
   }
 }
+function writeRecentlyVisited(scope, entries) {
+  try {
+    localStorage.setItem(storageKey(scope), JSON.stringify(entries));
+    changes.setState({
+      version: changes.getState().version + 1
+    });
+  } catch {
+    // Storage can be full or blocked; recents are disposable.
+  }
+}
+async function syncOnce(scope) {
+  try {
+    const synced = await updateStoredValue(scope.personId, SYNC_KEY, stored => {
+      const shared = entriesFrom(stored);
+      const local = readRecentlyVisited(scope);
+      return isSameList(mergeEntries(shared, local), shared) ? null : mergeStored(stored, local);
+    });
+    if (synced) {
+      writeRecentlyVisited(scope, mergeEntries(entriesFrom(synced), readRecentlyVisited(scope)));
+    }
+  } catch {
+    // The service is best-effort; the local copy stands on its own.
+  }
+}
+const syncing = new Map();
+const syncAgain = new Set();
+// One sync per list at a time. A visit recorded while one runs schedules a
+// single follow-up, so it still reaches the service; anything else asking
+// mid-sync just waits for the one running.
+function sync(scope, followUp) {
+  const key = storageKey(scope);
+  const running = syncing.get(key);
+  if (isUserStoreSyncUnavailable()) {
+    return Promise.resolve();
+  } else if (running) {
+    if (followUp) syncAgain.add(key);
+    return running;
+  } else {
+    const run = syncOnce(scope).then(() => {
+      syncing.delete(key);
+      return syncAgain.delete(key) ? sync(scope, false) : undefined;
+    });
+    syncing.set(key, run);
+    return run;
+  }
+}
+function syncRecentlyVisited(scope) {
+  return sync(scope, false);
+}
 function recordVisit(visit, scope) {
   const entry = toEntry(visit, new Date());
   if (isEntry(entry)) {
-    try {
-      localStorage.setItem(storageKey(scope), JSON.stringify(addVisit(readRecentlyVisited(scope), entry)));
-      changes.setState({
-        version: changes.getState().version + 1
-      });
-    } catch {
-      // Storage can be full or blocked; recents are disposable.
-    }
+    writeRecentlyVisited(scope, addVisit(readRecentlyVisited(scope), entry));
+    sync(scope, true);
   }
 }
 function useRecentlyVisited({
@@ -3933,6 +4269,14 @@ function useRecentlyVisited({
   personId
 }) {
   const version = shim.useSyncExternalStore(changes.subscribe, () => changes.getState().version);
+  React.useEffect(() => {
+    if (personId) {
+      syncRecentlyVisited({
+        env,
+        personId
+      });
+    }
+  }, [env, personId]);
   // `version` isn't read, but listing it re-reads storage after each visit.
   return React.useMemo(() => personId ? readRecentlyVisited({
     env,
@@ -4107,28 +4451,44 @@ function useCopyLink() {
   };
 }
 
+function indexOf(highlight, items, list) {
+  const pinnedIndex = items.findIndex(({
+    key
+  }) => key === highlight.key);
+  if (highlight.list !== list) {
+    return 0;
+  } else if (pinnedIndex >= 0) {
+    return pinnedIndex;
+  } else {
+    return highlight.index;
+  }
+}
 // Remembering which list the index belongs to puts the highlight back on the
 // first item whenever a new list replaces it, without an effect to reset it.
-// A list that grows or fills in under the same `list` keeps its highlight.
+// A list that grows, fills in, or reorders under the same `list` keeps its
+// highlight on the same item, found again by key.
 // Disabled, nothing is highlighted and the keys and pointer leave it alone.
 function useResultNavigation(items, list, enabled = true) {
   const [highlight, setHighlight] = React.useState({
     index: 0,
     list
   });
-  const highlightedIndex = highlight.list === list ? highlight.index : 0;
+  const highlightedIndex = indexOf(highlight, items, list);
   const highlighted = enabled ? items[highlightedIndex] : undefined;
   const {
     copiedUrl,
     copy
   } = useCopyLink();
   const highlightIndex = React.useCallback(index => {
+    var _a;
     if (!enabled) return;
-    setHighlight(current => current.list === list && current.index === index ? current : {
+    const key = (_a = items[index]) === null || _a === void 0 ? void 0 : _a.key;
+    setHighlight(current => current.list === list && current.index === index && current.key === key ? current : {
       index,
+      key,
       list
     });
-  }, [enabled, list]);
+  }, [enabled, items, list]);
   const handleKeyDown = event => {
     if (!enabled) return;
     const step = verticalStep(event.key);