diff --git a/src/explorer/details.js b/src/explorer/details.js new file mode 100644 index 0000000..983f859 --- /dev/null +++ b/src/explorer/details.js @@ -0,0 +1,127 @@ +import React from 'react' +import PropTypes from 'prop-types' +import { Row, Col, Box, Button } from 'adminlte-2-react' +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' + +let _this +class Details extends React.Component { + constructor (props) { + super(props) + + _this = this + + this.state = { + entry: {}, + entryData: {} + } + } + + render () { + const { entry, entryData } = _this.state + return ( + <> + + + + + +

+ + Details +

+ {entry._id && ( + +

+ IS VALID: + {entry.isValid} +

+

+ APP ID: + {entry.appId || 'none'} +

+

+ CREATE AT: + {new Date(entry.createdAt).toLocaleString()} +

+

+ ID: + {entry._id} +

+

+ HASH: + {entry.hash} +

+

+ TRANSACTION ID : + {entry.key} +

+ {entryData && ( + <> + VALUE : +

+ - Message : {entryData.message} +

+

+ - Signature : {entryData.signature} +

+

+ - Data : {entryData.data} +

+ + )} + + )} + + +
+
+ + + + + + + ) + } + + componentDidMount () { + _this.handleData() + } + + componentDidUpdate () { + if (_this.props.entry._id !== _this.state.entry._id) { + _this.handleData() + } + } + + handleData () { + try { + const { entry } = _this.props + _this.setState({ + entry, + entryData: entry.value + }) + } catch (err) { + console.warn('Error in handleData()', err) + } + } + + handleClose () { + _this.props.onClose() + } +} +Details.propTypes = { + entry: PropTypes.object, + onClose: PropTypes.func +} +export default Details diff --git a/src/explorer/explorer.css b/src/explorer/explorer.css new file mode 100644 index 0000000..e64a17c --- /dev/null +++ b/src/explorer/explorer.css @@ -0,0 +1,10 @@ +.btn-close-entry{ + width: 150px; +} +.action-handler{ + color: #3c8dbc; + cursor: pointer; +} +.details-data-content{ + text-align: left; +} \ No newline at end of file diff --git a/src/explorer/index.js b/src/explorer/index.js index f891005..f0b81fd 100644 --- a/src/explorer/index.js +++ b/src/explorer/index.js @@ -1,5 +1,7 @@ import React from 'react' import { Row, Col, Content, Box, DataTable } from 'adminlte-2-react' +import Details from './details' +import './explorer.css' const axios = require('axios').default const SERVER = 'https://p2wdb.fullstack.cash/' @@ -11,36 +13,38 @@ class Explorer extends React.Component { super(props) _this = this this.state = { + showEntry: false, data: [], - firstColumns: [ - { title: 'Created At', data: 'createdAt' }, - { - title: 'Transaction ID', - data: 'txid', - render: txid => {txid.subString} - }, - { - title: 'Hash', - data: 'hash', - render: hash => ( - { - console.log('test') - }} - id={hash.subString} - > - {hash.subString} - - ) - }, - { title: 'App Id', data: 'appId' } - ], - entries: [] + entries: [], + entryData: null } + + this.firstColumns = [ + { title: 'Created At', data: 'createdAt' }, + { + title: 'Transaction', + data: 'txid', + render: txid => ( + + {txid.subString} + + ) + }, + { + title: 'Hash', + data: 'hash', + render: hash => ( + + {hash.subString} + + ) + }, + { title: 'App Id', data: 'appId' } + ] } render () { - const { data, firstColumns } = _this.state + const { data, entryData } = _this.state return ( + {entryData && ( + +
+ + )} { + _this.handleEvents(data) + } }} - onPageChange={_this.handleEvents} /> @@ -71,14 +84,18 @@ class Explorer extends React.Component { } async componentDidMount () { - const entries = await _this.getEntries() - _this.generateDataTable(entries) + _this.handleEntries() + + // Get data and update table + // every 20 seconds + setInterval(() => { + _this.handleEntries() + }, 20000) } - async componentDidUpdate () { - // Adds new 'click' events when the view is updated - const { entries } = _this.state - _this.handleEvents(entries) + async handleEntries () { + const entries = await _this.getEntries() + _this.generateDataTable(entries) } // REST petition to Get data fron the pw2db @@ -90,7 +107,6 @@ class Explorer extends React.Component { data: {} } const result = await axios.request(options) - console.log('result', result.data) _this.setState({ entries: result.data.data }) @@ -100,22 +116,29 @@ class Explorer extends React.Component { } } + // Generate table content generateDataTable (dataArr) { try { const data = [] + for (let i = 0; i < dataArr.length; i++) { const entry = dataArr[i] const row = { - createdAt: entry.createdAt, + // createdAt row data + createdAt: new Date(entry.createdAt).toLocaleString(), + // Transaction id row data txid: { - subString: _this.simplifyString(entry.key), - value: entry.key + subString: _this.cutString(entry.key), + txid: entry.key }, + // Hash row data hash: { - subString: _this.simplifyString(entry.hash), - value: entry.hash + subString: _this.cutString(entry.hash), + hash: entry.hash, + data: entry }, - appId: entry.appId + // App id row data + appId: entry.appId || 'none' } data.push(row) } @@ -127,46 +150,58 @@ class Explorer extends React.Component { } } - simplifyString (txid) { + cutString (txid) { try { const subTxid = txid.slice(0, 4) const subTxid2 = txid.slice(-4) return `${subTxid}...${subTxid2}` } catch (err) { - console.warn('Error in cutTxid() ', err) + console.warn('Error in cutString() ', err) } } - handleTxId (txid) { + handleTxIdClick (txid) { try { window.open(`${EXPLORER_URL}${txid}`, '_blank') } catch (err) { - console.warn('Error in handleTxId() ', err) + console.warn('Error in handleTxIdClick() ', err) } } - // Gets each element of the transaction id column - // to add them the onClick event, its done this way - // because that event is not recognized if it gets - // added directly to the html tag - handleEvents () { + handleHashClick (data) { try { - const { entries } = _this.state - for (let i = 0; i < entries.length; i++) { - const entry = entries[i] - const txid = _this.simplifyString(entry.key) - const element = document.getElementById(txid) - if (element) { - // Adding on click event - element.addEventListener('click', () => { - _this.handleTxId(entry.key) - }) - } + data.isValid = data.isValid.toString() + _this.setState({ + entryData: data + }) + } catch (err) { + _this.setState({ + entryData: null + }) + console.warn('Error in handleHashClick() ', err) + } + } + + handleEvents (eventData) { + try { + const { txid, hash, data } = eventData + + if (txid) { + _this.handleTxIdClick(txid) + } + if (hash && data) { + _this.handleHashClick(data) } } catch (err) { console.warn('Error in handleEvents() ', err) } } + + handleClose () { + _this.setState({ + entryData: null + }) + } } export default Explorer diff --git a/src/gatsby-ipfs-web-wallet/components/menu-components.js b/src/gatsby-ipfs-web-wallet/components/menu-components.js index a0cbd98..3c863db 100644 --- a/src/gatsby-ipfs-web-wallet/components/menu-components.js +++ b/src/gatsby-ipfs-web-wallet/components/menu-components.js @@ -31,7 +31,6 @@ const { Item } = Sidebar const MenuComponents = props => { return [ { - activedItem: true, key: 'Explorer', component: , menuItem: