Skip to content

Updated PR on " Update Examples to use React Router 6.8 Patterns" #4633

New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Open
wants to merge 11 commits into
base: master
Choose a base branch
from
Open

Updated PR on " Update Examples to use React Router 6.8 Patterns" #4633

Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
0685e99
authentication example updated
seanmcquaid Jan 29, 2023
6c06dad
more examples
seanmcquaid Jan 29, 2023
e989240
fix add
seanmcquaid Jan 29, 2023
edd30b8
kitchen sink
seanmcquaid Jan 29, 2023
c1bb45c
mutations
seanmcquaid Jan 29, 2023
25540b1
finished updating examples except for set up tests
seanmcquaid Jan 29, 2023
68f3f6f
fixed up set up tests and finished examples
seanmcquaid Jan 29, 2023
bd016f0
small clean up
seanmcquaid Jan 29, 2023
7dfdfa1
yarn lock
seanmcquaid Jan 29, 2023
913daab
Update Examples to Use React Router Dom 6.8 Patterns (#1)
seanmcquaid Jan 29, 2023
42703d2
updated existing PR on Updating examples using react-router-dom v6
Adagedo Sep 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions examples/query/react/authentication-with-extrareducers/package.json
View file
Original file line number Diff line number Diff line change
@@ -6,17 +6,17 @@
"keywords": [],
"main": "./src/index.tsx",
"dependencies": {
"@chakra-ui/react": "1.0.0",
"@emotion/react": "^11.4.0",
"@emotion/styled": "^11.3.0",
"@chakra-ui/react": "2.8.0",
"@emotion/react": "^11.13.3",
"@emotion/styled": "^11.13.0",
"@reduxjs/toolkit": "^1.6.0-rc.1",
"framer-motion": "^2.9.5",
"framer-motion": "^11.5.5",
"msw": "^0.40.2",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-icons": "3.11.0",
"react-redux": "^8.0.2",
"react-router-dom": "6.3.0",
"react-router-dom": "6.26.2",
"react-scripts": "5.0.1"
},
"devDependencies": {
41 changes: 30 additions & 11 deletions examples/query/react/authentication-with-extrareducers/src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,18 @@
import { Routes, Route } from 'react-router-dom'
import { createBrowserRouter, Outlet, RouterProvider } from 'react-router-dom'
import { Box, Center, VStack } from '@chakra-ui/react'

import { Login } from './features/auth/#'
import { PrivateOutlet } from './utils/PrivateOutlet'
import { ProtectedComponent } from './features/auth/ProtectedComponent'

function AppLayout() {
return (
<Box>
<Outlet />
</Box>
)
}

function Hooray() {
return (
<Center h="500px">
@@ -18,17 +26,28 @@ function Hooray() {
)
}

const router = createBrowserRouter([
{
path: '/',
element: <AppLayout />,
children: [
{ path: 'login', element: <Login /> },
{
path: '*',
element: <PrivateOutlet />,
children: [
{
index: true,
element: <Hooray />,
},
],
},
],
},
])

function App() {
return (
<Box>
<Routes>
<Route path="/#" element={<Login />} />
<Route path="/" element={<PrivateOutlet />}>
<Route index element={<Hooray />} />
</Route>
</Routes>
</Box>
)
return <RouterProvider router={router} />
}

export default App
37 changes: 24 additions & 13 deletions examples/query/react/authentication-with-extrareducers/src/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import React from 'react'
import ReactDOM from 'react-dom/client'
import { BrowserRouter } from 'react-router-dom'
import { ChakraProvider } from '@chakra-ui/react'

import App from './App'
@@ -10,16 +9,28 @@ import { worker } from './mocks/browser'
import { Provider } from 'react-redux'

// Initialize the msw worker, wait for the service worker registration to resolve, then mount
worker.start({ quiet: true }).then(() =>
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
<React.StrictMode>
<Provider store={store}>
<ChakraProvider>
<BrowserRouter>

async function StartApp(){
try {
await worker.start({quiet:true})
} catch (error) {
console.log("error starting worker",error)
}
const rootElement = document.getElementById('root') as HTMLElement;
if(rootElement){
ReactDOM.createRoot(rootElement).render(
<React.StrictMode>
<Provider store={store}>
<ChakraProvider>
<App />
</BrowserRouter>
</ChakraProvider>
</Provider>
</React.StrictMode>
)
)
</ChakraProvider>
</Provider>
</React.StrictMode>
)
}else throw new Error("root element not found")
}


StartApp()


10 changes: 5 additions & 5 deletions examples/query/react/authentication/package.json
View file
Original file line number Diff line number Diff line change
@@ -6,17 +6,17 @@
"keywords": [],
"main": "./src/index.tsx",
"dependencies": {
"@chakra-ui/react": "1.0.0",
"@emotion/react": "^11.4.0",
"@emotion/styled": "^11.3.0",
"@chakra-ui/react": "2.8.0",
"@emotion/react": "^11.13.3",
"@emotion/styled": "^11.13.0",
"@reduxjs/toolkit": "^1.6.0-rc.1",
"framer-motion": "^2.9.5",
"framer-motion": "^11.5.5",
"msw": "^0.40.2",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-icons": "3.11.0",
"react-redux": "^8.0.2",
"react-router-dom": "6.3.0",
"react-router-dom": "6.26.2",
"react-scripts": "5.0.1"
},
"devDependencies": {
40 changes: 29 additions & 11 deletions examples/query/react/authentication/src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,18 @@
import { Routes, Route } from 'react-router-dom'
import { createBrowserRouter, Outlet, RouterProvider } from 'react-router-dom'
import { Box, Center, VStack } from '@chakra-ui/react'

import { Login } from './features/auth/#'
import { PrivateOutlet } from './utils/PrivateOutlet'
import { ProtectedComponent } from './features/auth/ProtectedComponent'

function AppLayout() {
return (
<Box>
<Outlet />
</Box>
)
}

function Hooray() {
return (
<Center h="500px">
@@ -18,17 +26,27 @@ function Hooray() {
)
}

const router = createBrowserRouter([
{
path: '/',
element: <AppLayout />,
children: [
{ path: '/#', element: <Login /> },
{
path: '*',
element: <PrivateOutlet />,
children: [
{
index: true,
element: <Hooray />,
},
],
},
],
},
])
function App() {
return (
<Box>
<Routes>
<Route path="/#" element={<Login />} />
<Route path="*" element={<PrivateOutlet />}>
<Route index element={<Hooray />} />
</Route>
</Routes>
</Box>
)
return <RouterProvider router={router} />
}

export default App
29 changes: 15 additions & 14 deletions examples/query/react/authentication/src/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,31 @@
import React from 'react'
import ReactDOM from 'react-dom/client'
import { BrowserRouter } from 'react-router-dom'
import { ChakraProvider } from '@chakra-ui/react'
import App from './App'
import { store } from './app/store'
import { worker } from './mocks/browser'
import { Provider } from 'react-redux'

// Initialize the msw worker, wait for the service worker registration to resolve, then mount
worker
.start({ quiet: true })
.then(() => {
const rootNode = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
)
async function StartApp() {
try {
await worker.start({quiet:true})
} catch (error) {
console.log("error starting worker",error)
}

return rootNode.render(
const rootElement = document.getElementById('root') as HTMLElement
if(rootElement){
ReactDOM.createRoot(rootElement).render(
<React.StrictMode>
<Provider store={store}>
<ChakraProvider>
<BrowserRouter>
<App />
</BrowserRouter>
<App />
</ChakraProvider>
</Provider>
</React.StrictMode>
</React.StrictMode>
)
})
.catch(console.error)
}else throw new Error("root element not found")
}

StartApp()
10 changes: 5 additions & 5 deletions examples/query/react/graphql-codegen/package.json
View file
Original file line number Diff line number Diff line change
@@ -5,22 +5,22 @@
"keywords": [],
"main": "./src/index.tsx",
"dependencies": {
"@chakra-ui/react": "1.0.0",
"@emotion/react": "^11.4.0",
"@emotion/styled": "^11.3.0",
"@chakra-ui/react": "2.8.0",
"@emotion/react": "^11.13.3",
"@emotion/styled": "^11.13.0",
"@mswjs/data": "^0.4.0",
"@reduxjs/toolkit": "^1.6.0",
"@rtk-query/graphql-request-base-query": "^2.0.0",
"faker": "^5.5.3",
"framer-motion": "^2.9.5",
"framer-motion": "^11.5.5",
"graphql": "^15.5.0",
"graphql-request": "^3.4.0",
"msw": "0.40.2",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-icons": "3.11.0",
"react-redux": "^8.0.2",
"react-router-dom": "6.3.0",
"react-router-dom": "6.26.2",
"react-scripts": "5.0.1"
},
"devDependencies": {
15 changes: 9 additions & 6 deletions examples/query/react/graphql-codegen/src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,15 @@
import { Route, Routes } from 'react-router-dom'
import { createBrowserRouter, RouterProvider } from 'react-router-dom'
import { PostsManager } from './features/posts/PostsManager'

const router = createBrowserRouter([
{
path: '/',
element: <PostsManager />,
},
])

function App() {
return (
<Routes>
<Route path="/" element={<PostsManager />} />
</Routes>
)
return <RouterProvider router={router} />
}

export default App
38 changes: 22 additions & 16 deletions examples/query/react/graphql-codegen/src/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -4,23 +4,29 @@ import App from './App'
import { api } from './app/services/baseApi'
import { ChakraProvider } from '@chakra-ui/react'

import { BrowserRouter } from 'react-router-dom'
import { worker } from './mocks/browser'
import { ApiProvider } from '@reduxjs/toolkit/query/react'

// Initialize the msw worker, wait for the service worker registration to resolve, then mount
worker.start({ quiet: true }).then(() => {
return ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
).render(
<React.StrictMode>
<ApiProvider api={api}>
<ChakraProvider>
<BrowserRouter>
<App />
</BrowserRouter>
</ChakraProvider>
</ApiProvider>
</React.StrictMode>
)
})
async function StartApp(){
try {
await worker.start({quiet:true})
} catch (error) {
console.log("error starting msw worker",error)
}

const rootElement = document.getElementById('root') as HTMLElement
if(rootElement){
ReactDOM.createRoot(rootElement).render(
<React.StrictMode>
<ApiProvider api={api}>
<ChakraProvider>
<App />
</ChakraProvider>
</ApiProvider>
</React.StrictMode>
)
}else throw new Error("root element not found")
}

StartApp()
10 changes: 5 additions & 5 deletions examples/query/react/graphql/package.json
View file
Original file line number Diff line number Diff line change
@@ -6,22 +6,22 @@
"keywords": [],
"main": "./src/index.tsx",
"dependencies": {
"@chakra-ui/react": "1.0.0",
"@emotion/react": "^11.4.0",
"@emotion/styled": "^11.3.0",
"@chakra-ui/react": "2.8.0",
"@emotion/react": "^11.13.3",
"@emotion/styled": "^11.13.0",
"@mswjs/data": "^0.3.0",
"@reduxjs/toolkit": "^1.6.0-rc.1",
"@rtk-query/graphql-request-base-query": "^2.0.0",
"faker": "^5.5.3",
"framer-motion": "^2.9.5",
"framer-motion": "^11.5.5",
"graphql": "^15.5.0",
"graphql-request": "^3.4.0",
"msw": "0.40.2",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-icons": "3.11.0",
"react-redux": "^8.0.2",
"react-router-dom": "6.3.0",
"react-router-dom": "6.26.2",
"react-scripts": "5.0.1"
},
"devDependencies": {
Loading