DEV Community

Cover image for Apply Filter while redirecting links using React.JS and Umi.JS
Manas Mishra
Manas Mishra

Posted on

Apply Filter while redirecting links using React.JS and Umi.JS

Recently, working on a project (Which is built using ReactJS and routing is based on Umi.JS). And, I got a scenario where, I created a statistics page (in which I am showing the count of every different type of data of a particular category), and then I have to create a button of each category, which should push to that particualr category page (using history.push()).

Branch Statistics page

Now, initially, when I click over "View Complaints" button then it used to just take me to Complaints page.

View Complaints

Now, what I want to do is when I click on the "View Complaints" then instead of just pushing the history to that specific page, it should even pass the specific branchId as a query, which will behave as a filter over the pushed page (complaints page).

What I did?

At first, I focused on the button to be clicked, which means "View Complaints" Page.

At first, my button code was looking like this...

 <Button
  type="primary"
  onClick={(event) => {
  event.stopPropagation();
  history.push(`/complaints/all`);
  }}>
  View Complaints
 </Button>
Enter fullscreen mode Exit fullscreen mode

As, I already mentioned that I have to send branchId as a query to apply filter, so I have to send the query with the path, inside history.push() and now, it looks like this.

<Button
type="primary"
onClick={(event) => {
event.stopPropagation();
history.push({
pathname: `/complaints/all`,
query: {
branchId: profileId,
  },
 });
}}>
View Complaints
</Button>
Enter fullscreen mode Exit fullscreen mode

and now with this thing, it will pass query, when you click on the button.

query id

But, this will still not apply the filter, and for that, I have to pass query to the filter function, which is eventually getting the filtered data from the API.

import { useLocation } from 'umi';

const { pathname, query: branchQuery } = useLocation();
Enter fullscreen mode Exit fullscreen mode

and then, I am calling the query inside the function, where we are dispatching the API, with the query as a payload.

const getFinishedComplaints = () => {
    let query = {
      statusId: 'CRQ_CLOSED',
      customerId: currentUser?.personal_details?.organizationDetails?.orgPartyId,
      keyword: searchText,
      startIndex: completeStartIndex,
      viewSize: completeViewSize,
    };

    if (branchQuery?.branchId) {
      query = { ...query, branchId: branchQuery?.branchId };
    }

    dispatch({
      type: 'product/getFinishedComplaints',
      payload: {
        query,
      },
    });
  };
Enter fullscreen mode Exit fullscreen mode

And, in this way, you can easily apply filter functionality, by passing query using history.push() of Umi.js.

Alternative way

You can even use react-router-dom for above given functionality.

Top comments (0)