status-im
/
embark-area-51
mirror of https://github.com/status-im/embark-area-51.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

refactor(components/contracts): move ContractsList into its own component 

This is done so we can reuse the contracts list component, without introducing an
entire page layout with headline etc.
This commit is contained in:
Pascal Precht 2018-10-08 11:32:43 +02:00
parent 7690418bb1
commit 35d86beab7
No known key found for this signature in database
GPG Key ID: 0EE28D8D6FD85D7D
2 changed files with 46 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
embark-ui/src/components/Contracts.js
View File

@ -1,47 +1,13 @@
import PropTypes from "prop-types";
import React from 'react';
import {
Page,
Grid,
Card,
Table
} from "tabler-react";
import {Link} from 'react-router-dom';
import {formatContractForDisplay} from '../utils/presentation';
import {Page, Grid} from "tabler-react";
import ContractsList from './ContractsList';
const Contracts = ({contracts, title = "Contracts"}) => (
<Page.Content title={title}>
<Grid.Row>
<Grid.Col>
<Card>
<Table
responsive
cards
verticalAlign="center"
className="text-nowrap">
<Table.Header>
<Table.Row>
<Table.ColHeader>Name</Table.ColHeader>
<Table.ColHeader>Address</Table.ColHeader>
<Table.ColHeader>State</Table.ColHeader>
</Table.Row>
</Table.Header>
<Table.Body>
{
contracts.map((contract) => {
const contractDisplay = formatContractForDisplay(contract);
return (
<Table.Row key={contract.className} className={contractDisplay.stateColor}>
<Table.Col><Link to={`/embark/contracts/${contract.className}/overview`}>{contract.className}</Link></Table.Col>
<Table.Col>{contractDisplay.address}</Table.Col>
<Table.Col>{contractDisplay.state}</Table.Col>
</Table.Row>
);
})
}
</Table.Body>
</Table>
</Card>
<ContractsList contracts={contracts}></ContractsList>
</Grid.Col>
</Grid.Row>
</Page.Content>

43
embark-ui/src/components/ContractsList.js Normal file
View File

@ -0,0 +1,43 @@
import PropTypes from "prop-types";
import React from 'react';
import {Card, Table} from "tabler-react";
import {Link} from 'react-router-dom';
import {formatContractForDisplay} from '../utils/presentation';
const ContractsList = ({contracts}) => (
<Card>
<Table
responsive
cards
verticalAlign="center"
className="text-nowrap">
<Table.Header>
<Table.Row>
<Table.ColHeader>Name</Table.ColHeader>
<Table.ColHeader>Address</Table.ColHeader>
<Table.ColHeader>State</Table.ColHeader>
</Table.Row>
</Table.Header>
<Table.Body>
{
contracts.map((contract) => {
const contractDisplay = formatContractForDisplay(contract);
return (
<Table.Row key={contract.className} className={contractDisplay.stateColor}>
<Table.Col><Link to={`/embark/contracts/${contract.className}/overview`}>{contract.className}</Link></Table.Col>
<Table.Col>{contractDisplay.address}</Table.Col>
<Table.Col>{contractDisplay.state}</Table.Col>
</Table.Row>
);
})
}
</Table.Body>
</Table>
</Card>
)
ContractsList.propTypes = {
contracts: PropTypes.array,
};
export default ContractsList;