@buoy-gg/react-query 1.7.2

package/lib/commonjs/react-query/hooks/useModalManager.js

@@ -0,0 +1,178 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useModalManager = useModalManager;
+var _react = require("react");
+var _useModalPersistence = require("./useModalPersistence");
+var _sharedUi = require("@buoy-gg/shared-ui");
+/**
+ * Custom hook for managing modal states and related query selection
+ * Enhanced with persistence following composition principles
+ * Restores modal state on app restart
+ */
+function useModalManager() {
+  const [isModalOpen, setIsModalOpen] = (0, _react.useState)(false);
+  const [isDebugModalOpen, setIsDebugModalOpen] = (0, _react.useState)(false);
+  const [isEnvModalOpen, setIsEnvModalOpen] = (0, _react.useState)(false);
+  const [isSentryModalOpen, setIsSentryModalOpen] = (0, _react.useState)(false);
+  const [isStorageModalOpen, setIsStorageModalOpen] = (0, _react.useState)(false);
+  const [isNetworkModalOpen, setIsNetworkModalOpen] = (0, _react.useState)(false);
+  const [selectedQueryKey, setSelectedQueryKey] = (0, _react.useState)(undefined);
+  const [selectedSection, setSelectedSection] = (0, _react.useState)(null);
+  const [activeFilter, setActiveFilter] = (0, _react.useState)(null);
+  const [isStateRestored, setIsStateRestored] = (0, _react.useState)(false); // Default to false to prevent clearing state before restoration
+  const [activeTab, setActiveTab] = (0, _react.useState)("queries");
+  const [selectedMutationId, setSelectedMutationId] = (0, _react.useState)(undefined);
+
+  // Persistence hook for saving/loading modal state
+  const {
+    loadSavedState
+  } = (0, _useModalPersistence.useModalPersistence)({
+    storagePrefix: _sharedUi.devToolsStorageKeys.modal.state(),
+    isModalOpen,
+    isDebugModalOpen,
+    isEnvModalOpen,
+    isSentryModalOpen,
+    isStorageModalOpen,
+    isNetworkModalOpen,
+    selectedQueryKey,
+    selectedSection,
+    activeFilter,
+    activeTab,
+    selectedMutationId,
+    isStateRestored
+  });
+
+  // Restore saved modal state on component mount
+  (0, _react.useEffect)(() => {
+    const restoreState = async () => {
+      // Don't set to false again if already restoring
+      if (isStateRestored) return;
+      try {
+        const savedState = await loadSavedState();
+        if (savedState) {
+          setIsModalOpen(savedState.isModalOpen);
+          setIsDebugModalOpen(savedState.isDebugModalOpen);
+          setIsEnvModalOpen(savedState.isEnvModalOpen || false);
+          setIsSentryModalOpen(savedState.isSentryModalOpen || false);
+          setIsStorageModalOpen(savedState.isStorageModalOpen || false);
+          setIsNetworkModalOpen(savedState.isNetworkModalOpen || false);
+          if (savedState.selectedQueryKey) {
+            try {
+              const queryKey = JSON.parse(savedState.selectedQueryKey);
+              setSelectedQueryKey(queryKey);
+            } catch {
+              // Silently fail if query key can't be parsed
+            }
+          }
+          if (savedState.selectedSection) {
+            setSelectedSection(savedState.selectedSection);
+          }
+          if (savedState.activeFilter) {
+            setActiveFilter(savedState.activeFilter);
+          }
+          if (savedState.activeTab) {
+            setActiveTab(savedState.activeTab);
+          }
+          if (savedState.selectedMutationId) {
+            setSelectedMutationId(Number(savedState.selectedMutationId));
+          }
+        }
+      } catch {
+        // Silently fail if state can't be restored
+      } finally {
+        // Mark restoration as complete
+        setIsStateRestored(true);
+      }
+    };
+    restoreState();
+  }, [isStateRestored, loadSavedState]);
+  const handleModalDismiss = () => {
+    setIsModalOpen(false);
+    setSelectedQueryKey(undefined);
+    // Note: Keep activeFilter when dismissing - user might want to maintain filter on next open
+  };
+  const handleDebugModalDismiss = () => {
+    setIsDebugModalOpen(false);
+    setSelectedSection(null);
+  };
+  const handleQuerySelect = query => {
+    setSelectedQueryKey(query?.queryKey);
+  };
+  const handleQueryPress = () => {
+    setIsModalOpen(true);
+  };
+  const handleStatusPress = () => {
+    setIsDebugModalOpen(true);
+  };
+  const handleEnvPress = () => {
+    setIsEnvModalOpen(true);
+  };
+  const handleSentryPress = () => {
+    setIsSentryModalOpen(true);
+  };
+  const handleStoragePress = () => {
+    setIsStorageModalOpen(true);
+  };
+  const handleEnvModalDismiss = () => {
+    setIsEnvModalOpen(false);
+  };
+  const handleSentryModalDismiss = () => {
+    setIsSentryModalOpen(false);
+  };
+  const handleStorageModalDismiss = () => {
+    setIsStorageModalOpen(false);
+  };
+  const handleNetworkPress = () => {
+    setIsNetworkModalOpen(true);
+  };
+  const handleNetworkModalDismiss = () => {
+    setIsNetworkModalOpen(false);
+  };
+  const handleMutationSelect = mutation => {
+    setSelectedMutationId(mutation?.mutationId);
+  };
+  const handleTabChange = newTab => {
+    if (newTab !== activeTab) {
+      setSelectedQueryKey(undefined);
+      setSelectedMutationId(undefined);
+      // Reset query status filters when switching tabs (they don't apply to storage)
+      setActiveFilter(null);
+    }
+    setActiveTab(newTab);
+  };
+  return {
+    isModalOpen,
+    isDebugModalOpen,
+    isEnvModalOpen,
+    isSentryModalOpen,
+    isStorageModalOpen,
+    isNetworkModalOpen,
+    selectedQueryKey,
+    selectedSection,
+    activeFilter,
+    isStateRestored,
+    activeTab,
+    selectedMutationId,
+    setSelectedSection,
+    setActiveFilter,
+    setActiveTab,
+    handleModalDismiss,
+    handleDebugModalDismiss,
+    handleEnvModalDismiss,
+    handleSentryModalDismiss,
+    handleStorageModalDismiss,
+    handleNetworkModalDismiss,
+    handleQuerySelect,
+    handleQueryPress,
+    handleStatusPress,
+    handleEnvPress,
+    handleSentryPress,
+    handleStoragePress,
+    handleNetworkPress,
+    handleTabChange,
+    handleMutationSelect
+  };
+}

