@itwin/saved-views-react 0.5.0 → 0.7.0

package/lib/useSavedViews.js

@@ -1,554 +1,526 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState, } from "react";
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+import { useEffect, useMemo, useRef, useState, } from "react";
+import { useControlledState } from "./utils.js";
+// #endregion
+// #region useSavedViews
+const emptyState = Object.freeze({
+    savedViews: new Map(),
+    savedViewData: new Map(),
+    groups: new Map(),
+    tags: new Map(),
+    thumbnails: new Map(),
+});
 /**
- * Pulls Saved View data from a store and provides means to update and synchronize the data back to it. Interaction with
- * the store is performed via {@linkcode SavedViewsClient} interface which could communicate, for instance, with
- * [iTwin Saved Views API](https://developer.bentley.com/apis/savedviews/overview/) using `ITwinSavedViewsClient`.
+ * Provides basic functionality to help get started with Saved Views.
  *
- * Note on the current implementation limitations. While the result of the first update action is reflected immediately,
- * subsequent actions are put in a queue and executed serially. This may cause the UI to feel sluggish when user makes
- * changes to Saved Views faster than the Saved Views store can be updated.
+ * @remarks
+ * When hook arguments change, it does not automatically clear the {@linkcode UseSavedViewsResult.store}.
+ * If you want more control over the state, provide an external store via {@linkcode UseSavedViewsArgs.state}
+ * and {@linkcode UseSavedViewsArgs.setState} arguments.
+ *
+ * @example
+ * const { iTwinId, iModelId, client, viewport } = props;
+ * const savedViews = useSavedViews({ iTwinId, iModelId, client });
+ * const [isLoading, setIsLoading] = useState(true);
+ * useEffect(
+ *   () => {
+ *     return savedViews.startLoadingData(() => { setIsLoading(false); });
+ *   },
+ *   [],
+ * );
+ *
+ * if (isLoading) {
+ *   return <MyLoadingState />;
+ * }
+ *
+ * const handleOpenSavedView = async (savedViewId) => {
+ *   const savedViewData = await savedViews.lookupSavedViewData(savedViewId);
+ *   await applySavedView(iModel, viewport, savedViewData);
+ * };
+ *
+ * return <MySavedViewsWidget savedViews={savedViews} onOpenSavedView={handleOpenSavedView} />;
  */
