Topcoder Admin App - Consolidate Gamification

Author: suppermancool

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

@@ -1,3 +1,4 @@
+import { baseDetailPath, createBadgePath } from '~/apps/gamification-admin'
 import { AppSubdomain, ToolTitle } from '~/config'
 import {
     lazyLoad,
@@ -9,9 +10,11 @@ import {
 
 import {
     billingAccountRouteId,
+    gamificationAdminRouteId,
     manageChallengeRouteId,
     manageReviewRouteId,
     permissionManagementRouteId,
+    platformRouteId,
     rootRoute,
     userManagementRouteId,
 } from './config/routes.config'
@@ -107,6 +110,17 @@ const PermissionAddGroupMembersPage: LazyLoadedComponent = lazyLoad(
     'PermissionAddGroupMembersPage',
 )
 
+const Platform: LazyLoadedComponent = lazyLoad(() => import('./platform/Platform'))
+const BadgeDetailPage: LazyLoadedComponent = lazyLoad(
+    () => import('../../gamification-admin/src/pages/badge-detail/BadgeDetailPage'),
+)
+const BadgeListingPage: LazyLoadedComponent = lazyLoad(
+    () => import('../../gamification-admin/src/pages/badge-listing/BadgeListingPage'),
+)
+const CreateBadgePage: LazyLoadedComponent = lazyLoad(
+    () => import('../../gamification-admin/src/pages/create-badge/CreateBadgePage'),
+)
+
 export const toolTitle: string = ToolTitle.admin
 
 export const adminRoutes: ReadonlyArray<PlatformRoute> = [
@@ -256,6 +270,29 @@ export const adminRoutes: ReadonlyArray<PlatformRoute> = [
                 id: permissionManagementRouteId,
                 route: permissionManagementRouteId,
             },
+            {
+                children: [
+                    {
+                        element: (
+                            <BadgeListingPage
+                                rootPage={`${rootRoute}/${platformRouteId}/${gamificationAdminRouteId}`}
+                            />
+                        ),
+                        route: gamificationAdminRouteId,
+                    },
+                    {
+                        element: <CreateBadgePage />,
+                        route: `${gamificationAdminRouteId}${createBadgePath}`,
+                    },
+                    {
+                        element: <BadgeDetailPage />,
+                        route: `${gamificationAdminRouteId}${baseDetailPath}/:id`,
+                    },
+                ],
+                element: <Platform />,
+                id: platformRouteId,
+                route: platformRouteId,
+            },
         ],
         domain: AppSubdomain.admin,
         element: <AdminApp />,

src/apps/admin/src/config/routes.config.ts

@@ -13,3 +13,5 @@ export const manageReviewRouteId = 'review-management'
 export const userManagementRouteId = 'user-management'
 export const billingAccountRouteId = 'billing-account'
 export const permissionManagementRouteId = 'permission-management'
+export const gamificationAdminRouteId = 'gamification-admin'
+export const platformRouteId = 'platform'

src/apps/admin/src/lib/components/common/Layout/Layout.module.scss

@@ -13,6 +13,15 @@
         @include ltelg {
             padding: $sp-4;
         }
+
+        &.isPlatformPage {
+            padding: 0;
+            background-color: white;
+
+            @include ltelg {
+                padding: 0;
+            }
+        }
     }
 }
 

src/apps/admin/src/lib/components/common/Layout/Layout.tsx

@@ -1,28 +1,41 @@
-import { FC, PropsWithChildren } from 'react'
+import { FC, PropsWithChildren, useMemo } from 'react'
+import { useLocation } from 'react-router-dom'
+import classNames from 'classnames'
 
+import { platformRouteId } from '~/apps/admin/src/config/routes.config'
 import { ContentLayout } from '~/libs/ui'
 
 import { SystemAdminTabs } from '../Tab'
 
 import styles from './Layout.module.scss'
 
-export const NullLayout: FC<PropsWithChildren> = props => (
-    <>{props.children}</>
-)
+export const NullLayout: FC<PropsWithChildren> = props => <>{props.children}</>
 
