Merge pull request #144 from osstotalsoft/feature/upgradeReactRouter

upgrade react-router-dom
osstotalsoft · Nov 28, 2024 · 8bd8ff5 · 8bd8ff5
2 parents 5f5fe71 + 963d51f
commit 8bd8ff5
Show file tree

Hide file tree

Showing 7 changed files with 80 additions and 49 deletions.
diff --git a/package.json b/package.json
@@ -77,7 +77,7 @@
     "react-chartjs-2": "5.2.0",
     "react-dom": "18.3.1",
     "react-number-format": "^4.9.2",
-    "react-router-dom": "^6.28.0",
+    "react-router": "^7.0.1",
     "react-toastify": "^10.0.6",
     "ts-toolbelt": "^9.6.0"
   },

diff --git a/src/components/buttons/BackToButton/BackToButton.test.tsx b/src/components/buttons/BackToButton/BackToButton.test.tsx
@@ -1,12 +1,12 @@
 import React from 'react'
-import { BrowserRouter, Route, Routes } from 'react-router-dom'
+import { BrowserRouter, Route, Routes } from 'react-router'
 import BackToButton from './BackToButton'
 import { render, userClick, waitFor, screen, act } from '../../../testingUtils'
 
 describe('BackToButton', () => {
   test('redirects to the path received', async () => {
     render(
-      <BrowserRouter future={{ v7_relativeSplatPath: true, v7_startTransition: true }}>
+      <BrowserRouter>
         <BackToButton path="/back" />
         <Routes>
           <Route path="/back" element={<div>{'redirected'}</div>}></Route>

diff --git a/src/components/buttons/BackToButton/BackToButton.tsx b/src/components/buttons/BackToButton/BackToButton.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react'
 import PropTypes from 'prop-types'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router'
 import ArrowBackIcon from '@mui/icons-material/ArrowBack'
 import { BackToButtonProps } from './types'
 import IconButton from '../IconButton'
@@ -10,15 +10,13 @@ import IconButton from '../IconButton'
  *
  * Props of the [Material-UI Button](https://mui.com/material-ui/api/button/#props) component are also available.
  */
-const BackToButton: React.FC<BackToButtonProps> = ({ path, fontSize = 'small', size = 'medium', ...rest }) => {
+const BackToButton: React.FC<BackToButtonProps> = ({ path, options, fontSize = 'small', size = 'medium', ...rest }) => {
   const navigate = useNavigate()
 
-  const onBackToList = useCallback(() => {
-    return path && navigate(path)
-  }, [navigate, path])
+  const onBackTo = useCallback(() => navigate(path as any, options), [navigate, options, path])
 
   return (
-    <IconButton aria-label="back" onClick={onBackToList} size={size} {...rest}>
+    <IconButton aria-label="back" onClick={onBackTo} size={size} {...rest}>
       <ArrowBackIcon fontSize={fontSize as any} />
     </IconButton>
   )
@@ -38,7 +36,11 @@ BackToButton.propTypes = {
   /**
    * Path where browser will be directed to when the button is clicked.
    */
-  path: PropTypes.string
+  path: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  /**
+   * Options to pass to the navigate
+   */
+  options: PropTypes.object
 }
 
 export default BackToButton
diff --git a/src/components/buttons/BackToButton/types.ts b/src/components/buttons/BackToButton/types.ts
@@ -1,11 +1,22 @@
 // Copyright (c) TotalSoft.
 // This source code is licensed under the MIT license.
 
+import { NavigateOptions } from 'react-router'
 import { IconButtonProps } from '../IconButton/types'
 
 export interface BackToButtonProps extends IconButtonProps {
   /**
    * Path where browser will be directed to when the button is clicked.
    */
-  path?: string
+  path: string | number
+  /**
+   * Navigation options.
+   * flushSync?: boolean;
+   * preventScrollReset?: boolean;
+   * relative?: RelativeRoutingType;
+   * replace?: boolean;
+   * state?: any;
+   * viewTransition?: boolean;
+   */
+  options?: NavigateOptions
 }
diff --git a/src/setupTests.ts b/src/setupTests.ts
@@ -6,3 +6,6 @@
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
 import '@testing-library/jest-dom'
+import { TextEncoder } from 'util'
+
+global.TextEncoder = TextEncoder
diff --git a/src/stories/buttons/BackToButton/BackToButton.stories.tsx b/src/stories/buttons/BackToButton/BackToButton.stories.tsx
@@ -5,7 +5,7 @@ import React from 'react'
 import type { Meta, StoryObj } from '@storybook/react'
 import { BackToButton as BackToButtonComponent } from 'components'
 import { Box } from '@mui/material'
-import { BrowserRouter } from 'react-router-dom'
+import { BrowserRouter } from 'react-router'
 
 const meta: Meta<typeof BackToButtonComponent> = {
   title: 'Components/Buttons/BackToButton',
@@ -30,8 +30,8 @@ export const BackToButton: Story = {
     }
   },
   render: args => (
-    <BrowserRouter future={{ v7_relativeSplatPath: true, v7_startTransition: true }}>
-      <BackToButtonComponent tooltip="redirect to provided path" path="/buttons/icon-button" {...args} />
+    <BrowserRouter>
+      <BackToButtonComponent tooltip="redirect to provided path" path={-1} {...args} />
     </BrowserRouter>
   )
 }
@@ -53,10 +53,10 @@ export const Sizes: Story = {
   },
   render: () => (
     <Box columnGap="15px" display="flex">
-      <BrowserRouter future={{ v7_relativeSplatPath: true, v7_startTransition: true }}>
-        <BackToButtonComponent size="small" tooltip="small" path="/buttons/icon-button" />
-        <BackToButtonComponent size="medium" tooltip="medium (default)" path="/buttons/icon-button" />
-        <BackToButtonComponent size="large" tooltip="large" path="/buttons/icon-button" />
+      <BrowserRouter>
+        <BackToButtonComponent size="small" tooltip="small" path={-1} />
+        <BackToButtonComponent size="medium" tooltip="medium (default)" path={-1} />
+        <BackToButtonComponent size="large" tooltip="large" path={-1} />
       </BrowserRouter>
     </Box>
   )
@@ -79,10 +79,10 @@ export const FontSizes: Story = {
   },
   render: () => (
     <Box columnGap="15px" display="flex">
-      <BrowserRouter future={{ v7_relativeSplatPath: true, v7_startTransition: true }}>
-        <BackToButtonComponent tooltip="small (default)" path="/buttons/icon-button" />
-        <BackToButtonComponent tooltip="medium" fontSize="medium" path="/buttons/icon-button" />
-        <BackToButtonComponent tooltip="large" fontSize="large" path="/buttons/icon-button" />
+      <BrowserRouter>
+        <BackToButtonComponent tooltip="small (default)" path={-1} />
+        <BackToButtonComponent tooltip="medium" fontSize="medium" path={-1} />
+        <BackToButtonComponent tooltip="large" fontSize="large" path={-1} />
       </BrowserRouter>
     </Box>
   )

diff --git a/yarn.lock b/yarn.lock
@@ -1732,13 +1732,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@remix-run/router@npm:1.21.0":
-  version: 1.21.0
-  resolution: "@remix-run/router@npm:1.21.0"
-  checksum: 10c0/570792211c083a1c7146613b79cbb8e0d1e14f34e974052e060e7f9dcad38c800d80fe0a18bf42811bc278ab12c0e8fd62cfce649e905046c4e55bd5a09eafdc
-  languageName: node
-  linkType: hard
-
 "@sinclair/typebox@npm:^0.27.8":
   version: 0.27.8
   resolution: "@sinclair/typebox@npm:0.27.8"
@@ -2589,7 +2582,7 @@ __metadata:
     react-chartjs-2: "npm:5.2.0"
     react-dom: "npm:18.3.1"
     react-number-format: "npm:^4.9.2"
-    react-router-dom: "npm:^6.28.0"
+    react-router: "npm:^7.0.1"
     react-syntax-highlighter: "npm:^15.6.1"
     react-toastify: "npm:^10.0.6"
     rimraf: "npm:^6.0.1"
@@ -2698,6 +2691,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/cookie@npm:^0.6.0":
+  version: 0.6.0
+  resolution: "@types/cookie@npm:0.6.0"
+  checksum: 10c0/5b326bd0188120fb32c0be086b141b1481fec9941b76ad537f9110e10d61ee2636beac145463319c71e4be67a17e85b81ca9e13ceb6e3bb63b93d16824d6c149
+  languageName: node
+  linkType: hard
+
 "@types/copyfiles@npm:^2.4.4":
   version: 2.4.4
   resolution: "@types/copyfiles@npm:2.4.4"
@@ -4455,6 +4455,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cookie@npm:^1.0.1":
+  version: 1.0.2
+  resolution: "cookie@npm:1.0.2"
+  checksum: 10c0/fd25fe79e8fbcfcaf6aa61cd081c55d144eeeba755206c058682257cb38c4bd6795c6620de3f064c740695bb65b7949ebb1db7a95e4636efb8357a335ad3f54b
+  languageName: node
+  linkType: hard
+
 "copyfiles@npm:^2.4.1":
   version: 2.4.1
   resolution: "copyfiles@npm:2.4.1"
@@ -8862,27 +8869,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-router-dom@npm:^6.28.0":
-  version: 6.28.0
-  resolution: "react-router-dom@npm:6.28.0"
-  dependencies:
-    "@remix-run/router": "npm:1.21.0"
-    react-router: "npm:6.28.0"
-  peerDependencies:
-    react: ">=16.8"
-    react-dom: ">=16.8"
-  checksum: 10c0/e2930cf83e8c843a932b008c7ce11059fd83390502a433f0e41f192e3cb80081a621d069eeda7af3cf4bf74d7f8029f0141cdce741bca3f0af82d4bbbc7f7f10
-  languageName: node
-  linkType: hard
-
-"react-router@npm:6.28.0":
-  version: 6.28.0
-  resolution: "react-router@npm:6.28.0"
+"react-router@npm:^7.0.1":
+  version: 7.0.1
+  resolution: "react-router@npm:7.0.1"
   dependencies:
-    "@remix-run/router": "npm:1.21.0"
+    "@types/cookie": "npm:^0.6.0"
+    cookie: "npm:^1.0.1"
+    set-cookie-parser: "npm:^2.6.0"
+    turbo-stream: "npm:2.4.0"
   peerDependencies:
-    react: ">=16.8"
-  checksum: 10c0/b435510de78fd882bf6ca9800a73cd90cee418bd1d19efd91b8dcaebde36929bbb589e25d9f7eec24ceb84255e8d538bc1fe54e6ddb5c43c32798e2b720fa76d
+    react: ">=18"
+    react-dom: ">=18"
+  peerDependenciesMeta:
+    react-dom:
+      optional: true
+  checksum: 10c0/aac4c9989ae6b9cf989b5ddcda88f505ba0704a4e4b37ae04c819c2bd02f080361f9eb1793695e3ecf41080d91b79aee454c3163b586d1b19ceca13f6eacec0e
   languageName: node
   linkType: hard
 
@@ -9335,6 +9336,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"set-cookie-parser@npm:^2.6.0":
+  version: 2.7.1
+  resolution: "set-cookie-parser@npm:2.7.1"
+  checksum: 10c0/060c198c4c92547ac15988256f445eae523f57f2ceefeccf52d30d75dedf6bff22b9c26f756bd44e8e560d44ff4ab2130b178bd2e52ef5571bf7be3bd7632d9a
+  languageName: node
+  linkType: hard
+
 "set-function-length@npm:^1.2.1":
   version: 1.2.2
   resolution: "set-function-length@npm:1.2.2"
@@ -10072,6 +10080,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"turbo-stream@npm:2.4.0":
+  version: 2.4.0
+  resolution: "turbo-stream@npm:2.4.0"
+  checksum: 10c0/e68b2569f1f16e6e9633d090c6024b2ae9f0e97bfeacb572451ca3732e120ebbb546f3bc4afc717c46cb57b5aea6104e04ef497f9912eef6a7641e809518e98a
+  languageName: node
+  linkType: hard
+
 "type-check@npm:^0.4.0, type-check@npm:~0.4.0":
   version: 0.4.0
   resolution: "type-check@npm:0.4.0"