@redux-devtools/rtk-query-monitor/lib/esm/selectors.js

rtk-query monitor for Redux DevTools

import { createSelector } from '@reduxjs/toolkit';
import { QueryPreviewTabs } from './types';
import { queryComparators } from './utils/comparators';
import { queryListFilters } from './utils/filters';
import { emptyRecord } from './utils/object';
import { escapeRegExpSpecialCharacter } from './utils/regexp';
import { getApiStatesOf, extractAllApiQueries, flipComparator, getQueryTagsOf, generateApiStatsOfCurrentQuery, getActionsOfCurrentQuery, extractAllApiMutations } from './utils/rtk-query';
export function computeSelectorSource(props) {
  let previous = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
  const {
    computedStates,
    currentStateIndex,
    monitorState,
    actionsById
  } = props;
  const userState = computedStates.length > 0 ? computedStates[currentStateIndex].state : null;
  if (!previous || previous.userState !== userState || previous.monitorState !== monitorState || previous.actionsById !== actionsById) {
    return {
      userState,
      monitorState,
      currentStateIndex,
      actionsById
    };
  }
  return previous;
}
export function createInspectorSelectors() {
  const selectQueryComparator = _ref => {
    let {
      monitorState
    } = _ref;
    return queryComparators[monitorState.queryForm.values.queryComparator];
  };
  const selectQueryListFilter = _ref2 => {
    let {
      monitorState
    } = _ref2;
    return queryListFilters[monitorState.queryForm.values.queryFilter];
  };
  const selectActionsById = _ref3 => {
    let {
      actionsById
    } = _ref3;
    return actionsById;
  };
  const selectApiStates = createSelector(_ref4 => {
    let {
      userState
    } = _ref4;
    return userState;
  }, getApiStatesOf);
  const selectAllQueries = createSelector(selectApiStates, extractAllApiQueries);
  const selectAllMutations = createSelector(selectApiStates, extractAllApiMutations);
  const selectSearchQueryRegex = createSelector(_ref5 => {
    let {
      monitorState
    } = _ref5;
    return monitorState.queryForm.values.searchValue;
  }, _ref6 => {
    let {
      monitorState
    } = _ref6;
    return monitorState.queryForm.values.isRegexSearch;
  }, (searchValue, isRegexSearch) => {
    if (searchValue) {
      try {
        const regexPattern = isRegexSearch ? searchValue : escapeRegExpSpecialCharacter(searchValue);
        return new RegExp(regexPattern, 'i');
      } catch (err) {
        // We notify that the search regex provided is not valid
      }
    }
    return null;
  });
  const selectComparatorOrder = _ref7 => {
    let {
      monitorState
    } = _ref7;
    return monitorState.queryForm.values.isAscendingQueryComparatorOrder;
  };
  const selectAllVisbileQueries = createSelector([selectQueryComparator, selectQueryListFilter, selectAllQueries, selectAllMutations, selectComparatorOrder, selectSearchQueryRegex], (comparator, queryListFilter, queryList, mutationsList, isAscending, searchRegex) => {
    const filteredList = queryListFilter(searchRegex, queryList.concat(mutationsList));
    const computedComparator = isAscending ? comparator : flipComparator(comparator);
    return filteredList.slice().sort(computedComparator);
  });
  const selectCurrentQueryInfo = createSelector(selectAllQueries, selectAllMutations, _ref8 => {
    let {
      monitorState
    } = _ref8;
    return monitorState.selectedQueryKey;
  }, (allQueries, allMutations, selectedQueryKey) => {
    if (!selectedQueryKey) {
      return null;
    }
    let currentQueryInfo = allQueries.find(query => query.queryKey === selectedQueryKey.queryKey && selectedQueryKey.reducerPath === query.reducerPath) || null;
    if (!currentQueryInfo) {
      currentQueryInfo = allMutations.find(mutation => mutation.queryKey === selectedQueryKey.queryKey && selectedQueryKey.reducerPath === mutation.reducerPath) || null;
    }
    return currentQueryInfo;
  });
  const selectApiOfCurrentQuery = selectorsSource => {
    const apiStates = selectApiStates(selectorsSource);
    const currentQueryInfo = selectCurrentQueryInfo(selectorsSource);
    if (!apiStates || !currentQueryInfo) {
      return null;
    }
    return apiStates[currentQueryInfo.reducerPath] ?? null;
  };
  const selectProvidedOfCurrentQuery = selectorsSource => {
    return selectApiOfCurrentQuery(selectorsSource)?.provided ?? null;
  };
  const selectSubscriptionsOfCurrentQuery = createSelector([selectApiOfCurrentQuery, selectCurrentQueryInfo], (apiState, queryInfo) => {
    if (!queryInfo || !apiState) {
      return emptyRecord;
    }
    return apiState.subscriptions[queryInfo.queryKey];
  });
  const selectCurrentQueryTags = createSelector([selectCurrentQueryInfo, selectProvidedOfCurrentQuery], getQueryTagsOf);
  const selectApiStatsOfCurrentQuery = createSelector(selectApiOfCurrentQuery, selectorsSource => selectorsSource.actionsById, selectorsSource => selectorsSource.currentStateIndex, generateApiStatsOfCurrentQuery);
  const selectActionsOfCurrentQuery = createSelector(selectCurrentQueryInfo, selectActionsById, getActionsOfCurrentQuery);
  const selectTabCounters = createSelector([selectSubscriptionsOfCurrentQuery, selectActionsOfCurrentQuery, selectCurrentQueryTags], (subscriptions, actions, tags) => {
    return {
      [QueryPreviewTabs.data]: 0,
      [QueryPreviewTabs.queryTags]: tags.length,
      [QueryPreviewTabs.querySubscriptions]: Object.keys(subscriptions ?? {}).length,
      [QueryPreviewTabs.apiConfig]: 0,
      [QueryPreviewTabs.queryinfo]: 0,
      [QueryPreviewTabs.actions]: actions.length
    };
  });
  return {
    selectQueryComparator,
    selectApiStates,
    selectAllQueries,
    selectAllVisbileQueries,
    selectSearchQueryRegex,
    selectCurrentQueryInfo,
    selectCurrentQueryTags,
    selectApiStatsOfCurrentQuery,
    selectSubscriptionsOfCurrentQuery,
    selectApiOfCurrentQuery,
    selectTabCounters,
    selectActionsOfCurrentQuery
  };
}