direct link to a transaction

Signed-off-by: Anil Kumar <anil.special2018@gmail.com>
hyperledger-labs · Apr 8, 2021 · f21025d · f21025d
1 parent ce35efa
commit f21025d
Show file tree

Hide file tree

Showing 3 changed files with 105 additions and 38 deletions.
diff --git a/client/src/components/Lists/Transactions.js b/client/src/components/Lists/Transactions.js
@@ -97,11 +97,19 @@ export class Transactions extends Component {
 			filtered: [],
 			sorted: [],
 			err: false,
-			from: moment().subtract(1, 'days')
+			from: moment().subtract(1, 'days'),
+			//transactionId: '',
+			directLinkSearchResultsFlag: false,
+			directLinkDialogDoneFlag: false
 		};
 	}
 
 	componentDidMount() {
+		const { getTransaction } = this.props;
+		if (this.props.transactionId) {
+			getTransaction('ChannelNotSpecified', this.props.transactionId);
+			this.setState({ directLinkSearchResultsFlag: true });
+		}
 		const { transactionList } = this.props;
 		const selection = {};
 		transactionList.forEach(element => {
@@ -131,6 +139,9 @@ export class Transactions extends Component {
 
 	componentWillUnmount() {
 		clearInterval(this.interVal);
+		if (this.props.transactionId) {
+			this.props.removeTransactionId();
+		}
 	}
 
 	handleCustomRender(selected, options) {
@@ -162,6 +173,9 @@ export class Transactions extends Component {
 		const { currentChannel, getTransaction } = this.props;
 		await getTransaction(currentChannel, tid);
 		this.setState({ dialogOpen: true });
+		if (this.props.transactionId) {
+			this.setState({ directLinkDialogDoneFlag: true });
+		}
 	};
 
 	handleMultiSelect = value => {
@@ -181,6 +195,11 @@ export class Transactions extends Component {
 		}, 60000);
 		await this.searchTransactionList();
 		this.setState({ search: true });
+		if (this.props.transactionId) {
+			this.setState({ directLinkSearchResultsFlag: false });
+			const { getTransaction } = this.props;
+			await getTransaction('ChannelNotSpecified', 'TransactionNotSpecified');
+		}
 	};
 
 	handleClearSearch = () => {
@@ -292,12 +311,28 @@ export class Transactions extends Component {
 				filterAll: true
 			}
 		];
-
+		/*
 		const transactionList = this.state.search
 			? this.props.transactionListSearch
 			: this.props.transactionList;
+		*/
+
 		const { transaction } = this.props;
 		const { dialogOpen } = this.state;
+		let transactionList;
+		if (transaction && this.state.directLinkSearchResultsFlag) {
+			let tlArray = [{}];
+			tlArray[0] = transaction;
+			transactionList = tlArray;
+			if (!this.state.directLinkDialogDoneFlag) {
+				this.handleDialogOpen(this.props.transactionId);
+			}
+		} else {
+			transactionList = this.state.search
+				? this.props.transactionListSearch
+				: this.props.transactionList;
+		}
+
 		return (
 			<div>
 				<div className={`${classes.filter} row searchRow`}>

diff --git a/client/src/components/Main.js b/client/src/components/Main.js
@@ -2,7 +2,8 @@
  *    SPDX-License-Identifier: Apache-2.0
  */
 
-import React from 'react';
+//import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { withStyles } from '@material-ui/core/styles';
 import { connect } from 'react-redux';
 import { HashRouter as Router, Route, Switch } from 'react-router-dom';
@@ -121,6 +122,29 @@ export const Main = props => {
 		getTransactionListSearch
 	};
 
+	const [transactionId, setTransactionId] = useState('');
+
+	useEffect(() => {
+		let windowUrl = window.location.search;
+		let queryParams = new URLSearchParams(windowUrl);
+		if (queryParams.get('tab')) {
+			setTransactionId(queryParams.get('transId'));
+			const { history } = props;
+			let routePath = '/' + queryParams.get('tab');
+			history.replace(routePath);
+		}
+	}, []);
+
+	function removeTransactionId() {
+		let windowUrl = window.location.search;
+		let queryParams = new URLSearchParams(windowUrl);
+		if (queryParams.get('tab')) {
+			queryParams.delete('tab');
+			queryParams.delete('transId');
+		}
+		setTransactionId('');
+	}
+
 	return (
 		<Router>
 			<div className={classes.main}>
@@ -164,7 +188,11 @@ export const Main = props => {
 						exact
 						path="/transactions"
 						render={routeprops => (
-							<TransactionsView {...{ ...transactionsViewProps, ...routeprops }} />
+							<TransactionsView
+								{...{ ...transactionsViewProps, ...routeprops }}
+								transactionId={transactionId}
+								removeTransactionId={removeTransactionId}
+							/>
 						)}
 					/>
 					<Route exact render={routeprops => <PageNotFound {...routeprops} />} />

diff --git a/client/src/components/View/TransactionsView.js b/client/src/components/View/TransactionsView.js
@@ -6,47 +6,51 @@ import React from 'react';
 import View from '../Styled/View';
 import Transactions from '../Lists/Transactions';
 import {
-  currentChannelType,
-  getTransactionType,
-  getTransactionInfoType,
-  getTransactionListType,
-  transactionType,
-  transactionListType,
+	currentChannelType,
+	getTransactionType,
+	getTransactionInfoType,
+	getTransactionListType,
+	transactionType,
+	transactionListType
 } from '../types';
 
 export const TransactionsView = ({
-  currentChannel,
-  getTransaction,
-  getTransactionInfo,
-  getTransactionList,
-  transaction,
-  transactionList,
-  getTransactionListSearch,
-  transactionByOrg,
-  transactionListSearch,
+	currentChannel,
+	getTransaction,
+	getTransactionInfo,
+	getTransactionList,
+	transaction,
+	transactionList,
+	getTransactionListSearch,
+	transactionByOrg,
+	transactionListSearch,
+	transactionId,
+	removeTransactionId
 }) => (
-  <View>
-    <Transactions
-      currentChannel={currentChannel}
-      transactionList={transactionList}
-      getTransactionList={getTransactionList}
-      transaction={transaction}
-      transactionByOrg={transactionByOrg}
-      getTransactionInfo={getTransactionInfo}
-      getTransaction={getTransaction}
-      getTransactionListSearch={getTransactionListSearch}
-      transactionListSearch={transactionListSearch}
-    />
-  </View>
+	<View>
+		<Transactions
+			currentChannel={currentChannel}
+			transactionList={transactionList}
+			getTransactionList={getTransactionList}
+			transaction={transaction}
+			transactionByOrg={transactionByOrg}
+			getTransactionInfo={getTransactionInfo}
+			getTransaction={getTransaction}
+			getTransactionListSearch={getTransactionListSearch}
+			transactionListSearch={transactionListSearch}
+			transactionId={transactionId}
+			removeTransactionId={removeTransactionId}
+		/>
+	</View>
 );
 
 TransactionsView.propTypes = {
-  currentChannel: currentChannelType.isRequired,
-  getTransaction: getTransactionType.isRequired,
-  getTransactionInfo: getTransactionInfoType.isRequired,
-  getTransactionList: getTransactionListType.isRequired,
-  transaction: transactionType.isRequired,
-  transactionList: transactionListType.isRequired,
+	currentChannel: currentChannelType.isRequired,
+	getTransaction: getTransactionType.isRequired,
+	getTransactionInfo: getTransactionInfoType.isRequired,
+	getTransactionList: getTransactionListType.isRequired,
+	transaction: transactionType.isRequired,
+	transactionList: transactionListType.isRequired
 };
 
 export default TransactionsView;