reduxjs/redux-devtools
1
1
Fork 0
mirror of https://github.com/reduxjs/redux-devtools.git synced 2025-07-27 00:19:55 +03:00
Code Issues Packages Projects Releases Wiki Activity

chore(rtk-query): run prettier after prettier upgrade (55e2284)

Browse Source
This commit is contained in:
FaberVitale 2021-06-18 17:20:27 +02:00
parent 1e4b547366
commit 5eb9a588dd
26 changed files with 97 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/redux-devtools-rtk-query-inspector-monitor/.gitignore vendored
View File

@ -1 +0,0 @@
demo/src/generated-module/

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

@ -13,7 +13,6 @@ Created by [FaberVitale](https://github.com/FaberVitale)
![RTK Query inspector monitor demo](./monitor-demo.gif)
## Installation
```bash

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

@ -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

BIN
packages/redux-devtools-rtk-query-inspector-monitor/demo/public/favicon.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.1 KiB

1
packages/redux-devtools-rtk-query-inspector-monitor/demo/public/index.html
View File

@ -2,7 +2,6 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta
name="description"

2
packages/redux-devtools-rtk-query-inspector-monitor/demo/src/DevTools.tsx
View File

@ -1,7 +1,7 @@
import * as React from 'react';
import { createDevTools } from '@redux-devtools/core';
import DockMonitor from '@redux-devtools/dock-monitor';
import RtkQueryInspectorMonitor from './generated-module/RtkQueryInspectorMonitor.js';
import RtkQueryInspectorMonitor from './build/RtkQueryInspectorMonitor.js';
export default createDevTools(
<DockMonitor

13
packages/redux-devtools-rtk-query-inspector-monitor/demo/src/Pokemon.tsx
View File

@ -16,15 +16,10 @@ const getRandomIntervalValue = () =>
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 (
<div

10
packages/redux-devtools-rtk-query-inspector-monitor/src/RtkQueryInspector.tsx
View File

@ -120,13 +120,11 @@ class RtkQueryInspector<S, A extends Action<unknown>> 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(

2
packages/redux-devtools-rtk-query-inspector-monitor/src/RtkQueryInspectorMonitor.tsx
View File

@ -73,7 +73,7 @@ class RtkQueryInspectorMonitor<S, A extends Action<unknown>> extends Component<
}
}
export default (RtkQueryInspectorMonitor as unknown) as React.ComponentType<
export default RtkQueryInspectorMonitor as unknown as React.ComponentType<
ExternalProps<unknown, Action<unknown>>
> & {
update(

4
packages/redux-devtools-rtk-query-inspector-monitor/src/components/QueryPreviewHeader.tsx
View File

@ -9,9 +9,7 @@ export interface QueryPreviewHeaderProps {
selectedTab: QueryPreviewTabs;
}
export class QueryPreviewHeader extends React.Component<
QueryPreviewHeaderProps
> {
export class QueryPreviewHeader extends React.Component<QueryPreviewHeaderProps> {
handleTabClick = (tab: QueryPreviewTabOption): void => {
if (this.props.selectedTab !== tab.value) {
this.props.onTabChange(tab.value);

9
packages/redux-devtools-rtk-query-inspector-monitor/src/components/QueryPreviewInfo.tsx
View File

@ -55,13 +55,8 @@ export class QueryPreviewInfo extends PureComponent<QueryPreviewTabProps> {
);
render(): ReactNode {
const {
queryInfo,
isWideLayout,
base16Theme,
styling,
invertTheme,
} = this.props;
const { queryInfo, isWideLayout, base16Theme, styling, invertTheme } =
this.props;
const formattedQuery = this.selectFormattedQuery(queryInfo);

9
packages/redux-devtools-rtk-query-inspector-monitor/src/components/QueryPreviewTags.tsx
View File

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

7
packages/redux-devtools-rtk-query-inspector-monitor/src/reducers.ts
View File

@ -60,8 +60,5 @@ export function reducer<S, A extends Action<unknown>>(
return monitorSlice.reducer(state, action);
}
export const {
selectQueryKey,
changeQueryFormValues,
selectedPreviewTab,
} = monitorSlice.actions;
export const { selectQueryKey, changeQueryFormValues, selectedPreviewTab } =
monitorSlice.actions;

7
packages/redux-devtools-rtk-query-inspector-monitor/src/utils/comparators.ts
View File

@ -86,10 +86,9 @@ function sortByApiReducerPath(
);
}
export const queryComparators: Readonly<Record<
QueryComparators,
Comparator<QueryInfo>
>> = {
export const queryComparators: Readonly<
Record<QueryComparators, Comparator<QueryInfo>>
> = {
[QueryComparators.fulfilledTimeStamp]: sortQueryByFulfilled,
[QueryComparators.status]: sortQueryByStatus,
[QueryComparators.endpointName]: sortQueryByEndpointName,

7
packages/redux-devtools-rtk-query-inspector-monitor/src/utils/filters.ts
View File

@ -61,10 +61,9 @@ export const filterQueryOptions: SelectOption<QueryFilters>[] = [
{ label: 'endpoint', value: QueryFilters.endpointName },
];
export const queryListFilters: Readonly<Record<
QueryFilters,
FilterList<QueryInfo>
>> = {
export const queryListFilters: Readonly<
Record<QueryFilters, FilterList<QueryInfo>>
> = {
[QueryFilters.queryKey]: filterByQueryKey,
[QueryFilters.endpointName]: filterByEndpointName,
[QueryFilters.reducerPath]: filterByReducerPath,

2
packages/redux-devtools-rtk-query-inspector-monitor/tsconfig.dev.json
View File

@ -1,7 +1,7 @@
{
"extends": "../../tsconfig.react.base.json",
"compilerOptions": {
"outDir": "./demo/src/generated-module",
"outDir": "./demo/src/build",
"module": "ES2015",
"strict": false
},

39
packages/redux-devtools/examples/rtk-query-polling/public/index.html
View File

@ -1,17 +1,19 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="theme-color" content="#000000" />
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!--
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
@ -20,15 +22,13 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!--
<body>
<noscript> You need to enable JavaScript to run this app. </noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
@ -38,6 +38,5 @@
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
</body>
</html>

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

@ -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<PokemonName[]>(['bulbasaur'])
const [pokemon, setPokemon] = React.useState<PokemonName[]>(['bulbasaur']);
return (
<div className="App">
@ -28,6 +28,5 @@ export default function App() {
<Pokemon key={index} name={name} />
))}
</div>
)
);
}

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

@ -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 (
<div
@ -75,5 +70,5 @@ export function Pokemon({ name }: { name: PokemonName }) {
'No Data'
)}
</div>
)
);
}

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

@ -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(
<Provider store={store}>
<App />
</Provider> ,
<Provider store={store}>
<App />
</Provider>,
rootElement
);

4
packages/redux-devtools/examples/rtk-query-polling/src/pokemon.data.ts
View File

@ -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];

2
packages/redux-devtools/examples/rtk-query-polling/src/react-app-env.d.ts vendored
View File

@ -2,4 +2,4 @@
declare module '@redux-devtools/app';
declare module 'remote-redux-devtools';
declare module 'remote-redux-devtools';

8
packages/redux-devtools/examples/rtk-query-polling/src/services/pokemon.ts
View File

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

11
packages/redux-devtools/examples/rtk-query-polling/src/store.ts
View File

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

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

@ -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,

28
yarn.lock
View File

@ -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<compat/typescript>":
version: 4.0.8
resolution: "typescript@patch:typescript@npm%3A4.0.8#builtin<compat/typescript>::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