Next.js Discord

Discord Forum

What is the best approach to handle URL search params?

Unanswered
Genio posted this in #help-forum
Open in Discord
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;

0 Replies