Merge pull request #374 from filecoin-project/@tarafanlin/sandboxscene

creating a hidden scene for feature experiements
This commit is contained in:
CAKE 2020-10-20 10:55:55 -07:00 committed by GitHub
commit dd38cf8f9a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 96 additions and 36 deletions

View File

@ -88,6 +88,14 @@ export const generate = ({ library = [], slates = [] }) => [
children: null,
ignore: true,
},
{
id: "V1_NAVIGATION_TARA",
decorator: "TARA",
name: "Tara",
pageTitle: "Tara Sandbox",
children: null,
ignore: true,
},
...constructSlatesTreeForNavigation(slates),
constructFilesTreeForNavigation(library),
/*

View File

@ -34,6 +34,7 @@ import SceneArchive from "~/scenes/SceneArchive";
import SceneMakeFilecoinDeal from "~/scenes/SceneMakeFilecoinDeal";
import SceneEncryptedData from "~/scenes/SceneEncryptedData";
import SceneMiners from "~/scenes/SceneMiners";
import SceneTara from "~/scenes/SceneTara";
// NOTE(jim):
// Sidebars each have a decorator and can be shown to with _handleAction
@ -97,6 +98,7 @@ const SCENES = {
MAKE_DEAL: <SceneMakeFilecoinDeal />,
ENCRYPTED: <SceneEncryptedData />,
MINERS: <SceneMiners />,
TARA: <SceneTara />,
};
export default class ApplicationPage extends React.Component {
@ -324,8 +326,7 @@ export default class ApplicationPage extends React.Component {
name: "create-alert",
detail: {
alert: {
message:
"We encountered issues updating your uploaded files. Please try again",
message: "We encountered issues updating your uploaded files. Please try again",
},
},
});
@ -359,9 +360,7 @@ export default class ApplicationPage extends React.Component {
if (
current.target &&
current.target.slateId &&
this.state.viewer.slates
.map((slate) => slate.id)
.includes(current.target.slateId)
this.state.viewer.slates.map((slate) => slate.id).includes(current.target.slateId)
) {
dispatchCustomEvent({
name: "remote-update-slate-screen",
@ -515,8 +514,7 @@ export default class ApplicationPage extends React.Component {
_handleDeleteYourself = async () => {
// TODO(jim): Put this somewhere better for messages.
const message =
"Do you really want to delete your account? It will be permanently removed";
const message = "Do you really want to delete your account? It will be permanently removed";
if (!window.confirm(message)) {
return false;
}
@ -528,8 +526,7 @@ export default class ApplicationPage extends React.Component {
name: "create-alert",
detail: {
alert: {
message:
"We're having trouble connecting right now. Please try again later",
message: "We're having trouble connecting right now. Please try again later",
},
},
});
@ -784,24 +781,21 @@ export default class ApplicationPage extends React.Component {
/>
);
const scene = React.cloneElement(
SCENES[next.scene || current.target.decorator],
{
current: current.target,
data: this.state.data,
viewer: this.state.viewer,
selected: this.state.selected,
onSelectedChange: this._handleSelectedChange,
onViewerChange: this._handleViewerChange,
onDeleteYourself: this._handleDeleteYourself,
onAction: this._handleAction,
onUpload: this._handleUploadFiles,
onBack: this._handleBack,
onForward: this._handleForward,
onRehydrate: this.rehydrate,
sceneId: current.target.id,
}
);
const scene = React.cloneElement(SCENES[next.scene || current.target.decorator], {
current: current.target,
data: this.state.data,
viewer: this.state.viewer,
selected: this.state.selected,
onSelectedChange: this._handleSelectedChange,
onViewerChange: this._handleViewerChange,
onDeleteYourself: this._handleDeleteYourself,
onAction: this._handleAction,
onUpload: this._handleUploadFiles,
onBack: this._handleBack,
onForward: this._handleForward,
onRehydrate: this.rehydrate,
sceneId: current.target.id,
});
let sidebarElement;
if (this.state.sidebar) {
@ -830,11 +824,7 @@ export default class ApplicationPage extends React.Component {
return (
<React.Fragment>
<WebsitePrototypeWrapper
description={description}
title={title}
url={url}
>
<WebsitePrototypeWrapper description={description} title={title} url={url}>
<ApplicationLayout
onAction={this._handleAction}
header={headerElement}
@ -846,10 +836,7 @@ export default class ApplicationPage extends React.Component {
>
{scene}
</ApplicationLayout>
<GlobalViewerCID
onRehydrate={this.rehydrate}
onAction={this._handleAction}
/>
<GlobalViewerCID onRehydrate={this.rehydrate} onAction={this._handleAction} />
<System.GlobalCarousel />
<System.GlobalModal />
</WebsitePrototypeWrapper>

65
scenes/SceneTara.js Normal file
View File

@ -0,0 +1,65 @@
import * as React from "react";
import * as Actions from "~/common/actions";
import * as System from "~/components/system";
import * as SVG from "~/common/svg";
import * as Constants from "~/common/constants";
import { css } from "@emotion/react";
import { TabGroup } from "~/components/core/TabGroup";
import { ButtonPrimary } from "~/components/system/components/Buttons";
import { dispatchCustomEvent } from "~/common/custom-events";
import ScenePage from "~/components/core/ScenePage";
import DataView from "~/components/core/DataView";
import ScenePageHeader from "~/components/core/ScenePageHeader";
import EmptyState from "~/components/core/EmptyState";
const STYLES_ICONS = css`
display: flex;
flex-direction: row;
justify-content: center;
`;
export default class SceneTara extends React.Component {
render() {
return (
<ScenePage>
<ScenePageHeader
title="Tara Sandbox"
actions={
<ButtonPrimary
onClick={() => {
this.props.onAction({
type: "SIDEBAR",
value: "SIDEBAR_ADD_FILE_TO_BUCKET",
});
}}
>
Upload data
</ButtonPrimary>
}
/>
{this.props.viewer.library[0].children && this.props.viewer.library[0].children.length ? (
<DataView
onAction={this.props.onAction}
viewer={this.props.viewer}
items={this.props.viewer.library[0].children}
onRehydrate={this.props.onRehydrate}
/>
) : (
<EmptyState>
<div css={STYLES_ICONS}>
<SVG.Sound height="24px" style={{ margin: "0 16px" }} />
<SVG.Document height="24px" style={{ margin: "0 16px" }} />
<SVG.Image height="24px" style={{ margin: "0 16px" }} />
<SVG.Book height="24px" style={{ margin: "0 16px" }} />
<SVG.Video height="24px" style={{ margin: "0 16px" }} />
</div>
<div style={{ marginTop: 24 }}>Drag and drop files into Slate to upload</div>
</EmptyState>
)}
</ScenePage>
);
}
}