Section filtering,sorting and pagination

Next.js
1

In this section I have a couple of issues
first on IssueStatusFilter.tsx

const IssueStatusFilter = () => {
const router = useRouter();

return (
    <Select.Root
    onValueChange={(status) => {
        const query = status ? `?status=${status}` : '';
        router.push('/issues/list' + query);
    }}
    >
        <Select.Trigger placeholder="Filter by status..." />
        <Select.Content>
            {statuses.map((status) => (
                <Select.Item 
                    key={status.value} 
                    value={status.value}
                >
                    {status.label}
                </Select.Item>
            ))}
        </Select.Content>
    </Select.Root>
);

};
<Select.Item /> must have a value prop that is not an empty string.

I fixed it by change onValueChange

onValueChange={(value) => {
const statusToSend = value === ‘ALL’ ? ‘’ : value;
const query = statusToSend ? ?status=${statusToSend} : ‘’;
router.push(‘/issues/list’ + query);
}}
>
its work fine but the IssuePage get the status as undefined

interface Props {
searchParams: { status: Status };
}

const IssuePage = async({ searchParams }: Props) => {
console.log(“searchParams”, searchParams.status) // undefined
----- rest of code
}

next-app version 15.0.3 and raduix theme ^3.1.6
anyone solve this problem?

2

Hi,

I had the same issue (because I’m also using the latest nextjs and radix-ui version).

Anyway, I checked the Nextjs documentation and it seems like v15 is handling the props a bit different.
It seems like now the props are a Promise.
Check the documentation bellow.
Upgrading to NextJS 15

In IssueStatusFilter.tsx

        const query = status === "_all" ? "" : `?status=${status}`;
        router.push("/issues/list" + query);

…

      <Select.Content>
        {statuses.map((status) => (
          <Select.Item
            key={status.value || "_all"}
            value={status.value || "_all"}
          >
            {status.label}
          </Select.Item>
        ))}
      </Select.Content>

In page.tsx

type SearchParams = Promise<{ status: Status }>;

interface Props {
  searchParams: SearchParams;
}

export default async function IssuesPage(props: Props) {
  const searchParams = await props.searchParams;
  const statuses = Object.values(Status);

  const status = statuses.includes(searchParams.status)
    ? searchParams.status
    : undefined;

  const issues = await prisma.issue.findMany({
    where: {
      status,
    },
  });

…
remove the

export default IssuePage