Re-support AsyncTable sorting (#459)

src/main/webapp/app/entities/fda-submission/constant.tsx

@@ -15,7 +15,7 @@ export const FDA_SUBMISSION_TABLE_COLUMNS: Column<IFdaSubmission>[] = [
   },
   {
     accessor: 'number',
-    Header: 'number',
+    Header: 'Number',
   },
   {
     accessor: 'supplementNumber',

src/main/webapp/app/entities/transcript/transcript.tsx

@@ -37,7 +37,13 @@ export const Transcript = (props: ITranscriptProps) => {
       },
     },
     { accessor: 'ensemblTranscriptId', Header: 'Ensembl Transcript ID' },
-    { accessor: 'canonical', Header: 'Is Canonical' },
+    {
+      accessor: 'canonical',
+      Header: 'Is Canonical',
+      Cell(cell: { original }): JSX.Element {
+        return <span>{cell.original.canonical ? 'Yes' : 'No'}</span>;
+      },
+    },
     { accessor: 'ensemblProteinId', Header: 'Ensembl Protein ID' },
     { accessor: 'referenceSequenceId', Header: 'RefSeq' },
     getEntityTableActionsColumn(ENTITY_TYPE.TRANSCRIPT),

src/main/webapp/app/shared/table/OncoKBAsyncTable.tsx

@@ -1,9 +1,12 @@
 import React, { useEffect, useState } from 'react';
-import ReactTable, { TableProps } from 'react-table';
+import ReactTable, { SortingRule, TableProps } from 'react-table';
 import { Col, Input, Row } from 'reactstrap';
 import { ASC, DESC, ITEMS_PER_PAGE } from 'app/shared/util/pagination.constants';
 import { debouncedSearchWithPagination } from '../util/pagination-crud-store';
 import { IQueryParams, ISearchParams } from '../util/jhipster-types';
+import { overridePaginationStateWithQueryParams } from '../util/entity-utils';
+import { useHistory } from 'react-router-dom';
+import * as H from 'history';
 
 /* eslint-disable @typescript-eslint/ban-types */
 export interface IOncoKBAsyncTableProps<T> extends Partial<TableProps<T>> {
@@ -21,10 +24,23 @@ export type PaginationState<T> = {
   activePage: number;
 };
 
+function paginationToSortingRule<T>(paginationState: PaginationState<T>): SortingRule {
+  return {
+    id: paginationState.sort as string,
+    desc: paginationState.order === 'desc',
+  };
+}
+
 export const OncoKBAsyncTable = <T extends object>(props: IOncoKBAsyncTableProps<T>) => {
+  const history: H.History = useHistory();
   const [searchKeyword, setSearchKeyword] = useState('');
   const [pageSize, setPageSize] = useState(props.defaultPageSize || ITEMS_PER_PAGE);
-  const [paginationState, setPaginationState] = useState(props.initialPaginationState || { sort: 'id', activePage: 0, order: 'asc' });
+  const [paginationState, setPaginationState] = useState(
+    overridePaginationStateWithQueryParams(
+      props.initialPaginationState || { sort: 'id', activePage: 0, order: 'asc', itemsPerPage: 1 },
+      history.location.search,
+    ),
+  );
 
   useEffect(() => {
     if (searchKeyword) {
@@ -48,9 +64,20 @@ export const OncoKBAsyncTable = <T extends object>(props: IOncoKBAsyncTableProps
 
   const handleFetchData = (state: any) => {
     setPageSize(state.pageSize);
-    setPaginationState({ ...paginationState, activePage: state.page + 1 });
+    setPaginationState(oldState => ({ ...oldState, activePage: state.page + 1 }));
   };
 
+  const sortEntities = () => {
+    const endURL = `?page=${paginationState.activePage}&sort=${paginationState.sort as string},${paginationState.order}`;
+    if (history.location.search !== endURL) {
+      history.push(`${history.location.pathname}${endURL}`);
+    }
+  };
+
+  useEffect(() => {
+    sortEntities();
+  }, [paginationState.activePage, paginationState.order, paginationState.sort, searchKeyword]);
+
   return (
     <div>
       <Row className="justify-content-end mb-3">
@@ -71,8 +98,16 @@ export const OncoKBAsyncTable = <T extends object>(props: IOncoKBAsyncTableProps
             manual
             pages={Math.ceil(props.totalItems / pageSize)}
             pageSize={pageSize}
+            sorted={[paginationToSortingRule(paginationState)]}
             onFetchData={handleFetchData}
             className={`-striped -highlight oncokbReactTable ${props.fixedHeight ? 'fixedHeight' : ''} ${props.className}`}
+            onSortedChange={newSorted => {
+              setPaginationState(oldState => ({
+                ...oldState,
+                sort: newSorted[0].id as keyof T,
+                order: newSorted[0].desc ? 'desc' : 'asc',
+              }));
+            }}
           />
         </Col>
       </Row>

src/main/webapp/app/shared/util/entity-utils.ts

@@ -3,6 +3,8 @@ import { IPaginationBaseState } from 'react-jhipster';
 import { ENTITY_TO_TITLE_MAPPING, ENTITY_TYPE, PAGE_ROUTE } from 'app/config/constants/constants';
 import pluralize from 'pluralize';
 import _ from 'lodash';
+import { PaginationState } from '../table/OncoKBAsyncTable';
+import { ASC, DESC } from './pagination.constants';
 
 /**
  * Removes fields with an 'id' field that equals ''.
@@ -36,19 +38,25 @@ export const mapSelectOptionList = (selectedOptions: any[]) => {
   return selectedOptions ? selectedOptions.map(option => ({ id: option.value })) : [];
 };
 
-export const overridePaginationStateWithQueryParams = (paginationBaseState: IPaginationBaseState, locationSearch: string) => {
+export const overridePaginationStateWithQueryParams = <T>(paginationBaseState: PaginationState<T>, locationSearch: string) => {
   const params = new URLSearchParams(locationSearch);
   const page = params.get('page');
   const sort = params.get('sort');
   if (page && sort) {
     const sortSplit = sort.split(',');
     paginationBaseState.activePage = +page;
-    paginationBaseState.sort = sortSplit[0];
-    paginationBaseState.order = sortSplit[1];
+    paginationBaseState.sort = sortSplit[0] as keyof T;
+    if (isSortOrder(sortSplit[1])) {
+      paginationBaseState.order = sortSplit[1];
+    }
   }
   return paginationBaseState;
 };
 
+const isSortOrder = (value: string): value is typeof ASC | typeof DESC => {
+  return value === 'asc' || value === 'desc';
+};
+
 export const getEntityPaginationSortParameter = (field: string, sortDirection: string) => {
   return `${field},${sortDirection}`;
 };