Change Default Sort and Order for React Jhipster

user_1412803 0
Viewed 402

I am using Jhipster 6.8.0 and trying to change default sorting (sort by : publishedDate and order : desc) based on the following code:

const [paginationState, setPaginationState] = useState(getSortState(props.location, ITEMS_PER_PAGE));

  const getAllEntities = () => {
    if (search) {
      props.getSearchEntities(
        search,
        paginationState.activePage - 1,
        paginationState.itemsPerPage,
        `${paginationState.sort},${paginationState.order}`
      );
    } else {
      // setPaginationState({
      //   ...paginationState,
      //   order: 'desc',
      //   sort: 'publishedDate'
      // });
      props.getEntities(paginationState.activePage - 1, paginationState.itemsPerPage, `publishedDate,desc`);
    }
  };

Added the relevant interface

export interface IPaginationBaseState {
    itemsPerPage: number;
    sort: string;
    order: string;
    activePage: number;
}
export declare const getSortState: (location: any, itemsPerPage: any) => IPaginationBaseState;

The commented part is how I currently change the default sorting, however I dont think thats the best approach because the page loads 2 times.

How can I change the useState to initialize the sorting by publishedDate and desc order ?

jhipster reactjs
2 Answers

I got it working based on the question and answer in useState object set

const[paginationState, setPaginationState] = useState({activePage: 1, itemsPerPage: ITEMS_PER_PAGE, sort: 'publishedDate', order: 'desc'});
user_14128030

using jhipster 7.6.0:

just modify your .tsx as follow:

  const [paginationState, setPaginationState] = useState(
overridePaginationStateWithQueryParams(getSortState(props.location, ITEMS_PER_PAGE, 'publishedDate,desc'), props.location.search));
user_47911620
Related