From 1e33f16943c1df3b6e45a1479f56e33a98f5a7bd Mon Sep 17 00:00:00 2001
From: Pranay Kumar <pranay.rauthu@gmail.com>
Date: Fri, 22 Oct 2021 17:07:22 +0530
Subject: [PATCH] refactor: dashboard route generation (#340)

* refactor: dashboard route generation

* fix: dashboard link
---
 .../ListOfDashboard/TableComponents/Name.tsx          | 11 +++++++----
 frontend/src/container/ListOfDashboard/index.tsx      |  9 ++++++---
 frontend/src/container/NewWidget/index.tsx            |  4 ++--
 frontend/src/lib/updateUrl.ts                         |  9 ---------
 frontend/src/pages/DashboardWidget/index.tsx          | 10 +++++++---
 frontend/src/store/actions/dashboard/saveDashboard.ts |  4 ++--
 6 files changed, 24 insertions(+), 23 deletions(-)
 delete mode 100644 frontend/src/lib/updateUrl.ts

diff --git a/frontend/src/container/ListOfDashboard/TableComponents/Name.tsx b/frontend/src/container/ListOfDashboard/TableComponents/Name.tsx
index 80787ff18e..451b6d0553 100644
--- a/frontend/src/container/ListOfDashboard/TableComponents/Name.tsx
+++ b/frontend/src/container/ListOfDashboard/TableComponents/Name.tsx
@@ -1,8 +1,7 @@
 import { Button } from 'antd';
 import ROUTES from 'constants/routes';
-import updateUrl from 'lib/updateUrl';
 import React, { useCallback } from 'react';
-import { useHistory } from 'react-router-dom';
+import { generatePath, useHistory } from 'react-router-dom';
 
 import { Data } from '..';
 
@@ -10,8 +9,12 @@ const Name = (name: Data['name'], data: Data): JSX.Element => {
 	const { push } = useHistory();
 
 	const onClickHandler = useCallback(() => {
-		push(updateUrl(ROUTES.DASHBOARD, ':dashboardId', data.id));
-	}, []);
+		push(
+			generatePath(ROUTES.DASHBOARD, {
+				dashboardId: data.id,
+			}),
+		);
+	}, [data.id, push]);
 
 	return (
 		<Button onClick={onClickHandler} type="link">
diff --git a/frontend/src/container/ListOfDashboard/index.tsx b/frontend/src/container/ListOfDashboard/index.tsx
index 8813accdf3..6f21e83989 100644
--- a/frontend/src/container/ListOfDashboard/index.tsx
+++ b/frontend/src/container/ListOfDashboard/index.tsx
@@ -3,10 +3,9 @@ import { Row, Table, TableColumnProps, Typography } from 'antd';
 import createDashboard from 'api/dashboard/create';
 import { AxiosError } from 'axios';
 import ROUTES from 'constants/routes';
-import updateUrl from 'lib/updateUrl';
 import React, { useCallback, useState } from 'react';
 import { useSelector } from 'react-redux';
-import { useHistory } from 'react-router-dom';
+import { generatePath, useHistory } from 'react-router-dom';
 import { AppState } from 'store/reducers';
 import DashboardReducer from 'types/reducer/dashboards';
 import { v4 } from 'uuid';
@@ -103,7 +102,11 @@ const ListOfAllDashboard = (): JSX.Element => {
 					...newDashboardState,
 					loading: false,
 				});
