refactor: use url instead of useState for selected tab (#25)

src/app/s/detail.tsx

@@ -1,27 +1,50 @@
-import { useState } from "react";
+import { useSearchParams } from "next/navigation";
 
 import { Tabs } from "@/components/tabs";
 import { VSplit, VSplitItem } from "@/components/v-split";
+import { useUpdateSearchParams } from "@/hooks/use-update-search-params";
 
 import { ShinryoukouiBasicTab } from "../../features/shinryoukoui-basic-tab/shinryoukoui-basic-tab";
 import { ShinryoukouiRawTab } from "../../features/shinryoukoui-raw-tab/shinryoukoui-raw-tab";
 
 
 const tabs = [{
   label: "詳細",
-  value: "detail",
+  value: "basic",
 }, {
   label: "Raw",
   value: "raw",
-}];
+}] as const;
+const tabValues = tabs.map(t => t.value);
+type Tab = typeof tabValues[number];
+
+
+function useSelectedTab() {
+  const searchParams = useSearchParams();
+  const selectedTabInSearchParam = searchParams.get("tab");
+  const selectedTab: Tab = selectedTabInSearchParam && tabValues.includes(selectedTabInSearchParam as Tab) ?
+    selectedTabInSearchParam as Tab :
+    tabValues[0];
+
+  const updateSearchParams = useUpdateSearchParams();
+  const setSelectedTab = (tab: Tab) => {
+    updateSearchParams({
+      tab: tab === tabs[0]["value"] ? undefined : tab,
+    }, {
+      mode: "replace",
+    });
+  };
+  return [selectedTab, setSelectedTab] as const;
+}
 
 type DetailProps = {
   row: string[];
   rows: string[][];
 }
 
 export function Detail({ row, rows }: DetailProps) {
-  const [selectedTab, setSelectedTab] = useState("detail");
+  const [selectedTab, setSelectedTab] = useSelectedTab();
+
   return (
     <div className="h-full">
       <VSplit gridTemplateRows="min-content minmax(0, 1fr)">
@@ -30,8 +53,8 @@ export function Detail({ row, rows }: DetailProps) {
         </VSplitItem>
         <VSplitItem pos={2} overflow="auto">
           <div className="p-4">
+            {selectedTab === "basic" && <ShinryoukouiBasicTab row={row} rows={rows} />}
             {selectedTab === "raw" && <ShinryoukouiRawTab row={row} />}
-            {selectedTab === "detail" && <ShinryoukouiBasicTab row={row} rows={rows} />}
           </div>
         </VSplitItem>
       </VSplit>

src/app/s/search-result.tsx

@@ -100,12 +100,18 @@ export default function SearchResult() {
     return normalizeFilterExpression(r.value);
   }, [query]);
 
-  const select = useCallback((row?: string[]) => {
-    const code = row ? getValue(row, getField("診療行為コード")) : undefined;
+  const select = useCallback((row: string[]) => {
+    const code = getValue(row, getField("診療行為コード"));
     updateSearchParams({
       code,
     });
   }, [updateSearchParams]);
+  const unselect = useCallback(() => {
+    updateSearchParams({
+      code: undefined,
+      tab: undefined,
+    });
+  }, [updateSearchParams]);
 
   const handleKeyDown = useCallback((event: KeyboardEvent) => {
     if (event.key === "/") {
@@ -117,9 +123,9 @@ export default function SearchResult() {
     }
     if (event.key === "Escape") {
       event.preventDefault();
-      select(undefined);
+      unselect();
     }
-  }, [select]);
+  }, [unselect]);
   useEffect(() => {
     window.addEventListener("keydown", handleKeyDown);
     return () => {
@@ -194,7 +200,7 @@ export default function SearchResult() {
         </div>
       </div>
       {selectedCode && !isLoading && (
-        <Drawer title={selectedRow ? getValue(selectedRow, nameField) : ""} onClose={select}>
+        <Drawer title={selectedRow ? getValue(selectedRow, nameField) : ""} onClose={unselect}>
           {selectedRow ? <Detail row={selectedRow} rows={data!} /> : <div className="flex items-center justify-center h-full">
             No data found for code {selectedCode}
           </div>}

src/components/tabs.tsx

@@ -3,7 +3,7 @@ import { twMerge } from "tailwind-merge";
 export type TabsProps<T extends string = string> = {
   value: T;
   onChange: (value: T) => void;
-  tabs: {
+  tabs: readonly {
     value: T;
     label: string;
     disabled?: boolean;