fix(ServiceMap): multiple api calls of date picker

frontend/src/modules/AppWrapper.tsx

@@ -34,7 +34,13 @@ const App = () => {
 							<Route path={ROUTES.SIGN_UP} exact component={Signup} />
 							<Route path={ROUTES.APPLICATION} exact component={ServicesTable} />
 							<Route path={ROUTES.SERVICE_METRICS} exact component={ServiceMetrics} />
-							<Route path={ROUTES.SERVICE_MAP} exact component={ServiceMap} />
+							<Route
+								path={ROUTES.SERVICE_MAP}
+								exact
+								render={(props) => (
+									<ServiceMap {...props} componentPath={ROUTES.SERVICE_MAP} />
+								)}
+							/>
 							<Route path={ROUTES.TRACES} exact component={TraceDetail} />
 							<Route path={ROUTES.TRACE_GRAPH} exact component={TraceGraph} />
 							<Route path={ROUTES.SETTINGS} exact component={SettingsPage} />

frontend/src/modules/Servicemap/ServiceMap.tsx

-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef } from "react";
 import { connect } from "react-redux";
-import { RouteComponentProps } from "react-router-dom";
+import { RouteComponentProps, useLocation } from "react-router-dom";
 import {
 	GlobalTime,
 	serviceMapStore,
@@ -36,6 +36,7 @@ interface ServiceMapProps extends RouteComponentProps<any> {
 	globalTime: GlobalTime;
 	getServiceMapItems: Function;
 	getDetailedServiceMapItems: Function;
+	componentPath: string;
 }
 interface graphNode {
 	id: string;
@@ -53,16 +54,19 @@ export interface graphDataType {
 
 const ServiceMap = (props: ServiceMapProps) => {
 	const fgRef = useRef();
+	const location = useLocation();
 	const {
 		getDetailedServiceMapItems,
 		getServiceMapItems,
 		globalTime,
 		serviceMap,
+		componentPath,
 	} = props;
-
 	useEffect(() => {
-		getServiceMapItems(globalTime);
-		getDetailedServiceMapItems(globalTime);
+		if (location.pathname === componentPath) {
+			getServiceMapItems(globalTime);
+			getDetailedServiceMapItems(globalTime);
+		}
 	}, [globalTime]);
 
 	useEffect(() => {