refactor: dashboard route generation (#340)

* refactor: dashboard route generation

* fix: dashboard link

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">

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,

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(() => {

frontend/src/lib/updateUrl.ts

@@ -1,9 +0,0 @@
-const updateUrl = (
-	routes: string,
-	variables: string,
-	value: string,
-): string => {
-	return routes.replace(variables, value);
-};
-
-export default updateUrl;

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);
 		}

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',