reduxjs/redux-devtools
1
1
Fork 0
mirror of https://github.com/reduxjs/redux-devtools.git synced 2025-07-27 08:30:02 +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" name="description"
content="Web site created using create-snowpack-app" content="Web site created using create-snowpack-app"
/> />
<title>Snowpack App</title> <title>RTK Query monitor demo</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

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

@ -10,23 +10,49 @@ export default function App() {
const [pokemon, setPokemon] = React.useState<PokemonName[]>(['bulbasaur']); const [pokemon, setPokemon] = React.useState<PokemonName[]>(['bulbasaur']);
return ( return (
<div className="App"> <article>
<div> <h1>RTK Query inspector monitor demo</h1>
<button <section className="App">
onClick={() => <h2>Pokemon polling demo</h2>
setPokemon((prev) => [...prev, getRandomPokemonName()]) <div className="demo-toolbar">
} <button
> onClick={() =>
Add random pokemon setPokemon((prev) => [...prev, getRandomPokemonName()])
</button> }
<button onClick={() => setPokemon((prev) => [...prev, 'bulbasaur'])}> >
Add bulbasaur Add random pokemon
</button> </button>
</div> <button onClick={() => setPokemon((prev) => [...prev, 'bulbasaur'])}>
Add bulbasaur
</button>
</div>
{pokemon.map((name, index) => ( <div className="pokemon-list">
<Pokemon key={index} name={name} /> {pokemon.map((name, index) => (
))} <Pokemon key={index} name={name} />
</div> ))}
</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 ( return (
<div <div
className="pokemon"
style={{ style={{
float: 'left',
textAlign: 'center',
...(isFetching ? { background: '#e6ffe8' } : {}), ...(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', font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace; 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 ReactDOM from 'react-dom';
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
import App from './App'; import App from './App';
import './index.css';
import { store } from './store'; import { store } from './store';
import DevTools from './DevTools'; import DevTools from './DevTools';