From 088bbcf0ba7f7224f9b09c543960d3f6b7836298 Mon Sep 17 00:00:00 2001 From: lance10030 <lance10030@163.com> Date: Thu, 8 Aug 2024 15:01:23 +0800 Subject: [PATCH] feat: save network in query --- src/components/NavMenusSection/index.tsx | 24 +++++++++++++++++++++--- 1 file changed, 21 insertions(+), 3 deletions(-) diff --git a/src/components/NavMenusSection/index.tsx b/src/components/NavMenusSection/index.tsx index 9a9e288..2cb5786 100644 --- a/src/components/NavMenusSection/index.tsx +++ b/src/components/NavMenusSection/index.tsx @@ -1,4 +1,4 @@ -import { useState } from "react"; +import { useCallback, useEffect, useState } from "react"; import { Bars3Icon, BookOpenIcon, @@ -12,6 +12,7 @@ import { Button } from "../Button"; import { NavItem } from "./NavItem"; import { useSnapshot } from "valtio"; import { Network, setNetwork } from "@/store/globalStore"; +import { usePathname, useRouter, useSearchParams } from "next/navigation"; const resolveApiUrl = () => // TODO @@ -19,12 +20,29 @@ const resolveApiUrl = () => export const NavMenusSection: React.FC = () => { const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); - - + const router = useRouter() + const pathname = usePathname() + const searchParams = useSearchParams() + const createQueryString = useCallback( + (value: string) => { + const params = new URLSearchParams(searchParams.toString()) + params.set('n', value) + return params.toString() + }, + [searchParams] + ) const handleSelectNetwork = (e: Network) => { setNetwork(e) + router.push(pathname + '?' + createQueryString(e)) } + useEffect(() => { + const n = searchParams.get('n') + if (n) { + setNetwork(n as Network) + } + }, [searchParams]) + return ( <div className="relative mx-auto flex max-w-screen-xl flex-wrap items-center justify-between p-4"> <Button