From 9d61427744e02f203ae1a1b10d99000a431a01fb Mon Sep 17 00:00:00 2001
From: "kody.low" <kodylow7@gmail.com>
Date: Mon, 23 Sep 2024 11:13:41 -0400
Subject: [PATCH 1/3] feat: current service in header

---
 apps/router/src/components/Header.tsx | 25 ++++++++++++++++++-------
 1 file changed, 18 insertions(+), 7 deletions(-)

diff --git a/apps/router/src/components/Header.tsx b/apps/router/src/components/Header.tsx
index d8f223772..05c2618d5 100644
--- a/apps/router/src/components/Header.tsx
+++ b/apps/router/src/components/Header.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import { Flex } from '@chakra-ui/react';
+import React, { useMemo } from 'react';
+import { Flex, Text } from '@chakra-ui/react';
 import { Logo } from './Logo';
 import { ServiceMenu } from './ServiceMenu';
 import { useActiveService } from '../hooks';
@@ -8,6 +8,10 @@ import { useAppContext } from '../context/hooks';
 export const Header = React.memo(function Header() {
   const { guardians, gateways } = useAppContext();
   const { activeServiceId } = useActiveService();
+  const activeService = useMemo(() => {
+    if (!activeServiceId) return null;
+    return guardians[activeServiceId] || gateways[activeServiceId];
+  }, [activeServiceId, guardians, gateways]);
 
   const hasServices =
     Object.keys(guardians).length > 0 || Object.keys(gateways).length > 0;
@@ -20,11 +24,18 @@ export const Header = React.memo(function Header() {
     >
       <Logo />
       {hasServices && (
-        <ServiceMenu
-          guardians={guardians}
-          gateways={gateways}
-          activeServiceId={activeServiceId}
-        />
+        <Flex alignItems='center'>
+          {activeService && (
+            <Text mr={2} fontSize='sm' color='gray.600'>
+              {activeService.config.baseUrl}
+            </Text>
+          )}
+          <ServiceMenu
+            guardians={guardians}
+            gateways={gateways}
+            activeServiceId={activeServiceId}
+          />
+        </Flex>
       )}
     </Flex>
   );

From 7b0aacf1cc8f0879e18d9c822bbacdc9f10f024d Mon Sep 17 00:00:00 2001
From: "kody.low" <kodylow7@gmail.com>
Date: Mon, 23 Sep 2024 11:44:25 -0400
Subject: [PATCH 2/3] fix: fix

---
 apps/router/src/components/Header.tsx | 15 ++++++++++-----
 apps/router/src/hooks/index.tsx       |  5 ++---
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/apps/router/src/components/Header.tsx b/apps/router/src/components/Header.tsx
index 05c2618d5..782547fde 100644
--- a/apps/router/src/components/Header.tsx
+++ b/apps/router/src/components/Header.tsx
@@ -7,11 +7,15 @@ import { useAppContext } from '../context/hooks';
 
 export const Header = React.memo(function Header() {
   const { guardians, gateways } = useAppContext();
-  const { activeServiceId } = useActiveService();
+  const { type, id } = useActiveService();
   const activeService = useMemo(() => {
-    if (!activeServiceId) return null;
-    return guardians[activeServiceId] || gateways[activeServiceId];
-  }, [activeServiceId, guardians, gateways]);
+    if (type === 'guardian') {
+      return guardians[id];
+    } else if (type === 'gateway') {
+      return gateways[id];
+    }
+    return null;
+  }, [type, id, guardians, gateways]);
 
   const hasServices =
     Object.keys(guardians).length > 0 || Object.keys(gateways).length > 0;
@@ -27,13 +31,14 @@ export const Header = React.memo(function Header() {
         <Flex alignItems='center'>
           {activeService && (
             <Text mr={2} fontSize='sm' color='gray.600'>
+              {type === 'guardian' ? 'Guardian' : 'Gateway'}:{' '}
               {activeService.config.baseUrl}
             </Text>
           )}
           <ServiceMenu
             guardians={guardians}
             gateways={gateways}
-            activeServiceId={activeServiceId}
+            activeServiceId={id}
           />
         </Flex>
       )}
diff --git a/apps/router/src/hooks/index.tsx b/apps/router/src/hooks/index.tsx
index 8d6707f9b..59eafdf17 100644
--- a/apps/router/src/hooks/index.tsx
+++ b/apps/router/src/hooks/index.tsx
@@ -5,8 +5,7 @@ export const useActiveService = () => {
   const [type, id] = location.pathname.split('/').filter(Boolean);
 
   return {
-    activeServiceId: type && id ? `${type}/${id}` : null,
-    serviceType: type as 'guardian' | 'gateway' | null,
-    serviceId: id || null,
+    type,
+    id,
   };
 };

From a1b2f562ab913f1229eb8a9b9a800746d6d25380 Mon Sep 17 00:00:00 2001
From: "kody.low" <kodylow7@gmail.com>
Date: Mon, 23 Sep 2024 13:19:16 -0400
Subject: [PATCH 3/3] fix: fix

---
 apps/router/src/components/Header.tsx | 8 ++------
 apps/router/src/hooks/index.tsx       | 9 +++++++--
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/apps/router/src/components/Header.tsx b/apps/router/src/components/Header.tsx
index 782547fde..c13a4662b 100644
--- a/apps/router/src/components/Header.tsx
+++ b/apps/router/src/components/Header.tsx
@@ -9,12 +9,8 @@ export const Header = React.memo(function Header() {
   const { guardians, gateways } = useAppContext();
   const { type, id } = useActiveService();
   const activeService = useMemo(() => {
-    if (type === 'guardian') {
-      return guardians[id];
-    } else if (type === 'gateway') {
-      return gateways[id];
-    }
-    return null;
+    const serviceMap = { guardian: guardians, gateway: gateways };
+    return serviceMap[type]?.[id] ?? null;
   }, [type, id, guardians, gateways]);
 
   const hasServices =
diff --git a/apps/router/src/hooks/index.tsx b/apps/router/src/hooks/index.tsx
index 59eafdf17..73524d831 100644
--- a/apps/router/src/hooks/index.tsx
+++ b/apps/router/src/hooks/index.tsx
@@ -1,9 +1,14 @@
 import { useLocation } from 'react-router-dom';
 
-export const useActiveService = () => {
+export const useActiveService = (): {
+  type: 'guardian' | 'gateway';
+  id: string;
+} => {
   const location = useLocation();
   const [type, id] = location.pathname.split('/').filter(Boolean);
-
+  if (type !== 'guardian' && type !== 'gateway') {
+    throw new Error('Invalid service type');
+  }
   return {
     type,
     id,