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

docs(rtk-query): clean up demo

Browse Source
This commit is contained in:
FaberVitale 2021-06-17 19:58:31 +02:00
parent 0f10ae96ce
commit d34ee05a2e
5 changed files with 96 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,7 +8,7 @@
name="description"
content="Web site created using create-snowpack-app"
/>
<title>Snowpack App</title>
<title>RTK Query monitor demo</title>
</head>
<body>
<div id="root"></div>

30
packages/redux-devtools-rtk-query-inspector-monitor/demo/src/App.tsx
View File

@ -10,8 +10,11 @@ export default function App() {
const [pokemon, setPokemon] = React.useState<PokemonName[]>(['bulbasaur']);
return (
<div className="App">
<div>
<article>
<h1>RTK Query inspector monitor demo</h1>
<section className="App">
<h2>Pokemon polling demo</h2>
<div className="demo-toolbar">
<button
onClick={() =>
setPokemon((prev) => [...prev, getRandomPokemonName()])
@ -24,9 +27,32 @@ export default function App() {
</button>
</div>
<div className="pokemon-list">
{pokemon.map((name, index) => (
<Pokemon key={index} name={name} />
))}
</div>
</section>
<section>
<h2>Dock controls</h2>
<pre>
<code>
{`toggleVisibilityKey="ctrl-h"\nchangePositionKey="ctrl-q"`}
</code>
</pre>
</section>
<footer>
<p>
<a href="https://github.com/FaberVitale/redux-devtools/tree/feat/rtk-query-monitor/packages/redux-devtools-rtk-query-inspector-monitor/demo">
demo source
</a>
</p>
<p>
<a href="https://github.com/FaberVitale/redux-devtools/tree/feat/rtk-query-monitor/packages/redux-devtools-rtk-query-inspector-monitor">
@redux-devtools/rtk-query-inspector-monitor source
</a>
</p>
</footer>
</article>
);
}

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

@ -28,9 +28,8 @@ export function Pokemon({ name }: { name: PokemonName }) {
return (
<div
className="pokemon"
style={{
float: 'left',
textAlign: 'center',
...(isFetching ? { background: '#e6ffe8' } : {}),
}}
>

50
packages/redux-devtools-rtk-query-inspector-monitor/demo/src/index.css
View File

@ -11,3 +11,53 @@ code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
h1 {
font-size: 1.4em;
}
h2 {
font-size: 1.2em;
}
h1,
h2,
h3,
h4,
h5,
h6 {
text-align: left;
font-family: inherit;
padding: 0.5em;
margin: 0;
}
.demo-toolbar {
display: flex;
padding: 1em;
justify-content: flex-start;
}
section {
display: block;
}
.pokemon-list {
display: flex;
max-width: 80vw;
flex-flow: row wrap;
overflow-x: hidden;
}
.pokemon {
padding: 0.2em;
text-align: center;
}
pre code {
white-space: pre-wrap;
}
article {
padding: 0.4em;
}

1
packages/redux-devtools-rtk-query-inspector-monitor/demo/src/index.tsx
View File

@ -2,6 +2,7 @@ import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './App';
import './index.css';
import { store } from './store';
import DevTools from './DevTools';