Tiskiel's avatar

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

Hi everyone,

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

0 likes
0 replies

Please or to participate in this conversation.