fix: preventing page switching when opening side panel

aeecleclair · Feb 9, 2025 · ec4974e · ec4974e
1 parent bd15d17
commit ec4974e
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 10 deletions.
diff --git a/src/components/admin/TeamsPreview.tsx b/src/components/admin/TeamsPreview.tsx
@@ -1,7 +1,6 @@
 import Link from "next/link";
 import { ArrowUpRight } from "lucide-react";
 
-import { Badge } from "@/src/components/ui/badge";
 import { Button } from "@/src/components/ui/button";
 import {
   Card,
@@ -20,8 +19,7 @@ import {
 } from "@/src/components/ui/table";
 import { Skeleton } from "../ui/skeleton";
 import { TeamPreview } from "@/src/api/hyperionSchemas";
-import { CircularProgressBar } from "../custom/CircularProgressBar";
-import { useRouter } from "next/navigation";
+import { useRouter, useSearchParams } from "next/navigation";
 import { ProgressBadge } from "../custom/ProgressBadge";
 
 interface TeamsPreviewProps {
@@ -31,9 +29,13 @@ interface TeamsPreviewProps {
 
 export const TeamsPreview = ({ teams, isLoading }: TeamsPreviewProps) => {
   const router = useRouter();
+  const searchParams = useSearchParams();
 
   function onTeamClick(teamId: string) {
-    router.push("/admin/teams?teamId=" + teamId);
+    const current = new URLSearchParams(Array.from(searchParams.entries()));
+    current.set("teamId", teamId);
+    const query = current.toString();
+    router.replace(`/admin/teams?${query}`);
   }
 
   return (

diff --git a/src/components/admin/teams/DataTable.tsx b/src/components/admin/teams/DataTable.tsx
@@ -27,7 +27,7 @@ import {
   TableHeader,
   TableRow,
 } from "../../ui/table";
-import { useRouter } from "next/navigation";
+import { useRouter, useSearchParams } from "next/navigation";
 import { TeamPreview } from "@/src/api/hyperionSchemas";
 import { toast } from "../../ui/use-toast";
 
@@ -48,6 +48,7 @@ export function DataTable<TData, TValue>({
   );
   const [sorting, setSorting] = React.useState<SortingState>([]);
   const router = useRouter();
+  const searchParams = useSearchParams();
 
   const table = useReactTable({
     data,
@@ -84,9 +85,26 @@ export function DataTable<TData, TValue>({
       return;
     }
     const id = (row.original as TeamPreview).id;
-    router.replace(`/admin/teams?teamId=${id}`);
+    const current = new URLSearchParams(Array.from(searchParams.entries()));
+    current.set("teamId", id);
+    const query = current.toString();
+    router.replace(`/admin/teams?${query}`);
   }
 
+  React.useEffect(() => {
+    const current = new URLSearchParams(Array.from(searchParams.entries()));
+    const page = current.get("page");
+    if (page) {
+      let index = Number(page);
+      if (index < 0) {
+        index = 0;
+      } else if (index > table.getPageCount()) {
+        index = table.getPageCount() - 1;
+      }
+      table.setPageIndex(index);
+    }
+  }, [searchParams, table]);
+
   return (
     <div className="space-y-4">
       <DataTableToolbar table={table} />

diff --git a/src/components/admin/teams/DataTablePagination.tsx b/src/components/admin/teams/DataTablePagination.tsx
@@ -14,6 +14,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "../../ui/select";
+import { useRouter, useSearchParams } from "next/navigation";
 
 interface DataTablePaginationProps<TData> {
   table: Table<TData>;
@@ -22,6 +23,16 @@ interface DataTablePaginationProps<TData> {
 export function DataTablePagination<TData>({
   table,
 }: DataTablePaginationProps<TData>) {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  function setPage(pageIndex: number) {
+    const current = new URLSearchParams(Array.from(searchParams.entries()));
+    current.set("page", `${pageIndex}`);
+    const query = current.toString();
+    router.replace(`/admin/teams?${query}`);
+  }
+
   return (
     <div className="flex items-center justify-between px-2">
       <div className="flex-1 text-sm text-muted-foreground">
@@ -57,7 +68,7 @@ export function DataTablePagination<TData>({
           <Button
             variant="outline"
             className="hidden h-8 w-8 p-0 lg:flex"
-            onClick={() => table.setPageIndex(0)}
+            onClick={() => setPage(0)}
             disabled={!table.getCanPreviousPage()}
           >
             <span className="sr-only">Go to first page</span>
@@ -66,7 +77,7 @@ export function DataTablePagination<TData>({
           <Button
             variant="outline"
             className="h-8 w-8 p-0"
-            onClick={() => table.previousPage()}
+            onClick={() => setPage(table.getState().pagination.pageIndex - 1)}
             disabled={!table.getCanPreviousPage()}
           >
             <span className="sr-only">Go to previous page</span>
@@ -75,7 +86,7 @@ export function DataTablePagination<TData>({
           <Button
             variant="outline"
             className="h-8 w-8 p-0"
-            onClick={() => table.nextPage()}
+            onClick={() => setPage(table.getState().pagination.pageIndex + 1)}
             disabled={!table.getCanNextPage()}
           >
             <span className="sr-only">Go to next page</span>
@@ -84,7 +95,7 @@ export function DataTablePagination<TData>({
           <Button
             variant="outline"
             className="hidden h-8 w-8 p-0 lg:flex"
-            onClick={() => table.setPageIndex(table.getPageCount() - 1)}
+            onClick={() => setPage(table.getPageCount() - 1)}
             disabled={!table.getCanNextPage()}
           >
             <span className="sr-only">Go to last page</span>