package/lib/commonjs/react-query/hooks/useModalPersistence.js

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useModalPersistence = useModalPersistence;
+var _react = require("react");
+var _modalStorageOperations = require("../utils/modalStorageOperations");
+/**
+ * Hook for persisting modal state following "Extract Reusable Logic" principle
+ * Manages saving/loading modal visibility and selection state across app restarts
+ */
+function useModalPersistence({
+  storagePrefix,
+  isModalOpen,
+  isDebugModalOpen,
+  isEnvModalOpen = false,
+  isSentryModalOpen = false,
+  isStorageModalOpen = false,
+  isNetworkModalOpen = false,
+  selectedQueryKey,
+  selectedSection,
+  activeFilter,
+  activeTab,
+  selectedMutationId,
+  isStateRestored
+}) {
+  const saveCurrentState = (0, _react.useCallback)(async () => {
+    const state = {
+      isModalOpen,
+      isDebugModalOpen,
+      isEnvModalOpen,
+      isSentryModalOpen,
+      isStorageModalOpen,
+      isNetworkModalOpen,
+      selectedQueryKey: selectedQueryKey ? JSON.stringify(selectedQueryKey) : undefined,
+      selectedSection: selectedSection || undefined,
+      activeFilter: activeFilter || undefined,
+      activeTab: activeTab || undefined,
+      selectedMutationId: selectedMutationId?.toString() || undefined
+    };
+    await (0, _modalStorageOperations.saveModalVisibilityState)(storagePrefix, state);
+  }, [storagePrefix, isModalOpen, isDebugModalOpen, isEnvModalOpen, isSentryModalOpen, isStorageModalOpen, isNetworkModalOpen, selectedQueryKey, selectedSection, activeFilter, activeTab, selectedMutationId]);
+  const loadSavedState = (0, _react.useCallback)(async () => {
+    return await (0, _modalStorageOperations.loadModalVisibilityState)(storagePrefix);
+  }, [storagePrefix]);
+  const clearSavedState = (0, _react.useCallback)(async () => {
+    await (0, _modalStorageOperations.clearModalVisibilityState)(storagePrefix);
+  }, [storagePrefix]);
+
+  // Auto-save state when modal state changes
+  (0, _react.useEffect)(() => {
+    // Don't persist anything until state restoration is complete to avoid race condition
+    if (!isStateRestored) {
+      return;
+    }
+
+    // Only save if a modal is actually open to avoid saving closed state
+    if (isModalOpen || isDebugModalOpen || isEnvModalOpen || isSentryModalOpen || isStorageModalOpen || isNetworkModalOpen) {
+      saveCurrentState();
+    } else {
+      // Clear saved state when all modals are closed
+      clearSavedState();
+    }
+  }, [isModalOpen, isDebugModalOpen, isEnvModalOpen, isSentryModalOpen, isStorageModalOpen, isNetworkModalOpen, selectedQueryKey, selectedSection, activeFilter, activeTab, selectedMutationId, isStateRestored, saveCurrentState, clearSavedState]);
+  return {
+    saveCurrentState,
+    loadSavedState,
+    clearSavedState
+  };
+}

