Add routes, Add pages for ledger and tx lists

chatch · May 19, 2017 · 478f69f · 478f69f
1 parent a97ea40
commit 478f69f
Show file tree

Hide file tree

Showing 12 changed files with 173 additions and 73 deletions.
diff --git a/.gitignore b/.gitignore
@@ -15,4 +15,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+yarn.lock
 
diff --git a/package.json b/package.json
@@ -6,6 +6,8 @@
     "react": "^15.5.4",
     "react-bootstrap": "^0.31.0",
     "react-dom": "^15.5.4",
+    "react-router-bootstrap": "^0.24.2",
+    "react-router-dom": "^4.1.1",
     "stellar-sdk": "^0.7.3"
   },
   "devDependencies": {

diff --git a/public/index.html b/public/index.html
@@ -13,7 +13,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Stellar Graph</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/App.js b/src/App.js
@@ -1,45 +1,59 @@
-import React, { Component } from 'react'
+import React, {Component} from 'react'
 import { Nav, Navbar, NavItem, MenuItem, NavDropdown } from 'react-bootstrap'
+import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
+import { LinkContainer } from 'react-router-bootstrap'
 
-import AppFront from './components/AppFront'
+import Home from './components/Home'
+import Ledger from './components/Ledger'
+import Ledgers from './components/Ledgers'
+import Transaction from './components/Transaction'
+import Transactions from './components/Transactions'
 import SearchBox from './components/SearchBox'
 
 // import logo from './logo.svg';
 import './App.css'
 import 'bootstrap/dist/css/bootstrap.min.css';
 
+
 // TODO: setup i18n and translate to Chinese and Nigerian and Phillipino to start with ...
 //       add language selection widget but autoset on first load using the accept-language headers
 class App extends Component {
-  render() {
-    return (
-      <div className="App">
-        <div>
-            <Navbar>
-              <Navbar.Header>
-                <Navbar.Brand>
-                  <a href="#">Stellar Graph</a>
-                </Navbar.Brand>
-              </Navbar.Header>
-              <Nav>
-                <NavItem eventKey={1} href="#">Accounts</NavItem>
-                <NavItem eventKey={2} href="#">Ledgers</NavItem>
-                <NavDropdown eventKey={3} title="More" id="basic-nav-dropdown">
-                  <MenuItem eventKey={3.1}>Stuff 1</MenuItem>
-                  <MenuItem eventKey={3.2}>Stuff 2</MenuItem>
-                </NavDropdown>
-              </Nav>
-              <Nav pullRight>
-                <SearchBox/>
-              </Nav>
-            </Navbar>
-        </div>
-
-        <AppFront/>
+    render() {
+        return (
+            <Router>
+                <div className="App">
+                    <div>
+                        <Navbar>
+                            <Navbar.Header>
+                                <Navbar.Brand>
+                                    <Link to="/">Stellar Graph</Link>
+                                </Navbar.Brand>
+                            </Navbar.Header>
+                            <Nav>
+                                <LinkContainer to="/ledgers"><NavItem eventKey={1}>Ledgers</NavItem></LinkContainer>
+                                <LinkContainer to="/txs"><NavItem eventKey={2}>Transactions</NavItem></LinkContainer>
+                                <NavDropdown eventKey={3} title="More" id="basic-nav-dropdown">
+                                    <MenuItem eventKey={3.1}>Accounts</MenuItem>
+                                    <MenuItem eventKey={3.2}>Stats</MenuItem>
+                                    <MenuItem eventKey={3.3} href="https://www.stellar.org/laboratory/">Laboratory</MenuItem>
+                                    <MenuItem eventKey={3.4} href="https://stellarterm.com/">StellarTerm</MenuItem>
+                                </NavDropdown>
+                            </Nav>
+                            <Nav pullRight>
+                                <SearchBox/>
+                            </Nav>
+                        </Navbar>
+                    </div>
 
-      </div>
-    );
-  }
+                    <Route exact path="/" component={Home} />
+                    <Route path="/ledgers" component={Ledgers} />
+                    <Route path="/ledger/:id" component={Ledger} />
+                    <Route path="/txs" component={Transactions} />
+                    <Route path="/tx/:id" component={Transaction} />
+                </div>
+            </Router>
+        );
+    }
 }
 
 export default App;
diff --git a/src/components/AppFront.js b/src/components/AppFront.js
diff --git a/src/components/Home.js b/src/components/Home.js
@@ -0,0 +1,28 @@
+import React from 'react'
+import { Grid, Row, Col, Panel } from 'react-bootstrap'
+
+import LedgerTable from './LedgerTable'
+import TransactionTable from './TransactionTable'
+
+class Home extends React.Component {
+    render() {
+        return (
+            <Grid>
+                <Row>
+                    <Col md={6}>
+                        <Panel header="Ledgers" bsStyle="warning">
+                            <LedgerTable/>
+                        </Panel>
+                    </Col>
+                    <Col md={6}>
+                        <Panel header="Transactions" bsStyle="warning">
+                            <TransactionTable/>
+                        </Panel>
+                    </Col>
+                </Row>
+            </Grid>
+        )
+    }
+}
+
+export default Home
diff --git a/src/components/Ledger.js b/src/components/Ledger.js
@@ -0,0 +1,17 @@
+import React from 'react'
+import { Grid, Row } from 'react-bootstrap'
+
+class Ledger extends React.Component {
+  render() {
+    const id = this.props.match.params.id
+    return (
+        <Grid>
+            <Row>
+                <div>Ledger Number {id}</div>
+            </Row>
+        </Grid>
+    )
+  }
+}
+
+export default Ledger
diff --git a/src/components/LedgerTable.js b/src/components/LedgerTable.js
@@ -1,12 +1,15 @@
 import React from 'react'
-import {Table} from 'react-bootstrap'
-import {server as stellar} from '../lib/Stellar'
+import { Table } from 'react-bootstrap'
+import { Link } from 'react-router-dom'
+import { server as stellar } from '../lib/Stellar'
 
 class LedgerRow extends React.Component {
     render() {
         return (
             <tr>
-                <td>{this.props.sequence}</td>
+                <td>
+                    <Link to="/ledger/{this.props.sequence}">{this.props.sequence}</Link>
+                </td>
                 <td>{this.props.time}</td>
                 <td>{this.props.txCount}</td>
             </tr>
@@ -17,7 +20,9 @@ class LedgerRow extends React.Component {
 class LedgerTable extends React.Component {
     constructor(props) {
         super(props)
-        this.state = {rows: []}
+        this.state = {
+            rows: []
+        }
         this.updateLedgers()
     }
 
@@ -51,13 +56,7 @@ class LedgerTable extends React.Component {
             // console.log(`LED = [${JSON.stringify(result)}]`)
             let rows = []
             result.records.forEach((ledger) => {
-                rows.push(
-                    <LedgerRow
-                        key={ledger.sequence}
-                        sequence={ledger.sequence}
-                        time={ledger.closed_at}
-                        txCount={ledger.transaction_count}/>
-                )
+                rows.push(<LedgerRow key={ledger.sequence} sequence={ledger.sequence} time={ledger.closed_at} txCount={ledger.transaction_count}/>)
             })
             // console.log(`rows = [${JSON.stringify(rows)}]`)
             this.setState({rows: rows})

diff --git a/src/components/Ledgers.js b/src/components/Ledgers.js
@@ -0,0 +1,17 @@
+import React from 'react'
+import { Grid, Row } from 'react-bootstrap'
+import LedgerTable from './LedgerTable'
+
+class Ledgers extends React.Component {
+  render() {
+    return (
+        <Grid>
+            <Row>
+                <LedgerTable/>
+            </Row>
+        </Grid>
+    )
+  }
+}
+
+export default Ledgers
diff --git a/src/components/Transaction.js b/src/components/Transaction.js
@@ -0,0 +1,11 @@
+import React from 'react'
+
+class Transaction extends React.Component {
+  render() {
+    return (
+        <div>Transaction</div>
+    )
+  }
+}
+
+export default Transaction
diff --git a/src/components/TransactionTable.js b/src/components/TransactionTable.js
@@ -1,14 +1,33 @@
 import React from 'react'
-import {Table} from 'react-bootstrap'
-import {server as stellar} from '../lib/Stellar'
+import { Table } from 'react-bootstrap'
+import { Link } from 'react-router-dom'
+import { server as stellar } from '../lib/Stellar'
 
 class TransactionRow extends React.Component {
+    // ledgerClick(e) {
+    //   e.preventDefault();
+    //   console.log(`ledger ${e.target.text}`);
+    // }
+    //
+    // txClick(e) {
+    //   e.preventDefault();
+    //   console.log(`tx ${e.target.title}`);
+    // }
+
     render() {
+        const shortHash = this.props.key.substring(0, 10) + "..."
         return (
             <tr>
-                <td>{this.props.hash}</td>
+                <td>
+                    <span title={this.props.key}>
+                        <Link to="/tx/{this.props.key}">{shortHash}</Link>
+                    </span>
+                </td>
                 <td>{this.props.time}</td>
-                <td>{this.props.ledger}</td>
+                <td>{this.props.value}</td>
+                <td>
+                    <Link to="/ledger/{this.props.ledger}">{this.props.ledger}</Link>
+                </td>
             </tr>
         )
     }
@@ -28,6 +47,7 @@ class TransactionTable extends React.Component {
                     <tr>
                         <th>#</th>
                         <th>Time</th>
+                        <th>Value</th>
                         <th>Ledger</th>
                     </tr>
                 </thead>
@@ -54,8 +74,8 @@ class TransactionTable extends React.Component {
                 rows.push(
                     <TransactionRow
                         key={transaction.hash}
-                        hash={transaction.hash}
                         time={transaction.created_at}
+                        value={transaction.value}
                         ledger={transaction.ledger_attr}/>
                 )
             })

diff --git a/src/components/Transactions.js b/src/components/Transactions.js
@@ -0,0 +1,17 @@
+import React from 'react'
+import { Grid, Row } from 'react-bootstrap'
+import TransactionTable from './TransactionTable'
+
+class Transactions extends React.Component {
+  render() {
+    return (
+        <Grid>
+            <Row>
+                <TransactionTable/>
+            </Row>
+        </Grid>
+    )
+  }
+}
+
+export default Transactions