-export function useSavedViews(args) {
-    const onUpdateInProgress = useEvent(args.onUpdateInProgress ?? (() => { }));
-    const onUpdateComplete = useEvent(args.onUpdateComplete ?? (() => { }));
-    // eslint-disable-next-line no-console
-    const onUpdateError = useEvent(args.onUpdateError ?? ((error) => console.error(error)));
-    const [state, setState] = useState();
-    const providerRef = useRef({
-        mostRecentState: state,
-        actionQueue: [],
-        abortController: new AbortController(),
-    });
-    providerRef.current.mostRecentState = state;
-    const [provider, setProvider] = useState();
-    useEffect(() => {
-        const observer = new IntersectionObserver((entries) => {
-            for (const entry of entries) {
-                if (!entry.isIntersecting) {
-                    continue;
+export const useSavedViews = Object.assign((args) => {
+    const { iTwinId, iModelId, client } = args;
+    const [state, setState] = useControlledState(args.state ?? emptyState, args.state, args.setState);
+    const stateRef = useRef({ iTwinId, iModelId, client, state, setState });
+    stateRef.current = { iTwinId, iModelId, client, state, setState };
+    const [events] = useState({
+        ...createActions(stateRef),
+        startLoadingData: (callback) => {
+            const { iTwinId, iModelId, client, setState } = stateRef.current;
+            const abortController = new AbortController();
+            const signal = abortController.signal;
+            const observer = new CustomObserver((savedViewId) => {
+                void (async () => {
+                    const loadSavedViewData = async () => {
+                        let savedViewData;
+                        try {
+                            savedViewData = await client.getSavedViewDataById({ savedViewId, signal });
+                        }
+                        catch {
+                            savedViewData = undefined;
+                        }
+                        if (savedViewData && !signal.aborted) {
+                            setState((prev) => {
+                                const newState = { ...prev };
+                                newState.savedViewData = new Map(prev.savedViewData);
+                                newState.savedViewData.set(savedViewId, savedViewData);
+                                return newState;
+                            });
+                        }
+                    };
+                    const loadThumbnail = async () => {
+                        let thumbnailUrl;
+                        try {
+                            thumbnailUrl = await client.getThumbnailUrl({ savedViewId, signal });
+                        }
+                        catch {
+                            thumbnailUrl = undefined;
+                        }
+                        if (!signal.aborted) {
+                            setState((prev) => {
+                                const newState = { ...prev };
+                                newState.thumbnails = new Map(prev.thumbnails);
+                                newState.thumbnails.set(savedViewId, thumbnailUrl && _jsx("img", { src: thumbnailUrl }));
+                                return newState;
+                            });
+                        }
+                    };
+                    await Promise.all([loadSavedViewData(), loadThumbnail()]);
+                })();
+            });
+            void (async () => {
+                try {
+                    const result = await getSavedViewInfo(client, iTwinId, iModelId, signal);
+                    signal.throwIfAborted();
+                    setState((prev) => {
+                        const newState = { ...prev };
+                        newState.savedViews = new Map(prev.savedViews);
+                        result.savedViews.forEach((savedView) => newState.savedViews.set(savedView.savedViewId, savedView));
+                        newState.groups = new Map(prev.groups);
+                        result.groups.forEach((group) => newState.groups.set(group.groupId, group));
+                        newState.tags = new Map(prev.tags);
+                        result.tags.forEach((tag) => newState.tags.set(tag.tagId, tag));
+                        newState.thumbnails = new Map(prev.thumbnails);
+                        result.savedViews
+                            .filter(({ savedViewId }) => !prev.thumbnails.has(savedViewId))
+                            .forEach(({ savedViewId }) => {
+                            newState.thumbnails.set(savedViewId, _jsx(ThumbnailPlaceholder, { savedViewId: savedViewId, observer: observer }));
+                        });
+                        return newState;
+                    });
+                    callback?.();
                 }
-                const savedViewId = entry.target.dataset.savedViewId;
-                if (savedViewId) {
-                    void (async () => {
+                catch (error) {
+                    if (callback) {
+                        callback(error);
+                    }
+                    else {
+                        throw error;
+                    }
+                }
+            })();
+            return () => {
+                abortController.abort();
+                observer.disconnect();
+            };
+        },
+    });
+    return useMemo(() => ({ ...events, store: state }), [events, state]);
+}, (args) => {
+    const { iTwinId, iModelId, client } = args;
+    const [state, setState] = useControlledState(args.state ?? emptyState, args.state, args.setState);
+    const stateRef = useRef({ iTwinId, iModelId, client, state, setState });
+    stateRef.current = { iTwinId, iModelId, client, state, setState };
+    const [events] = useState({
+        ...createActions(stateRef),
+        startLoadingData: (callback) => {
+            const { iTwinId, iModelId, client, setState } = stateRef.current;
+            const abortController = new AbortController();
+            const signal = abortController.signal;
+            const observer = new CustomObserver((savedViewId) => {
+                void (async () => {
+                    const loadSavedViewData = async () => {
+                        let savedViewData;
+                        try {
+                            savedViewData = await client.getSavedViewDataById({ savedViewId, signal });
+                        }
+                        catch {
+                            savedViewData = undefined;
+                        }
+                        if (savedViewData && !signal.aborted) {
+                            setState((prev) => {
+                                const newState = { ...prev };
+                                newState.savedViewData = new Map(prev.savedViewData);
+                                newState.savedViewData.set(savedViewId, savedViewData);
+                                return newState;
+                            });
+                        }
+                    };
+                    const loadThumbnail = async () => {
                         let thumbnailUrl;
                         try {
-                            thumbnailUrl = await args.client.getThumbnailUrl({ savedViewId, signal });
+                            thumbnailUrl = await client.getThumbnailUrl({ savedViewId, signal });
                         }
                         catch {
                             thumbnailUrl = undefined;
                         }
-                        if (signal.aborted) {
-                            return;
+                        if (!signal.aborted) {
+                            setState((prev) => {
+                                const newState = { ...prev };
+                                newState.thumbnails = new Map(prev.thumbnails);
+                                newState.thumbnails.set(savedViewId, thumbnailUrl && _jsx("img", { src: thumbnailUrl }));
+                                return newState;
+                            });
                         }
-                        setState((prev) => {
-                            if (!prev) {
-                                return prev;
-                            }
-                            const newState = { ...prev };
-                            newState.savedViews = new Map(prev.savedViews);
-                            const prevSavedView = prev.savedViews.get(savedViewId);
-                            if (!prevSavedView) {
-                                return prev;
-                            }
-                            const newSavedView = { ...prevSavedView };
-                            newSavedView.thumbnail = thumbnailUrl;
-                            newState.savedViews.set(savedViewId, newSavedView);
-                            return newState;
+                    };
+                    await Promise.all([loadSavedViewData(), loadThumbnail()]);
+                })();
+            });
+            void (async () => {
+                try {
+                    const result = await getSavedViewInfo(client, iTwinId, iModelId, signal);
+                    signal.throwIfAborted();
+                    setState((prev) => {
+                        const newState = { ...prev };
+                        newState.savedViews = new Map(prev.savedViews);
+                        result.savedViews.forEach((savedView) => newState.savedViews.set(savedView.savedViewId, savedView));
+                        newState.groups = new Map(prev.groups);
+                        result.groups.forEach((group) => newState.groups.set(group.groupId, group));
+                        newState.tags = new Map(prev.tags);
+                        result.tags.forEach((tag) => newState.tags.set(tag.tagId, tag));
+                        newState.thumbnails = new Map(prev.thumbnails);
+                        result.savedViews
+                            .filter(({ savedViewId }) => !prev.thumbnails.has(savedViewId))
+                            .forEach(({ savedViewId }) => {
+                            newState.thumbnails.set(savedViewId, _jsx(ThumbnailPlaceholder, { savedViewId: savedViewId, observer: observer }));
                         });
-                    })();
+                        return newState;
+                    });
+                    callback?.();
                 }
-            }
-        });
-        const abortController = new AbortController();
-        const signal = abortController.signal;
-        providerRef.current.abortController = abortController;
-        providerRef.current.actionQueue = [];
-        void (async () => {
-            try {
-                const result = await args.client.getSavedViewInfo({
-                    iTwinId: args.iTwinId,
-                    iModelId: args.iModelId,
-                    signal: signal,
-                });
-                if (signal.aborted) {
-                    return;
+                catch (error) {
+                    if (callback) {
+                        callback(error);
+                    }
+                    else {
+                        throw error;
+                    }
                 }
-                setState({
-                    savedViews: new Map(result.savedViews.map((savedView) => [
-                        savedView.id,
-                        {
-                            ...savedView,
-                            thumbnail: savedView.thumbnail
-                                ?? _jsx(ThumbnailPlaceholder, { savedViewId: savedView.id, observer: observer }),
-                        },
-                    ])),
-                    groups: new Map(result.groups.map((group) => [group.id, group])),
-                    tags: new Map(result.tags.map((tag) => [tag.id, tag])),
-                    thumbnails: new Map(),
-                });
-                setProvider(createSavedViewActions(args.iTwinId, args.iModelId, args.client, setState, providerRef, onUpdateInProgress, onUpdateComplete, onUpdateError));
-            }
-            catch (error) {
-                if (!isAbortError(error)) {
-                    throw error;
+            })();
+            return () => {
+                abortController.abort();
+                observer.disconnect();
+            };
+        },
+    });
+    return useMemo(() => ({ ...events, store: state }), [events, state]);
+}, {
+    /** Suggested initial state of custom Saved View stores. Immutable. */
+    emptyState,
+});
+class CustomObserver {
+    #observer;
+    #observedElements = new Map();
+    constructor(onObserved) {
+        this.#observer = new IntersectionObserver((entries) => {
+            for (const entry of entries) {
+                if (!entry.isIntersecting) {
+                    continue;
+                }
+                const savedViewId = this.#observedElements.get(entry.target);
+                if (savedViewId) {
+                    onObserved(savedViewId);
                 }
             }
-        })();
-        return () => {
-            abortController.abort();
-            observer.disconnect();
-        };
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [args.client, args.iModelId, args.iTwinId]);
-    if (state === undefined || provider === undefined) {
-        return undefined;
+        });
+    }
+    observe(savedViewId, element) {
+        this.#observedElements.set(element, savedViewId);
+        this.#observer.observe(element);
+    }
+    unobserve(element) {
+        this.#observer.unobserve(element);
+        this.#observedElements.delete(element);
+    }
+    disconnect() {
+        this.#observer.disconnect();
     }
+}
+async function getSavedViewInfo(client, iTwinId, iModelId, signal) {
+    const args = { iTwinId, iModelId, signal };
+    const collectSavedViews = async () => {
+        let savedViews = [];
+        const iterable = client.getSavedViews(args);
+        for await (const page of iterable) {
+            savedViews = savedViews.concat(page);
+        }
+        return savedViews;
+    };
+    const [savedViews, groups, tags] = await Promise.all([
+        collectSavedViews(),
+        client.getGroups(args),
+        client.getTags(args),
+    ]);
+    const comparator = (a, b) => a.displayName.localeCompare(b.displayName);
     return {
-        savedViews: state.savedViews,
-        groups: state.groups,
-        tags: state.tags,
-        actions: provider,
+        savedViews: savedViews.sort(comparator),
+        groups: groups.sort(comparator),
+        tags: tags.sort(comparator),
     };
 }
-// Loosely based on useEvent proposal https://github.com/reactjs/rfcs/blob/useevent/text/0000-useevent.md
-function useEvent(handleEvent) {
-    const handleEventRef = useRef(handleEvent);
-    handleEventRef.current = handleEvent;
-    return useCallback((...args) => handleEventRef.current(...args), []);
+function ThumbnailPlaceholder(props) {
+    const { savedViewId, observer } = props;
+    const divRef = useRef(null);
+    useEffect(() => {
+        const div = divRef.current;
+        if (!div) {
+            return;
+        }
+        observer.observe(savedViewId, div);
+        return () => observer.unobserve(div);
+    }, [savedViewId, observer]);
+    return _jsx("div", { ref: divRef });
 }
-function createSavedViewActions(iTwinId, iModelId, client, setState, ref, onUpdateInProgress, onUpdateComplete, onUpdateError) {
-    const signal = ref.current.abortController.signal;
+// #endregion
+// #region createActions
+function createActions(stateRef) {
+    // When an action is invoked, stateRef contains the most recent parameters that were passed to
+    // useSavedViews hook. We need to ensure that the same parameters are used throughout the
+    // operation, so we capture their current values at the beginning of each action.
     return {
-        submitSavedView: actionWrapper(async (savedView, savedViewData) => {
-            let newSavedView;
-            if (typeof savedView !== "string" && savedView.id) {
-                newSavedView = await client.updateSavedView({
-                    // TypeScript cannot tell that `savedView` object contains `id` string without a little help
-                    savedView: { id: savedView.id, ...savedView },
-                    savedViewData,
-                    signal,
-                });
-            }
-            else {
-                newSavedView = await client.createSavedView({
-                    iTwinId: iTwinId,
-                    iModelId: iModelId,
-                    savedView: typeof savedView === "string" ? { displayName: savedView } : savedView,
-                    savedViewData,
-                    signal,
-                });
-            }
-            updateSavedViews((savedViews) => {
-                const entries = Array.from(savedViews.values());
-                entries.push(newSavedView);
-                entries.sort((a, b) => a.displayName.localeCompare(b.displayName));
-                return new Map(entries.map((savedView) => [savedView.id, savedView]));
+        createSavedView: async (savedView, savedViewData) => {
+            const { iTwinId, iModelId, client, setState } = stateRef.current;
+            const newSavedView = await client.createSavedView({ ...savedView, iTwinId, iModelId, savedViewData });
+            setState((prev) => {
+                const savedViews = Array.from(prev.savedViews.values());
+                savedViews.splice(savedViews.findIndex(({ savedViewId }) => savedViewId === newSavedView.savedViewId), 1, newSavedView);
+                savedViews.sort((a, b) => a.displayName.localeCompare(b.displayName));
+                const newState = { ...prev };
+                newState.savedViews = new Map(savedViews.map((savedView) => [savedView.savedViewId, savedView]));
+                return newState;
             });
-            return newSavedView.id;
-        }),
-        renameSavedView: actionWrapper(async (savedViewId, newName) => {
-            if (!newName) {
-                return;
-            }
-            const savedView = ref.current.mostRecentState.savedViews.get(savedViewId);
-            if (!savedView || newName === savedView.displayName) {
-                return;
-            }
-            let prevName;
-            updateSavedView(savedViewId, (savedView) => {
-                prevName = savedView.displayName;
-                savedView.displayName = newName;
+            return newSavedView.savedViewId;
+        },
+        lookupSavedViewData: async (savedViewId) => {
+            const { client, setState } = stateRef.current;
+            const savedViewData = await client.getSavedViewDataById({ savedViewId });
+            setState((prev) => {
+                const newState = { ...prev };
+                newState.savedViewData = new Map(prev.savedViewData);
+                newState.savedViewData.set(savedViewId, savedViewData);
+                return newState;
             });
-            try {
-                await client.updateSavedView({
-                    savedView: { id: savedViewId, displayName: newName },
-                    signal,
-                });
-            }
-            catch (error) {
-                if (prevName !== undefined) {
-                    const restoredDisplayName = prevName;
-                    updateSavedView(savedViewId, (savedView) => {
-                        savedView.displayName = restoredDisplayName;
-                    });
-                }
-                throw error;
-            }
-        }),
-        shareSavedView: actionWrapper(async (savedViewId, share) => {
-            const savedView = ref.current.mostRecentState.savedViews.get(savedViewId);
-            if (!savedView || savedView.shared === share) {
-                return;
-            }
-            updateSavedView(savedViewId, (savedView) => {
-                savedView.shared = share;
+            return savedViewData;
+        },
+        updateSavedView: async (savedViewId, savedView, savedViewData) => {
+            const { client, setState } = stateRef.current;
+            const updatedSavedView = await client.updateSavedView({ ...savedView, savedViewId, savedViewData });
+            setState((prev) => {
+                const savedViews = Array.from(prev.savedViews.values());
+                savedViews.splice(savedViews.findIndex(({ savedViewId }) => savedViewId === updatedSavedView.savedViewId), 1, updatedSavedView);
+                savedViews.sort((a, b) => a.displayName.localeCompare(b.displayName));
+                const newState = { ...prev };
+                newState.savedViews = new Map(savedViews.map((savedView) => [savedView.savedViewId, savedView]));
+                return newState;
             });
-            try {
-                await client.updateSavedView({ savedView: { id: savedViewId, shared: share }, signal });
-            }
-            catch (error) {
-                updateSavedView(savedViewId, (savedView) => {
-                    savedView.shared = !share;
-                });
-                throw error;
-            }
-        }),
-        deleteSavedView: actionWrapper(async (savedViewId) => {
-            let prevSavedViews;
-            updateSavedViews((savedViews) => {
-                prevSavedViews = new Map(savedViews);
-                savedViews.delete(savedViewId);
+        },
+        renameSavedView: async (savedViewId, newName) => {
+            const { client, setState } = stateRef.current;
+            await client.updateSavedView({ savedViewId, displayName: newName });
+            setState((prev) => {
+                const savedView = prev.savedViews.get(savedViewId);
+                if (!savedView) {
+                    return prev;
+                }
+                const newSavedView = { ...savedView };
+                newSavedView.displayName = newName;
+                const newState = { ...prev };
+                newState.savedViews = new Map(prev.savedViews);
+                newState.savedViews.set(savedViewId, newSavedView);
+                savedView.displayName = newName;
+                return newState;
             });
-            try {
-                await client.deleteSavedView({ savedViewId, signal });
-            }
-            catch (error) {
-                if (prevSavedViews !== undefined) {
-                    updateSavedViews(() => prevSavedViews);
+        },
+        shareSavedView: async (savedViewId, shared) => {
+            const { client, setState } = stateRef.current;
+            await client.updateSavedView({ savedViewId, shared });
+            setState((prev) => {
+                const savedView = prev.savedViews.get(savedViewId);
+                if (!savedView) {
+                    return prev;
                 }
-                throw error;
-            }
-        }),
-        createGroup: actionWrapper(async (groupName) => {
-            const group = await client.createGroup({
-                iTwinId: iTwinId,
-                iModelId: iModelId,
-                group: { displayName: groupName },
-                signal,
+                const newSavedView = { ...savedView };
+                newSavedView.shared = shared;
+                const newState = { ...prev };
+                newState.savedViews = new Map(prev.savedViews);
+                newState.savedViews.set(savedViewId, newSavedView);
+                return newState;
             });
-            updateGroups((groups) => {
-                const entries = Array.from(groups.values());
-                entries.push(group);
-                entries.sort((a, b) => a.displayName.localeCompare(b.displayName));
-                return new Map(entries.map((group) => [group.id, group]));
+        },
+        deleteSavedView: async (savedViewId) => {
+            const { client, setState } = stateRef.current;
+            await client.deleteSavedView({ savedViewId });
+            setState((prev) => {
+                const newState = { ...prev };
+                newState.savedViews = new Map(prev.savedViews);
+                newState.savedViews.delete(savedViewId);
+                return newState;
             });
-        }),
-        renameGroup: actionWrapper(async (groupId, newName) => {
-            let prevName;
-            updateGroup(groupId, (group) => {
-                prevName = group.displayName;
-                group.displayName = newName;
+        },
+        createGroup: async (groupName) => {
+            const { iTwinId, iModelId, client, setState } = stateRef.current;
+            const newGroup = await client.createGroup({ iTwinId, iModelId, displayName: groupName });
+            setState((prev) => {
+                const groups = Array.from(prev.groups.values());
+                groups.push(newGroup);
+                groups.sort((a, b) => a.displayName.localeCompare(b.displayName));
+                const newState = { ...prev };
+                newState.groups = new Map(groups.map((group) => [group.groupId, group]));
+                return newState;
             });
-            try {
-                const group = await client.updateGroup({ group: { id: groupId, displayName: newName }, signal });
-                updateGroup(group.id, () => group);
-            }
-            catch (error) {
-                if (prevName !== undefined) {
-                    const restoredDisplayName = prevName;
-                    updateGroup(groupId, (group) => {
-                        group.displayName = restoredDisplayName;
-                    });
+            return newGroup.groupId;
+        },
+        renameGroup: async (groupId, newName) => {
+            const { client, setState } = stateRef.current;
+            await client.updateGroup({ groupId, displayName: newName });
+            setState((prev) => {
+                const group = prev.groups.get(groupId);
+                if (!group) {
+                    return prev;
                 }
-                throw error;
-            }
-        }),
-        shareGroup: actionWrapper(async (groupId, share) => {
-            const group = ref.current.mostRecentState.groups.get(groupId);
-            if (!group || group.shared === share) {
-                return;
-            }
-            updateGroup(groupId, (group) => {
-                group.shared = share;
+                const newGroup = { ...group };
+                newGroup.displayName = newName;
+                const newState = { ...prev };
+                newState.groups = new Map(prev.groups);
+                newState.groups.set(groupId, newGroup);
+                return newState;
             });
-            try {
-                const group = await client.updateGroup({ group: { id: groupId, shared: share }, signal });
-                updateGroup(group.id, () => group);
-            }
-            catch (error) {
-                updateGroup(groupId, (group) => {
-                    group.shared = !share;
-                });
-                throw error;
-            }
-        }),
-        moveToGroup: actionWrapper(async (savedViewId, groupId) => {
-            let prevGroupId;
-            updateSavedView(savedViewId, (savedView) => {
-                prevGroupId = savedView.groupId;
-                savedView.groupId = groupId;
+        },
+        shareGroup: async (groupId, shared) => {
+            const { client, setState } = stateRef.current;
+            await client.updateGroup({ groupId, shared });
+            setState((prev) => {
+                const group = prev.groups.get(groupId);
+                if (!group) {
+                    return prev;
+                }
+                const newGroup = { ...group };
+                newGroup.shared = shared;
+                const newState = { ...prev };
+                newState.groups = new Map(prev.groups);
+                newState.groups.set(groupId, newGroup);
+                return newState;
             });
-            try {
-                await client.updateSavedView({ savedView: { id: savedViewId, groupId }, signal });
-            }
-            catch (error) {
-                const restoredGroupId = prevGroupId;
-                updateSavedView(savedViewId, (savedView) => {
-                    savedView.groupId = restoredGroupId;
-                });
-                throw error;
-            }
-        }),
-        moveToNewGroup: actionWrapper(async (savedViewId, groupName) => {
-            const group = await client.createGroup({
-                iTwinId: iTwinId,
-                iModelId: iModelId,
-                group: { displayName: groupName },
-                signal,
+        },
+        moveToGroup: async (savedViewId, groupId) => {
+            const { client, setState } = stateRef.current;
+            await client.updateSavedView({ savedViewId, groupId });
+            setState((prev) => {
+                const savedView = prev.savedViews.get(savedViewId);
+                if (!savedView) {
+                    return prev;
+                }
+                const newSavedView = { ...savedView };
+                newSavedView.groupId = groupId;
+                const newState = { ...prev };
+                newState.savedViews = new Map(prev.savedViews);
+                newState.savedViews.set(savedViewId, newSavedView);
+                return newState;
             });
-            if (signal.aborted) {
-                return;
-            }
-            updateGroups((groups) => groups.set(group.id, group));
-            let prevGroupId;
-            updateSavedView(savedViewId, (savedView) => {
-                prevGroupId = savedView.groupId;
-                savedView.groupId = group.id;
+        },
+        deleteGroup: async (groupId) => {
+            const { client, setState } = stateRef.current;
+            await client.deleteGroup({ groupId });
+            setState((prev) => {
+                const newState = { ...prev };
+                newState.groups = new Map(prev.groups);
+                newState.groups.delete(groupId);
+                return newState;
             });
-            try {
-                await client.updateSavedView({ savedView: { id: savedViewId, groupId: group.id }, signal });
-            }
-            catch (error) {
-                updateSavedView(savedViewId, (savedView) => {
-                    savedView.groupId = prevGroupId;
-                });
-                throw error;
-            }
-        }),
-        deleteGroup: actionWrapper(async (groupId) => {
-            let prevGroups;
-            updateGroups((groups) => {
-                prevGroups = new Map(groups);
-                groups.delete(groupId);
+        },
+        createTag: async (tagName) => {
+            const { iTwinId, iModelId, client, setState } = stateRef.current;
+            const newTag = await client.createTag({ iTwinId, iModelId, displayName: tagName });
+            setState((prev) => {
+                const newState = { ...prev };
+                newState.tags = new Map(prev.tags);
+                newState.tags.set(newTag.tagId, newTag);
+                return newState;
             });
-            try {
-                await client.deleteGroup({ groupId, signal });
-            }
-            catch (error) {
-                if (prevGroups) {
-                    updateGroups(() => prevGroups);
-                }
-                throw error;
-            }
-        }),
-        addTag: actionWrapper(async (savedViewId, tagId) => {
-            const savedView = ref.current.mostRecentState.savedViews.get(savedViewId);
+            return newTag.tagId;
+        },
+        addTag: async (savedViewId, tagId) => {
+            const { client, state, setState } = stateRef.current;
+            const savedView = state.savedViews.get(savedViewId);
             if (!savedView) {
                 return;
             }
             const tagIds = savedView.tagIds?.slice() ?? [];
             tagIds.push(tagId);
-            tagIds.sort((a, b) => {
-                const aDisplayName = ref.current.mostRecentState.tags.get(a)?.displayName;
-                const bDisplayName = ref.current.mostRecentState.tags.get(b)?.displayName;
-                return aDisplayName?.toLowerCase().localeCompare(bDisplayName?.toLowerCase() ?? "") ?? -1;
-            });
-            let prevTagIds;
-            updateSavedView(savedViewId, (savedView) => {
-                prevTagIds = savedView.tagIds;
-                savedView.tagIds = tagIds;
-            });
-            try {
-                await client.updateSavedView({ savedView: { id: savedViewId, tagIds }, signal });
-            }
-            catch (error) {
-                updateSavedView(savedViewId, (savedView) => {
-                    savedView.tagIds = prevTagIds;
-                });
-                throw error;
-            }
-        }),
-        addNewTag: actionWrapper(async (savedViewId, tagName) => {
-            const savedView = ref.current.mostRecentState.savedViews.get(savedViewId);
-            if (!savedView) {
-                return;
-            }
-            const tag = await client.createTag({
-                iTwinId: iTwinId,
-                iModelId: iModelId,
-                displayName: tagName,
-                signal,
-            });
-            updateTags((tags) => {
-                tags.set(tag.id, tag);
-            });
-            const tagIds = savedView.tagIds?.slice() ?? [];
-            tagIds.push(tag.id);
-            tagIds.sort((a, b) => {
-                const aDisplayName = ref.current.mostRecentState.tags.get(a)?.displayName;
-                const bDisplayName = ref.current.mostRecentState.tags.get(b)?.displayName;
-                return aDisplayName?.toLowerCase().localeCompare(bDisplayName?.toLowerCase() ?? "") ?? -1;
-            });
-            let prevTagIds;
-            updateSavedView(savedViewId, (savedView) => {
-                prevTagIds = savedView.tagIds;
-                savedView.tagIds = tagIds;
+            await client.updateSavedView({ savedViewId, tagIds });
+            setState((prev) => {
+                const savedView = prev.savedViews.get(savedViewId);
+                if (!savedView) {
+                    return prev;
+                }
+                const newSavedView = { ...savedView };
+                newSavedView.tagIds = savedView.tagIds?.slice() ?? [];
+                newSavedView.tagIds.push(tagId);
+                const newState = { ...prev };
+                newState.savedViews = new Map(prev.savedViews);
+                newState.savedViews.set(savedViewId, newSavedView);
+                return newState;
             });
-            try {
-                await client.updateSavedView({ savedView: { id: savedViewId, tagIds }, signal });
-            }
-            catch (error) {
-                updateSavedView(savedViewId, (savedView) => {
-                    savedView.tagIds = prevTagIds;
-                });
-                throw error;
-            }
-        }),
-        removeTag: actionWrapper(async (savedViewId, tagId) => {
-            const savedView = ref.current.mostRecentState.savedViews.get(savedViewId);
-            if (!savedView) {
+        },
+        removeTag: async (savedViewId, tagId) => {
+            const { client, state, setState } = stateRef.current;
+            const savedView = state.savedViews.get(savedViewId);
+            if (!savedView || !savedView.tagIds) {
                 return;
             }
-            const tagIds = (savedView.tagIds ?? []).filter((id) => id !== tagId);
-            if (tagIds.length === (savedView.tagIds?.length ?? 0)) {
+            const newTagIds = savedView.tagIds.splice(savedView.tagIds.indexOf(tagId), 1) ?? [];
+            if (newTagIds.length === savedView.tagIds.length) {
                 return;
             }
-            let prevTagIds;
-            updateSavedView(savedViewId, (savedView) => {
-                prevTagIds = savedView.tagIds;
-                savedView.tagIds = tagIds;
+            await client.updateSavedView({ savedViewId, tagIds: newTagIds });
+            setState((prev) => {
+                const savedView = prev.savedViews.get(savedViewId);
+                if (!savedView) {
+                    return prev;
+                }
+                const newSavedView = { ...savedView };
+                newSavedView.tagIds = newTagIds;
+                const newState = { ...prev };
+                newState.savedViews = new Map(prev.savedViews);
+                newState.savedViews.set(savedViewId, newSavedView);
+                return newState;
             });
-            try {
-                await client.updateSavedView({ savedView: { id: savedViewId, tagIds }, signal });
-            }
-            catch (error) {
-                updateSavedView(savedViewId, (savedView) => {
-                    savedView.tagIds = prevTagIds;
-                });
-                throw error;
-            }
-        }),
-        uploadThumbnail: actionWrapper(async (savedViewId, imageDataUrl) => {
-            let prevThumnbnail;
-            updateSavedView(savedViewId, (savedView) => {
-                prevThumnbnail = savedView.thumbnail;
-                savedView.thumbnail = imageDataUrl;
+        },
+        deleteTag: async (tagId) => {
+            const { client, setState } = stateRef.current;
+            await client.deleteTag({ tagId });
+            setState((prev) => {
+                const newState = { ...prev };
+                newState.tags = new Map(prev.tags);
+                newState.tags.delete(tagId);
+                return newState;
             });
-            try {
-                await client.uploadThumbnail({ savedViewId, image: imageDataUrl, signal });
-            }
-            catch (error) {
-                if (prevThumnbnail !== undefined) {
-                    updateSavedView(savedViewId, (savedView) => {
-                        savedView.thumbnail = prevThumnbnail;
-                    });
-                }
-                throw error;
-            }
-        }),
-    };
-    /**
-     * Serializes action execution and notifies when action processing begins and ends. Continues to execute actions
-     * after cancellation.
-     */
-    function actionWrapper(callback) {
-        return async (...args) => {
-            // eslint-disable-next-line no-async-promise-executor
-            return new Promise(async (resolve, reject) => {
-                ref.current.actionQueue.push(async () => {
-                    if (signal.aborted) {
-                        reject(signal.reason);
-                        return;
-                    }
-                    try {
-                        resolve(await callback(...args));
-                    }
-                    catch (error) {
-                        reject(error);
-                        if (isAbortError(error)) {
-                            // It's a cancellation error, no need to report it
-                        }
-                        else {
-                            try {
-                                onUpdateError(error);
-                            }
-                            catch { }
-                        }
-                    }
-                });
-                // If there are no other queued actions, start executing the queue
-                if (ref.current.actionQueue.length === 1) {
-                    onUpdateInProgress();
-                    // By the time the first action completes, other actions may have been queued
-                    while (ref.current.actionQueue.length > 0) {
-                        await ref.current.actionQueue[0]();
-                        ref.current.actionQueue.shift();
-                    }
-                    onUpdateComplete();
-                }
+        },
+        uploadThumbnail: async (savedViewId, imageDataUrl) => {
+            const { client, setState } = stateRef.current;
+            await client.uploadThumbnail({ savedViewId, image: imageDataUrl });
+            setState((prev) => {
+                const newState = { ...prev };
+                newState.thumbnails = new Map(prev.thumbnails);
+                newState.thumbnails.set(savedViewId, _jsx("img", { src: imageDataUrl }));
+                return newState;
             });
-        };
-    }
-    function updateSavedViews(callback) {
-        if (signal.aborted) {
-            return;
-        }
-        setState((prev) => {
-            const store = { ...prev };
-            const savedViews = new Map(prev.savedViews);
-            store.savedViews = callback(savedViews) ?? savedViews;
-            return store;
-        });
-    }
-    function updateSavedView(savedViewId, callback) {
-        if (signal.aborted) {
-            return;
-        }
-        setState((prev) => {
-            const store = { ...prev };
-            store.savedViews = new Map(prev.savedViews);
-            const prevSavedView = store.savedViews.get(savedViewId);
-            if (!prevSavedView) {
-                return prev;
-            }
-            const savedView = { ...prevSavedView };
-            store.savedViews.set(savedViewId, callback(savedView) ?? savedView);
-            return store;
-        });
-    }
-    function updateGroups(callback) {
-        if (signal.aborted) {
-            return;
-        }
-        setState((prev) => {
-            const store = { ...prev };
-            const groups = new Map(prev.groups);
-            store.groups = callback(groups) ?? groups;
-            return store;
-        });
-    }
-    function updateGroup(groupId, callback) {
-        if (signal.aborted) {
-            return;
-        }
-        setState((prev) => {
-            const store = { ...prev };
-            store.groups = new Map(prev.groups);
-            const prevGroup = store.groups.get(groupId);
-            if (!prevGroup) {
-                return prev;
-            }
-            const group = { ...prevGroup };
-            store.groups.set(groupId, callback(group) ?? group);
-            return store;
-        });
-    }
-    function updateTags(callback) {
-        if (signal.aborted) {
-            return;
-        }
-        setState((prev) => {
-            const store = { ...prev };
-            store.tags = new Map(prev.tags);
-            callback(store.tags);
-            return store;
-        });
-    }
-}
-function isAbortError(error) {
-    return error instanceof DOMException && error.name === "AbortError";
-}
-function ThumbnailPlaceholder(props) {
-    const divRef = useRef(null);
-    useEffect(() => {
-        const div = divRef.current;
-        if (!div) {
-            return;
-        }
-        props.observer.observe(div);
-        return () => props.observer.unobserve(div);
-    }, [props.observer]);
-    return _jsx("div", { ref: divRef, "data-saved-view-id": props.savedViewId });
+        },
+    };
 }