[Additional excercises @Mosh ] Are there anywhere we can check solutions for additional excercises?

Next.js
1

Hi guys,

I’ve implemented desc sort, which is a client event click the table header to toggle the sort order, however in the meanwhile, I make the Prisma client take the sort order from the query params and pass it into the prisma.issues.findMany() to query the ‘asc’ or ‘desc’ ordered issues from the backend.

app/issues/list/IssueSort.tsx

"use client";
import { ArrowUpIcon, ArrowDownIcon } from "@radix-ui/react-icons";
import NextLink from "next/link";
import { issueQueryParams } from "./IssuesTable";
import { Issue } from "@prisma/client";
import { useState } from "react";
import { useRouter } from "next/navigation";

type Props = {
  searchParams: issueQueryParams;
  column: {
    value: keyof Issue;
    label: string;
  };
};

const IssueSort = ({ searchParams, column }: Props) => {
  const [sortOrder, setSortOrder] =
    useState<issueQueryParams["sortOrder"]>("desc");
  const router = useRouter();

  const handleSortClick = () => {
    setSortOrder(sortOrder === "asc" ? "desc" : "asc");
    router.refresh();
  };
  return (
    <div>
      <NextLink
        href={{
          query: {
            ...searchParams,
            orderBy: column.value,
            sortOrder: sortOrder,
          },
        }}
        onClick={() => {
          handleSortClick();
        }}
      >
        {column.label}
      </NextLink>
      {searchParams.orderBy === column.value ? (
        sortOrder === "desc" ? (
          <ArrowUpIcon className="inline" />
        ) : (
          <ArrowDownIcon className="inline" />
        )
      ) : null}
    </div>
  );
};

export default IssueSort;

app/issues/list/page.tsx

  const orderBy: { [key: string]: "asc" | "desc" } | undefined =
    columnNames.includes(searchParams.orderBy)
      ? { [searchParams.orderBy]: searchParams.sortOrder || "desc" }
      : { createdAt: "desc" };

  const issues = await prisma.issue.findMany({
    where,
    orderBy,
    skip: (page - 1) * pageSize,
    take: pageSize,
  });

I experience some lag issues by doing this way, and I don’t know if we should sort issues on the server side, or on the client side instead.

this is a quick demo:
still in development for more features and refactorings…

2

Hello Felix please do you have a discount code for the next js course?
How much did you purchase the course

3

I was able to do it inside the component without using the client:

interface Props {
  searchParams: {
    status: Status;
    orderBy: keyof Issue;
    sortOrder: "asc" | "desc";
  };
}

const orderBy = searchParams.orderBy
    ? { [searchParams.orderBy]: searchParams.sortOrder }
    : undefined;

  const toggleOrder = () => {
    return !searchParams.sortOrder || searchParams.sortOrder === "desc" ? "asc" : "desc";
  };

<NextLink
    href={{
       query: { ...searchParams, orderBy: column.value, sortOrder: toggleOrder() }
    }}
 >
{column.label}
</NextLink>
{column.value === searchParams.orderBy &&
    (searchParams.sortOrder === "asc" ? <ArrowUpIcon /> : <ArrowDownIcon />)}
1 Like
4

I got the ascend/descend sort ordering to work using the same structure as Mosh (no change of server/clients components or additional components). But interestingly it works great in development, but is flaky in production which I cannot figure out why. In production the searchParams don’t always update on a click, plus using the status filter doesn’t reset when ‘All’ is selected (the extisting status searchParam remains in the url… most of the time).

Here is the additional code snips I added to the production version at the end of the course
(I used some of the examples already outlined in this thread)

in issueTable.tsx:

const toggleOrder = () => {
    return !searchParams.sortOrder || searchParams.sortOrder === "desc"
      ? "asc"
      : "desc";


          <NextLink
            href={{
              query: {
                ...searchParams,
                orderBy: column.value,
                sortOrder: toggleOrder(),
              },
            }}
          >
            {column.label}
          </NextLink>

              {column.value === searchParams.orderBy &&
                (searchParams.sortOrder === "asc" ? (
                  <ArrowUpIcon className="inline" />
                ) : (
                  <ArrowDownIcon className="inline" />
                ))}

in app/list/page.tsx:
To order the prisma search by the sortOrder param

  const orderBy = columnsNames.includes(searchParams.orderBy)
    ? { [searchParams.orderBy]: `${searchParams.sortOrder}` }
    : undefined;

In IssueStatusFilter.tsx
In the onValueChange(status) handler I added the sortOrder searchParam if an orderBy param is present (if there is on orderBy searchParam, there will be a sortOrder searchParam also):

        if (searchParams.get("orderBy")) {
          params.append("orderBy", searchParams.get("orderBy")!);
          params.append("sortOrder", searchParams.get("sortOrder")!);
        }

Really fast and effective in developement, buy buggy and sluggish in production. Any ideas why???

5

works pretty good without a client issuetable