slate/scenes/SceneHome.js

136 lines
3.7 KiB
JavaScript
Raw Normal View History

2020-06-19 06:57:57 +03:00
import * as React from "react";
import * as Constants from "~/common/constants";
import * as System from "~/components/system";
2020-06-19 06:57:57 +03:00
import { css } from "@emotion/react";
2020-06-19 06:57:57 +03:00
import Section from "~/components/core/Section";
import ScenePage from "~/components/core/ScenePage";
import DataView from "~/components/core/DataView";
2020-08-12 11:34:17 +03:00
const STYLES_NUMBER = css`
font-family: ${Constants.font.semiBold};
font-weight: 400;
`;
export default class SceneHome extends React.Component {
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: "slatename",
name: "Slate Name",
2020-08-12 11:34:17 +03:00
width: "100%",
2020-07-27 11:33:39 +03:00
type: "SLATE_LINK",
},
2020-07-27 12:50:25 +03:00
{ key: "url", name: "URL", width: "268px", type: "NEW_WINDOW" },
2020-08-12 11:34:17 +03:00
{ key: "id", id: "id", name: "Slate ID", width: "296px" },
{
key: "objects",
name: "Objects",
},
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,
url: `https://slate.host/${this.props.viewer.username}/${
each.slatename
}`,
2020-07-27 12:10:12 +03:00
public: each.data.public,
2020-08-12 11:34:17 +03:00
objects: <span css={STYLES_NUMBER}>{each.data.objects.length}</span>,
2020-07-27 04:51:51 +03:00
};
}),
};
// TODO(jim): Refactor later.
const slateButtons = [
{ name: "Create slate", type: "SIDEBAR", value: "SIDEBAR_CREATE_SLATE" },
];
2020-07-27 04:51:51 +03:00
// 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: "V1_NAVIGATION_WALLET",
2020-07-27 04:51:51 +03:00
},
];
return (
<ScenePage>
2020-08-02 09:41:18 +03:00
<System.DescriptionGroup
label="Will the Home page look like this in the final product?"
description="No! Consider this page just a functionality test. Home will have Filecoin network analytics and updates from the people you engage with."
/>
<System.H1 style={{ marginTop: 48 }}>Home</System.H1>
2020-07-31 13:14:44 +03:00
{this.props.viewer.addresses[0] ? (
<Section
title="Wallet addresses"
buttons={walletButtons}
onAction={this.props.onAction}
>
2020-07-31 13:14:44 +03:00
<System.Table
data={wallet}
name="transaction"
onAction={this.props.onAction}
onNavigateTo={this.props.onNavigateTo}
/>
</Section>
) : null}
<Section
title="Slates"
buttons={slateButtons}
onAction={this.props.onAction}
>
<System.Table
data={slates}
name="slate"
onAction={this.props.onAction}
onNavigateTo={this.props.onNavigateTo}
/>
2020-07-27 04:51:51 +03:00
</Section>
{this.props.viewer.library[0] ? (
<DataView
buttons={[
{
name: "View files",
type: "NAVIGATE",
value: this.props.viewer.library[0].id,
},
{
name: "Upload data",
type: "SIDEBAR",
value: "SIDEBAR_ADD_FILE_TO_BUCKET",
},
]}
viewer={this.props.viewer}
items={this.props.viewer.library[0].children}
2020-08-11 06:32:14 +03:00
onAction={this.props.onAction}
onRehydrate={this.props.onRehydrate}
/>
) : null}
</ScenePage>
);
}
}