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

rtk-query monitor for Redux DevTools

import React, { PureComponent, createRef } from 'react';
import { createInspectorSelectors, computeSelectorSource } from '../selectors';
import { changeQueryFormValues, selectedPreviewTab, selectQueryKey } from '../reducers';
import { QueryList } from '../components/QueryList';
import { QueryForm } from '../components/QueryForm';
import { QueryPreview } from './QueryPreview';
import { jsx as ___EmotionJSX } from "@emotion/react";
class RtkQueryInspector extends PureComponent {
  inspectorRef = (() => /*#__PURE__*/createRef())();
  isWideIntervalRef = null;
  constructor(props) {
    super(props);
    this.state = {
      isWideLayout: true,
      selectorsSource: computeSelectorSource(props, null)
    };
  }
  static wideLayout = 600;
  static getDerivedStateFromProps(props, state) {
    const selectorsSource = computeSelectorSource(props, state.selectorsSource);
    if (selectorsSource !== state.selectorsSource) {
      return {
        selectorsSource
      };
    }
    return null;
  }
  selectors = (() => createInspectorSelectors())();
  updateSizeMode = () => {
    if (this.inspectorRef.current) {
      const isWideLayout = this.inspectorRef.current.offsetWidth >= RtkQueryInspector.wideLayout;
      if (isWideLayout !== this.state.isWideLayout) {
        this.setState({
          isWideLayout
        });
      }
    }
  };
  componentDidMount() {
    this.updateSizeMode();
    this.isWideIntervalRef = setInterval(this.updateSizeMode, 300);
  }
  componentWillUnmount() {
    if (this.isWideIntervalRef) {
      clearTimeout(this.isWideIntervalRef);
    }
  }
  handleQueryFormValuesChange = values => {
    this.props.dispatch(changeQueryFormValues(values));
  };
  handleSelectQuery = queryInfo => {
    this.props.dispatch(selectQueryKey(queryInfo));
  };
  handleTabChange = tab => {
    this.props.dispatch(selectedPreviewTab(tab));
  };
  render() {
    const {
      selectorsSource,
      isWideLayout
    } = this.state;
    const allVisibleRtkResourceInfos = this.selectors.selectAllVisbileQueries(selectorsSource);
    const currentResInfo = this.selectors.selectCurrentQueryInfo(selectorsSource);
    const apiStates = this.selectors.selectApiStates(selectorsSource);
    const hasNoApi = apiStates == null;
    const searchQueryRegex = this.selectors.selectSearchQueryRegex(selectorsSource);
    return ___EmotionJSX("div", {
      ref: this.inspectorRef,
      "data-wide-layout": +this.state.isWideLayout,
      css: theme => ({
        display: 'flex',
        flexFlow: 'column nowrap',
        overflow: 'hidden',
        width: '100%',
        height: '100%',
        fontFamily: 'monaco, Consolas, "Lucida Console", monospace',
        fontSize: '12px',
        WebkitFontSmoothing: 'antialiased',
        lineHeight: '1.5em',
        backgroundColor: theme.BACKGROUND_COLOR,
        color: theme.TEXT_COLOR,
        '&[data-wide-layout="1"]': {
          flexFlow: 'row nowrap'
        }
      })
    }, ___EmotionJSX("div", {
      css: theme => ({
        display: 'flex',
        flex: '0 0 auto',
        height: '50%',
        width: '100%',
        borderColor: theme.TAB_BORDER_COLOR,
        '&[data-wide-layout="0"]': {
          borderBottomWidth: 1,
          borderStyle: 'solid'
        },
        '&[data-wide-layout="1"]': {
          height: '100%',
          width: '44%',
          borderRightWidth: 1,
          borderStyle: 'solid'
        },
        flexFlow: 'column nowrap',
        '& > form': {
          flex: '0 0 auto',
          borderBottomWidth: '1px',
          borderBottomStyle: 'solid',
          borderColor: theme.LIST_BORDER_COLOR
        },
        '& > ul': {
          flex: '1 1 auto',
          overflowX: 'hidden',
          overflowY: 'auto',
          maxHeight: 'calc(100% - 70px)'
        }
      }),
      "data-wide-layout": +this.state.isWideLayout
    }, ___EmotionJSX(QueryForm, {
      searchQueryRegex: searchQueryRegex,
      values: selectorsSource.monitorState.queryForm.values,
      onFormValuesChange: this.handleQueryFormValuesChange
    }), ___EmotionJSX(QueryList, {
      onSelectQuery: this.handleSelectQuery,
      resInfos: allVisibleRtkResourceInfos,
      selectedQueryKey: selectorsSource.monitorState.selectedQueryKey
    })), ___EmotionJSX(QueryPreview, {
      selectorsSource: this.state.selectorsSource,
      selectors: this.selectors,
      resInfo: currentResInfo,
      selectedTab: selectorsSource.monitorState.selectedPreviewTab,
      onTabChange: this.handleTabChange,
      isWideLayout: isWideLayout,
      hasNoApis: hasNoApi
    }));
  }
}
export default RtkQueryInspector;