package/lib/commonjs/react-query/hooks/useMutationActionButtons.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useMutationActionButtons = useMutationActionButtons;
+var _react = require("react");
+var _reactQuery = require("@tanstack/react-query");
+/**
+ * Supplies action button metadata for a selected mutation. Currently exposes a remove control but
+ * centralizes logic so future actions stay consistent across the UI.
+ */
+function useMutationActionButtons(selectedMutation) {
+  const queryClient = (0, _reactQuery.useQueryClient)();
+  return (0, _react.useMemo)(() => [{
+    label: "Remove",
+    bgColorClass: "btnRemove",
+    textColorClass: "btnRemove",
+    disabled: false,
+    onPress: () => queryClient.getMutationCache().remove(selectedMutation)
+  }], [selectedMutation, queryClient]);
+}

package/lib/commonjs/react-query/hooks/useQueryStatusCounts.js

@@ -0,0 +1,110 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+exports.useMutationStatusCounts = useMutationStatusCounts;
+var _react = require("react");
+var _reactQuery = require("@tanstack/react-query");
+var _getQueryStatusLabel = require("../utils/getQueryStatusLabel");
+/**
+ * Tracks how many queries fall into each status bucket (fresh, stale, fetching, etc.). Uses
+ * cache subscriptions to stay up to date without polling.
+ */
+function useQueryStatusCounts() {
+  const queryClient = (0, _reactQuery.useQueryClient)();
+  const [counts, setCounts] = (0, _react.useState)({
+    fresh: 0,
+    stale: 0,
+    fetching: 0,
+    paused: 0,
+    inactive: 0
+  });
+  (0, _react.useEffect)(() => {
+    const updateCounts = () => {
+      const allQueries = queryClient.getQueryCache().getAll();
+      const newCounts = allQueries.reduce((acc, query) => {
+        const status = (0, _getQueryStatusLabel.getQueryStatusLabel)(query);
+        acc[status] = (acc[status] || 0) + 1;
+        return acc;
+      }, {
+        fresh: 0,
+        stale: 0,
+        fetching: 0,
+        paused: 0,
+        inactive: 0
+      });
+      setTimeout(() => setCounts(newCounts), 0);
+    };
+
+    // Perform an initial update
+    updateCounts();
+
+    // Subscribe to the query cache to run updates on changes
+    const unsubscribe = queryClient.getQueryCache().subscribe(updateCounts);
+
+    // Cleanup the subscription when the component unmounts
+    return () => unsubscribe();
+  }, [queryClient]);
+  return counts;
+}
+var _default = exports.default = useQueryStatusCounts; // Mutation status counts hook
+/**
+ * Companion hook for query status counts that groups mutations by status and pause state.
+ */
+function useMutationStatusCounts() {
+  const queryClient = (0, _reactQuery.useQueryClient)();
+  const [counts, setCounts] = (0, _react.useState)({
+    pending: 0,
+    success: 0,
+    error: 0,
+    paused: 0,
+    idle: 0
+  });
+  (0, _react.useEffect)(() => {
+    const updateCounts = () => {
+      const allMutations = queryClient.getMutationCache().getAll();
+      const newCounts = allMutations.reduce((acc, mutation) => {
+        const status = mutation.state.status;
+        const isPaused = mutation.state.isPaused;
+        if (isPaused) {
+          acc.paused++;
+        } else {
+          switch (status) {
+            case "idle":
+              acc.idle++;
+              break;
+            case "pending":
+              acc.pending++;
+              break;
+            case "success":
+              acc.success++;
+              break;
+            case "error":
+              acc.error++;
+              break;
+          }
+        }
+        return acc;
+      }, {
+        pending: 0,
+        success: 0,
+        error: 0,
+        paused: 0,
+        idle: 0
+      });
+      setTimeout(() => setCounts(newCounts), 0);
+    };
+
+    // Perform an initial update
+    updateCounts();
+
+    // Subscribe to the mutation cache to run updates on changes
+    const unsubscribe = queryClient.getMutationCache().subscribe(updateCounts);
+
+    // Cleanup the subscription when the component unmounts
+    return () => unsubscribe();
+  }, [queryClient]);
+  return counts;
+}

