Add top contributors to home page (#55)

src/components/user-list.tsx

@@ -0,0 +1,71 @@
+import { ExclamationTriangleIcon } from "@radix-ui/react-icons";
+import { createColumnHelper } from "@tanstack/react-table";
+import type { UseTRPCQueryResult } from "@trpc/react-query/shared";
+
+import { DataTable } from "@/components/data-table";
+import { DataTableColumnHeader } from "@/components/data-table/data-table-column-header";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import type { RouterOutputs } from "@/utils/api";
+
+const columnHelper =
+  createColumnHelper<RouterOutputs["user"]["getTopContributors"][0]>();
+
+const columns = [
+  columnHelper.accessor("name", {
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Name" className="ml-2" />
+    ),
+    cell: ({ getValue }) => getValue() ?? "Anonymous User",
+  }),
+  columnHelper.accessor("_count.resources", {
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Resources Created" />
+    ),
+  }),
+];
+
+const columnsWithoutSorting = columns.map((column) => ({
+  ...column,
+  enableSorting: false,
+  enableHiding: false,
+}));
+
+export const UserList = ({
+  useFilters = false,
+  usePagination = false,
+  queryResult,
+}: {
+  useFilters?: boolean;
+  usePagination?: boolean;
+  queryResult: UseTRPCQueryResult<
+    RouterOutputs["user"]["getTopContributors"],
+    unknown
+  >;
+}) => {
+  const { data, isLoading } = queryResult;
+
+  if (!isLoading && !data) {
+    return (
+      <Alert variant="destructive">
+        <ExclamationTriangleIcon className="h-4 w-4" />
+        <AlertTitle>Oh no!</AlertTitle>
+        <AlertDescription>
+          Something went wrong. Please try reloading the page.
+        </AlertDescription>
+      </Alert>
+    );
+  }
+
+  const dataTableColumns = useFilters ? columns : columnsWithoutSorting;
+
+  return (
+    <DataTable
+      columns={dataTableColumns}
+      data={data}
+      isLoading={isLoading}
+      filters={useFilters ? ["title"] : undefined}
+      usePagination={usePagination}
+      data-testid="lesson-plan-list"
+    />
+  );
+};

src/pages/index.tsx

@@ -1,16 +1,16 @@
 import Head from "next/head";
 import Link from "next/link";
 
-import { LessonPlanList } from "@/components/lesson-plan-list";
 import { PageLayout } from "@/components/page-layout";
 import { ResourceList } from "@/components/resource-list";
 import { buttonVariants } from "@/components/ui/button";
+import { UserList } from "@/components/user-list";
 import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
 
 export default function Home() {
   const resourcesQueryResult = api.resource.getLatest.useQuery();
-  const lessonPlansQueryResult = api.lessonPlan.getPublic.useQuery({ take: 5 });
+  const topContributorsQueryResult = api.user.getTopContributors.useQuery();
 
   return (
     <>
@@ -33,20 +33,14 @@ export default function Home() {
         <ResourceList queryResult={resourcesQueryResult} />
         <Link
           href="/resource/browse"
-          className={cn(buttonVariants({ variant: "link" }), " mt-2")}
+          className={cn(buttonVariants({ variant: "link" }), "mt-2")}
         >
           Browse all resources
         </Link>
         <h2 className="mb-6 mt-16 scroll-m-20 pb-2 text-3xl font-semibold tracking-tight">
-          Recently Published Lesson Plans
+          Top Contributors
         </h2>
-        <LessonPlanList queryResult={lessonPlansQueryResult} />
-        <Link
-          href="/lesson-plan/browse"
-          className={cn(buttonVariants({ variant: "link" }), " mt-2")}
-        >
-          Browse all public lesson plans
-        </Link>
+        <UserList queryResult={topContributorsQueryResult} />
       </PageLayout>
     </>
   );

src/server/api/routers/user.ts

@@ -1,6 +1,10 @@
 import { TRPCError } from "@trpc/server";
 
-import { createTRPCRouter, privateProcedure } from "@/server/api/trpc";
+import {
+  createTRPCRouter,
+  privateProcedure,
+  publicProcedure,
+} from "@/server/api/trpc";
 import { userUpdateSchema } from "@/utils/zod";
 
 export const userRouter = createTRPCRouter({
@@ -34,4 +38,25 @@ export const userRouter = createTRPCRouter({
         user,
       };
     }),
+  getTopContributors: publicProcedure.query(async ({ ctx }) => {
+    return ctx.db.user.findMany({
+      select: {
+        name: true,
+        _count: true,
+      },
+      where: {
+        resources: {
+          some: {
+            published: true,
+          },
+        },
+      },
+      orderBy: {
+        resources: {
+          _count: "desc",
+        },
+      },
+      take: 5,
+    });
+  }),
 });