What is the best approach to handle URL search params?
Unanswered
Genio posted this in #help-forum
GenioOP
I am creating a filter and its using the URL search params but i was just told that my way works but there is a better method to implement the filter that is more efficient. Can anyone guide me to what would be the better approach here or what i did wrong? Thank you
'use client';
import * as React from 'react';
import { Button } from '@/components/ui/button';
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuLabel,
DropdownMenuRadioGroup,
DropdownMenuRadioItem,
DropdownMenuSeparator,
DropdownMenuTrigger
} from '@/components/ui/';
import {
usePathname,
useRouter,
useSearchParams
} from 'next/navigation';
const IsActive = () =>{
const searchParams = useSearchParams();
const params = new URLSearchParams(searchParams);
const pathname = usePathname();
const { replace } = useRouter();
const handelSearch = (value: string) => {
if (value) {
params.set('status', value);
} else {
params.delete('status');
}
replace(`${pathname}?${params.toString()}`);
};
const isActive =
params.get('status') ?? ('all' && handelSearch('all'));
return (
<DropdownMenu>
<DropdownMenuTrigger asChild className='text-[#808EB3]'>
<Button variant='outline'>
Account Status: {isActive as string | undefined}
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className='w-full'>
<DropdownMenuLabel>Account Status</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuRadioGroup
value={isActive as string | undefined}
onValueChange={value => handelSearch(value)}
>
//radio items with values with values
</DropdownMenuRadioGroup>
</DropdownMenuContent>
</DropdownMenu>
);
}
export default IsActive;