feat: handle back btn changes

frontend/src/container/GridCardLayout/GridCard/index.tsx

@@ -1,5 +1,6 @@
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
+import dayjs from 'dayjs';
 import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
 import { useStepInterval } from 'hooks/queryBuilder/useStepInterval';
 import { useIsDarkMode } from 'hooks/useDarkMode';
@@ -7,6 +8,8 @@ import { useResizeObserver } from 'hooks/useDimensions';
 import { useIntersectionObserver } from 'hooks/useIntersectionObserver';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { getDashboardVariables } from 'lib/dashbaordVariables/getDashboardVariables';
+import GetMinMax from 'lib/getMinMax';
+import getTimeString from 'lib/getTimeString';
 import history from 'lib/history';
 import { getUPlotChartOptions } from 'lib/uPlotLib/getUplotChartOptions';
 import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData';
@@ -43,24 +46,61 @@ function GridCardGraph({
 	const [maxTimeScale, setMaxTimeScale] = useState<number>();
 	const urlQuery = useUrlQuery();
 	const location = useLocation();
+	const { minTime, maxTime, selectedTime: globalSelectedInterval } = useSelector<
+		AppState,
+		GlobalReducer
+	>((state) => state.globalTime);
 
 	const onDragSelect = useCallback(
 		(start: number, end: number): void => {
 			const startTimestamp = Math.trunc(start);
 			const endTimestamp = Math.trunc(end);
 
-			urlQuery.set(QueryParams.startTime, startTimestamp.toString());
-			urlQuery.set(QueryParams.endTime, endTimestamp.toString());
-			const generatedUrl = `${location.pathname}?${urlQuery.toString()}`;
-			history.replace(generatedUrl);
-
 			if (startTimestamp !== endTimestamp) {
 				dispatch(UpdateTimeInterval('custom', [startTimestamp, endTimestamp]));
 			}
+
+			const { maxTime, minTime } = GetMinMax('custom', [
+				startTimestamp,
+				endTimestamp,
+			]);
+
+			urlQuery.set(QueryParams.startTime, minTime.toString());
+			urlQuery.set(QueryParams.endTime, maxTime.toString());
+			const generatedUrl = `${location.pathname}?${urlQuery.toString()}`;
+			history.push(generatedUrl);
 		},
 		[dispatch, location.pathname, urlQuery],
 	);
 
+	const handleBackNavigation = (): void => {
+		const searchParams = new URLSearchParams(window.location.search);
+		const startTime = searchParams.get(QueryParams.startTime);
+		const endTime = searchParams.get(QueryParams.endTime);
+
+		if (startTime && endTime && startTime !== endTime) {
+			console.log(startTime, endTime);
+			const startDate = dayjs(new Date(parseInt(getTimeString(startTime), 10)));
+			const endDate = dayjs(new Date(parseInt(getTimeString(endTime), 10)));
+
+			dispatch(
+				UpdateTimeInterval('custom', [
+					startDate.toDate().getTime() || 0,
+					endDate.toDate().getTime() || 0,
+				]),
+			);
+		}
+	};
+
+	useEffect(() => {
+		window.addEventListener('popstate', handleBackNavigation);
+
+		return (): void => {
+			window.removeEventListener('popstate', handleBackNavigation);
+		};
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, []);
+
 	const graphRef = useRef<HTMLDivElement>(null);
 
 	const isVisible = useIntersectionObserver(graphRef, undefined, true);
@@ -81,11 +121,6 @@ function GridCardGraph({
 	const isEmptyWidget =
 		widget?.id === PANEL_TYPES.EMPTY_WIDGET || isEmpty(widget);
 
-	const { minTime, maxTime, selectedTime: globalSelectedInterval } = useSelector<
-		AppState,
-		GlobalReducer
-	>((state) => state.globalTime);
-
 	const queryResponse = useGetQueryRange(
 		{
 			selectedTime: widget?.timePreferance,

frontend/src/container/NewWidget/LeftContainer/WidgetGraph/WidgetGraphs.tsx

@@ -1,10 +1,13 @@
 import { QueryParams } from 'constants/query';
 import GridPanelSwitch from 'container/GridPanelSwitch';
 import { ThresholdProps } from 'container/NewWidget/RightContainer/Threshold/types';
+import dayjs from 'dayjs';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
 import useUrlQuery from 'hooks/useUrlQuery';
+import GetMinMax from 'lib/getMinMax';
+import getTimeString from 'lib/getTimeString';
 import history from 'lib/history';
 import { getUPlotChartOptions } from 'lib/uPlotLib/getUplotChartOptions';
 import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData';
@@ -68,19 +71,51 @@ function WidgetGraph({
 		(start: number, end: number): void => {
 			const startTimestamp = Math.trunc(start);
 			const endTimestamp = Math.trunc(end);
-
-			params.set(QueryParams.startTime, startTimestamp.toString());
-			params.set(QueryParams.endTime, endTimestamp.toString());
-			const generatedUrl = `${location.pathname}?${params.toString()}`;
-			history.replace(generatedUrl);
-
 			if (startTimestamp !== endTimestamp) {
 				dispatch(UpdateTimeInterval('custom', [startTimestamp, endTimestamp]));
 			}
+
+			const { maxTime, minTime } = GetMinMax('custom', [
+				startTimestamp,
+				endTimestamp,
+			]);
+
+			params.set(QueryParams.startTime, minTime.toString());
+			params.set(QueryParams.endTime, maxTime.toString());
+			const generatedUrl = `${location.pathname}?${params.toString()}`;
+			history.push(generatedUrl);
 		},
 		[dispatch, location.pathname, params],
 	);
 
+	const handleBackNavigation = (): void => {
+		const searchParams = new URLSearchParams(window.location.search);
+		const startTime = searchParams.get(QueryParams.startTime);
+		const endTime = searchParams.get(QueryParams.endTime);
+
+		if (startTime && endTime && startTime !== endTime) {
+			console.log(startTime, endTime);
+			const startDate = dayjs(new Date(parseInt(getTimeString(startTime), 10)));
+			const endDate = dayjs(new Date(parseInt(getTimeString(endTime), 10)));
+
+			dispatch(
+				UpdateTimeInterval('custom', [
+					startDate.toDate().getTime() || 0,
+					endDate.toDate().getTime() || 0,
+				]),
+			);
+		}
+	};
+
+	useEffect(() => {
+		window.addEventListener('popstate', handleBackNavigation);
+
+		return (): void => {
+			window.removeEventListener('popstate', handleBackNavigation);
+		};
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, []);
+
 	const options = useMemo(
 		() =>
 			getUPlotChartOptions({

frontend/src/container/TopNav/DateTimeSelection/index.tsx

@@ -194,7 +194,7 @@ function DateTimeSelection({
 			urlQuery.set(QueryParams.startTime, minTime.toString());
 			urlQuery.set(QueryParams.endTime, maxTime.toString());
 			const generatedUrl = `${location.pathname}?${urlQuery.toString()}`;
-			history.replace(generatedUrl);
+			history.push(generatedUrl);
 		}
 
 		if (!stagedQuery) {
@@ -231,7 +231,7 @@ function DateTimeSelection({
 						endTimeMoment?.toDate().getTime().toString(),
 					);
 					const generatedUrl = `${location.pathname}?${urlQuery.toString()}`;
-					history.replace(generatedUrl);
+					history.push(generatedUrl);
 				}
 			}
 		}