Merge pull request #304 from topcoder-platform/gamification

Gamification Admin UI QA merge

Author: kkartunov

package.json

@@ -60,6 +60,7 @@
         "redux-thunk": "^2.4.1",
         "sass": "^1.49.8",
         "styled-components": "^5.3.5",
+        "swr": "^1.3.0",
         "tc-auth-lib": "topcoder-platform/tc-auth-lib#1.0.4",
         "typescript": "^4.6.3",
         "uuid": "^8.3.2"

src-ts/lib/global-config.model.ts

@@ -11,6 +11,9 @@ export interface GlobalConfig {
     }
     DISABLED_TOOLS?: Array<string>
     ENV: string
+    GAMIFICATION: {
+        ORG_ID: string
+    },
     LOGGING: {
         PUBLIC_TOKEN: string
         SERVICE: string

src-ts/lib/pagination/index.ts

@@ -1,2 +1,5 @@
+export * from './infinite-page-dao.model'
+export * from './infinite-page-handler.model'
 export * from './page.model'
 export * from './sort.model'
+export * from './use-infinite-page.hook'

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

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

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

@@ -0,0 +1,5 @@
+export interface InfinitePageHandler<T> {
+    data?: ReadonlyArray<T>
+    getAndSetNext: () => void
+    hasMore: boolean
+}

src-ts/lib/pagination/use-infinite-page.hook.ts

@@ -0,0 +1,25 @@
+import { flatten, map } from 'lodash'
+// tslint:disable-next-line: no-submodule-imports
+import useSWRInfinite, { SWRInfiniteResponse } from 'swr/infinite'
+
+import { InfinitePageDao } from './infinite-page-dao.model'
+import { InfinitePageHandler } from './infinite-page-handler.model'
+
+export function useGetInfinitePage<T>(getKey: (index: number, previousPageData: InfinitePageDao<T>) => string | undefined):
+    InfinitePageHandler<T> {
+
+    const { data, setSize, size }: SWRInfiniteResponse<InfinitePageDao<T>> = useSWRInfinite(getKey, { revalidateFirstPage: false })
+
+    // flatten version of badges paginated data
+    const outputData: ReadonlyArray<T> = flatten(map(data, dao => dao.rows))
+
+    function getAndSetNext(): void {
+        setSize(size + 1)
+    }
+
+    return {
+        data: outputData,
+        getAndSetNext,
+        hasMore: outputData.length < (data?.[0]?.count || 0),
+    }
+}

src-ts/lib/table/Table.module.scss

@@ -61,6 +61,10 @@
                         margin-right: -29px;
                     }
                 }
+
+                &.centerHeader {
+                    justify-content: center;
+                }
             }
 
             .tooltip {
@@ -90,3 +94,8 @@
 .tootlipBody {
     min-width: 200px;
 }
+
+.loadBtnWrap {
+    display: flex;
+    justify-content: center;
+}

src-ts/lib/table/Table.tsx

@@ -1,6 +1,7 @@
 import classNames from 'classnames'
 import { Dispatch, MouseEvent, SetStateAction, useEffect, useState } from 'react'
 
+import { Button } from '../button'
 import { Sort } from '../pagination'
 import '../styles/_includes.scss'
 import { IconOutline } from '../svgs'
@@ -15,7 +16,10 @@ import styles from './Table.module.scss'
 interface TableProps<T> {
     readonly columns: ReadonlyArray<TableColumn<T>>
     readonly data: ReadonlyArray<T>
+    readonly moreToLoad?: boolean
+    readonly onLoadMoreClick?: () => void
     readonly onRowClick?: (data: T) => void
+    readonly onToggleSort?: (sort: Sort) => void
 }
 
 interface DefaultSortDirectionMap {
@@ -34,7 +38,7 @@ const Table: <T extends { [propertyName: string]: any }>(props: TableProps<T>) =
             Dispatch<SetStateAction<DefaultSortDirectionMap | undefined>>
         ]
             = useState<DefaultSortDirectionMap | undefined>()
-        const [sortedData, setSortData]: [ReadonlyArray<T>, Dispatch<SetStateAction<ReadonlyArray<T>>>]
+        const [sortedData, setSortedData]: [ReadonlyArray<T>, Dispatch<SetStateAction<ReadonlyArray<T>>>]
             = useState<ReadonlyArray<T>>(props.data)
 
         useEffect(() => {
@@ -47,7 +51,11 @@ const Table: <T extends { [propertyName: string]: any }>(props: TableProps<T>) =
                 setDefaultSortDirectionMap(map)
             }
 
-            setSortData(tableGetSorted(data, columns, sort))
+            // if we have a sort handler, don't worry about getting the sorted data;
+            // otherwise, get the sorted data for the table
+            const sorted: ReadonlyArray<T> = !!props.onToggleSort ? data : tableGetSorted(data, columns, sort)
+
+            setSortedData(sorted)
         },
             [
                 columns,
@@ -75,6 +83,9 @@ const Table: <T extends { [propertyName: string]: any }>(props: TableProps<T>) =
                 fieldName,
             }
             setSort(newSort)
+
+            // call the callback to notify parent for sort update
+            props.onToggleSort?.(newSort)
         }
 
         const headerRow: Array<JSX.Element> = props.columns
@@ -136,7 +147,7 @@ const Table: <T extends { [propertyName: string]: any }>(props: TableProps<T>) =
                 // return the entire row
                 return (
                     <tr
-                        className={classNames(styles.tr, !!onRowClick ? styles.clickable : undefined)}
+                        className={classNames(styles.tr, props.onRowClick ? styles.clickable : undefined)}
                         onClick={onRowClick}
                         key={index}
                     >
@@ -158,6 +169,18 @@ const Table: <T extends { [propertyName: string]: any }>(props: TableProps<T>) =
                         {rowCells}
                     </tbody>
                 </table>
+                {
+                    !!props.moreToLoad && !!props.onLoadMoreClick && (
+                        <div className={styles['loadBtnWrap']}>
+                            <Button
+                                buttonStyle='tertiary'
+                                label='Load More'
+                                size='lg'
+                                onClick={props.onLoadMoreClick}
+                            />
+                        </div>
+                    )
+                }
             </div>
         )
     }

src-ts/lib/table/index.ts

@@ -1,2 +1,3 @@
 export * from './table-column.model'
+export { tableGetDefaultSort } from './table-functions'
 export { default as Table } from './Table'

src-ts/lib/table/table-functions/table.functions.ts

@@ -1,17 +1,21 @@
 import { Sort } from '../../pagination'
 import { TableColumn } from '../table-column.model'
 
-export function getDefaultSort<T>(columns: ReadonlyArray<TableColumn<T>>): Sort | undefined {
+export function getDefaultSort<T>(columns: ReadonlyArray<TableColumn<T>>): Sort {
 
     const defaultSortColumn: TableColumn<T> | undefined = columns.find(col => col.isDefaultSort)
         || columns.find(col => !!col.propertyName)
+        || columns?.[0]
 
-    const defaultSort: Sort | undefined = !defaultSortColumn?.propertyName
-        ? undefined
-        : {
-            direction: defaultSortColumn.defaultSortDirection || 'asc',
-            fieldName: defaultSortColumn.propertyName,
-        }
+    // if we didn't find a default sort, we have a problem
+    if (!defaultSortColumn) {
+        throw new Error('A table must have at least one column.')
+    }
+
+    const defaultSort: Sort = {
+        direction: defaultSortColumn.defaultSortDirection || 'asc',
+        fieldName: defaultSortColumn.propertyName || '',
+    }
 
     return defaultSort
 }