-export const Layout: FC<PropsWithChildren> = props => (
-    <ContentLayout
-        innerClass={styles.contantentLayoutInner}
-        outerClass={styles.contentLayoutOuter}
-    >
-        <div className={styles.layout}>
-            <SystemAdminTabs />
+export const Layout: FC<PropsWithChildren> = props => {
+    const { pathname }: { pathname: string } = useLocation()
+    const isPlatformPage = useMemo(
+        () => pathname.indexOf(platformRouteId) >= 0,
+        [pathname],
+    )
 
-            <div className={styles.main}>
-                {props.children}
+    return (
+        <ContentLayout
+            innerClass={styles.contantentLayoutInner}
+            outerClass={styles.contentLayoutOuter}
+        >
+            <div className={styles.layout}>
+                <SystemAdminTabs />
+
+                <div
+                    className={classNames(styles.main, {
+                        [styles.isPlatformPage]: isPlatformPage,
+                    })}
+                >
+                    {props.children}
+                </div>
             </div>
-        </div>
-    </ContentLayout>
-)
+        </ContentLayout>
+    )
+}
 
 export default Layout

src/apps/admin/src/lib/components/common/Tab/config/system-admin-tabs-config.ts

@@ -3,9 +3,11 @@ import _ from 'lodash'
 import { TabsNavItem } from '~/libs/ui'
 import {
     billingAccountRouteId,
+    gamificationAdminRouteId,
     manageChallengeRouteId,
     manageReviewRouteId,
     permissionManagementRouteId,
+    platformRouteId,
     userManagementRouteId,
 } from '~/apps/admin/src/config/routes.config'
 
@@ -50,6 +52,16 @@ export const SystemAdminTabsConfig: TabsNavItem[] = [
         id: permissionManagementRouteId,
         title: 'Permission Management',
     },
+    {
+        children: [
+            {
+                id: `${platformRouteId}/${gamificationAdminRouteId}`,
+                title: 'Badges',
+            },
+        ],
+        id: platformRouteId,
+        title: 'Platform',
+    },
 ]
 
 export function getTabIdFromPathName(pathname: string): string {

src/apps/admin/src/platform/Platform.tsx

@@ -0,0 +1,37 @@
+/**
+ * Wrapper for permission managment
+ */
+import { FC, useContext, useMemo } from 'react'
+import { Outlet, Routes } from 'react-router-dom'
+
+import { routerContext, RouterContextData } from '~/libs/core'
+
+import { adminRoutes } from '../admin-app.routes'
+import { platformRouteId } from '../config/routes.config'
+
+/**
+ * The router outlet with layout.
+ */
+export const Platform: FC = () => {
+    const childRoutes = useChildRoutes()
+
+    return (
+        <>
+            <Outlet />
+            <Routes>{childRoutes}</Routes>
+        </>
+    )
+}
+
+function useChildRoutes(): Array<JSX.Element> | undefined {
+    const { getRouteElement }: RouterContextData = useContext(routerContext)
+    const childRoutes = useMemo(
+        () => adminRoutes[0].children
+            ?.find(r => r.id === platformRouteId)
+            ?.children?.map(getRouteElement),
+        [], // eslint-disable-line react-hooks/exhaustive-deps -- missing dependency: getRouteElement
+    )
+    return childRoutes
+}
+
+export default Platform

src/apps/gamification-admin/src/GamificationAdmin.tsx

@@ -1,6 +1,5 @@
 export * from './game-badge.model'
 export * from './hooks/use-get-game-badges-page.hook'
-export * from './hooks/use-gamification-breadcrumb.hook'
 export * from './hooks/use-get-game-badge-details.hook'
 export * from './member-autocomplete'
 export * from './pagination'

src/apps/gamification-admin/src/game-lib/hooks/use-gamification-breadcrumb.hook.tsx

@@ -12,6 +12,7 @@ export interface BadgeCreatedModalProps {
     badge: GameBadge
     isOpen: boolean
     onClose: () => void
+    rootPage: string;
 }
 
 const BadgeCreatedModal: FC<BadgeCreatedModalProps> = (props: BadgeCreatedModalProps) => {
@@ -52,7 +53,7 @@ const BadgeCreatedModal: FC<BadgeCreatedModalProps> = (props: BadgeCreatedModalP
                             label='View'
                             primary
                             size='lg'
-                            to={badgeDetailPath(props.badge.id)}
+                            to={badgeDetailPath(props.rootPage, props.badge.id)}
                         />
                         <Button
                             label='Create a new badge'