GAME-167 #pagination for member assignments

Author: kkartunov

src-ts/lib/pagination/infinite-page-dao.model.ts

@@ -1,5 +1,7 @@
 export interface InfinitePageDao<T> {
     count: number
+    limit: number
+    offset: number
     // TODO: rename this 'items' so it can be used in a grid/card view
     rows: ReadonlyArray<T>
 }

src-ts/tools/gamification-admin/game-lib/use-gamification-breadcrumb.hook.tsx renamed to src-ts/tools/gamification-admin/game-lib/hooks/use-gamification-breadcrumb.hook.tsx

@@ -1,6 +1,6 @@
-import { BreadcrumbItemModel } from '../../../lib'
-import { basePath } from '../gamification-admin.routes'
-import { toolTitle } from '../GamificationAdmin'
+import { BreadcrumbItemModel } from '../../../../lib'
+import { basePath } from '../../gamification-admin.routes'
+import { toolTitle } from '../../GamificationAdmin'
 
 export function useGamificationBreadcrumb(items: Array<BreadcrumbItemModel>): Array<BreadcrumbItemModel> {
 

src-ts/tools/gamification-admin/game-lib/hooks/use-get-game-badge-assignees-page.hook.ts

@@ -0,0 +1,28 @@
+import { EnvironmentConfig } from '../../../../config'
+import { InfinitePageDao, InfinitePageHandler, Sort, useGetInfinitePage } from '../../../../lib'
+import { GamificationConfig } from '../../game-config'
+import { GameBadge, MemberBadgeAward } from '../game-badge.model'
+
+export function useGetGameBadgeAssigneesPage(badge: GameBadge, sort: Sort): InfinitePageHandler<MemberBadgeAward> {
+
+    function getKey(index: number, previousPageData: InfinitePageDao<MemberBadgeAward>): string | undefined {
+
+        // reached the end
+        if (!!previousPageData && !previousPageData.rows.length) {
+            return undefined
+        }
+
+        const params: Record<string, string> = {
+            limit: `${GamificationConfig.PAGE_SIZE}`,
+            offset: `${index * GamificationConfig.PAGE_SIZE}`,
+            order_by: sort.fieldName,
+            order_type: sort.direction,
+        }
+
+        const badgeEndpointUrl: URL = new URL(`${EnvironmentConfig.API.V5}/gamification/badges/${badge.id}/assignees?${new URLSearchParams(params)}`)
+
+        return badgeEndpointUrl.toString()
+    }
+
+    return useGetInfinitePage(getKey)
+}

src-ts/tools/gamification-admin/game-lib/use-get-game-badge-details.hook.ts renamed to src-ts/tools/gamification-admin/game-lib/hooks/use-get-game-badge-details.hook.ts

@@ -1,8 +1,7 @@
 import useSWR, { KeyedMutator, SWRResponse } from 'swr'
 
-import { EnvironmentConfig } from '../../../config'
-
-import { GameBadge } from './game-badge.model'
+import { EnvironmentConfig } from '../../../../config'
+import { GameBadge } from '../game-badge.model'
 
 export interface BadgeDetailPageHandler<T> {
     data?: Readonly<T>

src-ts/tools/gamification-admin/game-lib/use-get-game-badges-page.hook.ts renamed to src-ts/tools/gamification-admin/game-lib/hooks/use-get-game-badges-page.hook.ts

@@ -1,8 +1,7 @@
-import { EnvironmentConfig } from '../../../config'
-import { InfinitePageDao, InfinitePageHandler, Sort, useGetInfinitePage } from '../../../lib'
-import { GamificationConfig } from '../game-config'
-
-import { GameBadge } from './game-badge.model'
+import { EnvironmentConfig } from '../../../../config'
+import { InfinitePageDao, InfinitePageHandler, Sort, useGetInfinitePage } from '../../../../lib'
+import { GamificationConfig } from '../../game-config'
+import { GameBadge } from '../game-badge.model'
 
 export function useGetGameBadgesPage(sort: Sort): InfinitePageHandler<GameBadge> {
 

src-ts/tools/gamification-admin/game-lib/index.ts

@@ -1,4 +1,4 @@
 export * from './game-badge.model'
-export * from './use-get-game-badges-page.hook'
-export * from './use-gamification-breadcrumb.hook'
-export * from './use-get-game-badge-details.hook'
+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'

src-ts/tools/gamification-admin/pages/badge-detail/AwardedMembersTab/AwardedMembersTab.tsx

@@ -1,13 +1,15 @@
-import { Dispatch, FC, SetStateAction, useState } from 'react'
+import { Dispatch, FC, SetStateAction, useEffect, useState } from 'react'
 
 import { InfinitePageHandler, Sort, Table, TableColumn, tableGetDefaultSort } from '../../../../../lib'
 import { GameBadge, MemberBadgeAward } from '../../../game-lib'
+import { useGetGameBadgeAssigneesPage } from '../../../game-lib/hooks/use-get-game-badge-assignees-page.hook'
 
 import { awardedMembersColumns } from './awarded-members-table/awarded-members-table.config'
 import styles from './AwardedMembersTab.module.scss'
 
 export interface AwardedMembersTabProps {
     badge: GameBadge
+    forceRefresh?: boolean
 }
 
 const AwardedMembersTab: FC<AwardedMembersTabProps> = (props: AwardedMembersTabProps) => {
@@ -19,20 +21,31 @@ const AwardedMembersTab: FC<AwardedMembersTabProps> = (props: AwardedMembersTabP
     ]
         = useState<ReadonlyArray<TableColumn<MemberBadgeAward>>>([...awardedMembersColumns])
 
+    const pageHandler: InfinitePageHandler<MemberBadgeAward> = useGetGameBadgeAssigneesPage(props.badge, sort)
+
+    useEffect(() => {
+        if (props.forceRefresh && pageHandler) {
+            pageHandler.mutate()
+        }
+    }, [
+        props.forceRefresh,
+        pageHandler,
+    ])
+
     function onSortClick(newSort: Sort): void {
         setSort({ ...newSort })
     }
 
     return (
         <div className={styles.tabWrap}>
             {
-                props.badge.member_badges?.length ? (
+                pageHandler.data?.length ? (
                     <Table
                         columns={columns}
-                        data={props.badge.member_badges}
-                    // onLoadMoreClick={pageHandler.getAndSetNext}
-                    // moreToLoad={pageHandler.hasMore}
-                    // onToggleSort={onSortClick}
+                        data={pageHandler.data}
+                        onLoadMoreClick={pageHandler.getAndSetNext}
+                        moreToLoad={pageHandler.hasMore}
+                        onToggleSort={onSortClick}
                     />
                 ) : undefined
             }

src-ts/tools/gamification-admin/pages/badge-detail/BadgeDetailPage.tsx

@@ -79,6 +79,9 @@ const BadgeDetailPage: FC = () => {
 
     const [showActivatedModal, setShowActivatedModal]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false)
 
+    const [forceAwardedMembersTabRefresh, setForceAwardedMembersTabRefresh]: [boolean | undefined, Dispatch<SetStateAction<boolean | undefined>>]
+        = useState<boolean | undefined>()
+
     useEffect(() => {
         if (newImageFile && newImageFile.length) {
             const fileReader: FileReader = new FileReader()
@@ -261,15 +264,22 @@ const BadgeDetailPage: FC = () => {
         }
     }
 
+    function onManualAssign(): void {
+        // refresh awardedMembers data
+        setForceAwardedMembersTabRefresh(true)
+        setActiveTab(BadgeDetailsTabViews.awardedMembers)
+    }
+
     // default tab
     let activeTabElement: JSX.Element
         = <AwardedMembersTab
             badge={badgeDetailsHandler.data as GameBadge}
+            forceRefresh={forceAwardedMembersTabRefresh}
         />
     if (activeTab === BadgeDetailsTabViews.manualAward) {
         activeTabElement = <ManualAwardTab
             badge={badgeDetailsHandler.data as GameBadge}
-            onManualAssign={() => setActiveTab(BadgeDetailsTabViews.awardedMembers)}
+            onManualAssign={onManualAssign}
         />
     }
     if (activeTab === BadgeDetailsTabViews.batchAward) {