@protobase/ui 0.3.0 → 0.3.1

package/dist/app/nav-recent.js

@@ -29,5 +29,10 @@ const recentRecords = (model, view, recent, rows, basePath, activeKey) => {
 		};
 	});
 };
+/** Whether a record read anew differs from its row in a sidebar group on the fields the group shows: the group is then out of date. */
+const recentRowDiffers = (model, fields, rows, key, record) => {
+	const row = rows.find((entry) => encodeKey(recordKey(model, entry)) === key);
+	return row !== void 0 && fields.some((field) => !Object.is(row[field], record[field]));
+};
 //#endregion
-export { recentRecords, recentRequest };
+export { recentRecords, recentRequest, recentRowDiffers };

package/dist/app/use-nav-recent.js

@@ -1,29 +1,56 @@
 import { keys } from "../data/query-keys.js";
 import { useClient } from "../data/api-provider.js";
 import { userMenuResources } from "./user-menu-from-meta.js";
-import { recentRecords, recentRequest } from "./nav-recent.js";
-import { useQueries } from "@tanstack/react-query";
+import { recentRecords, recentRequest, recentRowDiffers } from "./nav-recent.js";
+import { useEffect, useMemo } from "react";
+import { useQueries, useQueryClient } from "@tanstack/react-query";
 //#region src/app/use-nav-recent.ts
+const groupKey = ({ model, request }) => keys.navRecent(model.name, request.filter, request.orderBy, request.pageSize);
+/**
+* Refetches a group when a record of its resource is read anew (a record page, or an app following one) and shows
+* something else than the group's row of it, so the sidebar follows the record without waiting for a write or focus.
+*/
+const useFollowRecords = (groups) => {
+	const queryClient = useQueryClient();
+	useEffect(() => queryClient.getQueryCache().subscribe((event) => {
+		if (event.type !== "updated" || event.action.type !== "success") return;
+		const [scope, resource, key] = event.query.queryKey;
+		const record = event.action.data?.record;
+		if (scope !== "record" || typeof key !== "string" || !record) return;
+		for (const group of groups) {
+			if (group.model.name !== resource) continue;
+			const page = queryClient.getQueryData(groupKey(group));
+			if (page && recentRowDiffers(group.model, group.request.fields, page.items, key, record)) queryClient.invalidateQueries({
+				queryKey: groupKey(group),
+				exact: true
+			});
+		}
+	}), [queryClient, groups]);
+};
 /**
 * The records of every sidebar group (`nav.recent`), one list request each, under the `list` query key so that any
-* write to the resource refreshes them. The server applies the caller's access, as on the list page.
+* write to the resource refreshes them, as does reading one of their records anew. The server applies the caller's
+* access, as on the list page.
 */
 const useNavRecent = (meta, basePath, active) => {
 	const client = useClient();
-	const inMenu = userMenuResources(meta);
-	const groups = Object.values(meta.views).flatMap((view) => {
-		const model = meta.resources[view.resource];
-		const recent = view.nav?.recent;
-		return model && recent && !view.nav?.hidden && !inMenu.has(model.name) ? [{
-			model,
-			view,
-			recent,
-			request: recentRequest(model, view, recent)
-		}] : [];
-	});
-	const results = useQueries({ queries: groups.map(({ model, request }) => ({
-		queryKey: keys.navRecent(model.name, request.filter, request.orderBy, request.pageSize),
-		queryFn: () => client.list(model.name, request),
+	const groups = useMemo(() => {
+		const inMenu = userMenuResources(meta);
+		return Object.values(meta.views).flatMap((view) => {
+			const model = meta.resources[view.resource];
+			const recent = view.nav?.recent;
+			return model && recent && !view.nav?.hidden && !inMenu.has(model.name) ? [{
+				model,
+				view,
+				recent,
+				request: recentRequest(model, view, recent)
+			}] : [];
+		});
+	}, [meta]);
+	useFollowRecords(groups);
+	const results = useQueries({ queries: groups.map((group) => ({
+		queryKey: groupKey(group),
+		queryFn: () => client.list(group.model.name, group.request),
 		refetchOnWindowFocus: true
 	})) });
 	return Object.fromEntries(groups.map(({ model, view, recent }, index) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@protobase/ui",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "The Protobase admin app and the React hooks and components for custom UI.",
   "license": "Apache-2.0",
   "repository": {
@@ -38,9 +38,9 @@
     "react-dom": "^19.3.0",
     "recharts": "^3.10.1",
     "tailwindcss": "^4.3.3",
-    "@protobase/client": "0.3.0",
-    "@protobase/layout": "0.3.0",
-    "@protobase/schema": "0.3.0"
+    "@protobase/client": "0.3.1",
+    "@protobase/layout": "0.3.1",
+    "@protobase/schema": "0.3.1"
   },
   "scripts": {
     "build": "tsdown"