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

rtk-query monitor for Redux DevTools

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.QueryPreview = void 0;
var _react = _interopRequireDefault(require("react"));
var _types = require("../types");
var _QueryPreviewHeader = require("../components/QueryPreviewHeader");
var _QueryPreviewInfo = require("../components/QueryPreviewInfo");
var _QueryPreviewApi = require("../components/QueryPreviewApi");
var _QueryPreviewSubscriptions = require("../components/QueryPreviewSubscriptions");
var _QueryPreviewTags = require("../components/QueryPreviewTags");
var _NoRtkQueryApi = require("../components/NoRtkQueryApi");
var _mapProps = require("./mapProps");
var _QueryPreviewActions = require("../components/QueryPreviewActions");
var _tabs = require("../utils/tabs");
var _QueryPreviewData = require("../components/QueryPreviewData");
var _react2 = require("@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 = (0, _mapProps.mapProps)(_ref => {
  let {
    selectors,
    selectorsSource,
    isWideLayout,
    resInfo
  } = _ref;
  return {
    resInfo,
    tags: selectors.selectCurrentQueryTags(selectorsSource),
    isWideLayout
  };
})(_QueryPreviewTags.QueryPreviewTags);
const MappedQueryPreviewInfo = (0, _mapProps.mapProps)(_ref2 => {
  let {
    resInfo,
    isWideLayout
  } = _ref2;
  return {
    resInfo,
    isWideLayout
  };
})(_QueryPreviewInfo.QueryPreviewInfo);
const MappedQueryPreviewData = (0, _mapProps.mapProps)(_ref3 => {
  let {
    resInfo,
    isWideLayout
  } = _ref3;
  return {
    data: resInfo?.state?.data,
    isWideLayout
  };
})(_QueryPreviewData.QueryPreviewData);
const MappedQuerySubscriptipns = (0, _mapProps.mapProps)(_ref4 => {
  let {
    selectors,
    selectorsSource,
    isWideLayout
  } = _ref4;
  return {
    isWideLayout,
    subscriptions: selectors.selectSubscriptionsOfCurrentQuery(selectorsSource)
  };
})(_QueryPreviewSubscriptions.QueryPreviewSubscriptions);
const MappedApiPreview = (0, _mapProps.mapProps)(_ref5 => {
  let {
    isWideLayout,
    selectors,
    selectorsSource
  } = _ref5;
  return {
    isWideLayout,
    apiState: selectors.selectApiOfCurrentQuery(selectorsSource),
    apiStats: selectors.selectApiStatsOfCurrentQuery(selectorsSource)
  };
})(_QueryPreviewApi.QueryPreviewApi);
const MappedQueryPreviewActions = (0, _mapProps.mapProps)(_ref6 => {
  let {
    isWideLayout,
    selectorsSource,
    selectors
  } = _ref6;
  return {
    isWideLayout,
    actionsOfQuery: selectors.selectActionsOfCurrentQuery(selectorsSource)
  };
})(_QueryPreviewActions.QueryPreviewActions);
const tabs = [{
  label: 'Data',
  value: _types.QueryPreviewTabs.data,
  component: MappedQueryPreviewData,
  visible: {
    query: true,
    mutation: true,
    default: true
  }
}, {
  label: 'Query',
  value: _types.QueryPreviewTabs.queryinfo,
  component: MappedQueryPreviewInfo,
  visible: {
    query: true,
    mutation: true,
    default: true
  }
}, {
  label: 'Actions',
  value: _types.QueryPreviewTabs.actions,
  component: MappedQueryPreviewActions,
  visible: {
    query: true,
    mutation: true,
    default: true
  }
}, {
  label: 'Tags',
  value: _types.QueryPreviewTabs.queryTags,
  component: MappedQueryPreviewTags,
  visible: {
    query: true,
    mutation: false,
    default: true
  }
}, {
  label: 'Subs',
  value: _types.QueryPreviewTabs.querySubscriptions,
  component: MappedQuerySubscriptipns,
  visible: {
    query: true,
    mutation: false,
    default: true
  }
}, {
  label: 'Api',
  value: _types.QueryPreviewTabs.apiConfig,
  component: MappedApiPreview
}];
class QueryPreview extends _react.default.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 (0, _react2.jsx)("div", {
        css: queryPreviewCss
      }, (0, _react2.jsx)(_QueryPreviewHeader.QueryPreviewHeader, {
        selectedTab: selectedTab,
        onTabChange: onTabChange,
        tabs: tabs.filter(tab => (0, _tabs.isTabVisible)(tab, 'default')),
        renderTabLabel: this.renderTabLabel
      }), hasNoApis && (0, _react2.jsx)(_NoRtkQueryApi.NoRtkQueryApi, null));
    }
    return (0, _react2.jsx)("div", {
      css: queryPreviewCss
    }, (0, _react2.jsx)(_QueryPreviewHeader.QueryPreviewHeader, {
      selectedTab: selectedTab,
      onTabChange: onTabChange,
      tabs: tabs.filter(tab => (0, _tabs.isTabVisible)(tab, resInfo.type)),
      renderTabLabel: this.renderTabLabel
    }), (0, _react2.jsx)(TabComponent, this.props));
  }
}
exports.QueryPreview = QueryPreview;