@redux-devtools/rtk-query-monitor
Version:
rtk-query monitor for Redux DevTools
62 lines • 2.21 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import React, { PureComponent } from 'react';
import { QueryPreviewTabs } from '../types';
import { TreeView } from './TreeView';
import { renderTabPanelId, renderTabPanelButtonId } from '../utils/a11y';
import { jsx as ___EmotionJSX } from "@emotion/react";
const rootProps = {
'aria-labelledby': renderTabPanelButtonId(QueryPreviewTabs.apiConfig),
id: renderTabPanelId(QueryPreviewTabs.apiConfig),
role: 'tabpanel'
};
export class QueryPreviewApi extends PureComponent {
shouldExpandApiStateNode = (keyPath, value, layer) => {
const lastKey = keyPath[keyPath.length - 1];
return layer <= 1 && lastKey !== 'config';
};
render() {
const {
apiStats,
isWideLayout,
apiState
} = this.props;
if (!apiState) {
return null;
}
const hasMutations = Object.keys(apiState.mutations).length > 0;
const hasQueries = Object.keys(apiState.queries).length > 0;
return ___EmotionJSX("article", _extends({}, rootProps, {
css: theme => ({
display: 'block',
overflowY: 'auto',
padding: '0.5em 0',
color: theme.TAB_CONTENT_COLOR,
'& h2': {
color: theme.ULIST_STRONG_COLOR,
padding: '0.5em 1em',
fontWeight: 700
},
'& h3': {
color: theme.ULIST_STRONG_COLOR
}
})
}), ___EmotionJSX("h2", null, apiState.config.reducerPath), ___EmotionJSX(TreeView, {
before: ___EmotionJSX("h3", null, "State"),
data: apiState,
shouldExpandNodeInitially: this.shouldExpandApiStateNode,
isWideLayout: isWideLayout
}), apiStats && ___EmotionJSX(React.Fragment, null, ___EmotionJSX(TreeView, {
before: ___EmotionJSX("h3", null, "Tally"),
data: apiStats.tally,
isWideLayout: isWideLayout
}), hasQueries && ___EmotionJSX(TreeView, {
before: ___EmotionJSX("h3", null, "Queries Timings"),
data: apiStats.timings.queries,
isWideLayout: isWideLayout
}), hasMutations && ___EmotionJSX(TreeView, {
before: ___EmotionJSX("h3", null, "Mutations Timings"),
data: apiStats.timings.mutations,
isWideLayout: isWideLayout
})));
}
}