Refactor data fetching and state management in MapsPage

• Move data fetching logic from NetworkMap to MapsPage
• Handle loading and error states in MapsPage
• Remove loading and error handling from NetworkMap
• Ensure separation of concerns between data fetching and presentation

pages/maps/index.tsx

 import NetworkMap from '@/components/NetworkMap/NetworkMap';
+import { useGsoConfig } from '@/contexts/GsoConfigContext';
 import { GSOPolicyResource } from '@/types/policyResources';
 import { NetworkTopologyData } from '@/types/types';
-import { WfoPolicyRenderPageFallback } from '@orchestrator-ui/orchestrator-ui-components';
+import { EuiLoadingSpinner, EuiText } from '@elastic/eui';
+import {
+  useWfoSession,
+  WfoPolicyRenderPageFallback,
+} from '@orchestrator-ui/orchestrator-ui-components';
 import axios from 'axios';
-import { NextPage, GetServerSideProps } from 'next';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 
-interface MapsProps {
-  networkTopologyData: NetworkTopologyData;
-}
+const MapsPage: React.FC = () => {
+  const [networkTopologyData, setNetworkTopologyData] =
+    useState<NetworkTopologyData | null>(null);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [error, setError] = useState<boolean>(false);
+  const TIMEOUT = 5000;
+  const config = useGsoConfig();
+  const { session } = useWfoSession();
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const requestHeaders = {
+          Authorization: session ? `Bearer ${session.accessToken}` : '',
+        };
+        const response = await axios.get<NetworkTopologyData>(
+          config.networkTopologyApiUrl!,
+          {
+            timeout: TIMEOUT,
+            headers: requestHeaders,
+          },
+        );
+        setNetworkTopologyData(response.data);
+        setLoading(false);
+      } catch (error) {
+        console.error('Failed to fetch data', error);
+        setError(true);
+        setLoading(false);
+      }
+    };
+
+    if (session) {
+      fetchData();
+    } else {
+      setLoading(false);
+      setError(true);
+    }
+  }, [session]);
 
-const MapsPage: NextPage<MapsProps> = ({ networkTopologyData }) => {
   return (
     <WfoPolicyRenderPageFallback resource={GSOPolicyResource.NAVIGATION_MAPS}>
-      <NetworkMap data={networkTopologyData} />
+      {loading ? (
+        <EuiLoadingSpinner size="xl" />
+      ) : error ? (
+        <EuiText color="danger">
+          Failed to load data. Please try again later.
+        </EuiText>
+      ) : (
+        <NetworkMap data={networkTopologyData} />
+      )}
     </WfoPolicyRenderPageFallback>
   );
 };
 
-export const getServerSideProps: GetServerSideProps = async () => {
-  try {
-    const response = await axios.get(process.env.NETWORK_TOPOLOGY_API_URL!);
-    const networkTopologyData: NetworkTopologyData = response.data;
-
-    return {
-      props: {
-        networkTopologyData,
-      },
-    };
-  } catch (error) {
-    console.error('Failed to fetch data', error);
-    return {
-      props: {
-        networkTopologyData: null,
-      },
-    };
-  }
-};
-
 export default MapsPage;