fix: Redundant call on resize or rearrange layout on dashboard (#2099)

* fix: Removed Strict mode to stop render twice

* fix: Redundant call on resize or rearrange layout on dashboard

* fix: Resolved suggested changes

* fix: Resolved suggested changes

* chore: some of the refactoring is updated

Co-authored-by: Palash Gupta <palashgdev@gmail.com>

frontend/src/container/GridGraphLayout/Graph/index.tsx

@@ -1,13 +1,12 @@
 import { Typography } from 'antd';
-import { AxiosError } from 'axios';
-import { ChartData } from 'chart.js';
 import Spinner from 'components/Spinner';
 import GridGraphComponent from 'container/GridGraphComponent';
 import { getDashboardVariables } from 'lib/dashbaordVariables/getDashboardVariables';
 import getChartData from 'lib/getChartData';
 import isEmpty from 'lodash-es/isEmpty';
-import React, { memo, useCallback, useEffect, useState } from 'react';
+import React, { memo, useCallback, useMemo, useState } from 'react';
 import { Layout } from 'react-grid-layout';
+import { useQuery } from 'react-query';
 import { connect, useSelector } from 'react-redux';
 import { bindActionCreators, Dispatch } from 'redux';
 import { ThunkDispatch } from 'redux-thunk';
@@ -19,7 +18,9 @@ import { GetMetricQueryRange } from 'store/actions/dashboard/getQueryResults';
 import { AppState } from 'store/reducers';
 import AppActions from 'types/actions';
 import { GlobalTime } from 'types/actions/globalTime';
+import { ErrorResponse, SuccessResponse } from 'types/api';
 import { Widgets } from 'types/api/dashboard/getAll';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
 import { LayoutProps } from '..';
@@ -37,12 +38,6 @@ function GridCardGraph({
 	setLayout,
 	onDragSelect,
 }: GridCardGraphProps): JSX.Element {
-	const [state, setState] = useState<GridCardGraphState>({
-		loading: true,
-		errorMessage: '',
-		error: false,
-		payload: undefined,
-	});
 	const [hovered, setHovered] = useState(false);
 	const [modal, setModal] = useState(false);
 	const [deleteModal, setDeleteModal] = useState(false);
@@ -55,112 +50,40 @@ function GridCardGraph({
 		GlobalReducer
 	>((state) => state.globalTime);
 
-	// const getMaxMinTime = GetMaxMinTime({
-	// 	graphType: widget?.panelTypes,
-	// 	maxTime,
-	// 	minTime,
-	// });
+	const response = useQuery<
+		SuccessResponse<MetricRangePayloadProps> | ErrorResponse
+	>(
+		[
+			`GetMetricsQueryRange-${widget.timePreferance}-${globalSelectedInterval}-${widget.id}`,
+			{ widget, maxTime, minTime, globalSelectedInterval },
+		],
+		() =>
+			GetMetricQueryRange({
+				selectedTime: widget.timePreferance,
+				graphType: widget.panelTypes,
+				query: widget.query,
+				globalSelectedInterval,
+				variables: getDashboardVariables(),
+			}),
+		{
+			keepPreviousData: true,
+			refetchOnMount: false,
+		},
+	);
 
-	// const { start, end } = GetStartAndEndTime({
-	// 	type: widget?.timePreferance,
-	// 	maxTime: getMaxMinTime.maxTime,
-	// 	minTime: getMaxMinTime.minTime,
-	// });
-
-	// const queryLength = widget?.query?.filter((e) => e.query.length !== 0) || [];
-
-	// const response = useQueries(
-	// 	queryLength?.map((query) => {
-	// 		return {
-	// 			// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-	// 			queryFn: () => {
-	// 				return getQueryResult({
-	// 					end,
-	// 					query: query?.query,
-	// 					start,
-	// 					step: '60',
-	// 				});
-	// 			},
-	// 			queryHash: `${query?.query}-${query?.legend}-${start}-${end}`,
-	// 			retryOnMount: false,
-	// 		};
-	// 	}),
-	// );
-
-	// const isError =
-	// 	response.find((e) => e?.data?.statusCode !== 200) !== undefined ||
-	// 	response.some((e) => e.isError === true);
-
-	// const isLoading = response.some((e) => e.isLoading === true);
-
-	// const errorMessage = response.find((e) => e.data?.error !== null)?.data?.error;
-
-	// const data = response.map((responseOfQuery) =>
-	// 	responseOfQuery?.data?.payload?.result.map((e, index) => ({
-	// 		query: queryLength[index]?.query,
-	// 		queryData: e,
-	// 		legend: queryLength[index]?.legend,
-	// 	})),
-	// );
-
-	useEffect(() => {
-		(async (): Promise<void> => {
-			try {
-				setState((state) => ({
-					...state,
-					error: false,
-					errorMessage: '',
-					loading: true,
-				}));
-				const response = await GetMetricQueryRange({
-					selectedTime: widget.timePreferance,
-					graphType: widget.panelTypes,
-					query: widget.query,
-					globalSelectedInterval,
-					variables: getDashboardVariables(),
-				});
-
-				const isError = response.error;
-
-				if (isError != null) {
-					setState((state) => ({
-						...state,
-						error: true,
-						errorMessage: isError || 'Something went wrong',
-						loading: false,
-					}));
-				} else {
-					const chartDataSet = getChartData({
-						queryData: [
-							{
-								queryData: response.payload?.data?.result
-									? response.payload?.data?.result
-									: [],
-							},
-						],
-					});
-
-					setState((state) => ({
-						...state,
-						loading: false,
-						payload: chartDataSet,
-					}));
-				}
-			} catch (error) {
-				setState((state) => ({
-					...state,
-					error: true,
-					errorMessage: (error as AxiosError).toString(),
-					loading: false,
-				}));
-			} finally {
-				setState((state) => ({
-					...state,
-					loading: false,
-				}));
-			}
-		})();
-	}, [widget, maxTime, minTime, globalSelectedInterval]);
+	const chartData = useMemo(
+		() =>
+			getChartData({
+				queryData: [
+					{
+						queryData: response?.data?.payload?.data?.result
+							? response?.data?.payload?.data?.result
+							: [],
+					},
+				],
+			}),
+		[response?.data?.payload],
+	);
 
 	const onToggleModal = useCallback(
 		(func: React.Dispatch<React.SetStateAction<boolean>>) => {
@@ -224,7 +147,7 @@ function GridCardGraph({
 
 	const isEmptyLayout = widget?.id === 'empty' || isEmpty(widget);
 
-	if (state.error && !isEmptyLayout) {
+	if (response.isError && !isEmptyLayout) {
 		return (
 			<>
 				{getModals()}
@@ -238,15 +161,14 @@ function GridCardGraph({
 					/>
 				</div>
 
-				<ErrorContainer>{state.errorMessage}</ErrorContainer>
+				<ErrorContainer>
+					{response.isError && 'Something went wrong'}
+				</ErrorContainer>
 			</>
 		);
 	}
 
-	if (
-		(state.loading === true || state.payload === undefined) &&
-		!isEmptyLayout
-	) {
+	if (response.isFetching) {
 		return (
 			<>
 				<WidgetHeader
@@ -282,26 +204,24 @@ function GridCardGraph({
 						parentHover={hovered}
 						title={widget?.title}
 						widget={widget}
-						onView={(): void => onToggleModal(setModal)}
-						onDelete={(): void => onToggleModal(setDeleteModal)}
+						onView={handleOnView}
+						onDelete={handleOnDelete}
 					/>
 				</div>
 			)}
 
 			{!isEmptyLayout && getModals()}
 
-			{!isEmpty(widget) && !!state.payload && (
+			{!isEmpty(widget) && !!response.data?.payload?.data?.result && (
 				<GridGraphComponent
-					{...{
-						GRAPH_TYPES: widget.panelTypes,
-						data: state.payload,
-						isStacked: widget.isStacked,
-						opacity: widget.opacity,
-						title: ' ', // empty title to accommodate absolutely positioned widget header
-						name,
-						yAxisUnit,
-						onDragSelect,
-					}}
+					GRAPH_TYPES={widget.panelTypes}
+					data={chartData}
+					isStacked={widget.isStacked}
+					opacity={widget.opacity}
+					title={' '} // empty title to accommodate absolutely positioned widget header
+					name={name}
+					yAxisUnit={yAxisUnit}
+					onDragSelect={onDragSelect}
 				/>
 			)}
 
@@ -310,13 +230,6 @@ function GridCardGraph({
 	);
 }
 
-interface GridCardGraphState {
-	loading: boolean;
-	error: boolean;
-	errorMessage: string;
-	payload: ChartData | undefined;
-}
-
 interface DispatchProps {
 	deleteWidget: ({
 		widgetId,