slate/components/system/modules/FilecoinDealsList.js

132 lines
3.2 KiB
JavaScript
Raw Normal View History

import * as React from "react";
import * as Constants from "~/common/constants";
import * as Strings from "~/common/strings";
2020-11-30 08:24:22 +03:00
import { css } from "@emotion/react";
import { Table } from "~/components/system/components/Table";
2020-07-19 23:34:07 +03:00
import Group from "~/components/system/Group";
const STYLES_NESTED_TABLE = css`
display: grid;
grid-template-columns: 160px 1fr;
`;
2020-07-19 23:34:07 +03:00
const NestedTable = (data) => {
let values = [];
for (let entries of Object.entries(data)) {
if (entries[0] !== "rootCid") {
2020-08-02 22:55:45 +03:00
values.push(<div key={entries[0]}>{entries[0]}</div>);
values.push(<div key={`${entries[0]}value`}>{entries[1]}</div>);
2020-07-19 23:34:07 +03:00
}
}
return <div css={STYLES_NESTED_TABLE}>{values}</div>;
};
export class FilecoinStorageDealsList extends React.Component {
state = {
selectedRowId: null,
};
2020-07-19 23:34:07 +03:00
_handleClick = (e) => {
this.setState({ selectedRowId: e.target.value });
};
render() {
return (
2020-07-19 23:34:07 +03:00
<Group title="Storage Deals">
<Table
data={{
columns: [
{
key: "address",
name: "Address",
width: "196px",
},
{
key: "rootCid",
name: "Root CID",
width: "196px",
},
{
key: "status",
name: "Status",
2020-07-19 23:34:07 +03:00
type: "STORAGE_DEAL_STATUS",
width: "104px",
},
{
key: "time",
name: "Time",
2020-07-19 23:34:07 +03:00
width: "100%",
},
],
rows: this.props.data.map((each) => {
return {
id: each.rootCid,
address: each.addr,
rootCid: each.rootCid,
status: each.pending ? "2" : "1",
time: each.time,
2020-07-19 23:34:07 +03:00
children: NestedTable(each.dealInfo),
};
}),
}}
selectedRowId={this.state.selectedRowId}
onClick={this._handleClick}
2020-08-01 06:44:16 +03:00
name={this.props.name}
2020-07-19 23:34:07 +03:00
/>
</Group>
);
}
}
export class FilecoinRetrievalDealsList extends React.Component {
state = {
selectedRowId: null,
};
_handleClick = (e) => {
this.setState({ selectedRowId: e.target.value });
};
render() {
return (
<Group title="Retrieval Deals">
<Table
2020-07-19 23:34:07 +03:00
data={{
columns: [
{
key: "address",
name: "Address",
width: "248px",
},
{
key: "rootCid",
name: "Root CID",
2020-07-19 23:34:07 +03:00
width: "248px",
},
{
key: "time",
name: "Time",
width: "100%",
},
],
rows: this.props.data.map((each) => {
return {
id: each.dealInfo.rootCid,
address: each.addr,
rootCid: each.dealInfo.rootCid,
time: each.time,
children: NestedTable(each.dealInfo),
};
}),
}}
selectedRowId={this.state.selectedRowId}
2020-07-19 23:34:07 +03:00
onClick={this._handleClick}
name={this.props.name}
/>
2020-07-19 23:34:07 +03:00
</Group>
);
}
}