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

rtk-query monitor for Redux DevTools

import { createSelector } from '@reduxjs/toolkit';
import { QueryStatus } from '@reduxjs/toolkit/query';
import React, { PureComponent } from 'react';
import { QueryPreviewTabs } from '../types';
import { renderTabPanelButtonId, renderTabPanelId } from '../utils/a11y';
import { formatMs } from '../utils/formatters';
import { identity } from '../utils/object';
import { getQueryStatusFlags } from '../utils/rtk-query';
import { TreeView } from './TreeView';
import { jsx as ___EmotionJSX } from "@emotion/react";
const rootProps = {
  'aria-labelledby': renderTabPanelButtonId(QueryPreviewTabs.queryinfo),
  id: renderTabPanelId(QueryPreviewTabs.queryinfo),
  role: 'tabpanel'
};
export class QueryPreviewInfo extends PureComponent {
  shouldExpandNodeInitially = (keyPath, value, layer) => {
    const lastKey = keyPath[keyPath.length - 1];
    return layer <= 1 && lastKey !== 'query' && lastKey !== 'mutation';
  };
  selectFormattedQuery = (() => createSelector(identity, resInfo => {
    const {
      state,
      queryKey,
      reducerPath
    } = resInfo;
    const startedAt = state.startedTimeStamp ? new Date(state.startedTimeStamp).toISOString() : '-';
    const loadedAt = state.fulfilledTimeStamp ? new Date(state.fulfilledTimeStamp).toISOString() : '-';
    const statusFlags = getQueryStatusFlags(state);
    const timings = {
      startedAt,
      loadedAt,
      duration: '-'
    };
    if (state.fulfilledTimeStamp && state.startedTimeStamp && state.status !== QueryStatus.pending && state.startedTimeStamp <= state.fulfilledTimeStamp) {
      timings.duration = formatMs(state.fulfilledTimeStamp - state.startedTimeStamp);
    }
    if (resInfo.type === 'query') {
      return {
        key: queryKey,
        reducerPath,
        query: resInfo.state,
        statusFlags,
        timings
      };
    }
    return {
      key: queryKey,
      reducerPath,
      mutation: resInfo.state,
      statusFlags,
      timings
    };
  }))();
  render() {
    const {
      resInfo,
      isWideLayout
    } = this.props;
    const formattedQuery = this.selectFormattedQuery(resInfo);
    return ___EmotionJSX(TreeView, {
      rootProps: rootProps,
      data: formattedQuery,
      isWideLayout: isWideLayout,
      shouldExpandNodeInitially: this.shouldExpandNodeInitially
    });
  }
}