Skip to content

Commit 0c4f0bd

Browse files
xiaopeng0202xiaopeng0202
authored
feat: switch react router to router dom, and upgrade to the newest version (#2025)
1 parent eb22a8f commit 0c4f0bd

File tree

38 files changed

+305
-252
lines changed

38 files changed

+305
-252
lines changed

‎frontend/package-lock.json‎

Lines changed: 21 additions & 14 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frontend/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,8 @@
4040
"react-beforeunload": "^2.6.0",
4141
"react-dom": "^18.2.0",
4242
"react-hash-string": "^1.0.0",
43-
"react-router": "^7.1.1",
43+
"react-router": "^7.6.1",
44+
"react-router-dom": "^7.6.2",
4445
"react-test-renderer": "^18.2.0",
4546
"react-toastify": "^11.0.0",
4647
"sass": "^1.77.7",

‎frontend/src/App.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import React, { useContext, useEffect, useMemo } from 'react';
22
import {
3-
createBrowserRouter, RouteObject, RouterProvider
4-
} from 'react-router';
3+
createBrowserRouter,
4+
RouteObject,
5+
RouterProvider
6+
} from 'react-router-dom';
57
import { Amplify } from 'aws-amplify';
68
import { ClassPrefix } from '@carbon/react';
79
import { ToastContainer } from 'react-toastify';

‎frontend/src/components/BCHeader/index.tsx‎

Lines changed: 91 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useState } from 'react';
2-
import { Link, useLocation, useNavigate } from 'react-router';
2+
import { Link, useLocation, useNavigate } from 'react-router-dom';
33

