Skip to content
Snippets Groups Projects

Refactor data fetching and state management in MapsPage

Merged Mohammad Torkashvand requested to merge feature/NAT-574-add-axios-timeout into develop
4 files
+ 58
45
Compare changes
  • Side-by-side
  • Inline
Files
4
  • - 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
    
    This refactor simplifies NetworkMap by focusing it solely on rendering the network map, while MapsPage handles data fetching, session management, and error handling.
+ 54
28
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;
Loading