Merge pull request #998 from nqviet/dev

V5 challenge management

Author: jmgasper

src/apps/admin/index.ts

@@ -0,0 +1 @@
+export * from './src'

src/apps/admin/src/AdminApp.tsx

@@ -0,0 +1,62 @@
+import {
+    FC,
+    JSXElementConstructor,
+    PropsWithChildren,
+    useContext,
+    useEffect,
+    useMemo,
+} from 'react'
+import { Outlet, Routes, useLocation } from 'react-router-dom'
+
+import { routerContext, RouterContextData } from '~/libs/core'
+
+import { NullLayout, SWRConfigProvider } from './lib'
+import { adminRoutes, toolTitle } from './admin-app.routes'
+import ChallengeManagement from './challenge-management/ChallengeManagement'
+import './lib/styles/index.scss'
+
+/**
+ * The admin app.
+ */
+const AdminApp: FC = () => {
+    const { getChildRoutes }: RouterContextData = useContext(routerContext)
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- missing dependency: getChildRoutes
+    const childRoutes = useMemo(() => getChildRoutes(toolTitle), [])
+    const AppLayout = useAppLayout()
+
+    useEffect(() => {
+        document.body.classList.add('admin-app')
+        return () => {
+            document.body.classList.remove('admin-app')
+        }
+    }, [])
+
+    return (
+        <div>
+            <SWRConfigProvider>
+                <AppLayout>
+                    <Outlet />
+                    <Routes>{childRoutes}</Routes>
+                </AppLayout>
+            </SWRConfigProvider>
+        </div>
+    )
+}
+
+function useAppLayout(): JSXElementConstructor<PropsWithChildren> {
+    const challengeManagementPath = adminRoutes[0].children?.find(
+        r => r.id === 'challenge-management',
+    )?.route
+    const locationPath = useLocation().pathname
+
+    if (
+        challengeManagementPath
+        && locationPath.includes(challengeManagementPath)
+    ) {
+        return ChallengeManagement.Layout
+    }
+
+    return NullLayout
+}
+
+export default AdminApp

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

@@ -0,0 +1,65 @@
+import { AppSubdomain, EnvironmentConfig, ToolTitle } from '~/config'
+import {
+    lazyLoad,
+    LazyLoadedComponent,
+    PlatformRoute,
+    Rewrite,
+    UserRole,
+} from '~/libs/core'
+
+const AdminApp: LazyLoadedComponent = lazyLoad(() => import('./AdminApp'))
+
+const ChallengeManagement: LazyLoadedComponent = lazyLoad(
+    () => import('./challenge-management/ChallengeManagement'),
+)
+const ChallengeManagementPage: LazyLoadedComponent = lazyLoad(
+    () => import('./challenge-management/ChallengeManagementPage'),
+    'ChallengeManagementPage',
+)
+const ManageUserPage: LazyLoadedComponent = lazyLoad(
+    () => import('./challenge-management/ManageUserPage'),
+    'ManageUserPage',
+)
+
+export const toolTitle: string = ToolTitle.admin
+export const rootRoute: string
+    = EnvironmentConfig.SUBDOMAIN === AppSubdomain.admin
+        ? '/'
+        : `/${AppSubdomain.admin}`
+
+export const adminRoutes: ReadonlyArray<PlatformRoute> = [
+    // Admin App Root
+    {
+        authRequired: true,
+        children: [
+            {
+                element: <Rewrite to='challenge-management' />,
+                route: '',
+            },
+            // Challenge Management Module
+            {
+                children: [
+                    {
+                        element: <ChallengeManagementPage />,
+                        id: 'challenge-management-page',
+                        route: '',
+                    },
+                    {
+                        element: <ManageUserPage />,
+                        id: 'manage-user',
+                        route: ':challengeId/manage-user',
+                    },
+                ],
+                element: <ChallengeManagement />,
+                id: 'challenge-management',
+                route: 'challenge-management',
+            },
+        ],
+        domain: AppSubdomain.admin,
+        element: <AdminApp />,
+        id: toolTitle,
+        rolesRequired: [UserRole.administrator],
+        route: rootRoute,
+        title: toolTitle,
+    },
+]

src/apps/admin/src/challenge-management/ChallengeManagement.tsx

@@ -0,0 +1,46 @@
+import { FC, PropsWithChildren, useContext, useMemo } from 'react'
+import { Outlet, Routes } from 'react-router-dom'
+
+import { routerContext, RouterContextData } from '~/libs/core'
+
+import { Layout } from '../lib/components'
+import { ChallengeManagementContextProvider } from '../lib/contexts'
+import { adminRoutes } from '../admin-app.routes'
+
+/**
+ * The router outlet with layout.
+ */
+export const ChallengeManagement: FC & {
+    Layout: FC<PropsWithChildren>
+} = () => {
+    const childRoutes = useChildRoutes()
+
+    return (
+        <ChallengeManagementContextProvider>
+            <Outlet />
+            <Routes>{childRoutes}</Routes>
+        </ChallengeManagementContextProvider>
+    )
+}
+
+function useChildRoutes(): Array<JSX.Element> | undefined {
+    const { getRouteElement }: RouterContextData = useContext(routerContext)
+    const childRoutes = useMemo(
+        () => adminRoutes[0].children
+            ?.find(r => r.id === 'challenge-management')
+            ?.children?.map(getRouteElement),
+        [], // eslint-disable-line react-hooks/exhaustive-deps -- missing dependency: getRouteElement
+    )
+    return childRoutes
+}
+
+/**
+ * The outlet layout.
+ */
+ChallengeManagement.Layout = function ChallengeManagementLayout(
+    props: PropsWithChildren,
+) {
+    return <Layout>{props.children}</Layout>
+}
+
+export default ChallengeManagement

src/apps/admin/src/challenge-management/ChallengeManagementPage/ChallengeManagementPage.module.scss

@@ -0,0 +1,14 @@
+.loadingSpinnerContainer {
+    position: relative;
+    height: 100px;
+    margin-top: -30px;
+
+    .spinner {
+        background: none;
+    }
+}
+
+.noRecordFound {
+    padding: 16px 16px 32px;
+    text-align: center;
+}