package/lib/commonjs/react-query/hooks/useReactQueryState.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useReactQueryState = useReactQueryState;
+/**
+ * Custom hook for getting React Query state information
+ * Separated from UI concerns following composition principles
+ */
+function useReactQueryState(queryClient) {
+  const getReactBuoySubtitle = () => {
+    try {
+      const allQueries = queryClient.getQueryCache().getAll();
+      const allMutations = queryClient.getMutationCache().getAll();
+      return `${allQueries.length} queries • ${allMutations.length} mutations`;
+    } catch {
+      return "Data management & cache inspector";
+    }
+  };
+  return {
+    getReactBuoySubtitle
+  };
+}

package/lib/commonjs/react-query/hooks/useSelectedMutation.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGetMutationById = useGetMutationById;
+var _react = require("react");
+var _reactQuery = require("@tanstack/react-query");
+/**
+ * Watches the mutation cache for a specific mutation id. Useful when the UI needs to follow
+ * mutation lifecycle events (loading, success, error) for a focused inspection panel.
+ */
+function useGetMutationById(mutationId) {
+  const queryClient = (0, _reactQuery.useQueryClient)();
+  const [selectedMutation, setSelectedMutation] = (0, _react.useState)(undefined);
+  (0, _react.useEffect)(() => {
+    const updateSelectedMutation = () => {
+      if (mutationId !== undefined) {
+        const mutation = queryClient.getMutationCache().getAll().find(m => m.mutationId === mutationId);
+        setSelectedMutation(mutation);
+      } else {
+        setSelectedMutation(undefined);
+      }
+    };
+    setTimeout(updateSelectedMutation, 0);
+    const unsubscribe = queryClient.getMutationCache().subscribe(updateSelectedMutation);
+    return () => unsubscribe();
+  }, [queryClient, mutationId]);
+  return selectedMutation;
+}