44
import {
55
HeaderContainer,
@@ -69,7 +69,9 @@ const BCHeader = () => {
6969
const handleClosePanel = () => {
7070
if (rightPanel.notifications) {
7171
closeRightPanel('notifications');
72-
} else { closeRightPanel('myProfile'); }
72+
} else {
73+
closeRightPanel('myProfile');
74+
}
7375
};
7476

7577
const onKeyDownFunction = (event: any) => {
@@ -83,32 +85,42 @@ const BCHeader = () => {
8385
return (
8486
<HeaderContainer
8587
isSideNavExpanded
86-
render={({ isSideNavExpanded, onClickSideNavExpand }: HearderContainerProps) => (
88+
render={({
89+
isSideNavExpanded,
90+
onClickSideNavExpand
91+
}: HearderContainerProps) => (
8792
<Header
8893
aria-label={componentTexts.completeTitle}
89-
className={`spar-header ${!isSideNavExpanded && 'spar-header-expanded'}`}
94+
className={`spar-header ${
95+
!isSideNavExpanded && 'spar-header-expanded'
96+
}`}
9097
data-testid="header"
9198
>
9299
<SkipToContent />
93-
{
94-
!(location.pathname.endsWith('/403') || location.pathname.endsWith('/404'))
95-
? (
96-
<HeaderMenuButton
97-
aria-label={
98-
isSideNavExpanded
99-
? componentTexts.closeMenu
100-
: componentTexts.openMenu
101-
}
102-
isCollapsible
103-
onClick={onClickSideNavExpand}
104-
isActive={isSideNavExpanded}
105-
/>
106-
)
107-
: null
108-
}
109-
<Link to={HOME_LINK} className="header-link" data-testid="header-name">
100+
{!(
101+
location.pathname.endsWith('/403')
102+
|| location.pathname.endsWith('/404')
103+
) ? (
104+
<HeaderMenuButton
105+
aria-label={
106+
isSideNavExpanded
107+
? componentTexts.closeMenu
108+
: componentTexts.openMenu
109+
}
110+
isCollapsible
111+
onClick={onClickSideNavExpand}
112+
isActive={isSideNavExpanded}
113+
/>
114+
) : null}
115+
<Link
116+
to={HOME_LINK}
117+
className="header-link"
118+
data-testid="header-name"
119+
>
110120
{componentTexts.headerTitle}
111-
<span className="header-full-name">{componentTexts.completeTitle}</span>
121+
<span className="header-full-name">
122+
{componentTexts.completeTitle}
123+
</span>
112124
</Link>
113125
<HeaderGlobalBar>
114126
<HeaderGlobalAction
@@ -131,9 +143,7 @@ const BCHeader = () => {
131143
aria-label={componentTexts.profile.headerAriaLabel}
132144
data-testid="header-button__user"
133145
tooltipAlignment={
134-
windowSize.innerWidth > MEDIUM_SCREEN_WIDTH
135-
? 'center'
136-
: 'end'
146+
windowSize.innerWidth > MEDIUM_SCREEN_WIDTH ? 'center' : 'end'
137147
}
138148
onClick={() => handleRightPanel('myProfile')}
139149
isActive={rightPanel.myProfile}
@@ -163,56 +173,59 @@ const BCHeader = () => {
163173
/>
164174
<MyProfile />
165175
</HeaderPanel>
166-
{
167-
overlay
168-
? (
169-
<div
170-
className="overlay-element"
171-
role="button"
172-
tabIndex={0}
173-
aria-label="close right panel"
174-
onKeyDown={onKeyDownFunction}
175-
onClick={handleClosePanel}
176-
/>
177-
)
178-
: null
179-
}
180-
{
181-
!(location.pathname.endsWith('/403') || location.pathname.endsWith('/404'))
182-
? (
183-
<SideNav
184-
isChildOfHeader
185-
expanded={isSideNavExpanded}
186-
aria-label={componentTexts.sideMenuAriaLabel}
187-
className={`spar-side-nav ${!isSideNavExpanded && 'spar-side-nav-expanded'}`}
188-
>
189-
<div className="side-nav-top">
190-
{
191-
navItems.map((category) => (
192-
<div key={category.name}>
193-
<SideNavLink className="side-nav-category-name">
194-
{category.name}
195-
</SideNavLink>
196-
{
197-
category.items.map((navItem) => (
198-
<SideNavLink
199-
key={navItem.name}
200-
className={navItem.disabled ? 'disabled-side-nav-option' : 'side-nav-option'}
201-
renderIcon={Icons[navItem.icon]}
202-
isActive={window.location.pathname.includes(navItem.link)}
203-
onClick={navItem.disabled ? null : () => navigate(navItem.link)}
204-
>
205-
{navItem.name}
206-
</SideNavLink>
207-
))
208-
}
209-
</div>
210-
))
211-
}
176+
{overlay ? (
177+
<div
178+
className="overlay-element"
179+
role="button"
180+
tabIndex={0}
181+
aria-label="close right panel"
182+
onKeyDown={onKeyDownFunction}
183+
onClick={handleClosePanel}
184+
/>
185+
) : null}
186+
{!(
187+
location.pathname.endsWith('/403')
188+
|| location.pathname.endsWith('/404')
189+
) ? (
190+
<SideNav
191+
isChildOfHeader
192+
expanded={isSideNavExpanded}
193+
aria-label={componentTexts.sideMenuAriaLabel}
194+
className={`spar-side-nav ${
195+
!isSideNavExpanded && 'spar-side-nav-expanded'
196+
}`}
197+
>
198+
<div className="side-nav-top">
199+
{navItems.map((category) => (
200+
<div key={category.name}>
201+
<SideNavLink className="side-nav-category-name">
202+
{category.name}
203+
</SideNavLink>
204+
{category.items.map((navItem) => (
205+
<SideNavLink
206+
key={navItem.name}
207+
className={
208+
navItem.disabled
209+
? 'disabled-side-nav-option'
210+
: 'side-nav-option'
211+
}
212+
renderIcon={Icons[navItem.icon]}
213+
isActive={window.location.pathname.includes(
214+
navItem.link
215+
)}
216+
onClick={
217+
navItem.disabled ? null : () => navigate(navItem.link)
218+
}
219+
>
220+
{navItem.name}
221+
</SideNavLink>
222+
))}
212223
</div>
213-
<div>
214-
{/* Uncomment this section when the support pages are implemented. */}
215-
{/* <SideNavLink className="side-nav-category-name">
224+
))}
225+
</div>
226+
<div>
227+
{/* Uncomment this section when the support pages are implemented. */}
228+
{/* <SideNavLink className="side-nav-category-name">
216229
{supportItems.name}
217230
</SideNavLink>
218231
{
@@ -231,12 +244,10 @@ const BCHeader = () => {
231244
</SideNavLink>
232245
))
233246
} */}
234-
<PanelSectionName title={VERSION} />
235-
</div>
236-
</SideNav>
237-
)
238-
: null
239-
}
247+
<PanelSectionName title={VERSION} />
248+
</div>
249+
</SideNav>
250+
) : null}
240251
</Header>
241252
)}
242253
/>

0 commit comments

Comments
 (0)