diff --git a/packages/redux-devtools-rtk-query-inspector-monitor/.gitignore b/packages/redux-devtools-rtk-query-inspector-monitor/.gitignore deleted file mode 100644 index d1603fed..00000000 --- a/packages/redux-devtools-rtk-query-inspector-monitor/.gitignore +++ /dev/null @@ -1 +0,0 @@ -demo/src/generated-module/ \ No newline at end of file diff --git a/packages/redux-devtools-rtk-query-inspector-monitor/README.md b/packages/redux-devtools-rtk-query-inspector-monitor/README.md index a9b05a77..0c5b2ac0 100644 --- a/packages/redux-devtools-rtk-query-inspector-monitor/README.md +++ b/packages/redux-devtools-rtk-query-inspector-monitor/README.md @@ -13,7 +13,6 @@ Created by [FaberVitale](https://github.com/FaberVitale) ![RTK Query inspector monitor demo](./monitor-demo.gif) - ## Installation ```bash diff --git a/packages/redux-devtools-rtk-query-inspector-monitor/demo/README.md b/packages/redux-devtools-rtk-query-inspector-monitor/demo/README.md index 30a53a6a..2d63ec92 100644 --- a/packages/redux-devtools-rtk-query-inspector-monitor/demo/README.md +++ b/packages/redux-devtools-rtk-query-inspector-monitor/demo/README.md @@ -2,10 +2,9 @@ ## Running demo - ### Working directory -Run the following commands from redux-devtools monorepo root directory. +Run the following commands from redux-devtools monorepo root directory. ### 1. Install depedencies diff --git a/packages/redux-devtools-rtk-query-inspector-monitor/demo/public/favicon.ico b/packages/redux-devtools-rtk-query-inspector-monitor/demo/public/favicon.ico deleted file mode 100644 index bcd5dfd6..00000000 Binary files a/packages/redux-devtools-rtk-query-inspector-monitor/demo/public/favicon.ico and /dev/null differ diff --git a/packages/redux-devtools-rtk-query-inspector-monitor/demo/public/index.html b/packages/redux-devtools-rtk-query-inspector-monitor/demo/public/index.html index ad9c2ff3..1cf082c3 100644 --- a/packages/redux-devtools-rtk-query-inspector-monitor/demo/public/index.html +++ b/packages/redux-devtools-rtk-query-inspector-monitor/demo/public/index.html @@ -2,7 +2,6 @@ - export function Pokemon({ name }: { name: PokemonName }) { const [pollingInterval, setPollingInterval] = useState(60000); - const { - data, - error, - isLoading, - isFetching, - refetch, - } = useGetPokemonByNameQuery(name, { - pollingInterval, - }); + const { data, error, isLoading, isFetching, refetch } = + useGetPokemonByNameQuery(name, { + pollingInterval, + }); return (
> extends Component< styleUtils: { styling }, } = this.props; const apiStates = this.selectors.selectApiStates(selectorsSource); - const allVisibleQueries = this.selectors.selectAllVisbileQueries( - selectorsSource - ); + const allVisibleQueries = + this.selectors.selectAllVisbileQueries(selectorsSource); - const currentQueryInfo = this.selectors.selectorCurrentQueryInfo( - selectorsSource - ); + const currentQueryInfo = + this.selectors.selectorCurrentQueryInfo(selectorsSource); const currentRtkApi = getApiStateOf(currentQueryInfo, apiStates); const currentQuerySubscriptions = getQuerySubscriptionsOf( diff --git a/packages/redux-devtools-rtk-query-inspector-monitor/src/RtkQueryInspectorMonitor.tsx b/packages/redux-devtools-rtk-query-inspector-monitor/src/RtkQueryInspectorMonitor.tsx index 9f6455e7..8939c7de 100644 --- a/packages/redux-devtools-rtk-query-inspector-monitor/src/RtkQueryInspectorMonitor.tsx +++ b/packages/redux-devtools-rtk-query-inspector-monitor/src/RtkQueryInspectorMonitor.tsx @@ -73,7 +73,7 @@ class RtkQueryInspectorMonitor> extends Component< } } -export default (RtkQueryInspectorMonitor as unknown) as React.ComponentType< +export default RtkQueryInspectorMonitor as unknown as React.ComponentType< ExternalProps> > & { update( diff --git a/packages/redux-devtools-rtk-query-inspector-monitor/src/components/QueryPreviewHeader.tsx b/packages/redux-devtools-rtk-query-inspector-monitor/src/components/QueryPreviewHeader.tsx index 5fac2f18..676a7d85 100644 --- a/packages/redux-devtools-rtk-query-inspector-monitor/src/components/QueryPreviewHeader.tsx +++ b/packages/redux-devtools-rtk-query-inspector-monitor/src/components/QueryPreviewHeader.tsx @@ -9,9 +9,7 @@ export interface QueryPreviewHeaderProps { selectedTab: QueryPreviewTabs; } -export class QueryPreviewHeader extends React.Component< - QueryPreviewHeaderProps -> { +export class QueryPreviewHeader extends React.Component { handleTabClick = (tab: QueryPreviewTabOption): void => { if (this.props.selectedTab !== tab.value) { this.props.onTabChange(tab.value); diff --git a/packages/redux-devtools-rtk-query-inspector-monitor/src/components/QueryPreviewInfo.tsx b/packages/redux-devtools-rtk-query-inspector-monitor/src/components/QueryPreviewInfo.tsx index 2bc82f94..6ac2ef5b 100644 --- a/packages/redux-devtools-rtk-query-inspector-monitor/src/components/QueryPreviewInfo.tsx +++ b/packages/redux-devtools-rtk-query-inspector-monitor/src/components/QueryPreviewInfo.tsx @@ -55,13 +55,8 @@ export class QueryPreviewInfo extends PureComponent { ); render(): ReactNode { - const { - queryInfo, - isWideLayout, - base16Theme, - styling, - invertTheme, - } = this.props; + const { queryInfo, isWideLayout, base16Theme, styling, invertTheme } = + this.props; const formattedQuery = this.selectFormattedQuery(queryInfo); diff --git a/packages/redux-devtools-rtk-query-inspector-monitor/src/components/QueryPreviewTags.tsx b/packages/redux-devtools-rtk-query-inspector-monitor/src/components/QueryPreviewTags.tsx index 87140581..d62534de 100644 --- a/packages/redux-devtools-rtk-query-inspector-monitor/src/components/QueryPreviewTags.tsx +++ b/packages/redux-devtools-rtk-query-inspector-monitor/src/components/QueryPreviewTags.tsx @@ -32,13 +32,8 @@ export class QueryPreviewTags extends PureComponent< } render(): ReactNode { - const { - queryInfo, - isWideLayout, - base16Theme, - styling, - invertTheme, - } = this.props; + const { queryInfo, isWideLayout, base16Theme, styling, invertTheme } = + this.props; if (!queryInfo) { return null; diff --git a/packages/redux-devtools-rtk-query-inspector-monitor/src/reducers.ts b/packages/redux-devtools-rtk-query-inspector-monitor/src/reducers.ts index 916bc63f..02b25b6d 100644 --- a/packages/redux-devtools-rtk-query-inspector-monitor/src/reducers.ts +++ b/packages/redux-devtools-rtk-query-inspector-monitor/src/reducers.ts @@ -60,8 +60,5 @@ export function reducer>( return monitorSlice.reducer(state, action); } -export const { - selectQueryKey, - changeQueryFormValues, - selectedPreviewTab, -} = monitorSlice.actions; +export const { selectQueryKey, changeQueryFormValues, selectedPreviewTab } = + monitorSlice.actions; diff --git a/packages/redux-devtools-rtk-query-inspector-monitor/src/utils/comparators.ts b/packages/redux-devtools-rtk-query-inspector-monitor/src/utils/comparators.ts index c6aed1c2..7a9a6b10 100644 --- a/packages/redux-devtools-rtk-query-inspector-monitor/src/utils/comparators.ts +++ b/packages/redux-devtools-rtk-query-inspector-monitor/src/utils/comparators.ts @@ -86,10 +86,9 @@ function sortByApiReducerPath( ); } -export const queryComparators: Readonly ->> = { +export const queryComparators: Readonly< + Record> +> = { [QueryComparators.fulfilledTimeStamp]: sortQueryByFulfilled, [QueryComparators.status]: sortQueryByStatus, [QueryComparators.endpointName]: sortQueryByEndpointName, diff --git a/packages/redux-devtools-rtk-query-inspector-monitor/src/utils/filters.ts b/packages/redux-devtools-rtk-query-inspector-monitor/src/utils/filters.ts index 70b96293..eae8c51f 100644 --- a/packages/redux-devtools-rtk-query-inspector-monitor/src/utils/filters.ts +++ b/packages/redux-devtools-rtk-query-inspector-monitor/src/utils/filters.ts @@ -61,10 +61,9 @@ export const filterQueryOptions: SelectOption[] = [ { label: 'endpoint', value: QueryFilters.endpointName }, ]; -export const queryListFilters: Readonly ->> = { +export const queryListFilters: Readonly< + Record> +> = { [QueryFilters.queryKey]: filterByQueryKey, [QueryFilters.endpointName]: filterByEndpointName, [QueryFilters.reducerPath]: filterByReducerPath, diff --git a/packages/redux-devtools-rtk-query-inspector-monitor/tsconfig.dev.json b/packages/redux-devtools-rtk-query-inspector-monitor/tsconfig.dev.json index 852044b7..5e412b75 100644 --- a/packages/redux-devtools-rtk-query-inspector-monitor/tsconfig.dev.json +++ b/packages/redux-devtools-rtk-query-inspector-monitor/tsconfig.dev.json @@ -1,7 +1,7 @@ { "extends": "../../tsconfig.react.base.json", "compilerOptions": { - "outDir": "./demo/src/generated-module", + "outDir": "./demo/src/build", "module": "ES2015", "strict": false }, diff --git a/packages/redux-devtools/examples/rtk-query-polling/public/index.html b/packages/redux-devtools/examples/rtk-query-polling/public/index.html index 42ae2d2d..475209a9 100644 --- a/packages/redux-devtools/examples/rtk-query-polling/public/index.html +++ b/packages/redux-devtools/examples/rtk-query-polling/public/index.html @@ -1,17 +1,19 @@ - - - - - - - - - - React App - + React App + - - -
- - - - \ No newline at end of file + + diff --git a/packages/redux-devtools/examples/rtk-query-polling/src/App.tsx b/packages/redux-devtools/examples/rtk-query-polling/src/App.tsx index f2781953..c8e60bd2 100644 --- a/packages/redux-devtools/examples/rtk-query-polling/src/App.tsx +++ b/packages/redux-devtools/examples/rtk-query-polling/src/App.tsx @@ -1,13 +1,13 @@ import * as React from 'react'; -import { Pokemon } from './Pokemon' -import { PokemonName, POKEMON_NAMES } from './pokemon.data' -import './styles.css' +import { Pokemon } from './Pokemon'; +import { PokemonName, POKEMON_NAMES } from './pokemon.data'; +import './styles.css'; const getRandomPokemonName = () => - POKEMON_NAMES[Math.floor(Math.random() * POKEMON_NAMES.length)] + POKEMON_NAMES[Math.floor(Math.random() * POKEMON_NAMES.length)]; export default function App() { - const [pokemon, setPokemon] = React.useState(['bulbasaur']) + const [pokemon, setPokemon] = React.useState(['bulbasaur']); return (
@@ -28,6 +28,5 @@ export default function App() { ))}
- ) + ); } - \ No newline at end of file diff --git a/packages/redux-devtools/examples/rtk-query-polling/src/Pokemon.tsx b/packages/redux-devtools/examples/rtk-query-polling/src/Pokemon.tsx index 57018957..dfabd625 100644 --- a/packages/redux-devtools/examples/rtk-query-polling/src/Pokemon.tsx +++ b/packages/redux-devtools/examples/rtk-query-polling/src/Pokemon.tsx @@ -8,25 +8,20 @@ const intervalOptions = [ { label: '5s', value: 5000 }, { label: '10s', value: 10000 }, { label: '1m', value: 60000 }, -] +]; const getRandomIntervalValue = () => - intervalOptions[Math.floor(Math.random() * intervalOptions.length)].value + intervalOptions[Math.floor(Math.random() * intervalOptions.length)].value; -export function Pokemon({ name }: { name: PokemonName }) { +export function Pokemon({ name }: { name: PokemonName }) { const [pollingInterval, setPollingInterval] = React.useState( getRandomIntervalValue() - ) + ); - const { - data, - error, - isLoading, - isFetching, - refetch, - } = useGetPokemonByNameQuery(name, { - pollingInterval, - }) + const { data, error, isLoading, isFetching, refetch } = + useGetPokemonByNameQuery(name, { + pollingInterval, + }); return (
- ) + ); } diff --git a/packages/redux-devtools/examples/rtk-query-polling/src/index.tsx b/packages/redux-devtools/examples/rtk-query-polling/src/index.tsx index 9182195b..44226359 100644 --- a/packages/redux-devtools/examples/rtk-query-polling/src/index.tsx +++ b/packages/redux-devtools/examples/rtk-query-polling/src/index.tsx @@ -1,14 +1,14 @@ import * as React from 'react'; -import { render } from 'react-dom' +import { render } from 'react-dom'; import { Provider } from 'react-redux'; -import App from './App' -import { store } from './store' +import App from './App'; +import { store } from './store'; -const rootElement = document.getElementById('root') +const rootElement = document.getElementById('root'); render( - - - , + + + , rootElement ); diff --git a/packages/redux-devtools/examples/rtk-query-polling/src/pokemon.data.ts b/packages/redux-devtools/examples/rtk-query-polling/src/pokemon.data.ts index 1617ce9e..83150cb7 100644 --- a/packages/redux-devtools/examples/rtk-query-polling/src/pokemon.data.ts +++ b/packages/redux-devtools/examples/rtk-query-polling/src/pokemon.data.ts @@ -150,6 +150,6 @@ export const POKEMON_NAMES = [ 'dragonite', 'mewtwo', 'mew', -] as const +] as const; -export type PokemonName = typeof POKEMON_NAMES[number] +export type PokemonName = typeof POKEMON_NAMES[number]; diff --git a/packages/redux-devtools/examples/rtk-query-polling/src/react-app-env.d.ts b/packages/redux-devtools/examples/rtk-query-polling/src/react-app-env.d.ts index 8858d69f..d7287fd6 100644 --- a/packages/redux-devtools/examples/rtk-query-polling/src/react-app-env.d.ts +++ b/packages/redux-devtools/examples/rtk-query-polling/src/react-app-env.d.ts @@ -2,4 +2,4 @@ declare module '@redux-devtools/app'; -declare module 'remote-redux-devtools'; \ No newline at end of file +declare module 'remote-redux-devtools'; diff --git a/packages/redux-devtools/examples/rtk-query-polling/src/services/pokemon.ts b/packages/redux-devtools/examples/rtk-query-polling/src/services/pokemon.ts index fb7cc5c1..8b600e03 100644 --- a/packages/redux-devtools/examples/rtk-query-polling/src/services/pokemon.ts +++ b/packages/redux-devtools/examples/rtk-query-polling/src/services/pokemon.ts @@ -1,5 +1,5 @@ -import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react' -import type { PokemonName } from '../pokemon.data' +import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'; +import type { PokemonName } from '../pokemon.data'; export const pokemonApi = createApi({ reducerPath: 'pokemonApi', @@ -9,7 +9,7 @@ export const pokemonApi = createApi({ query: (name: PokemonName) => `pokemon/${name}`, }), }), -}) +}); // Export hooks for usage in functional components -export const { useGetPokemonByNameQuery } = pokemonApi +export const { useGetPokemonByNameQuery } = pokemonApi; diff --git a/packages/redux-devtools/examples/rtk-query-polling/src/store.ts b/packages/redux-devtools/examples/rtk-query-polling/src/store.ts index 82c08f39..7826b5aa 100644 --- a/packages/redux-devtools/examples/rtk-query-polling/src/store.ts +++ b/packages/redux-devtools/examples/rtk-query-polling/src/store.ts @@ -1,9 +1,10 @@ -import { configureStore } from '@reduxjs/toolkit' -import { pokemonApi } from './services/pokemon' +import { configureStore } from '@reduxjs/toolkit'; +import { pokemonApi } from './services/pokemon'; import devToolsEnhancer from 'remote-redux-devtools'; const remotePort = Number(process.env.REACT_APP_REMOTE_DEV_TOOLS_PORT) ?? 8000; -const remoteHostname = process.env.REACT_APP_REMOTE_DEV_TOOLS_HOST ?? 'localhost'; +const remoteHostname = + process.env.REACT_APP_REMOTE_DEV_TOOLS_HOST ?? 'localhost'; export const store = configureStore({ reducer: { @@ -13,5 +14,5 @@ export const store = configureStore({ // adding the api middleware enables caching, invalidation, polling and other features of `rtk-query` middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(pokemonApi.middleware), - enhancers : [devToolsEnhancer({ port: remotePort, hostname: remoteHostname })] -}) + enhancers: [devToolsEnhancer({ port: remotePort, hostname: remoteHostname })], +}); diff --git a/packages/redux-devtools/examples/rtk-query-polling/tsconfig.json b/packages/redux-devtools/examples/rtk-query-polling/tsconfig.json index 326e0c97..ccb2c75d 100644 --- a/packages/redux-devtools/examples/rtk-query-polling/tsconfig.json +++ b/packages/redux-devtools/examples/rtk-query-polling/tsconfig.json @@ -1,14 +1,8 @@ { "extends": "../../../../tsconfig.react.base.json", - "include": [ - "src" - ], + "include": ["src"], "compilerOptions": { - "lib": [ - "dom", - "dom.iterable", - "esnext" - ], + "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "noFallthroughCasesInSwitch": true, diff --git a/yarn.lock b/yarn.lock index 6097e80e..fb21d34d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -29334,19 +29334,23 @@ typescript@~4.0.7: languageName: node linkType: hard -"uglify-js@npm:^2.6.1": - version: 2.8.29 - resolution: "uglify-js@npm:2.8.29" - dependencies: - source-map: ~0.5.1 - uglify-to-browserify: ~1.0.0 - yargs: ~3.10.0 - dependenciesMeta: - uglify-to-browserify: - optional: true +"typescript@patch:typescript@~4.0.7#builtin": + version: 4.0.8 + resolution: "typescript@patch:typescript@npm%3A4.0.8#builtin::version=4.0.8&hash=ddfc1b" bin: - uglifyjs: bin/uglifyjs - checksum: de5e5af14b788c9a0360fdfad6283b6ad89ecf3bf319924048628c87265252998d6f4bc8ca8bb7f163dd599cfe8262bca5b02396584fc120623a0225484309c6 + 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