-				push(updateUrl(ROUTES.DASHBOARD, ':dashboardId', newDashboardId));
+				push(
+					generatePath(ROUTES.DASHBOARD, {
+						dashboardId: newDashboardId,
+					}),
+				);
 			} else {
 				setNewDashboardState({
 					...newDashboardState,
diff --git a/frontend/src/container/NewWidget/index.tsx b/frontend/src/container/NewWidget/index.tsx
index d91ba1d7b4..5044c63269 100644
--- a/frontend/src/container/NewWidget/index.tsx
+++ b/frontend/src/container/NewWidget/index.tsx
@@ -1,11 +1,11 @@
 import { Button } from 'antd';
 import ROUTES from 'constants/routes';
 import { GRAPH_TYPES } from 'container/NewDashboard/ComponentsSlider';
-import updateUrl from 'lib/updateUrl';
 import { DashboardWidgetPageParams } from 'pages/DashboardWidget';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { connect, useSelector } from 'react-redux';
 import { useHistory, useLocation, useParams } from 'react-router';
+import { generatePath } from 'react-router-dom';
 import { bindActionCreators, Dispatch } from 'redux';
 import { ThunkDispatch } from 'redux-thunk';
 import { ApplySettingsToPanel, ApplySettingsToPanelProps } from 'store/actions';
@@ -140,7 +140,7 @@ const NewWidget = ({
 	]);
 
 	const onClickDiscardHandler = useCallback(() => {
-		push(updateUrl(ROUTES.DASHBOARD, ':dashboardId', dashboardId));
+		push(generatePath(ROUTES.DASHBOARD, { dashboardId }));
 	}, [dashboardId, push]);
 
 	const getQueryResult = useCallback(() => {
diff --git a/frontend/src/lib/updateUrl.ts b/frontend/src/lib/updateUrl.ts
deleted file mode 100644
index f826704c82..0000000000
--- a/frontend/src/lib/updateUrl.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-const updateUrl = (
-	routes: string,
-	variables: string,
-	value: string,
-): string => {
-	return routes.replace(variables, value);
-};
-
-export default updateUrl;
diff --git a/frontend/src/pages/DashboardWidget/index.tsx b/frontend/src/pages/DashboardWidget/index.tsx
index b5e8853fb5..7e3151e179 100644
--- a/frontend/src/pages/DashboardWidget/index.tsx
+++ b/frontend/src/pages/DashboardWidget/index.tsx
@@ -3,10 +3,14 @@ import Spinner from 'components/Spinner';
 import ROUTES from 'constants/routes';
 import { GRAPH_TYPES } from 'container/NewDashboard/ComponentsSlider';
 import NewWidget from 'container/NewWidget';
-import updateUrl from 'lib/updateUrl';
 import React, { useEffect, useRef, useState } from 'react';
 import { connect, useSelector } from 'react-redux';
-import { useHistory, useLocation, useParams } from 'react-router-dom';
+import {
+	generatePath,
+	useHistory,
+	useLocation,
+	useParams,
+} from 'react-router-dom';
 import { bindActionCreators, Dispatch } from 'redux';
 import { ThunkDispatch } from 'redux-thunk';
 import { GetDashboard, GetDashboardProps } from 'store/actions';
@@ -38,7 +42,7 @@ const DashboardWidget = ({ getDashboard }: NewDashboardProps): JSX.Element => {
 		const graphType = params.get('graphType') as GRAPH_TYPES | null;
 
 		if (graphType === null) {
-			push(updateUrl(ROUTES.DASHBOARD, ':dashboardId', dashboardId));
+			push(generatePath(ROUTES.DASHBOARD, { dashboardId }));
 		} else {
 			setSelectedGraph(graphType);
 		}
diff --git a/frontend/src/store/actions/dashboard/saveDashboard.ts b/frontend/src/store/actions/dashboard/saveDashboard.ts
index a280221d9f..184d722945 100644
--- a/frontend/src/store/actions/dashboard/saveDashboard.ts
+++ b/frontend/src/store/actions/dashboard/saveDashboard.ts
@@ -2,7 +2,7 @@ import updateDashboardApi from 'api/dashboard/update';
 import { AxiosError } from 'axios';
 import ROUTES from 'constants/routes';
 import history from 'lib/history';
-import updateUrl from 'lib/updateUrl';
+import { generatePath } from 'react-router-dom';
 import { Dispatch } from 'redux';
 import store from 'store';
 import AppActions from 'types/actions';
@@ -92,7 +92,7 @@ export const SaveDashboard = ({
 					type: 'SAVE_SETTING_TO_PANEL_SUCCESS',
 					payload: response.payload,
 				});
-				history.push(updateUrl(ROUTES.DASHBOARD, ':dashboardId', dashboardId));
+				history.push(generatePath(ROUTES.DASHBOARD, { dashboardId }));
 			} else {
 				dispatch({
 					type: 'SAVE_SETTING_TO_PANEL_ERROR',