slate/scenes/SceneHome.js
Andrew Hill 0a4ce7cca9
chore(api): use path based ipfs gateway not subdomain
Signed-off-by: Andrew Hill <andrew@textile.io>
2020-09-11 20:43:28 -07:00

182 lines
5.0 KiB
JavaScript

import * as React from "react";
import * as Constants from "~/common/constants";
import * as System from "~/components/system";
import { css } from "@emotion/react";
import Section from "~/components/core/Section";
import ScenePage from "~/components/core/ScenePage";
import DataView from "~/components/core/DataView";
import ScenePageHeader from "~/components/core/ScenePageHeader";
const STYLES_NUMBER = css`
font-family: ${Constants.font.semiBold};
font-weight: 400;
`;
const STYLES_VIDEO_BIG = css`
display: block;
background-color: ${Constants.system.moonstone};
padding: 0;
outline: 0;
margin: 48px auto 88px auto;
border-radius: 4px;
width: 100%;
box-shadow: 0px 10px 50px 20px rgba(0, 0, 0, 0.1);
@media (max-width: ${Constants.sizes.tablet}px) {
margin: 32px auto 64px auto;
}
@media (max-width: ${Constants.sizes.mobile}px) {
margin: 24px auto 48px auto;
}
`;
export default class SceneHome extends React.Component {
_handleCreateSlate = () => {
this.props.onAction({
type: "NAVIGATE",
value: "V1_NAVIGATION_SLATES",
data: null,
});
};
render() {
// TODO(jim): Refactor later.
const slates = {
columns: [
{
key: "name",
name: "Slate Name",
width: "100%",
type: "SLATE_LINK",
},
{ key: "url", width: "268px", name: "URL", type: "NEW_WINDOW" },
{ key: "id", id: "id", name: "Slate ID", width: "296px" },
{
key: "objects",
name: "Objects",
},
{
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
}`,
name: each.data.name,
public: each.data.public,
objects: <span css={STYLES_NUMBER}>{each.data.objects.length}</span>,
};
}),
};
// TODO(jim): Refactor later.
const slateButtons = [
{ name: "Create slate", type: "SIDEBAR", value: "SIDEBAR_CREATE_SLATE" },
];
/*
// 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",
},
];
*/
/*
{this.props.viewer.addresses[0] ? (
<Section title="Wallet addresses" buttons={walletButtons} onAction={this.props.onAction}>
<System.Table
data={wallet}
name="transaction"
onAction={this.props.onAction}
onNavigateTo={this.props.onNavigateTo}
/>
</Section>
) : null}
*/
let hasChildren = false;
if (this.props.viewer && this.props.viewer.library[0].children.length) {
hasChildren = true;
}
return (
<ScenePage>
<ScenePageHeader title="Home">
{hasChildren
? "Welcome back! Here is your data."
: "Welcome to Slate! You can share files with anyone in the world. Here is how it works:"}
</ScenePageHeader>
{hasChildren ? (
<div style={{ marginTop: "48px" }}>
<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}
onAction={this.props.onAction}
onRehydrate={this.props.onRehydrate}
/>
</div>
) : (
<React.Fragment>
<video
css={STYLES_VIDEO_BIG}
autoPlay
loop
muted
src="https://slate.textile.io/ipfs/bafybeienjmql6lbtsaz3ycon3ttliohcl7qbquwvny43lhcodky54z65cy"
type="video/m4v"
playsInline
style={{
backgroundImage: `url('https://slate.textile.io/ipfs/bafybeienjmql6lbtsaz3ycon3ttliohcl7qbquwvny43lhcodky54z65cy')`,
borderRadius: `4px`,
width: `100%`,
boxShadow: `0px 10px 50px 20px rgba(0, 0, 0, 0.1)`,
backgroundSize: `cover`,
}}
/>
<System.P>When you're ready, create a slate!</System.P>
<br />
<System.ButtonPrimary onClick={this._handleCreateSlate}>
Create a Slate
</System.ButtonPrimary>
</React.Fragment>
)}
</ScenePage>
);
}
}