feat(PM-1503): Route modifications in scorecard

src/apps/review/src/config/routes.config.ts

@@ -13,3 +13,4 @@ export const openOpportunitiesRouteId = 'open-opportunities'
 export const pastReviewAssignmentsRouteId = 'past-review-assignments'
 export const challengeDetailRouteId = ':challengeId'
 export const scorecardRouteId = 'scorecard'
+export const viewScorecardRouteId = ':scorecardId'

src/apps/review/src/lib/components/TableScorecards/TableScorecards.tsx

@@ -45,7 +45,7 @@ export const TableScorecards: FC<Props> = (props: Props) => {
                 label: 'Scorecard',
                 propertyName: 'name',
                 renderer: (data: Scorecard) => (
-                    <Link to={`${data.id}/details`}>
+                    <Link to={`${data.id}`}>
                         {data.name}
                     </Link>
                 ),

src/apps/review/src/pages/scorecards/ScorecardsContainer.tsx

@@ -0,0 +1,40 @@
+/**
+ * The router outlet.
+ */
+
+import { FC, PropsWithChildren, useContext, useEffect, useMemo } from 'react'
+import { Outlet, Routes, useLocation } from 'react-router-dom'
+
+import { routerContext, RouterContextData } from '~/libs/core'
+
+import { reviewRoutes } from '../../review-app.routes'
+import { scorecardRouteId } from '../../config/routes.config'
+
+export const ScorecardsContainer: FC<PropsWithChildren> = () => {
+    const location = useLocation()
+    const childRoutes = useChildRoutes()
+
+    useEffect(() => {
+        window.scrollTo(0, 0)
+    }, [location.pathname])
+
+    return (
+        <>
+            <Outlet />
+            <Routes>{childRoutes}</Routes>
+        </>
+    )
+}
+
+function useChildRoutes(): Array<JSX.Element> | undefined {
+    const { getRouteElement }: RouterContextData = useContext(routerContext)
+    const childRoutes = useMemo(
+        () => reviewRoutes[0].children
+            ?.find(r => r.id === scorecardRouteId)
+            ?.children?.map(getRouteElement),
+        [getRouteElement],
+    )
+    return childRoutes
+}
+
+export default ScorecardsContainer

src/apps/review/src/pages/scorecards/ScorecardsListPage.tsx → src/apps/review/src/pages/scorecards/ScorecardsListPage/ScorecardsListPage.tsx

@@ -3,8 +3,8 @@ import { FC, useCallback, useMemo, useState } from 'react'
 import { PageTitle } from '~/libs/ui'
 import { TableLoading } from '~/apps/admin/src/lib'
 
-import { PageWrapper, ScorecardsFilter, TableNoRecord, TableScorecards } from '../../lib'
-import { ScorecardsResponse, useFetchScorecards } from '../../lib/hooks'
+import { PageWrapper, ScorecardsFilter, TableNoRecord, TableScorecards } from '../../../lib'
+import { ScorecardsResponse, useFetchScorecards } from '../../../lib/hooks'
 
 import styles from './ScorecardsListPage.module.scss'
 

src/apps/review/src/pages/scorecards/ViewScorecardPage/ViewScorecardPage.tsx

@@ -0,0 +1,7 @@
+import { FC } from 'react'
+
+const ViewScorecardPage: FC = () => (
+    <div>View scorecard</div>
+)
+
+export default ViewScorecardPage

src/apps/review/src/pages/scorecards/ViewScorecardPage/index.ts

@@ -0,0 +1 @@
+export { default as ViewScorecardPage } from './ViewScorecardPage'

src/apps/review/src/review-app.routes.tsx

@@ -37,11 +37,21 @@ const ScorecardDetailsPage: LazyLoadedComponent = lazyLoad(
     'ScorecardDetailsPage',
 )
 
+const ScorecardsContainer: LazyLoadedComponent = lazyLoad(
+    () => import('./pages/scorecards/ScorecardsContainer'),
+    'ScorecardsContainer',
+)
+
 const ScorecardsListPage: LazyLoadedComponent = lazyLoad(
     () => import('./pages/scorecards/ScorecardsListPage'),
     'ScorecardsListPage',
 )
 
+const ViewScorecardPage: LazyLoadedComponent = lazyLoad(
+    () => import('./pages/scorecards/ViewScorecardPage'),
+    'ViewScorecardPage',
+)
+
 export const toolTitle: string = ToolTitle.review
 
 export const reviewRoutes: ReadonlyArray<PlatformRoute> = [
@@ -85,7 +95,20 @@ export const reviewRoutes: ReadonlyArray<PlatformRoute> = [
                 route: activeReviewAssigmentsRouteId,
             },
             {
-                element: <ScorecardsListPage />,
+                children: [
+                    {
+                        element: <ScorecardsListPage />,
+                        id: 'list-scorecards-page',
+                        route: '',
+                    },
+                    {
+                        element: <ViewScorecardPage />,
+                        id: 'view-scorecard-page',
+                        route: ':scorecardId',
+                    },
+
+                ],
+                element: <ScorecardsContainer />,
                 id: scorecardRouteId,
                 route: scorecardRouteId,
             },