I have this React page generated by JHipster:
import ......
export interface IOrdersProps extends StateProps, DispatchProps, RouteComponentProps<{ url: string }> {}
export const Orders = (props: any) => {
const [paginationState, setPaginationState] = useState(
overridePaginationStateWithQueryParams(getSortState(props.location, ITEMS_PER_PAGE, 'id'), props.location.search)
);
const [searchNameParam, setSearchNameParam] = useState('');
const lastSearchNameParam = useRef(searchNameParam);
const [ordersList, setOrdersList] = useState<any>([]);
const [itemsSize, setItemsSize] = useState<any>([]);
const [tradesList, setTradesList] = useState<any>();
const [twapList, setTwapList] = useState<any>();
const getAllEntities = async () => {
const page = paginationState.activePage - 1;
const itemsPerPage = paginationState.itemsPerPage;
console.log('Refreshing page: ' + page);
const apiUrl = 'api/orders?page=' + page + '&size=' + itemsPerPage + '&searchNameParam=' + searchNameParam;
const result = await axios.get<IOrders>(apiUrl);
setOrdersList(result.data);
};
const sortEntities = () => {
getAllEntities();
const endURL = `?page=${paginationState.activePage}&sort=${paginationState.sort},${paginationState.order}`;
if (props.location.search !== endURL) {
props.history.push(`${props.location.pathname}${endURL}`);
}
};
useEffect(() => {
sortEntities();
}, [paginationState.activePage, paginationState.order, paginationState.sort]);
useEffect(() => {
const request = async () => {
const apiUrl = 'api/ordersCount';
const result = await axios.get<IOrders>(apiUrl);
setItemsSize(result.data);
};
request();
getAllEntities();
}, []);
const sort = p => () => {
setPaginationState({
...paginationState,
order: paginationState.order === 'asc' ? 'desc' : 'asc',
sort: p,
});
};
const handlePagination = currentPage => {
setTradesList(null);
setTwapList(null);
setPaginationState({
...paginationState,
activePage: currentPage,
});
};
const handleSyncList = () => {
sortEntities();
};
const { match, loading, totalItems } = props;
useEffect(() => {
if (searchNameParam !== lastSearchNameParam.current) {
handleSyncList();
lastSearchNameParam.current = searchNameParam;
}
}, [searchNameParam])
return (
<div>
<div>
<Table>
............
<thead>
<tr>
<th>
<div>
<span>Filter</span>
<input onChange={e => setSearchNameParam(e.target.value)}/>
</div>
................
</tr>
</thead>
{ordersList && ordersList.length > 0 ? (
<tbody>
{ordersList.map((orders, i) => (
))}
</tbody>
) : (
!loading && <div className="alert alert-warning">No Orders found</div>
)}
</Table>
</div>
{/*{props.totalItems ? (*/}
<div className={ordersList && ordersList.length > 0 ? '' : 'd-none'}>
{/*<Row className="justify-content-center">*/}
{/* <JhiItemCount page={paginationState.activePage} total={totalItems} itemsPerPage={paginationState.itemsPerPage} />*/}
{/*</Row>*/}
<Row className="justify-content-center">
<JhiPagination
activePage={paginationState.activePage}
onSelect={handlePagination}
maxButtons={5}
itemsPerPage={paginationState.itemsPerPage}
totalItems={itemsSize}
/>
</Row>
</div>
</Tab>
<Tab eventKey={'Asset Volumes'} title="Asset Volumes" onSelect={() => {}}>
<AssetVolumes />
</Tab>
</Tabs>
</div>
);
};
const mapStateToProps = ({ orders }: IRootState) => ({
ordersList: orders.entities,
loading: orders.loading,
totalItems: orders.totalItems,
});
const mapDispatchToProps = {
getEntities,
};
type StateProps = ReturnType<typeof mapStateToProps>;
type DispatchProps = typeof mapDispatchToProps;
export default connect(mapStateToProps, mapDispatchToProps)(Orders);
When I enter something into search area API request is made and new data is populated.
But pagination is not updated.
How I can force the pagination pages to be recalculated when I receive new pages of data with search criteria?