package/lib/commonjs/react-query/hooks/useSelectedQuery.js

@@ -0,0 +1,96 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGetQueryByQueryKey = useGetQueryByQueryKey;
+exports.useGetQueryByQueryKeyWithVersion = useGetQueryByQueryKeyWithVersion;
+var _react = require("react");
+var _reactQuery = require("@tanstack/react-query");
+/**
+ * Custom hook to track a single query by its queryKey with live updates
+ * Optimized to only re-render when the specific query changes
+ */
+
+/**
+ * Returns a single query instance matching the provided key and resubscribes whenever the cache
+ * entry changes. Ideal for detail panes where live updates are required without scanning the
+ * entire query cache.
+ */
+function useGetQueryByQueryKey(queryKey) {
+  const {
+    query
+  } = useGetQueryByQueryKeyWithVersion(queryKey);
+  return query;
+}
+
+/**
+ * Returns a single query instance with a version number that increments on each cache update.
+ * Use the version as a dependency or key to ensure child components re-render when query state changes.
+ *
+ * This is necessary because React Query mutates the Query object in place, so React's
+ * shallow comparison won't detect changes to nested properties like query.state.status.
+ */
+function useGetQueryByQueryKeyWithVersion(queryKey) {
+  const queryClient = (0, _reactQuery.useQueryClient)();
+  const [queryState, setQueryState] = (0, _react.useState)({
+    query: undefined,
+    version: 0
+  });
+  const queryHashRef = (0, _react.useRef)(undefined);
+  (0, _react.useEffect)(() => {
+    if (!queryKey) {
+      setQueryState({
+        query: undefined,
+        version: 0
+      });
+      queryHashRef.current = undefined;
+      return;
+    }
+
+    // Get initial query state
+    const query = queryClient.getQueryCache().find({
+      queryKey,
+      exact: true
+    });
+    setQueryState({
+      query,
+      version: 0
+    });
+
+    // Store the stringified queryKey for comparison
+    const queryKeyString = JSON.stringify(queryKey);
+    queryHashRef.current = queryKeyString;
+
+    // Subscribe to query cache changes but only update if our specific query changed
+    const unsubscribe = queryClient.getQueryCache().subscribe(event => {
+      // Only process events for our specific query
+      if (event.type === "updated" || event.type === "added" || event.type === "removed") {
+        if ("query" in event && event.query) {
+          // Check if the event is for our query by comparing the stringified keys
+          const eventQueryKeyString = JSON.stringify(event.query.queryKey);
+          const isOurQuery = eventQueryKeyString === queryHashRef.current;
+          if (isOurQuery) {
+            if (event.type === "removed") {
+              setQueryState({
+                query: undefined,
+                version: 0
+              });
+            } else {
+              // For 'updated' and 'added' events, use the query from the event
+              // Update both the query and increment version to force re-renders
+              setQueryState(prev => ({
+                query: event.query,
+                version: prev.version + 1
+              }));
+            }
+          }
+        }
+      }
+    });
+
+    // Cleanup subscription when component unmounts
+    return () => unsubscribe();
+  }, [queryClient, queryKey]);
+  return queryState;
+}

package/lib/commonjs/react-query/hooks/useStorageQueryCounts.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useStorageQueryCounts = useStorageQueryCounts;
+var _react = require("react");
+var _reactQuery = require("@tanstack/react-query");
+var _getStorageQueryCounts = require("../utils/getStorageQueryCounts");
+/**
+ * Hook to get storage query counts with proper memoization
+ * Following rule3 - Component Composition principles:
+ * - Extract Reusable Logic: Dedicated hook for storage counting
+ * - Rigor and Justification: Proper memoization only where proven necessary
+ * - Stable references: useMemo with correct dependencies to prevent infinite loops
+ */
+function useStorageQueryCounts() {
+  const queryClient = (0, _reactQuery.useQueryClient)();
+
+  // Memoize counts based on query cache state changes
+  // This prevents infinite re-renders by stabilizing the counts object
+  const counts = (0, _react.useMemo)(() => {
+    const allQueries = queryClient.getQueryCache().getAll();
+    return (0, _getStorageQueryCounts.getStorageQueryCounts)(allQueries);
+  }, [queryClient]); // Depend on queryClient, not the result of getAll()
+
+  return counts;
+}

