refactor: dashboard route generation (#340)

* refactor: dashboard route generation

* fix: dashboard link
This commit is contained in:
Pranay Kumar 2021-10-22 17:07:22 +05:30 committed by GitHub
parent b4a9b248cf
commit 1e33f16943
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 24 additions and 23 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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