docs(rtk-query): add proper README

Other changes:

* fix examples/rtk-query-poilling

packages/redux-devtools-rtk-query-inspector-monitor/README.md

@@ -1,21 +1,21 @@
-# Redux DevTools Chart Monitor
+# Redux DevTools RTK Query inspector monitor
 
-A chart monitor for [Redux DevTools](https://github.com/gaearon/redux-devtools).
+Displays rtk-query queries and mutations for [Redux DevTools](https://github.com/gaearon/redux-devtools).
 
-Created by [@romseguy](https://github.com/romseguy) and merged from [`reduxjs/redux-devtools-chart-monitor`](https://github.com/reduxjs/redux-devtools-chart-monitor).
+Created by [FaberVitale](https://github.com/FaberVitale)
 
-It shows a real-time view of the store aka the current state of the app.
 
-:rocket: Now with immutable-js support.
+![RTK Query inspector monitor demo](./monitor-demo.gif)
-
-[Demo](http://romseguy.github.io/redux-store-visualizer/) [(Source)](https://github.com/romseguy/redux-store-visualizer)
-
-![Chart Monitor](https://camo.githubusercontent.com/19aebaeba929e97f97225115c49dc994299cb76e/687474703a2f2f692e696d6775722e636f6d2f4d53677655366c2e676966)
 
 ### Installation
 
-```
+```bash
-yarn add @redux-devtools/chart-monitor
+npm i @redux-devtools/rtk-query-inspector-monitor --save # npm
+
+# or
+
+yarn add @redux-devtools/rtk-query-inspector-monitor # yarn
+
 ```
 
 ### Usage
@@ -24,12 +24,12 @@ You can use `ChartMonitor` as the only monitor in your app:
 
 ##### `containers/DevTools.js`
 
-```js
+```ts
 import React from 'react';
 import { createDevTools } from '@redux-devtools/core';
-import ChartMonitor from '@redux-devtools/chart-monitor';
+import RtkQueryInspectorMonitor from '@redux-devtools/rtk-query-inspector-monitor';
 
-export default createDevTools(<ChartMonitor />);
+export default createDevTools(<RtkQueryInspectorMonitor />);
 ```
 
 Then you can render `<DevTools>` to any place inside app or even into a separate popup window.
@@ -39,32 +39,12 @@ Consult the [`DockMonitor` README](https://github.com/reduxjs/redux-devtools/tre
 
 [Read how to start using Redux DevTools.](https://github.com/reduxjs/redux-devtools)
 
-### Features
-
-### Props
-
-#### ChartMonitor props
-
-You can read the React component [propTypes](https://github.com/reduxjs/redux-devtools/blob/master/packages/redux-devtools-chart-monitor/src/Chart.js#L11) in addition to the details below:
-
-| Name                      | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
-| ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `defaultIsVisible`        | By default, set to `true`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
-| `transitionDuration`      | By default, set to `750`, in milliseconds.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
-| `heightBetweenNodesCoeff` | By default, set to `1`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
-| `widthBetweenNodesCoeff`  | By default, set to `1.3`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
-| `isSorted`                | By default, set to `false`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
-| `style`                   | {<br>&nbsp;&nbsp;width: '100%', height: '100%', // i.e fullscreen for [`DockMonitor`](https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-dock-monitor)<br>&nbsp;&nbsp;text: {<br>&nbsp;&nbsp;&nbsp;&nbsp;colors: {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'default': `theme.base0D`,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;hover: `theme.base06`<br>&nbsp;&nbsp;&nbsp;&nbsp;}<br>&nbsp;&nbsp;},<br>&nbsp;&nbsp;node: {<br>&nbsp;&nbsp;&nbsp;&nbsp;colors: {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'default': `theme.base0B`,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;collapsed: `theme.base0B`,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parent: `theme.base0E`<br>&nbsp;&nbsp;&nbsp;&nbsp;},<br>&nbsp;&nbsp;&nbsp;&nbsp;radius: 7<br>&nbsp;&nbsp;}<br>} |
-| `onClickText`             | Function called with a reference to the clicked node as first argument when clicking on the text next to a node.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
-| `tooltipOptions`          | {<br>&nbsp;&nbsp;disabled: false,<br>&nbsp;&nbsp;indentationSize: 2,<br>&nbsp;&nbsp;style: {<br>&nbsp;&nbsp;&nbsp;&nbsp;'background-color': `theme.base06`,<br>&nbsp;&nbsp;&nbsp;&nbsp;'opacity': '0.7',<br>&nbsp;&nbsp;&nbsp;&nbsp;'border-radius': '5px',<br>&nbsp;&nbsp;&nbsp;&nbsp;'padding': '5px'<br>&nbsp;&nbsp;}<br>}<br>[More info](https://github.com/reduxjs/redux-devtools/tree/master/packages/d3tooltip#api).                                                                                                                                                                                                                                                                                                                                                        |
-
 #### Redux DevTools props
 
 | Name          | Description                                                                                                                                                                                                                                                                                                                         |
 | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `theme`       | Either a string referring to one of the themes provided by [redux-devtools-themes](https://github.com/gaearon/redux-devtools-themes) (feel free to contribute!) or a custom object of the same format. Optional. By default, set to [`'nicinabox'`](https://github.com/gaearon/redux-devtools-themes/blob/master/src/nicinabox.js). |
 | `invertTheme` | Boolean value that will invert the colors of the selected theme. Optional. By default, set to `false`                                                                                                                                                                                                                               |
-| `select`      | A function that selects the slice of the state for DevTools to show. For example, `state => state.thePart.iCare.about`. Optional. By default, set to `state => state`.                                                                                                                                                              |
 
 ### License
 

packages/redux-devtools-rtk-query-inspector-monitor/demo/README.md

@@ -1,25 +1,23 @@
-# New Project
+# RTK Query Inspector monitor demo
 
-> ✨ Bootstrapped with Create Snowpack App (CSA).
+## Running demo
 
-## Available Scripts
 
-### npm start
+### Working directory
+Run the following commands from redux-devtools monorepo root directory.
 
-Runs the app in the development mode.
-Open http://localhost:8080 to view it in the browser.
 
-The page will reload if you make edits.
+### 1. Install depedencies
-You will also see any lint errors in the console.
 
-### npm run build
+```bash
+yarn
+```
 
-Builds a static copy of your site to the `build/` folder.
+### 2. Start demo
-Your app is ready to be deployed!
 
-**For the best production performance:** Add a build bundler plugin like "@snowpack/plugin-webpack" to your `snowpack.config.mjs` config file.
+```bash
-
+# working directory is monorepo root
-### npm test
+yarn lerna run --parallel start \
-
+--scope '@redux-devtools/rtk-query-inspector-monitor' \
-Launches the application test runner.
+--scope 'rtk-query-imspector-monitor-demo'
-Run with the `--watch` flag (`npm test -- --watch`) to run in interactive watch mode.
+```

packages/redux-devtools-rtk-query-inspector-monitor/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@redux-devtools/rtk-query-inspector-monitor",
   "version": "1.0.0",
-  "description": "rtk-query Monitor for Redux DevTools",
+  "description": "rtk-query monitor for Redux DevTools",
   "keywords": [
     "redux",
     "devtools",
@@ -10,12 +10,15 @@
     "redux-toolkit",
     "rtk-query"
   ],
-  "homepage": "https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-chart-monitor",
+  "homepage": "https://github.com/FaberVitale/redux-devtools/tree/feat/rtk-query-monitor/packages/redux-devtools-rtk-query-inspector-monitor",
   "bugs": {
     "url": "https://github.com/reduxjs/redux-devtools/issues"
   },
   "license": "MIT",
-  "author": "FaberVitale",
+  "author": {
+    "name": "FaberVitale",
+    "url": "https://github.com/FaberVitale"
+  },
   "files": [
     "lib",
     "src"

packages/redux-devtools-rtk-query-inspector-monitor/src/selectors.ts

@@ -85,13 +85,15 @@ export function createInspectorSelectors<S>(): InspectorSelectors<S> {
     }
   );
 
+  const selectComparatorOrder = ({ monitorState }: SelectorsSource<S>) =>
+    monitorState.queryForm.values.isAscendingQueryComparatorOrder;
+
   const selectAllVisbileQueries = createSelector(
     [
       selectQueryComparator,
       selectQueryListFilter,
       selectAllQueries,
-      ({ monitorState }: SelectorsSource<S>) =>
+      selectComparatorOrder,
-        monitorState.queryForm.values.isAscendingQueryComparatorOrder,
       selectSearchQueryRegex,
     ],
     (comparator, queryListFilter, queryList, isAscending, searchRegex) => {

packages/redux-devtools/examples/rtk-query-polling/package.json

@@ -3,12 +3,11 @@
   "version": "1.0.0",
   "private": true,
   "description": "A redux app powered by rtk-query connected via remote-redux-devtools",
-  "keywords": [],
   "main": "src/index.tsx",
   "dependencies": {
     "@reduxjs/toolkit": "^1.6.0",
-    "react": "^16.3.0",
+    "react": "^17.0.0",
-    "react-dom": "^16.3.0",
+    "react-dom": "^17.0.0",
     "react-redux": "7.2.2",
     "react-scripts": "4.0.2",
     "remote-redux-devtools": "0.5.16"
@@ -17,7 +16,7 @@
     "@types/react": "17.0.0",
     "@types/react-dom": "17.0.0",
     "@types/react-redux": "7.1.9",
-    "typescript": "4.1.3"
+    "typescript": "4.3.2"
   },
   "eslintConfig": {
     "extends": [

packages/redux-devtools/examples/rtk-query-polling/src/App.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import * as React from 'react';
 import { Pokemon } from './Pokemon'
 import { PokemonName, POKEMON_NAMES } from './pokemon.data'
 import './styles.css'
@@ -7,7 +7,7 @@ const getRandomPokemonName = () =>
   POKEMON_NAMES[Math.floor(Math.random() * POKEMON_NAMES.length)]
 
 export default function App() {
-  const [pokemon, setPokemon] = useState<PokemonName[]>(['bulbasaur'])
+  const [pokemon, setPokemon] = React.useState<PokemonName[]>(['bulbasaur'])
 
   return (
     <div className="App">

packages/redux-devtools/examples/rtk-query-polling/src/Pokemon.tsx

@@ -1,8 +1,6 @@
-import { useState, version } from 'react'
+import * as React from 'react';
-import { useGetPokemonByNameQuery } from './services/pokemon'
+import { useGetPokemonByNameQuery } from './services/pokemon';
-import type { PokemonName } from './pokemon.data'
+import type { PokemonName } from './pokemon.data';
-
-console.log(version);
 
 const intervalOptions = [
   { label: 'Off', value: 0 },
@@ -16,7 +14,7 @@ const getRandomIntervalValue = () =>
   intervalOptions[Math.floor(Math.random() * intervalOptions.length)].value
 
 export function Pokemon({ name }: { name: PokemonName })  {
-  const [pollingInterval, setPollingInterval] = useState(
+  const [pollingInterval, setPollingInterval] = React.useState(
     getRandomIntervalValue()
   )
 

packages/redux-devtools/examples/rtk-query-polling/src/index.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { render } from 'react-dom'
 import { Provider } from 'react-redux';
 import App from './App'

packages/redux-devtools/examples/rtk-query-polling/tsconfig.json

@@ -1,25 +1,22 @@
 {
+  "extends": "../../../../tsconfig.react.base.json",
   "include": [
-    "./src/**/*"
+    "src"
   ],
   "compilerOptions": {
-    "strict": true,
-    "esModuleInterop": true,
     "lib": [
       "dom",
-      "es2015"
+      "dom.iterable",
+      "esnext"
     ],
-    "jsx": "react-jsx",
-    "target": "es5",
     "allowJs": true,
     "skipLibCheck": true,
-    "allowSyntheticDefaultImports": true,
-    "forceConsistentCasingInFileNames": true,
     "noFallthroughCasesInSwitch": true,
     "module": "esnext",
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "noEmit": true
+    "noEmit": true,
+    "jsx": "react-jsx"
   }
 }

yarn.lock

@@ -24378,7 +24378,7 @@ fsevents@^1.2.7:
   languageName: unknown
   linkType: soft
 
-"react-dom@npm:^16.14.0, react-dom@npm:^16.3.0":
+"react-dom@npm:^16.14.0":
   version: 16.14.0
   resolution: "react-dom@npm:16.14.0"
   dependencies:
@@ -24392,7 +24392,7 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"react-dom@npm:^17.0.2":
+"react-dom@npm:^17.0.0, react-dom@npm:^17.0.2":
   version: 17.0.2
   resolution: "react-dom@npm:17.0.2"
   dependencies:
@@ -24879,7 +24879,7 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"react@npm:^16.13.1, react@npm:^16.14.0, react@npm:^16.3.0":
+"react@npm:^16.13.1, react@npm:^16.14.0":
   version: 16.14.0
   resolution: "react@npm:16.14.0"
   dependencies:
@@ -24890,7 +24890,7 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"react@npm:^17.0.2":
+"react@npm:^17.0.0, react@npm:^17.0.2":
   version: 17.0.2
   resolution: "react@npm:17.0.2"
   dependencies:
@@ -26192,12 +26192,12 @@ resolve@^2.0.0-next.3:
     "@types/react": 17.0.0
     "@types/react-dom": 17.0.0
     "@types/react-redux": 7.1.9
-    react: ^16.3.0
+    react: ^17.0.0
-    react-dom: ^16.3.0
+    react-dom: ^17.0.0
     react-redux: 7.2.2
     react-scripts: 4.0.2
     remote-redux-devtools: 0.5.16
-    typescript: 4.1.3
+    typescript: 4.3.2
   languageName: unknown
   linkType: soft
 
@@ -29274,16 +29274,6 @@ resolve@^2.0.0-next.3:
   languageName: node
   linkType: hard
 
-typescript@4.1.3:
-  version: 4.1.3
-  resolution: "typescript@npm:4.1.3"
-  bin:
-    tsc: bin/tsc
-    tsserver: bin/tsserver
-  checksum: 4f7ab1506ea22c7a1c313ec5b4285e93ce08d709ad6086d02d3096adb399ca339972ee56d1e578213c51dd0fb7b0fad50283c2d3c39642405644458ae29774f8
-  languageName: node
-  linkType: hard
-
 typescript@4.3.2:
   version: 4.3.2
   resolution: "typescript@npm:4.3.2"
@@ -29294,16 +29284,6 @@ typescript@4.3.2:
   languageName: node
   linkType: hard
 
-typescript@^3.9.7:
-  version: 3.9.10
-  resolution: "typescript@npm:3.9.10"
-  bin:
-    tsc: bin/tsc
-    tsserver: bin/tsserver
-  checksum: 544f3810ac3d3fcd141907e7f52f0b8c70af178adc83af47e2b8a48351e5a119919a4d3bfbe2f62d5165b5aa203e896fe0432024cfbda670dbd03a4f53ce7748
-  languageName: node
-  linkType: hard
-
 typescript@^4.3.4:
   version: 4.3.4
   resolution: "typescript@npm:4.3.4"
@@ -29314,16 +29294,6 @@ typescript@^4.3.4:
   languageName: node
   linkType: hard
 
-"typescript@patch:typescript@4.1.3#builtin<compat/typescript>":
-  version: 4.1.3
-  resolution: "typescript@patch:typescript@npm%3A4.1.3#builtin<compat/typescript>::version=4.1.3&hash=ddfc1b"
-  bin:
-    tsc: bin/tsc
-    tsserver: bin/tsserver
-  checksum: 28f0f616bf6284543bb14d4bfe0e1a74963e5df0396ebccfc6a57bfd4ab70b4284e51b3a2045ed2466151a4a58c8a549edb886a2f7a2232cf08fcf73496592e6
-  languageName: node
-  linkType: hard
-
 "typescript@patch:typescript@4.3.2#builtin<compat/typescript>":
   version: 4.3.2
   resolution: "typescript@patch:typescript@npm%3A4.3.2#builtin<compat/typescript>::version=4.3.2&hash=ddfc1b"
@@ -29334,16 +29304,6 @@ typescript@^4.3.4:
   languageName: node
   linkType: hard
 
-"typescript@patch:typescript@^3.9.7#builtin<compat/typescript>":
-  version: 3.9.10
-  resolution: "typescript@patch:typescript@npm%3A3.9.10#builtin<compat/typescript>::version=3.9.10&hash=ddfc1b"
-  bin:
-    tsc: bin/tsc
-    tsserver: bin/tsserver
-  checksum: 744dab471ae59659b1618be636ab56b9c0afbca801e0640c3cdfad0a894315c87d30a290b7063c6a3f1860bf47fe44d9188cb85e46b2bdadda7f207d67e6b4e1
-  languageName: node
-  linkType: hard
-
 "typescript@patch:typescript@^4.3.4#builtin<compat/typescript>":
   version: 4.3.4
   resolution: "typescript@patch:typescript@npm%3A4.3.4#builtin<compat/typescript>::version=4.3.4&hash=ddfc1b"
@@ -29354,6 +29314,26 @@ typescript@^4.3.4:
   languageName: node
   linkType: hard
 
+"typescript@patch:typescript@~4.0.7#builtin<compat/typescript>":
+  version: 4.0.8
+  resolution: "typescript@patch:typescript@npm%3A4.0.8#builtin<compat/typescript>::version=4.0.8&hash=ddfc1b"
+  bin:
+    tsc: bin/tsc
+    tsserver: bin/tsserver
+  checksum: d12e73e6fb00f0ed42b10b42493d2eb907f31b8c6eb6cfb896be45d79d8fcbf46c9bc1e2aced88898f91191e3f49c5a13d3f86d01bb386ee29f502c7ccfe0b6a
+  languageName: node
+  linkType: hard
+
+typescript@~4.0.7:
+  version: 4.0.8
+  resolution: "typescript@npm:4.0.8"
+  bin:
+    tsc: bin/tsc
+    tsserver: bin/tsserver
+  checksum: f7789f9c531dffcf4c849a806627562ad6297f608aab85c0514d87a2ab3e060bcfadd63963735994796c45326eebeb479c004065af47e72ee44ba8c935fc9a54
+  languageName: node
+  linkType: hard
+
 "uglify-js@npm:^2.6.1":
   version: 2.8.29
   resolution: "uglify-js@npm:2.8.29"