110 user table table pagination not functioning (#150)

apps/web/package.json

@@ -28,6 +28,7 @@
     "@radix-ui/react-switch": "^1.0.3",
     "@react-email/components": "^0.0.21",
     "@t3-oss/env-nextjs": "^0.10.1",
+    "@tanstack/match-sorter-utils": "^8.19.4",
     "@tanstack/react-query": "^5.51.11",
     "@tanstack/react-table": "^8.19.3",
     "@trpc/client": "11.0.0-rc.466",

apps/web/src/app/admin/users/page.tsx

@@ -3,41 +3,16 @@ import { DataTable } from "@/components/admin/users/UserDataTable";
 import { columns } from "@/components/admin/users/UserColumns";
 import { Button } from "@/components/shadcn/ui/button";
 import { FolderInput } from "lucide-react";
-import { DefaultPagination } from "@/components/admin/users/DefaultPagination";
-import SearchBar from "@/components/admin/users/SearchBar";
+import { getAllUsers } from "db/functions";
 import { userCommonData } from "db/schema";
 
-export default async function Page({
-	searchParams,
-}: {
-	searchParams: { [key: string]: string | undefined };
-}) {
-	// COME BACK AND CHANGE
-	const maxPerPage = 30;
-
-	let page = +(searchParams["page"] ?? "1");
-	let user = searchParams["user"] ?? "";
-	const checkedBoxes = searchParams["checkedBoxes"] ?? "";
-
-	console.log(checkedBoxes);
-
-	const start = maxPerPage * (page - 1);
-	const end = maxPerPage + start;
-
-	//   Might want to work with cache in prod to see if this will be plausible to do
-	const userData = await db.query.userCommonData.findMany({
-		with: { hackerData: true },
-		where: and(
-			or(
-				ilike(userCommonData.firstName, `%${user}%`),
-				ilike(userCommonData.lastName, `%${user}%`),
-			),
-		),
-	});
+// This begs a question where we might want to have an option later on to sort by the role as we might want different things
+export default async function Page() {
+	const userData = await getAllUsers();
 
 	return (
-		<div className="mx-auto max-w-7xl px-5 pt-44">
-			<div className="mb-5 grid w-full grid-cols-3">
+		<div className="mx-auto max-w-7xl px-5 pt-40">
+			<div className="mb-5 grid w-full grid-cols-2">
 				<div className="flex items-center">
 					<div>
 						<h2 className="text-3xl font-bold tracking-tight">
@@ -48,7 +23,6 @@ export default async function Page({
 						</p>
 					</div>
 				</div>
-				<SearchBar />
 				<div className="flex items-center justify-end">
 					<a download href="/api/admin/export">
 						<Button className="flex gap-x-1">
@@ -58,25 +32,17 @@ export default async function Page({
 					</a>
 				</div>
 			</div>
-			{/* TODO: Would very much like to not have "as any" here in the future */}
-			<div className="flex w-full space-x-10">
+			<div className="flex w-full justify-center">
 				{userData && userData.length > 0 ? (
 					<>
-						<DataTable
-							columns={columns}
-							data={userData.slice(start, end) as any}
-						/>
+						<DataTable columns={columns} data={userData} />
 					</>
 				) : (
 					<div className="flex w-full items-center justify-center">
 						<h1>No Results :(</h1>
 					</div>
 				)}
-				{/* <Filters/> */}
 			</div>
-			<DefaultPagination
-				maxPages={Math.ceil(userData.length / maxPerPage)}
-			/>
 		</div>
 	);
 }