package/lib/commonjs/react-query/hooks/useWifiState.js

@@ -0,0 +1,67 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useWifiState = useWifiState;
+var _react = require("react");
+var _reactQuery = require("@tanstack/react-query");
+var _sharedUi = require("@buoy-gg/shared-ui");
+/**
+ * Synchronizes a local Wi-Fi toggle with React Query’s `onlineManager`, persisting the selection
+ * so developers can simulate offline mode across reloads.
+ */
+function useWifiState() {
+  const [isOnline, setIsOnline] = (0, _react.useState)(() => _reactQuery.onlineManager.isOnline());
+  const hasLoadedPersistedState = (0, _react.useRef)(false);
+
+  // Load persisted WiFi state on mount
+  (0, _react.useEffect)(() => {
+    if (hasLoadedPersistedState.current) return;
+    const loadPersistedState = async () => {
+      try {
+        const savedState = await (0, _sharedUi.safeGetItem)(_sharedUi.devToolsStorageKeys.settings.wifiEnabled());
+        if (savedState !== null) {
+          const isEnabled = savedState === "true";
+          setIsOnline(isEnabled);
+          _reactQuery.onlineManager.setOnline(isEnabled);
+        }
+        hasLoadedPersistedState.current = true;
+      } catch (error) {
+        // Failed to load WiFi state
+      }
+    };
+    loadPersistedState();
+  }, []);
+
+  // Save WiFi state when it changes
+  const saveWifiState = async enabled => {
+    try {
+      await (0, _sharedUi.safeSetItem)(_sharedUi.devToolsStorageKeys.settings.wifiEnabled(), enabled.toString());
+    } catch (error) {
+      // Failed to save WiFi state
+    }
+  };
+  const handleWifiToggle = () => {
+    const newOnlineState = !isOnline;
+    setIsOnline(newOnlineState);
+    _reactQuery.onlineManager.setOnline(newOnlineState);
+    saveWifiState(newOnlineState);
+  };
+
+  // Listen to online manager changes to keep state in sync
+  (0, _react.useEffect)(() => {
+    const unsubscribe = _reactQuery.onlineManager.subscribe(online => {
+      setIsOnline(online);
+      // Only save if we've already loaded the persisted state to avoid overwriting on mount
+      if (hasLoadedPersistedState.current) {
+        saveWifiState(online);
+      }
+    });
+    return unsubscribe;
+  }, []);
+  return {
+    isOnline,
+    handleWifiToggle
+  };
+}

package/lib/commonjs/react-query/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _ReactQueryDevTools = require("./ReactQueryDevTools");
+Object.keys(_ReactQueryDevTools).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ReactQueryDevTools[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ReactQueryDevTools[key];
+    }
+  });
+});

package/lib/commonjs/react-query/types/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _types = require("./types");
+Object.keys(_types).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _types[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _types[key];
+    }
+  });
+});

package/lib/commonjs/react-query/types/types.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isPlainObject = isPlainObject;
+// Shared type definitions for the dev tools
+
+/**
+ * Type guard that narrows a value to a plain object (excluding arrays, Dates, Maps, etc.).
+ */
+function isPlainObject(value) {
+  return value !== null && value !== undefined && typeof value === "object" && !Array.isArray(value) && !(value instanceof Date) && !(value instanceof Error) && !(value instanceof Map) && !(value instanceof Set) && !(value instanceof RegExp) && typeof value !== "function";
+}