From 9488f517a1418107df2b60f9b818762526b69454 Mon Sep 17 00:00:00 2001
From: frectonz <fraol0912@gmail.com>
Date: Sun, 16 Jun 2024 20:08:48 +0300
Subject: [PATCH] feat: update url based on table

---
 ui/src/routes/tables.lazy.tsx | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/ui/src/routes/tables.lazy.tsx b/ui/src/routes/tables.lazy.tsx
index baa17d2..aaf58a7 100644
--- a/ui/src/routes/tables.lazy.tsx
+++ b/ui/src/routes/tables.lazy.tsx
@@ -6,10 +6,11 @@ import {
   TableProperties,
   Table as TableIcon,
 } from "lucide-react";
+import { z } from "zod";
 import DataGrid from "react-data-grid";
 import { CodeBlock } from "react-code-blocks";
 import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
-import { createFileRoute } from "@tanstack/react-router";
+import { Link, createFileRoute } from "@tanstack/react-router";
 
 import { fetchTable, fetchTables, fetchTableData } from "@/api";
 
@@ -21,17 +22,25 @@ export const Route = createFileRoute("/tables")({
   component: Tables,
   loader: () => fetchTables(),
   pendingComponent: TablesSkeleton,
+  validateSearch: z.object({ table: z.string().optional() }),
 });
 
 function Tables() {
   const data = Route.useLoaderData();
+  const { table } = Route.useSearch();
+
+  const tab = table
+    ? data.tables.findIndex(({ name }) => name === table).toString()
+    : "0";
 
   return (
-    <Tabs defaultValue="0">
+    <Tabs defaultValue={tab}>
       <TabsList>
         {data.tables.map((n, i) => (
           <TabsTrigger key={i} value={i.toString()}>
-            {n.name} ({n.count.toLocaleString()})
+            <Link search={{ table: n.name }}>
+              {n.name} ({n.count.toLocaleString()})
+            </Link>
           </TabsTrigger>
         ))}
       </TabsList>