Merge pull request fedimint#529 from Kodylow/current-service-in-header

apps/router/src/components/Header.tsx

@@ -1,13 +1,17 @@
-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';
 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(() => {
+    const serviceMap = { guardian: guardians, gateway: gateways };
+    return serviceMap[type]?.[id] ?? null;
+  }, [type, id, guardians, gateways]);
 
   const hasServices =
     Object.keys(guardians).length > 0 || Object.keys(gateways).length > 0;
@@ -20,11 +24,19 @@ 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'>
+              {type === 'guardian' ? 'Guardian' : 'Gateway'}:{' '}
+              {activeService.config.baseUrl}
+            </Text>
+          )}
+          <ServiceMenu
+            guardians={guardians}
+            gateways={gateways}
+            activeServiceId={id}
+          />
+        </Flex>
       )}
     </Flex>
   );

apps/router/src/hooks/index.tsx

@@ -1,12 +1,16 @@
 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 {
-    activeServiceId: type && id ? `${type}/${id}` : null,
-    serviceType: type as 'guardian' | 'gateway' | null,
-    serviceId: id || null,
+    type,
+    id,
   };
 };