[UI] - Prevent redirection to dashboard when archive/unarchive

- Prevent screen navigation to dashboard from detail page when click archive or unarchive btn - #182
arbindo · Aug 3, 2022 · abc39a5 · abc39a5
1 parent 32e7718
commit abc39a5
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 9 deletions.
diff --git a/mimock-ui/src/components/mockManagement/MockDetails/Detail.jsx b/mimock-ui/src/components/mockManagement/MockDetails/Detail.jsx
@@ -76,7 +76,8 @@ function Detail() {
 		archiveMock(mockId, authCookieRef)
 			.then((res) => {
 				if (res.status == 200) {
-					navigate(`/mimock-ui/mocks`);
+					setMock(res.data.data);
+					setMockId(res.data.data.id);
 					useNotification({
 						type: notificationTypes.NOTIFICATION_TYPE_SUCCESS,
 						title: 'Archive success',
@@ -85,7 +86,6 @@ function Detail() {
 						animationOut: 'animate__bounceOut',
 					});
 				}
-				console.log(res.status, res.data);
 			})
 			.catch((err) => {
 				console.log(err);
@@ -103,7 +103,8 @@ function Detail() {
 		unarchiveMock(mockId, authCookieRef)
 			.then((res) => {
 				if (res.status == 200) {
-					navigate(`/mimock-ui/mocks`);
+					setMock(res.data.data);
+					setMockId(res.data.data.id);
 					useNotification({
 						type: notificationTypes.NOTIFICATION_TYPE_SUCCESS,
 						title: 'Unarchive success',
@@ -112,7 +113,6 @@ function Detail() {
 						animationOut: 'animate__bounceOut',
 					});
 				}
-				console.log(res.status, res.data);
 			})
 			.catch((err) => {
 				console.log(err);
@@ -146,7 +146,6 @@ function Detail() {
 						animationOut: 'animate__bounceOut',
 					});
 				}
-				console.log(res.status, res.data);
 			})
 			.catch((err) => {
 				console.log(err);

diff --git a/...-ui/src/components/mockManagement/MockDetails/detailcontentviewer/DetailContentViewer.jsx b/...-ui/src/components/mockManagement/MockDetails/detailcontentviewer/DetailContentViewer.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import {
 	DetailContentViewerContainer,
 	NavTabsContainer,
@@ -26,6 +26,22 @@ function DetailContentViewer({ mock }) {
 	const [showGeneralPane, setShowGeneralPane] = useState(true);
 	const [showRequestPane, setShowRequestPane] = useState(false);
 	const [showResponsePane, setShowResponsePane] = useState(false);
+	const [statusValue, setStatusValue] = useState('');
+	const [httpMethodValue, setHttpMethodValue] = useState('');
+	// #endregion
+
+	// #region hooks
+	useEffect(() => {
+		if (mock != null) {
+			setStatusValue(mock.entityStatus.status);
+		}
+	}, [mock.entityStatus]);
+
+	useEffect(() => {
+		if (mock != null) {
+			setHttpMethodValue(mock.httpMethod.method);
+		}
+	}, [mock.httpMethod]);
 	// #endregion
 
 	// #region Handler functions
@@ -108,8 +124,8 @@ function DetailContentViewer({ mock }) {
 						uniqueId={mock.id}
 						mockName={mock.mockName}
 						description={mock.description}
-						entityStatus={mock.entityStatus.status}
-						httpMethod={mock.httpMethod.method}
+						entityStatus={statusValue}
+						httpMethod={httpMethodValue}
 						route={mock.route}
 						queryParams={
 							mock.queryParams !== '' ? mock.queryParams : labels.fallback

diff --git a/mimock-ui/src/components/mockManagement/MockDetails/detailheader/DetailHeader.jsx b/mimock-ui/src/components/mockManagement/MockDetails/detailheader/DetailHeader.jsx
@@ -45,7 +45,6 @@ function DetailHeader({ mock, badgeColor }) {
 		if (mock.queryParams.length > 0) {
 			url += `?${mock.queryParams}`;
 		}
-
 		setGeneratedURL(url);
 	}, [mock.route]);