Skip to content

Commit

Permalink
refactor: Dashboard to functional component (#296)
Browse files Browse the repository at this point in the history
  • Loading branch information
@tuliomir
tuliomir authored Aug 22, 2024
1 parent 15e2339 commit b7fc33e
Showing 1 changed file with 87 additions and 112 deletions.
199 changes: 87 additions & 112 deletions src/screens/DashboardTx.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,10 @@
* LICENSE file in the root directory of this source tree.
*/

import React from 'react';
import React, { useCallback, useEffect, useState } from 'react';
import TxRow from '../components/tx/TxRow';
import WebSocketHandler from '../WebSocketHandler';
import { DASHBOARD_TX_COUNT, DASHBOARD_BLOCKS_COUNT } from '../constants';
import { DASHBOARD_BLOCKS_COUNT, DASHBOARD_TX_COUNT } from '../constants';
import txApi from '../api/txApi';
import helpers from '../utils/helpers';

Expand All @@ -17,133 +17,108 @@ import helpers from '../utils/helpers';
*
* @memberof Screens
*/
class DashboardTx extends React.Component {
function DashboardTx() {
// transactions {Array} Array of transactions to show in the dashboard
const [transactions, setTransactions] = useState([]);
// blocks {Array} Array of blocks to show in the dashboard
const [blocks, setBlocks] = useState([]);

/**
* transactions {Array} Array of transactions to show in the dashboard
* blocks {Array} Array of blocks to show in the dashboard
* Handles a websocket message and checks if it should update the list.
* If so, which list should be updated.
* @param {unknown} wsData Websocket message object
*/
state = { transactions: [], blocks: [] };

componentDidMount = () => {
this.getInitialData();
WebSocketHandler.on('network', this.handleWebsocket);
};
const handleWebsocket = useCallback(wsData => {
// Discard any message that is not of the expected type
if (wsData.type !== 'network:new_tx_accepted') {
return;
}

componentWillUnmount = () => {
WebSocketHandler.removeListener('network', this.handleWebsocket);
};
if (wsData.is_block) {
// Updates the Blocks list
setBlocks(currentBlocks => {
// Create a new array to be mutated by the helper
const oldBlocks = [...currentBlocks];

/**
* Get initial data to fill the screen and update the state with this data
*/
getInitialData = () => {
txApi
.getDashboardTx(DASHBOARD_BLOCKS_COUNT, DASHBOARD_TX_COUNT)
.then(res => {
this.updateData(res.transactions, res.blocks);
})
.catch(e => {
// Error in request
console.log(e);
// Finally we update the state again
return helpers.updateListWs(oldBlocks, wsData, DASHBOARD_BLOCKS_COUNT);
});
};
} else {
// Updates the Transactions list
setTransactions(currentTxs => {
// Create a new array to be mutated by the helper
const oldTransactions = [...currentTxs];

/**
* Handle websocket message to see if should update the list
*/
handleWebsocket = wsData => {
if (wsData.type === 'network:new_tx_accepted') {
this.updateListWs(wsData);
// Finally we update the state again
return helpers.updateListWs(oldTransactions, wsData, DASHBOARD_TX_COUNT);
});
}
};
}, []);

/**
* Update list because a new element arrived
*/
updateListWs = tx => {
if (tx.is_block) {
let blocks = this.state.blocks;

blocks = helpers.updateListWs(blocks, tx, DASHBOARD_BLOCKS_COUNT);

// Finally we update the state again
this.setState({ blocks });
} else {
let transactions = this.state.transactions;
useEffect(() => {
// Fetches initial data for the screen
txApi
.getDashboardTx(DASHBOARD_BLOCKS_COUNT, DASHBOARD_TX_COUNT)
.then(dashboardData => {
setTransactions(dashboardData.transactions);
setBlocks(dashboardData.blocks);
})
.catch(e => console.error(e));

transactions = helpers.updateListWs(transactions, tx, DASHBOARD_TX_COUNT);
WebSocketHandler.on('network', handleWebsocket);

// Finally we update the state again
this.setState({ transactions });
}
};
return () => {
WebSocketHandler.removeListener('network', handleWebsocket);
};
}, [handleWebsocket]);

/**
* Update state data for transactions and blocks
*/
updateData = (transactions, blocks) => {
this.setState({ transactions, blocks });
const renderTableBody = () => {
return (
<tbody>
{blocks.length ? (
<tr className="tr-title">
<td colSpan="2">
Blocks <a href="/blocks/">(See all blocks)</a>
</td>
</tr>
) : null}
{renderRows(blocks)}
{transactions.length ? (
<tr className="tr-title">
<td colSpan="2">
Transactions <a href="/transactions/">(See all transactions)</a>
</td>
</tr>
) : null}
{renderRows(transactions)}
</tbody>
);
};

/**
* Go to specific transaction or block page after clicking on the link
*/
goToList = (e, to) => {
e.preventDefault();
this.props.history.push(to);
const renderRows = elements => {
return elements.map(tx => <TxRow key={tx.tx_id} tx={tx} />);
};

render() {
const renderTableBody = () => {
return (
<tbody>
{this.state.blocks.length ? (
<tr className="tr-title">
<td colSpan="2">
Blocks <a href="/blocks/">(See all blocks)</a>
</td>
</tr>
) : null}
{renderRows(this.state.blocks)}
{this.state.transactions.length ? (
<tr className="tr-title">
<td colSpan="2">
Transactions <a href="/transactions/">(See all transactions)</a>
</td>
return (
<div className="content-wrapper">
<div className="table-responsive">
<table className="table" id="tx-table">
<thead>
<tr>
<th className="d-none d-lg-table-cell">Hash</th>
<th className="d-none d-lg-table-cell">Timestamp</th>
<th className="d-table-cell d-lg-none" colSpan="2">
Hash
<br />
Timestamp
</th>
</tr>
) : null}
{renderRows(this.state.transactions)}
</tbody>
);
};

const renderRows = elements => {
return elements.map((tx, idx) => {
return <TxRow key={tx.tx_id} tx={tx} />;
});
};

return (
<div className="content-wrapper">
<div className="table-responsive">
<table className="table" id="tx-table">
<thead>
<tr>
<th className="d-none d-lg-table-cell">Hash</th>
<th className="d-none d-lg-table-cell">Timestamp</th>
<th className="d-table-cell d-lg-none" colSpan="2">
Hash
<br />
Timestamp
</th>
</tr>
</thead>
{renderTableBody()}
</table>
</div>
</thead>
{renderTableBody()}
</table>
</div>
);
}
</div>
);
}

export default DashboardTx;

0 comments on commit b7fc33e

Please sign in to comment.