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

rtk-query-monitor

Browse Source
This commit is contained in:
Nathan Bierema 2022-05-15 17:39:25 -04:00
parent 0c4229d24b
commit f313647329
4 changed files with 23 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/redux-devtools-rtk-query-monitor/demo/package.json
View File

@ -40,7 +40,6 @@
"@types/react": "^17.0.45", "@types/react": "^17.0.45",
"@types/react-dom": "^17.0.16", "@types/react-dom": "^17.0.16",
"@types/react-redux": "^7.1.24", "@types/react-redux": "^7.1.24",
"@types/react-router-dom": "^5.3.3",
"@types/styled-components": "^5.1.25", "@types/styled-components": "^5.1.25",
"@typescript-eslint/eslint-plugin": "^5.22.0", "@typescript-eslint/eslint-plugin": "^5.22.0",
"@typescript-eslint/parser": "^5.22.0", "@typescript-eslint/parser": "^5.22.0",

12
packages/redux-devtools-rtk-query-monitor/demo/src/features/posts/PostDetail.tsx
View File

@ -1,5 +1,5 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { useHistory, useParams } from 'react-router-dom'; import { useNavigate, useParams } from 'react-router-dom';
import { import {
useDeletePostMutation, useDeletePostMutation,
useGetPostQuery, useGetPostQuery,
@ -73,13 +73,13 @@ const PostJsonDetail = ({ id }: { id: string }) => {
export const PostDetail = () => { export const PostDetail = () => {
const { id } = useParams<{ id: string }>(); const { id } = useParams<{ id: string }>();
const history = useHistory(); const navigate = useNavigate();
const toast = useToast(); const toast = useToast();
const [isEditing, setIsEditing] = useState(false); const [isEditing, setIsEditing] = useState(false);
const { data: post, isLoading } = useGetPostQuery(id); const { data: post, isLoading } = useGetPostQuery(id!);
const [updatePost, { isLoading: isUpdating }] = useUpdatePostMutation(); const [updatePost, { isLoading: isUpdating }] = useUpdatePostMutation();
@ -106,7 +106,7 @@ export const PostDetail = () => {
name={post.name} name={post.name}
onUpdate={async (name) => { onUpdate={async (name) => {
try { try {
await updatePost({ id, name }).unwrap(); await updatePost({ id: id!, name }).unwrap();
} catch { } catch {
toast({ toast({
title: 'An error occurred', title: 'An error occurred',
@ -137,9 +137,7 @@ export const PostDetail = () => {
{isUpdating ? 'Updating...' : 'Edit'} {isUpdating ? 'Updating...' : 'Edit'}
</Button> </Button>
<Button <Button
onClick={() => onClick={() => deletePost(id!).then(() => navigate('/posts'))}
deletePost(id).then(() => history.push('/posts'))
}
disabled={isDeleting} disabled={isDeleting}
colorScheme="red" colorScheme="red"
> >

25
packages/redux-devtools-rtk-query-monitor/demo/src/features/posts/PostsManager.tsx
View File

@ -17,7 +17,7 @@ import {
StatNumber, StatNumber,
useToast, useToast,
} from '@chakra-ui/react'; } from '@chakra-ui/react';
import { Route, Switch, useHistory } from 'react-router-dom'; import { Route, Routes, useNavigate } from 'react-router-dom';
import { MdBook } from 'react-icons/md'; import { MdBook } from 'react-icons/md';
import React, { useState } from 'react'; import React, { useState } from 'react';
import { import {
@ -88,7 +88,7 @@ const AddPost = () => {
const PostList = () => { const PostList = () => {
const { data: posts, isLoading } = useGetPostsQuery(); const { data: posts, isLoading } = useGetPostsQuery();
const history = useHistory(); const navigate = useNavigate();
if (isLoading) { if (isLoading) {
return <div>Loading</div>; return <div>Loading</div>;
@ -101,7 +101,7 @@ const PostList = () => {
return ( return (
<List spacing={3}> <List spacing={3}>
{posts.map(({ id, name }) => ( {posts.map(({ id, name }) => (
<ListItem key={id} onClick={() => history.push(`/posts/${id}`)}> <ListItem key={id} onClick={() => navigate(`/posts/${id}`)}>
<ListIcon as={MdBook} color="green.500" /> {name} <ListIcon as={MdBook} color="green.500" /> {name}
</ListItem> </ListItem>
))} ))}
@ -147,14 +147,17 @@ export const PostsManager = () => {
</Box> </Box>
</Box> </Box>
<Box flex={2}> <Box flex={2}>
<Switch> <Routes>
<Route path="/posts/:id" component={PostDetail} /> <Route path="posts/:id" element={<PostDetail />} />
<Route> <Route
<Center h="200px"> index
<Heading size="md">Select a post to edit!</Heading> element={
</Center> <Center h="200px">
</Route> <Heading size="md">Select a post to edit!</Heading>
</Switch> </Center>
}
/>
</Routes>
</Box> </Box>
</Flex> </Flex>
</Box> </Box>

8
packages/redux-devtools-rtk-query-monitor/demo/src/features/posts/PostsView.tsx
View File

@ -1,5 +1,5 @@
import * as React from 'react'; import * as React from 'react';
import { Switch, Route } from 'react-router-dom'; import { Route, Routes } from 'react-router-dom';
import { PostsManager } from '../../features/posts/PostsManager'; import { PostsManager } from '../../features/posts/PostsManager';
import { Box, Heading } from '@chakra-ui/react'; import { Box, Heading } from '@chakra-ui/react';
@ -7,9 +7,9 @@ function PostsView() {
return ( return (
<Box as="section" p="2"> <Box as="section" p="2">
<Heading as="h2">Posts Demo</Heading> <Heading as="h2">Posts Demo</Heading>
<Switch> <Routes>
<Route path="/" component={PostsManager} /> <Route path="/*" element={<PostsManager />} />
</Switch> </Routes>
</Box> </Box>
); );
} }