2020-06-19 06:57:57 +03:00
|
|
|
import * as React from "react";
|
|
|
|
import * as Strings from "~/common/strings";
|
|
|
|
import * as Constants from "~/common/constants";
|
|
|
|
import * as System from "~/components/system";
|
|
|
|
import * as SchemaTable from "~/common/schema-table";
|
|
|
|
import * as Data from "~/common/data";
|
2020-04-09 00:29:13 +03:00
|
|
|
|
2020-06-19 06:57:57 +03:00
|
|
|
import { css } from "@emotion/react";
|
2020-04-09 00:29:13 +03:00
|
|
|
|
2020-06-19 06:57:57 +03:00
|
|
|
import GLRenderer from "~/components/three/GLRenderer";
|
|
|
|
import Section from "~/components/core/Section";
|
|
|
|
import ScenePage from "~/components/core/ScenePage";
|
2020-04-09 00:29:13 +03:00
|
|
|
|
|
|
|
const STYLES_ROW = css`
|
|
|
|
display: flex;
|
|
|
|
margin-top: 24px;
|
|
|
|
width: 100%;
|
|
|
|
|
|
|
|
:first-child {
|
|
|
|
margin-top: 0px;
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
|
|
|
const STYLES_COLUMN = css`
|
|
|
|
display: inline-flex;
|
|
|
|
padding: 0 12px 0 12px;
|
|
|
|
max-width: 25%;
|
|
|
|
width: 100%;
|
|
|
|
|
|
|
|
:first-child {
|
|
|
|
padding: 0 12px 0 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
:last-child {
|
|
|
|
padding: 0 0 0 12px;
|
|
|
|
}
|
|
|
|
|
|
|
|
@media (max-width: 768px) {
|
|
|
|
max-width: 100%;
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
|
|
|
export default class SceneHome extends React.Component {
|
|
|
|
state = {
|
|
|
|
data: null,
|
|
|
|
transaction: null,
|
|
|
|
};
|
|
|
|
|
|
|
|
_handleChange = (e) => {
|
|
|
|
this.setState({ [e.target.name]: e.target.value });
|
|
|
|
};
|
|
|
|
|
|
|
|
render() {
|
2020-07-27 04:51:51 +03:00
|
|
|
// TODO(jim): Refactor later.
|
|
|
|
const slates = {
|
|
|
|
columns: [
|
2020-07-27 11:33:39 +03:00
|
|
|
{ key: "id", id: "id", name: "ID" },
|
|
|
|
{
|
|
|
|
key: "slatename",
|
|
|
|
name: "Slate Name",
|
|
|
|
width: "228px",
|
|
|
|
type: "SLATE_LINK",
|
|
|
|
},
|
2020-07-27 12:50:25 +03:00
|
|
|
{ key: "url", name: "URL", width: "268px", type: "NEW_WINDOW" },
|
2020-07-27 04:51:51 +03:00
|
|
|
{
|
|
|
|
key: "public",
|
|
|
|
name: "Public",
|
|
|
|
type: "SLATE_PUBLIC_TEXT_TAG",
|
|
|
|
width: "188px",
|
|
|
|
},
|
|
|
|
],
|
|
|
|
rows: this.props.viewer.slates.map((each) => {
|
|
|
|
return {
|
|
|
|
...each,
|
2020-07-27 12:50:25 +03:00
|
|
|
url: `/@${this.props.viewer.username}/${each.slatename}`,
|
2020-07-27 12:10:12 +03:00
|
|
|
public: each.data.public,
|
2020-07-27 04:51:51 +03:00
|
|
|
};
|
|
|
|
}),
|
|
|
|
};
|
|
|
|
|
|
|
|
// TODO(jim): Refactor later.
|
|
|
|
const slateButtons = [
|
|
|
|
{ name: "Create slate", type: "SIDEBAR", value: "SIDEBAR_CREATE_SLATE" },
|
|
|
|
];
|
|
|
|
|
|
|
|
// TODO(jim): Refactor later.
|
|
|
|
const data = {
|
|
|
|
columns: [
|
|
|
|
{ key: "name", name: "Data", type: "FILE_LINK" },
|
|
|
|
{
|
|
|
|
key: "size",
|
|
|
|
name: "Size",
|
|
|
|
width: "140px",
|
|
|
|
type: "FILE_SIZE",
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: "date",
|
|
|
|
name: "Date uploaded",
|
|
|
|
width: "160px",
|
|
|
|
type: "FILE_DATE",
|
|
|
|
tooltip:
|
|
|
|
"This date represents when the file was first uploaded to IPFS.",
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: "networks",
|
|
|
|
name: "Network",
|
|
|
|
type: "NETWORK_TYPE",
|
|
|
|
width: "188px",
|
|
|
|
},
|
|
|
|
],
|
|
|
|
rows: this.props.viewer.library[0].children.map((each) => {
|
|
|
|
return {
|
|
|
|
...each,
|
|
|
|
button: "Store on Filecoin",
|
|
|
|
};
|
|
|
|
}),
|
|
|
|
};
|
|
|
|
|
|
|
|
// TODO(jim): Refactor later.
|
|
|
|
const dataButtons = [
|
|
|
|
{
|
|
|
|
name: "View files",
|
|
|
|
type: "NAVIGATE",
|
2020-07-27 06:20:34 +03:00
|
|
|
value: this.props.viewer.library[0].id,
|
2020-07-27 04:51:51 +03:00
|
|
|
},
|
|
|
|
{
|
|
|
|
name: "Upload to IPFS",
|
|
|
|
type: "SIDEBAR",
|
|
|
|
value: "SIDEBAR_ADD_FILE_TO_BUCKET",
|
|
|
|
},
|
|
|
|
];
|
|
|
|
|
|
|
|
// TODO(jim): Refactor later.
|
|
|
|
const wallet = {
|
|
|
|
columns: [
|
|
|
|
{ key: "address", name: "Address" },
|
|
|
|
{ key: "balance", name: "Filecoin", width: "228px" },
|
|
|
|
{ key: "type", name: "Type", width: "188px", type: "TEXT_TAG" },
|
|
|
|
],
|
|
|
|
rows: this.props.viewer.addresses,
|
|
|
|
};
|
|
|
|
|
|
|
|
// TODO(jim): Refactor later.
|
|
|
|
const walletButtons = [
|
|
|
|
{
|
|
|
|
name: "View all",
|
|
|
|
type: "NAVIGATE",
|
|
|
|
value: 2,
|
|
|
|
},
|
|
|
|
];
|
|
|
|
|
2020-04-09 00:29:13 +03:00
|
|
|
return (
|
|
|
|
<ScenePage>
|
2020-07-23 04:25:19 +03:00
|
|
|
<GLRenderer width={1200} height={480} />
|
2020-07-27 04:51:51 +03:00
|
|
|
<Section
|
|
|
|
title="Slates"
|
|
|
|
buttons={slateButtons}
|
|
|
|
onAction={this.props.onAction}
|
|
|
|
>
|
2020-07-27 06:20:34 +03:00
|
|
|
<System.Table
|
|
|
|
data={slates}
|
|
|
|
name="slate"
|
|
|
|
onAction={this.props.onAction}
|
|
|
|
onNavigateTo={this.props.onNavigateTo}
|
|
|
|
/>
|
2020-07-27 04:51:51 +03:00
|
|
|
</Section>
|
|
|
|
|
2020-06-09 21:00:36 +03:00
|
|
|
{this.props.viewer.library[0] ? (
|
|
|
|
<Section
|
|
|
|
title="Recent data"
|
2020-07-27 04:51:51 +03:00
|
|
|
buttons={dataButtons}
|
2020-07-27 06:20:34 +03:00
|
|
|
onAction={this.props.onAction}
|
2020-07-22 12:58:25 +03:00
|
|
|
>
|
2020-06-09 21:00:36 +03:00
|
|
|
<System.Table
|
2020-07-27 04:51:51 +03:00
|
|
|
data={data}
|
2020-07-27 06:20:34 +03:00
|
|
|
name="data"
|
2020-06-09 21:00:36 +03:00
|
|
|
onAction={this.props.onAction}
|
|
|
|
onNavigateTo={this.props.onNavigateTo}
|
|
|
|
/>
|
|
|
|
</Section>
|
|
|
|
) : null}
|
2020-04-09 00:29:13 +03:00
|
|
|
|
2020-06-04 09:26:20 +03:00
|
|
|
{this.props.viewer.addresses[0] ? (
|
|
|
|
<Section
|
2020-06-08 09:45:53 +03:00
|
|
|
title="Wallet addresses"
|
2020-07-27 04:51:51 +03:00
|
|
|
buttons={walletButtons}
|
2020-07-27 06:20:34 +03:00
|
|
|
onAction={this.props.onAction}
|
2020-07-22 12:58:25 +03:00
|
|
|
>
|
2020-06-04 09:26:20 +03:00
|
|
|
<System.Table
|
2020-07-27 04:51:51 +03:00
|
|
|
data={wallet}
|
2020-07-27 06:20:34 +03:00
|
|
|
name="transaction"
|
2020-06-04 09:26:20 +03:00
|
|
|
onAction={this.props.onAction}
|
|
|
|
onNavigateTo={this.props.onNavigateTo}
|
|
|
|
/>
|
|
|
|
</Section>
|
|
|
|
) : null}
|
2020-04-09 00:29:13 +03:00
|
|
|
</ScenePage>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|