diff --git a/.prettierignore b/.prettierignore index 6a93b0d5..9702c386 100644 --- a/.prettierignore +++ b/.prettierignore @@ -10,3 +10,4 @@ __snapshots__ dev .yarn/* **/.yarn/* +demo/public/** \ No newline at end of file diff --git a/packages/redux-devtools-rtk-query-monitor/src/RtkQueryInspector.tsx b/packages/redux-devtools-rtk-query-monitor/src/RtkQueryInspector.tsx index ca18cac8..4eecc9b2 100644 --- a/packages/redux-devtools-rtk-query-monitor/src/RtkQueryInspector.tsx +++ b/packages/redux-devtools-rtk-query-monitor/src/RtkQueryInspector.tsx @@ -124,7 +124,7 @@ class RtkQueryInspector> extends Component< this.selectors.selectAllVisbileQueries(selectorsSource); const currentQueryInfo = - this.selectors.selectorCurrentQueryInfo(selectorsSource); + this.selectors.selectCurrentQueryInfo(selectorsSource); const currentRtkApi = getApiStateOf(currentQueryInfo, apiStates); const currentQuerySubscriptions = getQuerySubscriptionsOf( @@ -137,6 +137,8 @@ class RtkQueryInspector> extends Component< const currentApiStats = this.selectors.selectApiStatsOfCurrentQuery(selectorsSource); + const hasNoApis = apiStates == null; + return (
> extends Component< apiState={currentRtkApi} isWideLayout={isWideLayout} apiStats={currentApiStats} + hasNoApis={hasNoApis} />
); diff --git a/packages/redux-devtools-rtk-query-monitor/src/components/NoRtkQueryApi.tsx b/packages/redux-devtools-rtk-query-monitor/src/components/NoRtkQueryApi.tsx new file mode 100644 index 00000000..5e0d5503 --- /dev/null +++ b/packages/redux-devtools-rtk-query-monitor/src/components/NoRtkQueryApi.tsx @@ -0,0 +1,23 @@ +import React from 'react'; +import { ReactNode } from 'react'; +import { StyleUtilsContext } from '../styles/createStylingFromTheme'; + +export function NoRtkQueryApi(): ReactNode { + return ( + + {({ styling }) => ( +
+ No rtk-query api found.
Make sure to follow{' '} + + the instructions + + . +
+ )} +
+ ); +} diff --git a/packages/redux-devtools-rtk-query-monitor/src/components/QueryPreview.tsx b/packages/redux-devtools-rtk-query-monitor/src/components/QueryPreview.tsx index e6f5b5d6..f5f1e667 100644 --- a/packages/redux-devtools-rtk-query-monitor/src/components/QueryPreview.tsx +++ b/packages/redux-devtools-rtk-query-monitor/src/components/QueryPreview.tsx @@ -11,10 +11,12 @@ import { QueryPreviewInfo } from './QueryPreviewInfo'; import { QueryPreviewApi } from './QueryPreviewApi'; import { QueryPreviewSubscriptions } from './QueryPreviewSubscriptions'; import { QueryPreviewTags } from './QueryPreviewTags'; +import { NoRtkQueryApi } from './NoRtkQueryApi'; export interface QueryPreviewProps extends Omit { selectedTab: QueryPreviewTabs; + hasNoApis: boolean; onTabChange: (tab: QueryPreviewTabs) => void; } @@ -95,6 +97,7 @@ export class QueryPreview extends React.PureComponent { querySubscriptions, tags, apiStats, + hasNoApis, } = this.props; const { component: TabComponent } = @@ -111,6 +114,7 @@ export class QueryPreview extends React.PureComponent { tabs={tabs} renderTabLabel={this.renderTabLabel} /> + {hasNoApis && } )} diff --git a/packages/redux-devtools-rtk-query-monitor/src/selectors.ts b/packages/redux-devtools-rtk-query-monitor/src/selectors.ts index 863174fd..fbd73b06 100644 --- a/packages/redux-devtools-rtk-query-monitor/src/selectors.ts +++ b/packages/redux-devtools-rtk-query-monitor/src/selectors.ts @@ -48,7 +48,7 @@ export interface InspectorSelectors { ReturnType >; readonly selectAllVisbileQueries: InspectorSelector; - readonly selectorCurrentQueryInfo: InspectorSelector; + readonly selectCurrentQueryInfo: InspectorSelector; readonly selectSearchQueryRegex: InspectorSelector; readonly selectCurrentQueryTags: InspectorSelector; readonly selectApiStatsOfCurrentQuery: InspectorSelector; @@ -112,7 +112,7 @@ export function createInspectorSelectors(): InspectorSelectors { } ); - const selectorCurrentQueryInfo = createSelector( + const selectCurrentQueryInfo = createSelector( selectAllQueries, ({ monitorState }: SelectorsSource) => monitorState.selectedQueryKey, (allQueries, selectedQueryKey) => { @@ -133,13 +133,13 @@ export function createInspectorSelectors(): InspectorSelectors { const selectCurrentQueryTags = createSelector( selectApiStates, - selectorCurrentQueryInfo, + selectCurrentQueryInfo, (apiState, currentQueryInfo) => getQueryTagsOf(currentQueryInfo, apiState) ); const selectApiStatsOfCurrentQuery = createSelector( selectApiStates, - selectorCurrentQueryInfo, + selectCurrentQueryInfo, (apiState, currentQueryInfo) => generateApiStatsOfCurrentQuery(currentQueryInfo, apiState) ); @@ -150,7 +150,7 @@ export function createInspectorSelectors(): InspectorSelectors { selectAllQueries, selectAllVisbileQueries, selectSearchQueryRegex, - selectorCurrentQueryInfo, + selectCurrentQueryInfo, selectCurrentQueryTags, selectApiStatsOfCurrentQuery, }; diff --git a/packages/redux-devtools-rtk-query-monitor/src/styles/createStylingFromTheme.ts b/packages/redux-devtools-rtk-query-monitor/src/styles/createStylingFromTheme.ts index 6256f1f9..140c8d91 100644 --- a/packages/redux-devtools-rtk-query-monitor/src/styles/createStylingFromTheme.ts +++ b/packages/redux-devtools-rtk-query-monitor/src/styles/createStylingFromTheme.ts @@ -289,6 +289,16 @@ const getSheetFromColorMap = (map: ColorMap) => { }, }, + noApiFound: { + width: '100%', + textAlign: 'center', + padding: '1.4em', + '& a': { + fontSize: 'inherit', + textDecoration: 'underline', + }, + }, + searchSelectLabel: { display: 'inline-block', padding: 4, diff --git a/packages/redux-devtools-rtk-query-monitor/src/utils/rtk-query.ts b/packages/redux-devtools-rtk-query-monitor/src/utils/rtk-query.ts index 48e6c16f..0e66ab31 100644 --- a/packages/redux-devtools-rtk-query-monitor/src/utils/rtk-query.ts +++ b/packages/redux-devtools-rtk-query-monitor/src/utils/rtk-query.ts @@ -41,6 +41,15 @@ export function isApiSlice(val: unknown): val is RtkQueryApiState { return true; } +/** + * Indexes api states by their `reducerPath`. + * + * Returns `null` if there are no api slice or `reduxStoreState` + * is not an object. + * + * @param reduxStoreState + * @returns + */ export function getApiStatesOf( reduxStoreState: unknown ): null | Readonly> {