Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How can I prevent query params from accumulating each time I change the filter?

I have a problem with the accumulation of query params when I choose a new filter to my select.

How can I keep the current filter with each change ?

Here my select :

import SelectInput from '@/Components/SelectInput';
import { ApplicationData } from '@/types/generated';
import { InertiaFormProps } from '@inertiajs/react/types/useForm';
import { PropsWithChildren } from 'react';
import { ApplicationSlugFilterFormProps } from '../Index';

interface ApplicationSlugFiltersProps extends PropsWithChildren {
  applications: ApplicationData[];
  form: InertiaFormProps<ApplicationSlugFilterFormProps>;
}

export default function ApplicationFilterSlug({ applications, form }: ApplicationSlugFiltersProps) {
  return (
    <SelectInput
      form="page-filters"
      name="filter[group.id]"
      value={form.data['filter[application_slug]']}
      className="!h-10"
      onChange={e => {
        form.setData('filter[application_slug]', e.currentTarget.value);
      }}
    >
      <option value="">Tous les groupes</option>
      {applications.map(applications => (
        <option key={applications.id} value={applications.slug}>
          {applications.name}
        </option>
      ))}
    </SelectInput>
  );
}

The inertia form :

const filterForm = useForm<ApplicationSlugFilterFormProps>({
    'filter[name]': queryParameters.get('filter[name]') ?? '',
    'filter[application_slug]': queryParameters.get('filter[application_slug]') ?? '',
  });

The type used :

export type ApplicationSlugFilterFormProps = {
  'filter[name]': string;
  'filter[application_slug]': string;
};

My base url :

http://myapp.test/admin/settings/groups

My base url with first filter :

http://myapp.test/admin/settings/groups?filter%5Bname%5D=&filter%5Bapplication_slug%5D=tts

My base path above with a new filter applied :

http://myapp.test/admin/settings/groups?filter%5Bname%5D=&filter%5Bapplication_slug%5D=tts&filter%5Bname%5D=&filter%5Bapplication_slug%5D=workflow

The goal is to make an url look like the second path and not have a duplicate filter at each changes.

Do you have any idea how to do this?

Thank you in advance

Tags:

2

Answers


  1. 0

    Use URLSearchParams object, part of the URL object.

    1. parse the URL using URL constructor
    2. use the set method on the url’s searchParams object

    The set() method of the URLSearchParams interface sets the value associated with a given search parameter to the given value. If there were several matching values, this method deletes the others. If the search parameter doesn’t exist, this method creates it.

    1. convert the URL object back to a string
    // 1
const url = new URL("http://myapp.test/admin/settings/groups?filter%5Bname%5D=&filter%5Bapplication_slug%5D=tts")

// 2
url.searchParams.set("filter[application_slug]", "workflow")

// 3
console.log(String(url))
    http://myapp.test/admin/settings/groups?filter%5Bname%5D=&filter%5Bapplication_slug%5D=workflow
    Login or Signup to reply.
  2. 0

    It is better to rest the "useState" variable when inserting a new filter. Create a handler function in the select onChnage event called filterHandler.
    then you can check the form.data and rest it. Then save it using form.setData.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search