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

rtk-query monitor for Redux DevTools

import React from 'react';
import { QueryPreviewTabs } from '../types';
import { QueryPreviewHeader } from '../components/QueryPreviewHeader';
import { QueryPreviewInfo } from '../components/QueryPreviewInfo';
import { QueryPreviewApi } from '../components/QueryPreviewApi';
import { QueryPreviewSubscriptions } from '../components/QueryPreviewSubscriptions';
import { QueryPreviewTags } from '../components/QueryPreviewTags';
import { NoRtkQueryApi } from '../components/NoRtkQueryApi';
import { mapProps } from './mapProps';
import { QueryPreviewActions } from '../components/QueryPreviewActions';
import { isTabVisible } from '../utils/tabs';
import { QueryPreviewData } from '../components/QueryPreviewData';
import { jsx as ___EmotionJSX } from "@emotion/react";
const queryPreviewCss = theme => ({
  flex: '1 1 50%',
  overflowX: 'hidden',
  oveflowY: 'auto',
  display: 'flex',
  flexDirection: 'column',
  overflowY: 'hidden',
  '& pre': {
    border: 'inherit',
    borderRadius: '3px',
    lineHeight: 'inherit',
    color: 'inherit'
  },
  backgroundColor: theme.BACKGROUND_COLOR
});

/**
 * Tab content is not rendered if there's no selected query.
 */

const MappedQueryPreviewTags = mapProps(_ref => {
  let {
    selectors,
    selectorsSource,
    isWideLayout,
    resInfo
  } = _ref;
  return {
    resInfo,
    tags: selectors.selectCurrentQueryTags(selectorsSource),
    isWideLayout
  };
})(QueryPreviewTags);
const MappedQueryPreviewInfo = mapProps(_ref2 => {
  let {
    resInfo,
    isWideLayout
  } = _ref2;
  return {
    resInfo,
    isWideLayout
  };
})(QueryPreviewInfo);
const MappedQueryPreviewData = mapProps(_ref3 => {
  let {
    resInfo,
    isWideLayout
  } = _ref3;
  return {
    data: resInfo?.state?.data,
    isWideLayout
  };
})(QueryPreviewData);
const MappedQuerySubscriptipns = mapProps(_ref4 => {
  let {
    selectors,
    selectorsSource,
    isWideLayout
  } = _ref4;
  return {
    isWideLayout,
    subscriptions: selectors.selectSubscriptionsOfCurrentQuery(selectorsSource)
  };
})(QueryPreviewSubscriptions);
const MappedApiPreview = mapProps(_ref5 => {
  let {
    isWideLayout,
    selectors,
    selectorsSource
  } = _ref5;
  return {
    isWideLayout,
    apiState: selectors.selectApiOfCurrentQuery(selectorsSource),
    apiStats: selectors.selectApiStatsOfCurrentQuery(selectorsSource)
  };
})(QueryPreviewApi);
const MappedQueryPreviewActions = mapProps(_ref6 => {
  let {
    isWideLayout,
    selectorsSource,
    selectors
  } = _ref6;
  return {
    isWideLayout,
    actionsOfQuery: selectors.selectActionsOfCurrentQuery(selectorsSource)
  };
})(QueryPreviewActions);
const tabs = [{
  label: 'Data',
  value: QueryPreviewTabs.data,
  component: MappedQueryPreviewData,
  visible: {
    query: true,
    mutation: true,
    default: true
  }
}, {
  label: 'Query',
  value: QueryPreviewTabs.queryinfo,
  component: MappedQueryPreviewInfo,
  visible: {
    query: true,
    mutation: true,
    default: true
  }
}, {
  label: 'Actions',
  value: QueryPreviewTabs.actions,
  component: MappedQueryPreviewActions,
  visible: {
    query: true,
    mutation: true,
    default: true
  }
}, {
  label: 'Tags',
  value: QueryPreviewTabs.queryTags,
  component: MappedQueryPreviewTags,
  visible: {
    query: true,
    mutation: false,
    default: true
  }
}, {
  label: 'Subs',
  value: QueryPreviewTabs.querySubscriptions,
  component: MappedQuerySubscriptipns,
  visible: {
    query: true,
    mutation: false,
    default: true
  }
}, {
  label: 'Api',
  value: QueryPreviewTabs.apiConfig,
  component: MappedApiPreview
}];
export class QueryPreview extends React.PureComponent {
  renderLabelWithCounter = (label, counter) => {
    let counterAsString = counter.toFixed(0);
    if (counterAsString.length > 3) {
      counterAsString = counterAsString.slice(0, 2) + '...';
    }
    return `${label}(${counterAsString})`;
  };
  renderTabLabel = tab => {
    const {
      selectors,
      selectorsSource,
      resInfo
    } = this.props;
    const tabCount = selectors.selectTabCounters(selectorsSource)[tab.value];
    let tabLabel = tab.label;
    if (tabLabel === 'query' && resInfo?.type === 'mutation') {
      tabLabel = resInfo.type;
    }
    if (tabCount > 0) {
      return this.renderLabelWithCounter(tabLabel, tabCount);
    }
    return tabLabel;
  };
  render() {
    const {
      resInfo,
      selectedTab,
      onTabChange,
      hasNoApis
    } = this.props;
    const {
      component: TabComponent
    } = tabs.find(tab => tab.value === selectedTab) || tabs[0];
    if (!resInfo) {
      return ___EmotionJSX("div", {
        css: queryPreviewCss
      }, ___EmotionJSX(QueryPreviewHeader, {
        selectedTab: selectedTab,
        onTabChange: onTabChange,
        tabs: tabs.filter(tab => isTabVisible(tab, 'default')),
        renderTabLabel: this.renderTabLabel
      }), hasNoApis && ___EmotionJSX(NoRtkQueryApi, null));
    }
    return ___EmotionJSX("div", {
      css: queryPreviewCss
    }, ___EmotionJSX(QueryPreviewHeader, {
      selectedTab: selectedTab,
      onTabChange: onTabChange,
      tabs: tabs.filter(tab => isTabVisible(tab, resInfo.type)),
      renderTabLabel: this.renderTabLabel
    }), ___EmotionJSX(TabComponent, this.props));
  }
}