@tanstack/react-query-devtools 4.10.0 → 4.10.2

package/build/lib/index.prod.mjs

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useQueryClient, onlineManager, notifyManager } from '@tanstack/react-query';
-import { rankItem, compareItems } from '@tanstack/match-sorter-utils';
+import { rankItem } from '@tanstack/match-sorter-utils';
 import SuperJSON from 'superjson';
 import { useSyncExternalStore } from 'use-sync-external-store/shim/index.js';
 
@@ -172,18 +172,26 @@ const displayValue = value => {
     json
   } = SuperJSON.serialize(value);
   return JSON.stringify(json);
-};
+}; // Sorting functions
 
 const getStatusRank = q => q.state.fetchStatus !== 'idle' ? 0 : !q.getObserversCount() ? 3 : q.isStale() ? 2 : 1;
 
-const sortFns = {
-  'Status > Last Updated': (a, b) => {
-    var _sortFns$LastUpdated;
+const queryHashSort = (a, b) => a.queryHash.localeCompare(b.queryHash);
 
-    return getStatusRank(a) === getStatusRank(b) ? (_sortFns$LastUpdated = sortFns['Last Updated']) == null ? void 0 : _sortFns$LastUpdated.call(sortFns, a, b) : getStatusRank(a) > getStatusRank(b) ? 1 : -1;
-  },
-  'Query Hash': (a, b) => a.queryHash > b.queryHash ? 1 : -1,
-  'Last Updated': (a, b) => a.state.dataUpdatedAt < b.state.dataUpdatedAt ? 1 : -1
+const dateSort = (a, b) => a.state.dataUpdatedAt < b.state.dataUpdatedAt ? 1 : -1;
+
+const statusAndDateSort = (a, b) => {
+  if (getStatusRank(a) === getStatusRank(b)) {
+    return dateSort(a, b);
+  }
+
+  return getStatusRank(a) > getStatusRank(b) ? 1 : -1;
+};
+
+const sortFns = {
+  'Status > Last Updated': statusAndDateSort,
+  'Query Hash': queryHashSort,
+  'Last Updated': dateSort
 };
 
 function ScreenReader({
@@ -736,27 +744,21 @@ const ReactQueryDevtoolsPanel$1 = /*#__PURE__*/React.forwardRef(function ReactQu
   const queryCache = queryClient.getQueryCache();
   const [sort, setSort] = useLocalStorage('reactQueryDevtoolsSortFn', Object.keys(sortFns)[0]);
   const [filter, setFilter] = useLocalStorage('reactQueryDevtoolsFilter', '');
-  const [sortDesc, setSortDesc] = useLocalStorage('reactQueryDevtoolsSortDesc', false);
+  const [baseSort, setBaseSort] = useLocalStorage('reactQueryDevtoolsBaseSort', 1);
   const sortFn = React.useMemo(() => sortFns[sort], [sort]);
   const queriesCount = useSubscribeToQueryCache(queryCache, () => queryCache.getAll().length, !isOpen);
   const [activeQueryHash, setActiveQueryHash] = useLocalStorage('reactQueryDevtoolsActiveQueryHash', '');
   const queries = React.useMemo(() => {
     const unsortedQueries = queryCache.getAll();
-    const sorted = queriesCount > 0 ? [...unsortedQueries].sort(sortFn) : [];
-
-    if (sortDesc) {
-      sorted.reverse();
-    }
 
-    if (!filter) {
-      return sorted;
+    if (queriesCount === 0) {
+      return [];
     }
 
-    let ranked = sorted.map(item => [item, rankItem(item.queryHash, filter)]);
-    ranked = ranked.filter(d => d[1].passed);
-    ranked = ranked.sort((a, b) => compareItems(a[1], b[1]));
-    return ranked.map(d => d[0]);
-  }, [sortDesc, sortFn, filter, queriesCount, queryCache]);
+    const filtered = filter ? unsortedQueries.filter(item => rankItem(item.queryHash, filter).passed) : [...unsortedQueries];
+    const sorted = sortFn ? filtered.sort((a, b) => sortFn(a, b) * baseSort) : filtered;
+    return sorted;
+  }, [baseSort, sortFn, filter, queriesCount, queryCache]);
   const [isMockOffline, setMockOffline] = React.useState(false);
   return /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: defaultTheme
@@ -858,12 +860,12 @@ const ReactQueryDevtoolsPanel$1 = /*#__PURE__*/React.forwardRef(function ReactQu
     value: key
   }, "Sort by ", key))), /*#__PURE__*/React.createElement(Button, {
     type: "button",
-    onClick: () => setSortDesc(old => !old),
+    onClick: () => setBaseSort(old => old * -1),
     style: {
       padding: '.3em .4em',
       marginRight: '.5em'
     }
-  }, sortDesc ? '⬇ Desc' : '⬆ Asc'), /*#__PURE__*/React.createElement(Button, {
+  }, baseSort === 1 ? '⬆ Asc' : '⬇ Desc'), /*#__PURE__*/React.createElement(Button, {
     type: "button",
     onClick: () => {
       if (isMockOffline) {