Merge pull request #390 from topcoder-platform/PROD-1515_sorting

PROD0-1515 sorting -> qa

Author: brooketopcoder

src-ts/lib/table/Table.tsx

@@ -8,72 +8,75 @@ import { Tooltip } from '../tooltip'
 
 import { TableCell } from './table-cell'
 import { TableColumn } from './table-column.model'
-import { tableGetSorted } from './table-functions'
+import { tableGetDefaultSort, tableGetSorted } from './table-functions'
 import { TableSort } from './table-sort'
 import styles from './Table.module.scss'
 
 interface TableProps<T> {
     readonly columns: ReadonlyArray<TableColumn<T>>
     readonly data: ReadonlyArray<T>
-    readonly defaultSort: Sort
     readonly onRowClick?: (data: T) => void
 }
 
+interface DefaultSortDirectionMap {
+    [columnProperty: string]: 'asc' | 'desc'
+}
+
 const Table: <T extends { [propertyName: string]: any }>(props: TableProps<T>) => JSX.Element
     = <T extends { [propertyName: string]: any }>(props: TableProps<T>) => {
 
-        const [sort, setSort]: [Sort, Dispatch<SetStateAction<Sort>>] = useState<Sort>(props.defaultSort)
-        const [sortMap, setSortMap]: [{ [fieldame: string]: boolean }, Dispatch<SetStateAction<{ [fieldame: string]: boolean }>>]
-            = useState<{ [fieldame: string]: boolean }>({})
+        const [sort, setSort]: [Sort | undefined, Dispatch<SetStateAction<Sort | undefined>>]
+            = useState<Sort | undefined>(tableGetDefaultSort(props.columns))
+        const [defaultSortDirectionMap, setDefaultSortDirectionMap]: [DefaultSortDirectionMap | undefined, Dispatch<SetStateAction<DefaultSortDirectionMap | undefined>>]
+            = useState<DefaultSortDirectionMap | undefined>()
         const [sortedData, setSortData]: [ReadonlyArray<T>, Dispatch<SetStateAction<ReadonlyArray<T>>>]
             = useState<ReadonlyArray<T>>(props.data)
 
         useEffect(() => {
 
-            // sort the data
-            setSortData(tableGetSorted(props.data, sort, props.columns))
-
-            // create the sortmap to remember the last
-            // sort direction of a column that is not
-            // the currently sorted column
-            const map: { [fieldame: string]: boolean } = {
-                [sort.fieldName]: sort.direction === 'asc',
+            if (!defaultSortDirectionMap) {
+                const map: DefaultSortDirectionMap = {}
+                props.columns
+                    .filter(col => !!col.propertyName)
+                    .forEach(col => map[col.propertyName as string] = col.defaultSortDirection || 'asc')
+                setDefaultSortDirectionMap(map)
             }
 
-            // A) if column X is sorted in one direction,
-            // then column Y is sorted,
-            // then column X is sorted again,
-            // the 2nd sort of column X will toggle its sort
-            // direction
-            // B) all columns default to sorting ascending, so if there
-            // not a last known sort for a column, set it to descending
-            // so the next toggle toggles it ascending.
-            props.columns
-                .filter(col => !!col.propertyName && col.propertyName !== sort.fieldName)
-                .forEach(col => {
-                    const currentAscending: boolean | undefined = sortMap[col.propertyName as string]
-                    map[col.propertyName as string] = !!currentAscending
-                })
-            setSortMap(map)
+            setSortData(tableGetSorted(props.data, props.columns, sort))
         },
             [
+                defaultSortDirectionMap,
                 sort,
                 props.data,
             ])
 
         function toggleSort(fieldName: string): void {
+
+            // if we don't have anything to sort by, we shouldn't be here
+            if (!sort) {
+                return
+            }
+
+            // get the sort direction
+            const direction: 'asc' | 'desc' = fieldName === sort.fieldName
+                // this is the current sort, so just toggle it
+                ? sort.direction === 'asc' ? 'desc' : 'asc'
+                // get the default sort for the field... this will never be undefined
+                : (defaultSortDirectionMap as DefaultSortDirectionMap)[fieldName]
+
             const newSort: Sort = {
-                direction: sortMap[fieldName] ? 'desc' : 'asc',
+                direction,
                 fieldName,
             }
             setSort(newSort)
         }
 
         const headerRow: Array<JSX.Element> = props.columns
             .map(col => {
-                const isCurrentlySorted: boolean = col.propertyName === sort.fieldName
+                const isSortable: boolean = !!col.propertyName
+                const isCurrentlySorted: boolean = isSortable && col.propertyName === sort?.fieldName
                 const colorClass: string = isCurrentlySorted ? 'black-100' : 'black-60'
-                const sortableClass: string | undefined = !!col.propertyName ? styles.sortable : undefined
+                const sortableClass: string | undefined = isSortable ? styles.sortable : undefined
                 return (
                     <th className={styles.th}>
                         <div className={classNames(styles['header-container'], styles[col.type], colorClass, sortableClass)}>

src-ts/lib/table/table-column.model.ts

@@ -1,6 +1,8 @@
 import { TableCellType } from './table-cell.type'
 
 export interface TableColumn<T> {
+    readonly defaultSortDirection?: 'asc' | 'desc'
+    readonly isDefaultSort?: boolean
     readonly label?: string
     readonly propertyName?: string
     readonly renderer?: (data: T, params?: any) => JSX.Element | undefined

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

@@ -1 +1,4 @@
-export { getSorted as tableGetSorted } from './table.functions'
+export {
+    getDefaultSort as tableGetDefaultSort,
+    getSorted as tableGetSorted,
+} from './table.functions'

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

@@ -1,20 +1,36 @@
 import { Sort } from '../../pagination'
 import { TableColumn } from '../table-column.model'
 
+export function getDefaultSort<T>(columns: ReadonlyArray<TableColumn<T>>): Sort | undefined {
+
+    const defaultSortColumn: TableColumn<T> | undefined = columns.find(col => col.isDefaultSort)
+        || columns.find(col => !!col.propertyName)
+
+    const defaultSort: Sort | undefined = !defaultSortColumn?.propertyName
+        ? undefined
+        : {
+            direction: defaultSortColumn.defaultSortDirection || 'asc',
+            fieldName: defaultSortColumn.propertyName,
+        }
+
+    return defaultSort
+}
+
 export function getSorted<T extends { [propertyName: string]: any }>(
     data: ReadonlyArray<T>,
-    sort: Sort,
-    cols: ReadonlyArray<TableColumn<T>>
+    cols: ReadonlyArray<TableColumn<T>>,
+    sort?: Sort,
 ): ReadonlyArray<T> {
 
     // get the sort column
-    const sortColumn: TableColumn<T> | undefined = cols.find(col => col.propertyName === sort.fieldName)
+    const sortColumn: TableColumn<T> | undefined = !!sort
+        ? cols.find(col => col.propertyName === sort.fieldName)
+        : undefined
 
     const sortedData: Array<T> = [...data]
 
-    // this should never happen, but
-    // if we didn't find a column, don't sort
-    if (!sortColumn) {
+    // if we don't have a column to sort, don't sort
+    if (!sort || !sortColumn) {
         return sortedData
     }
 

src-ts/lib/table/table-sort/TableSort.tsx

@@ -8,13 +8,13 @@ interface TableSortProps {
     iconClass: string
     isCurrentlySorted: boolean
     propertyName?: string
-    sort: Sort
+    sort?: Sort
     toggleSort: (fieldName: string) => void
 }
 
 const TableSort: FC<TableSortProps> = (props: TableSortProps) => {
 
-    if (!props.propertyName) {
+    if (!props.propertyName || !props.sort) {
         return <></>
     }
 

src-ts/tools/work/work-table/WorkTable.tsx

@@ -137,10 +137,6 @@ const WorkTable: FC<{}> = () => {
             <Table
                 columns={columns}
                 data={filteredResults}
-                defaultSort={{
-                    direction: 'desc',
-                    fieldName: 'created',
-                }}
                 onRowClick={viewWorkDetails}
             />
         )

src-ts/tools/work/work-table/work-table.config.tsx

@@ -35,6 +35,8 @@ export const workListColumns: ReadonlyArray<TableColumn<Work>> = [
         type: 'text',
     },
     {
+        defaultSortDirection: 'desc',
+        isDefaultSort: true,
         label: 'Created',
         propertyName: 'created',
         type: 'date',