fix: moved tab behavior to separated hook

Author: 57Ark

components/safe/view-tx-list.tsx

@@ -6,9 +6,9 @@ import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { SafeTx } from "@/core/safe-tx";
 import { useCurrentTransactions } from "@/hooks/use-current-transactions";
 import { useSafeParams } from "@/hooks/use-safe-params";
-import { useRouter, useSearchParams } from "next/navigation";
-import { useEffect, useMemo, useState } from "react";
+import { useMemo } from "react";
 import { Address } from "viem";
+import useTabs, { TabType } from "../../hooks/use-tabs";
 import { getReportRef } from "../../utils/get-report";
 import { TimelockTxStatus } from "../../utils/tx-status";
 import { Button } from "../ui/button";
@@ -19,21 +19,8 @@ interface SafeViewProps {
   executedProposals: SafeTx[];
 }
 
-export type TabType = "queue" | "execute" | "history";
-
 export function SafeView({ safeAddress }: SafeViewProps) {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-  const [activeTab, setActiveTab] = useState<TabType>();
-
-  useEffect(() => {
-    if (activeTab === undefined) {
-      const tab = searchParams.get("tab") as TabType;
-      setActiveTab(
-        tab && ["queue", "execute", "history"].includes(tab) ? tab : "queue"
-      );
-    }
-  }, [searchParams, activeTab]);
+  const { activeTab, handleTabChange } = useTabs();
 
   const { txs, governor, isLoading, error } =
     useCurrentTransactions(safeAddress);
@@ -97,10 +84,7 @@ export function SafeView({ safeAddress }: SafeViewProps) {
         <div className="p-4">
           <Tabs
             value={activeTab}
-            onValueChange={(value) => {
-              setActiveTab(value as TabType);
-              router.replace(`?tab=${value}`);
-            }}
+            onValueChange={(value) => handleTabChange(value as TabType)}
             className="w-full"
           >
             <TabsList>

hooks/use-tabs.ts

@@ -0,0 +1,32 @@
+"use client";
+
+import { useSearchParams } from "next/navigation";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+
+export type TabType = "queue" | "execute" | "history";
+
+function useTabs() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [activeTab, setActiveTab] = useState<TabType>();
+
+  useEffect(() => {
+    if (activeTab === undefined) {
+      const tab = searchParams.get("tab") as TabType;
+      setActiveTab(
+        tab && ["queue", "execute", "history"].includes(tab) ? tab : "queue"
+      );
+    }
+  }, [searchParams, activeTab]);
+
+  return {
+    activeTab,
+    handleTabChange: (value: TabType) => {
+      setActiveTab(value);
+      router.replace(`?tab=${value}`);
+    },
+  };
+}
+
+export default useTabs;