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

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…

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