chore(rtk-query-monitor): add option to select active devtools

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 (
     <article>
-      <Heading as="h1">RTK Query inspector monitor demo</Heading>
+      <Heading as="h1" p="0">
+        RTK Query inspector monitor demo
+      </Heading>
       <PokemonView />
       <PostsView />
+      <DevToolsSelector />
       <Flex p="2" as="section" flexWrap="nowrap" flexDirection="column">
         <Heading as="h2">Dock controls</Heading>
         <Box as="pre" p="2" paddingX="4">

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)');
 

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<HTMLButtonElement>) => {
+    setIsExtensionEnabled(evt.currentTarget.dataset.extension === '1');
+    window.location.reload();
+  };
+
+  const extensionEnabled = isExtensionEnabled();
+
+  return (
+    <Box as="section" p="2">
+      <Heading as="h2">Set active devTools</Heading>
+      <ButtonGroup variant="outline" spacing="4" p="4">
+        <Button
+          aria-selected={!extensionEnabled}
+          colorScheme="blue"
+          selected={!extensionEnabled}
+          data-extension="0"
+          variant={!extensionEnabled ? 'solid' : 'outline'}
+          onClick={handleClick}
+        >
+          Dock
+        </Button>
+        <Button
+          aria-selected={extensionEnabled}
+          data-extension="1"
+          colorScheme="blue"
+          variant={extensionEnabled ? 'solid' : 'outline'}
+          onClick={handleClick}
+        >
+          Extension
+        </Button>
+      </ButtonGroup>
+    </Box>
+  );
+}

packages/redux-devtools-rtk-query-monitor/demo/src/features/DevTools/config.ts

@@ -0,0 +1 @@
+export const isExtensionEnabledKey = 'prefer-extension';

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);
+  }
+}

packages/redux-devtools-rtk-query-monitor/demo/src/features/pokemon/Pokemon.tsx

@@ -56,7 +56,12 @@ export function Pokemon({ name }: { name: PokemonName }) {
             </Select>
           </div>
           <div>
-            <Button onClick={refetch} disabled={isFetching}>
+            <Button
+              colorScheme="blue"
+              variant="outline"
+              onClick={refetch}
+              disabled={isFetching}
+            >
               {isFetching ? 'Loading' : 'Manually refetch'}
             </Button>
           </div>

packages/redux-devtools-rtk-query-monitor/demo/src/features/pokemon/PokemonView.tsx

@@ -14,13 +14,19 @@ export default function PokemonView() {
       <Heading as="h2">Pokemon polling demo</Heading>
       <Flex p="2" gridGap="0.5em" flexDirection="row" flexWrap="wrap">
         <Button
+          colorScheme="blue"
+          variant="outline"
           onClick={() =>
             setPokemon((prev) => [...prev, getRandomPokemonName()])
           }
         >
           Add random pokemon
         </Button>
-        <Button onClick={() => setPokemon((prev) => [...prev, 'bulbasaur'])}>
+        <Button
+          colorScheme="blue"
+          variant="outline"
+          onClick={() => setPokemon((prev) => [...prev, 'bulbasaur'])}
+        >
           Add bulbasaur
         </Button>
       </Flex>

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';

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()],
 });