chore: [console-lite] - portfolio - use more advanced react router (#1467)

* chore: [console-lite] - portfolio use mora advanced react router

* chore: [console-lite] - portfolio - fix container dimms

Co-authored-by: maciek <maciek@vegaprotocol.io>

apps/console-lite/src/app/components/portfolio/accounts/accounts.tsx

@@ -1,4 +1,5 @@
 import { useMemo, useRef } from 'react';
+import { useOutletContext } from 'react-router-dom';
 import type { AgGridReact } from 'ag-grid-react';
 import { PriceCell, useDataProvider } from '@vegaprotocol/react-helpers';
 import type {
@@ -23,11 +24,8 @@ interface AccountObj extends AccountFieldsFragment {
   id: string;
 }
 
-interface Props {
-  partyId: string;
-}
-
-const AccountsManager = ({ partyId }: Props) => {
+const AccountsManager = () => {
+  const { partyId = '' } = useOutletContext<{ partyId: string }>();
   const { isOpen, symbol, setOpen } = useAssetDetailsDialogStore();
   const gridRef = useRef<AgGridReact | null>(null);
   const variables = useMemo(() => ({ partyId }), [partyId]);

apps/console-lite/src/app/components/portfolio/fills/fills.tsx

@@ -1,4 +1,5 @@
 import { useRef } from 'react';
+import { useOutletContext } from 'react-router-dom';
 import type { AgGridReact } from 'ag-grid-react';
 import type { TradeWithMarket } from '@vegaprotocol/fills';
 import { useFillsList } from '@vegaprotocol/fills';
@@ -8,11 +9,8 @@ import { ConsoleLiteGrid } from '../../console-lite-grid';
 import { NO_DATA_MESSAGE } from '../../../constants';
 import useColumnDefinitions from './use-column-definitions';
 
-interface Props {
-  partyId: string;
-}
-
-const FillsManager = ({ partyId }: Props) => {
+const FillsManager = () => {
+  const { partyId } = useOutletContext<{ partyId: string }>();
   const { columnDefs, defaultColDef } = useColumnDefinitions({ partyId });
   const gridRef = useRef<AgGridReact | null>(null);
   const scrolledToTop = useRef(true);

apps/console-lite/src/app/components/portfolio/index.ts

@@ -1 +1,6 @@
 export * from './portfolio';
+export * from './accounts';
+export * from './fills';
+export * from './orders';
+export * from './positions';
+export * as constants from './constants';

apps/console-lite/src/app/components/portfolio/orders/orders.tsx

@@ -1,6 +1,7 @@
 import { useRef, useState } from 'react';
 import type { AgGridReact } from 'ag-grid-react';
 import type { BodyScrollEndEvent, BodyScrollEvent } from 'ag-grid-community';
+import { useOutletContext } from 'react-router-dom';
 import type { OrderWithMarket } from '@vegaprotocol/orders';
 import {
   useOrderCancel,
@@ -17,11 +18,8 @@ import { ConsoleLiteGrid } from '../../console-lite-grid';
 import { NO_DATA_MESSAGE } from '../../../constants';
 import useColumnDefinitions from './use-column-definitions';
 
-interface Props {
-  partyId: string;
-}
-
-const OrdersManager = ({ partyId }: Props) => {
+const OrdersManager = () => {
+  const { partyId } = useOutletContext<{ partyId: string }>();
   const [editOrder, setEditOrder] = useState<OrderWithMarket | null>(null);
   const orderCancel = useOrderCancel();
   const orderEdit = useOrderEdit(editOrder);

apps/console-lite/src/app/components/portfolio/portfolio.tsx

@@ -1,54 +1,27 @@
-import React, { useMemo } from 'react';
-import { AccountManager } from './accounts';
+import React from 'react';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import ConnectWallet from '../wallet-connector';
-import { DepositContainer } from '../deposits';
-import { useParams } from 'react-router-dom';
+import { useOutlet, useLocation } from 'react-router-dom';
 import { HorizontalMenu } from '../horizontal-menu';
 import * as constants from './constants';
-import { PositionsManager } from './positions';
-import { OrdersManager } from './orders';
-import { FillsManager } from './fills';
-
-type RouterParams = {
-  module?: string;
-};
 
 export const Portfolio = () => {
   const { keypair } = useVegaWallet();
-  const params = useParams<RouterParams>();
-
-  const module = useMemo(() => {
-    if (!keypair) {
-      return (
-        <section className="xl:w-1/2">
-          <ConnectWallet />
-        </section>
-      );
-    }
-
-    switch (params?.module) {
-      case constants.PORTFOLIO_ASSETS:
-      default:
-        return <AccountManager partyId={keypair.pub} />;
-      case constants.PORTFOLIO_POSITIONS:
-        return <PositionsManager partyId={keypair.pub} />;
-      case constants.PORTFOLIO_ORDERS:
-        return <OrdersManager partyId={keypair.pub} />;
-      case constants.PORTFOLIO_FILLS:
-        return <FillsManager partyId={keypair.pub} />;
-      case constants.PORTFOLIO_DEPOSITS:
-        return <DepositContainer />;
-    }
-  }, [params?.module, keypair]);
+  const { pathname } = useLocation();
+  const module = pathname.split('/portfolio/')?.[1] ?? '';
+  const outlet = useOutlet({ partyId: keypair?.pub || '' });
+  if (!keypair) {
+    return (
+      <section className="xl:w-1/2">
+        <ConnectWallet />
+      </section>
+    );
+  }
 
   return (
     <div className="h-full p-4 md:p-6 grid grid-rows-[min-content_1fr]">
-      <HorizontalMenu
-        active={params?.module}
-        items={constants.PORTFOLIO_ITEMS}
-      />
-      {module}
+      <HorizontalMenu active={module} items={constants.PORTFOLIO_ITEMS} />
+      {outlet}
     </div>
   );
 };

apps/console-lite/src/app/components/portfolio/positions/positions.tsx

@@ -1,13 +1,11 @@
+import { useOutletContext } from 'react-router-dom';
 import { t } from '@vegaprotocol/react-helpers';
 import { usePositionsAssets } from '@vegaprotocol/positions';
 import { AsyncRenderer, Splash } from '@vegaprotocol/ui-toolkit';
 import PositionsAsset from './positions-asset';
 
-interface Props {
-  partyId: string;
-}
-
-const Positions = ({ partyId }: Props) => {
+const Positions = () => {
+  const { partyId } = useOutletContext<{ partyId: string }>();
   const { data, error, loading, assetSymbols } = usePositionsAssets({
     partyId,
   });

apps/console-lite/src/app/routes/router-config.tsx

@@ -1,7 +1,15 @@
 import { t } from '@vegaprotocol/react-helpers';
 import { DealTicketContainer } from '../components/deal-ticket';
 import { SimpleMarketList } from '../components/simple-market-list';
-import { Portfolio } from '../components/portfolio';
+import {
+  Portfolio,
+  AccountManager,
+  PositionsManager,
+  OrdersManager,
+  FillsManager,
+  constants,
+} from '../components/portfolio';
+import { DepositContainer } from '../components/deposits';
 
 export const ROUTES = {
   MARKETS: 'markets',
@@ -51,13 +59,33 @@ export const routerConfig = [
     name: 'Portfolio',
     text: t('Portfolio'),
     element: <Portfolio />,
-    children: [
-      {
-        path: ':module',
-        element: <Portfolio />,
-      },
-    ],
     icon: 'portfolio',
     isNavItem: true,
+    children: [
+      {
+        path: '',
+        element: <AccountManager />,
+      },
+      {
+        path: constants.PORTFOLIO_ASSETS,
+        element: <AccountManager />,
+      },
+      {
+        path: constants.PORTFOLIO_POSITIONS,
+        element: <PositionsManager />,
+      },
+      {
+        path: constants.PORTFOLIO_ORDERS,
+        element: <OrdersManager />,
+      },
+      {
+        path: constants.PORTFOLIO_FILLS,
+        element: <FillsManager />,
+      },
+      {
+        path: constants.PORTFOLIO_DEPOSITS,
+        element: <DepositContainer />,
+      },
+    ],
   },
 ];