@firecms/core 3.5.2-canary.09e1281 → 3.5.2-canary.a36570e

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/core",
   "type": "module",
-  "version": "3.5.2-canary.09e1281",
+  "version": "3.5.2-canary.a36570e",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"
@@ -53,8 +53,8 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
-    "@firecms/formex": "3.5.2-canary.09e1281",
-    "@firecms/ui": "3.5.2-canary.09e1281",
+    "@firecms/formex": "3.5.2-canary.a36570e",
+    "@firecms/ui": "3.5.2-canary.a36570e",
     "@floating-ui/dom": "^1.7.4",
     "@radix-ui/react-portal": "^1.1.10",
     "@radix-ui/react-slot": "^1.2.4",

package/src/components/EntityCollectionView/EntityIdHeaderWidget.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useCallback, useRef } from "react";
 import { Button, cls, focusedDisabled, IconButton, KeyboardTabIcon, Popover, SearchIcon, Tooltip } from "@firecms/ui";
 import { EntityCollection, EntityReference } from "../../types";
 import { navigateToEntity } from "../../util/navigation_utils";
@@ -6,7 +6,8 @@ import { ReferencePreview } from "../../preview";
 import { useNavigationController } from "../../hooks/useNavigationController";
 import { useSideEntityController } from "../../hooks/useSideEntityController";
 import { useTranslation } from "../../hooks/useTranslation";
-import { addRecentId, getRecentIds } from "./utils";
+import { useDataSource } from "../../hooks/data/useDataSource";
+import { addRecentId, getRecentIds, removeRecentIds } from "./utils";
 
 const DEFAULT_ENTITY_OPEN_MODE: "side_panel" | "full_screen" = "side_panel";
 
@@ -27,14 +28,52 @@ export function EntityIdHeaderWidget({
 }) {
 
     const navigation = useNavigationController();
+    const dataSource = useDataSource(collection);
     const [openPopup, setOpenPopup] = React.useState(false);
     const [searchString, setSearchString] = React.useState("");
-    // Kept per full path rather than per collection: a subcollection has the same id under
-    // every parent, and an id found under one parent does not exist under the others.
-    const [recentIds, setRecentIds] = React.useState<string[]>(() => getRecentIds(fullIdPath));
+    // The recent ids are kept per full path rather than per collection: a subcollection has
+    // the same id under every parent, and an id found under one parent does not exist under
+    // the others. Only the ones known to exist are listed.
+    const [recentIds, setRecentIds] = React.useState<string[]>([]);
+    const latestCheck = useRef(0);
     const sideEntityController = useSideEntityController();
     const { t } = useTranslation();
 
+    // Resolved as useEntityFetch resolves them, so the check reads what the preview shows.
+    const resolvedPath = navigation.resolveIdsFrom(path, pathSegments);
+    const resolvedPathSegments = pathSegments
+        ? (navigation.resolveSegmentsFrom?.(pathSegments) ?? pathSegments)
+        : undefined;
+
+    /** Whether the entity exists, or `undefined` when that could not be told. */
+    const entityExists = useCallback(async (entityId: string): Promise<boolean | undefined> => {
+        try {
+            const entity = await dataSource.fetchEntity({
+                path: resolvedPath,
+                pathSegments: resolvedPathSegments,
+                entityId,
+                collection
+            });
+            return Boolean(entity?.values);
+        } catch (e) {
+            return undefined;
+        }
+    }, [dataSource, resolvedPath, resolvedPathSegments, collection]);
+
+    // A recent id that no longer exists would be fetched and shown as "not found" on every
+    // opening, so it is forgotten. One that could not be checked is kept for next time.
+    const refreshRecentIds = () => {
+        const ids = getRecentIds(fullIdPath);
+        const check = ++latestCheck.current;
+        Promise.all(ids.map(entityExists)).then((results) => {
+            if (check !== latestCheck.current) return;
+            const missing = ids.filter((_, i) => results[i] === false);
+            if (missing.length > 0)
+                removeRecentIds(fullIdPath, missing);
+            setRecentIds(ids.filter((_, i) => results[i] === true));
+        });
+    };
+
     const openEntityMode = collection?.openEntityMode ?? DEFAULT_ENTITY_OPEN_MODE;
 
     return (
@@ -42,8 +81,8 @@ export function EntityIdHeaderWidget({
             <Popover
                 open={openPopup}
                 onOpenChange={(open) => {
-                    // rows opened since this header mounted are recent too
-                    if (open) setRecentIds(getRecentIds(fullIdPath));
+                    // read on each opening: rows opened since the last one are recent too
+                    if (open) refreshRecentIds();
                     setOpenPopup(open);
                 }}
                 sideOffset={0}
@@ -64,7 +103,10 @@ export function EntityIdHeaderWidget({
                             // id would open a new entity instead
                             if (!entityId) return;
                             setOpenPopup(false);
-                            setRecentIds(addRecentId(fullIdPath, entityId));
+                            // remembered only once found, or every opening would fetch it again
+                            entityExists(entityId).then((exists) => {
+                                if (exists) addRecentId(fullIdPath, entityId);
+                            });
                             navigateToEntity({
                                 openEntityMode,
                                 collection,

package/src/components/EntityCollectionView/utils.ts

@@ -17,3 +17,9 @@ export function saveSearchedIdsLocally(key: string, ids: string[]) {
 export function getRecentIds(key: string): string[] {
     return getLocalStorageJSON("recent_id_searches::" + key, []);
 }
+
+export function removeRecentIds(key: string, ids: string[]) {
+    const remaining = getRecentIds(key).filter(id => !ids.includes(id));
+    saveSearchedIdsLocally(key, remaining);
+    return remaining;
+}