diff --git a/packages/redux-devtools-rtk-query-monitor/demo/src/App.tsx b/packages/redux-devtools-rtk-query-monitor/demo/src/App.tsx index d7365bc7..4674896d 100644 --- a/packages/redux-devtools-rtk-query-monitor/demo/src/App.tsx +++ b/packages/redux-devtools-rtk-query-monitor/demo/src/App.tsx @@ -4,13 +4,17 @@ import { Box, Flex, Heading } from '@chakra-ui/react'; import { Link, UnorderedList, ListItem } from '@chakra-ui/react'; import { Code } from '@chakra-ui/react'; import * as React from 'react'; +import { DevToolsSelector } from 'features/DevTools/DevToolsSelector'; export function App() { return (
- RTK Query inspector monitor demo + + RTK Query inspector monitor demo + + Dock controls diff --git a/packages/redux-devtools-rtk-query-monitor/demo/src/DevTools.tsx b/packages/redux-devtools-rtk-query-monitor/demo/src/features/DevTools/DevTools.tsx similarity index 90% rename from packages/redux-devtools-rtk-query-monitor/demo/src/DevTools.tsx rename to packages/redux-devtools-rtk-query-monitor/demo/src/features/DevTools/DevTools.tsx index 98627fab..09941c03 100644 --- a/packages/redux-devtools-rtk-query-monitor/demo/src/DevTools.tsx +++ b/packages/redux-devtools-rtk-query-monitor/demo/src/features/DevTools/DevTools.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { createDevTools } from '@redux-devtools/core'; import DockMonitor from '@redux-devtools/dock-monitor'; -import RtkQueryMonitor from '../../src'; +import RtkQueryMonitor from '../../../../src'; const largeScreenQuery = window.matchMedia('(min-width: 1024px)'); diff --git a/packages/redux-devtools-rtk-query-monitor/demo/src/features/DevTools/DevToolsSelector.tsx b/packages/redux-devtools-rtk-query-monitor/demo/src/features/DevTools/DevToolsSelector.tsx new file mode 100644 index 00000000..fa04b1f3 --- /dev/null +++ b/packages/redux-devtools-rtk-query-monitor/demo/src/features/DevTools/DevToolsSelector.tsx @@ -0,0 +1,40 @@ +import * as React from 'react'; +import { ButtonGroup, Button } from '@chakra-ui/react'; +import { isExtensionEnabled, setIsExtensionEnabled } from './helpers'; +import { Box, Heading } from '@chakra-ui/react'; + +export function DevToolsSelector() { + const handleClick = (evt: React.MouseEvent) => { + setIsExtensionEnabled(evt.currentTarget.dataset.extension === '1'); + window.location.reload(); + }; + + const extensionEnabled = isExtensionEnabled(); + + return ( + + Set active devTools + + + + + + ); +} diff --git a/packages/redux-devtools-rtk-query-monitor/demo/src/features/DevTools/config.ts b/packages/redux-devtools-rtk-query-monitor/demo/src/features/DevTools/config.ts new file mode 100644 index 00000000..dff7d455 --- /dev/null +++ b/packages/redux-devtools-rtk-query-monitor/demo/src/features/DevTools/config.ts @@ -0,0 +1 @@ +export const isExtensionEnabledKey = 'prefer-extension'; diff --git a/packages/redux-devtools-rtk-query-monitor/demo/src/features/DevTools/helpers.ts b/packages/redux-devtools-rtk-query-monitor/demo/src/features/DevTools/helpers.ts new file mode 100644 index 00000000..5386d9e8 --- /dev/null +++ b/packages/redux-devtools-rtk-query-monitor/demo/src/features/DevTools/helpers.ts @@ -0,0 +1,22 @@ +import { isExtensionEnabledKey } from './config'; + +export function isExtensionEnabled(): boolean { + let extensionEnabled = false; + + try { + extensionEnabled = + window.sessionStorage.getItem(isExtensionEnabledKey) === '1'; + } catch (err) { + console.error(err); + } + + return extensionEnabled; +} + +export function setIsExtensionEnabled(active: boolean): void { + try { + window.sessionStorage.setItem(isExtensionEnabledKey, active ? '1' : '0'); + } catch (err) { + console.error(err); + } +} diff --git a/packages/redux-devtools-rtk-query-monitor/demo/src/features/pokemon/Pokemon.tsx b/packages/redux-devtools-rtk-query-monitor/demo/src/features/pokemon/Pokemon.tsx index 76dd8aa4..b8a76f39 100644 --- a/packages/redux-devtools-rtk-query-monitor/demo/src/features/pokemon/Pokemon.tsx +++ b/packages/redux-devtools-rtk-query-monitor/demo/src/features/pokemon/Pokemon.tsx @@ -56,7 +56,12 @@ export function Pokemon({ name }: { name: PokemonName }) {
-
diff --git a/packages/redux-devtools-rtk-query-monitor/demo/src/features/pokemon/PokemonView.tsx b/packages/redux-devtools-rtk-query-monitor/demo/src/features/pokemon/PokemonView.tsx index d27ab0e8..c7fda221 100644 --- a/packages/redux-devtools-rtk-query-monitor/demo/src/features/pokemon/PokemonView.tsx +++ b/packages/redux-devtools-rtk-query-monitor/demo/src/features/pokemon/PokemonView.tsx @@ -14,13 +14,19 @@ export default function PokemonView() { Pokemon polling demo - diff --git a/packages/redux-devtools-rtk-query-monitor/demo/src/index.tsx b/packages/redux-devtools-rtk-query-monitor/demo/src/index.tsx index 2d13fe62..9da4712c 100644 --- a/packages/redux-devtools-rtk-query-monitor/demo/src/index.tsx +++ b/packages/redux-devtools-rtk-query-monitor/demo/src/index.tsx @@ -4,7 +4,7 @@ import { Provider } from 'react-redux'; import { ChakraProvider } from '@chakra-ui/react'; import './index.css'; import { store } from './store'; -import DevTools from './DevTools'; +import DevTools from './features/DevTools/DevTools'; import { BrowserRouter } from 'react-router-dom'; import { App } from 'App'; import { worker } from './mocks/browser'; diff --git a/packages/redux-devtools-rtk-query-monitor/demo/src/store.ts b/packages/redux-devtools-rtk-query-monitor/demo/src/store.ts index 55d9ed9c..095ebbb1 100644 --- a/packages/redux-devtools-rtk-query-monitor/demo/src/store.ts +++ b/packages/redux-devtools-rtk-query-monitor/demo/src/store.ts @@ -1,19 +1,22 @@ import { configureStore, Middleware } from '@reduxjs/toolkit'; import { pokemonApi } from './services/pokemon'; import { postsApi } from 'services/posts'; -import DevTools from './DevTools'; +import DevTools from './features/DevTools/DevTools'; +import { isExtensionEnabled } from 'features/DevTools/helpers'; + +const devTools = isExtensionEnabled(); export const store = configureStore({ reducer: { [pokemonApi.reducerPath]: pokemonApi.reducer, [postsApi.reducerPath]: postsApi.reducer, }, - devTools: false, + devTools, // adding the api middleware enables caching, invalidation, polling and other features of `rtk-query` middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat([ pokemonApi.middleware, postsApi.middleware, ] as Middleware[]), - enhancers: [DevTools.instrument()], + enhancers: devTools ? [] : [DevTools.instrument()], });