From 545c8b76a73929082fe50c874d66d4ee6266d6eb Mon Sep 17 00:00:00 2001
From: Gala <calero.vg@gmail.com>
Date: Thu, 6 Oct 2022 15:31:13 +0200
Subject: [PATCH] use location state instead of a query

---
 nym-wallet/src/pages/bonding/Bonding.tsx      |  2 +-
 .../bonding/node-settings/NodeSettings.tsx    | 22 +++++++++----------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/nym-wallet/src/pages/bonding/Bonding.tsx b/nym-wallet/src/pages/bonding/Bonding.tsx
index 0017935f9e..4e8415a2eb 100644
--- a/nym-wallet/src/pages/bonding/Bonding.tsx
+++ b/nym-wallet/src/pages/bonding/Bonding.tsx
@@ -94,7 +94,7 @@ const Bonding = () => {
         break;
       }
       case 'unbond': {
-        navigate('/bonding/node-settings?tab=unbond');
+        navigate('/bonding/node-settings', { state: 'unbond' });
         break;
       }
       case 'redeem': {
diff --git a/nym-wallet/src/pages/bonding/node-settings/NodeSettings.tsx b/nym-wallet/src/pages/bonding/node-settings/NodeSettings.tsx
index 0ad470184b..976ff21864 100644
--- a/nym-wallet/src/pages/bonding/node-settings/NodeSettings.tsx
+++ b/nym-wallet/src/pages/bonding/node-settings/NodeSettings.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useState } from 'react';
+import React, { useContext, useState, useEffect } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { FeeDetails } from '@nymproject/types';
 import { Box, Typography, Stack, IconButton, Divider } from '@mui/material';
@@ -17,27 +17,26 @@ import { NodeGeneralSettings } from './settings-pages/general-settings';
 import { NodeUnbondPage } from './settings-pages/NodeUnbondPage';
 import { nodeSettingsNav } from './node-settings.constant';
 
-const useQuery = () => {
-  const { search } = useLocation();
-
-  return React.useMemo(() => new URLSearchParams(search), [search]);
-};
-
 export const NodeSettings = () => {
   const theme = useTheme();
   const { network } = useContext(AppContext);
   const { bondedNode, unbond, isLoading } = useBondingContext();
   const navigate = useNavigate();
-  const query = useQuery();
-  const queryTab = query.get('tab');
-  // const tabs = getTabs();
+  const location = useLocation();
 
   const [confirmationDetails, setConfirmationDetails] = useState<ConfirmationDetailProps>();
-  const [value, setValue] = React.useState(queryTab === 'unbond' ? nodeSettingsNav.indexOf('Unbond') : 0);
+  const [value, setValue] = React.useState(0);
   const handleChange = (event: React.SyntheticEvent, tab: number) => {
     setValue(tab);
   };
 
+  useEffect(() => {
+    if (location.state === 'unbond') {
+      const unbondIndex = nodeSettingsNav.indexOf('Unbond');
+      setValue(unbondIndex);
+    }
+  }, [location]);
+
   const handleUnbond = async (fee?: FeeDetails) => {
     const tx = await unbond(fee);
     setConfirmationDetails({
@@ -54,6 +53,7 @@ export const NodeSettings = () => {
       subtitle: error,
     });
   };
+
   return (
     <PageLayout>
       <NymCard