From 361f8fa8702624e018bd68cd8c3d5af6f139d32f Mon Sep 17 00:00:00 2001
From: "m.ray" <16125548+MadalinaRaicu@users.noreply.github.com>
Date: Mon, 3 Oct 2022 09:29:07 +0100
Subject: [PATCH] fix: 1569 navigation link active on market selected refresh
 (#1580)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* chore: ignore apollo errors - to be reverted after API will be fixed

* fix: navigtaion link market - no global local storage init

* fix: update active link check

* fix: fix any hydration errors and default fallback to markets

Co-authored-by: Bartłomiej Głownia <bglownia@gmail.com>
---
 apps/trading/components/navbar/navbar.tsx | 25 +++++++++++++----------
 apps/trading/pages/index.page.tsx         |  8 ++------
 2 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/apps/trading/components/navbar/navbar.tsx b/apps/trading/components/navbar/navbar.tsx
index d21e6231f..b005476a7 100644
--- a/apps/trading/components/navbar/navbar.tsx
+++ b/apps/trading/components/navbar/navbar.tsx
@@ -7,6 +7,7 @@ import { useGlobalStore } from '../../stores/global';
 import { VegaWalletConnectButton } from '../vega-wallet-connect-button';
 import { ThemeSwitcher } from '@vegaprotocol/ui-toolkit';
 import { Vega } from '../icons/vega';
+import { useEffect, useState } from 'react';
 
 interface NavbarProps {
   theme: 'light' | 'dark';
@@ -18,7 +19,12 @@ export const Navbar = ({ theme, toggleTheme }: NavbarProps) => {
     marketId: store.marketId,
     update: store.update,
   }));
-  const tradingPath = marketId ? `/markets/${marketId}` : '/';
+  const [tradingPath, setTradingPath] = useState('/markets');
+  useEffect(() => {
+    if (marketId) {
+      setTradingPath(`/markets/${marketId}`);
+    }
+  }, [marketId]);
   return (
     <div className="dark px-4 flex items-stretch border-b border-default bg-black text-white">
       <div className="flex gap-4 mr-4 items-center h-full">
@@ -31,15 +37,8 @@ export const Navbar = ({ theme, toggleTheme }: NavbarProps) => {
         <NetworkSwitcher />
       </div>
       <nav className="flex items-center">
-        {[
-          {
-            name: t('Trading'),
-            path: tradingPath,
-          },
-          { name: t('Portfolio'), path: '/portfolio' },
-        ].map((route) => (
-          <NavLink key={route.path} {...route} />
-        ))}
+        <NavLink key={'trading'} name={t('Trading')} path={tradingPath} />
+        <NavLink key={'portfolio'} name={t('Portfolio')} path={'/portfolio'} />
       </nav>
       <div className="flex items-center gap-2 ml-auto">
         <ThemeSwitcher theme={theme} onToggle={toggleTheme} />
@@ -59,7 +58,11 @@ interface NavLinkProps {
 
 const NavLink = ({ name, path, testId = name }: NavLinkProps) => {
   const router = useRouter();
-  const isActive = router.asPath === path;
+  const [isActive, setIsActive] = useState(false);
+  useEffect(
+    () => setIsActive(router.asPath.includes(path)),
+    [path, router.asPath]
+  );
   const linkClasses = classNames('mx-2 py-2 self-end border-b-4', {
     'border-vega-yellow text-white cursor-default': isActive,
     'border-transparent text-neutral-400 hover:text-neutral-300': !isActive,
diff --git a/apps/trading/pages/index.page.tsx b/apps/trading/pages/index.page.tsx
index e56d503c2..eb71788dc 100644
--- a/apps/trading/pages/index.page.tsx
+++ b/apps/trading/pages/index.page.tsx
@@ -1,9 +1,5 @@
 import { useMarketList } from '@vegaprotocol/market-list';
-import {
-  addDecimalsFormatNumber,
-  LocalStorage,
-  titlefy,
-} from '@vegaprotocol/react-helpers';
+import { addDecimalsFormatNumber, titlefy } from '@vegaprotocol/react-helpers';
 import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
 import { useRouter } from 'next/router';
 import { useEffect } from 'react';
@@ -23,7 +19,7 @@ export function Index() {
     update({ landingDialog: true });
 
     if (data) {
-      const marketId = LocalStorage.getItem('marketId') || data.markets[0]?.id;
+      const marketId = data.markets[0]?.id;
       const marketName = data.markets[0]?.tradableInstrument.instrument.name;
       const marketPrice = data.marketsData[0]?.markPrice
         ? addDecimalsFormatNumber(