mirror of
https://github.com/filecoin-project/slate.git
synced 2024-12-27 02:52:25 +03:00
520 lines
14 KiB
JavaScript
520 lines
14 KiB
JavaScript
import * as React from "react";
|
|
import * as NavigationData from "~/common/navigation-data";
|
|
import * as Actions from "~/common/actions";
|
|
import * as State from "~/common/state";
|
|
import * as Credentials from "~/common/credentials";
|
|
|
|
// NOTE(jim):
|
|
// Scenes each have an ID and can be navigated to with _handleAction
|
|
import SceneDeals from "~/scenes/SceneDeals";
|
|
import SceneEditAccount from "~/scenes/SceneEditAccount";
|
|
import SceneFile from "~/scenes/SceneFile";
|
|
import SceneFilesFolder from "~/scenes/SceneFilesFolder";
|
|
import SceneHome from "~/scenes/SceneHome";
|
|
import SceneMiners from "~/scenes/SceneMiners";
|
|
import SceneSettings from "~/scenes/SceneSettings";
|
|
import SceneWallet from "~/scenes/SceneWallet";
|
|
import SceneSlates from "~/scenes/SceneSlates";
|
|
import SceneLocalData from "~/scenes/SceneLocalData";
|
|
import SceneSettingsDeveloper from "~/scenes/SceneSettingsDeveloper";
|
|
import SceneSignIn from "~/scenes/SceneSignIn";
|
|
import SceneSlate from "~/scenes/SceneSlate";
|
|
|
|
// NOTE(jim):
|
|
// Sidebars each have a decorator and can be shown to with _handleAction
|
|
import SidebarCreateSlate from "~/components/sidebars/SidebarCreateSlate";
|
|
import SidebarCreateWalletAddress from "~/components/sidebars/SidebarCreateWalletAddress";
|
|
import SidebarWalletSendFunds from "~/components/sidebars/SidebarWalletSendFunds";
|
|
import SidebarFileStorageDeal from "~/components/sidebars/SidebarFileStorageDeal";
|
|
import SidebarCreatePaymentChannel from "~/components/sidebars/SidebarCreatePaymentChannel";
|
|
import SidebarAddFileToBucket from "~/components/sidebars/SidebarAddFileToBucket";
|
|
|
|
// NOTE(jim):
|
|
// Core components to the application structure.
|
|
import ApplicationNavigation from "~/components/core/ApplicationNavigation";
|
|
import ApplicationHeader from "~/components/core/ApplicationHeader";
|
|
import ApplicationLayout from "~/components/core/ApplicationLayout";
|
|
import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
|
|
import Cookies from "universal-cookie";
|
|
|
|
const cookies = new Cookies();
|
|
|
|
export const getServerSideProps = async (context) => {
|
|
return {
|
|
props: { ...context.query },
|
|
};
|
|
};
|
|
|
|
export default class ApplicationPage extends React.Component {
|
|
_socket = null;
|
|
|
|
state = {
|
|
selected: State.getSelectedState(this.props.viewer),
|
|
viewer: State.getInitialState(this.props.viewer),
|
|
history: [{ id: 1, scrollTop: 0, data: null }],
|
|
currentIndex: 0,
|
|
data: null,
|
|
sidebar: null,
|
|
sidebarLoading: false,
|
|
};
|
|
|
|
async componentDidMount() {
|
|
window.addEventListener("dragenter", this._handleDragEnter);
|
|
window.addEventListener("dragleave", this._handleDragLeave);
|
|
window.addEventListener("dragover", this._handleDragOver);
|
|
window.addEventListener("drop", this._handleDrop);
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
window.removeEventListener("dragenter", this._handleDragEnter);
|
|
window.removeEventListener("dragleave", this._handleDragLeave);
|
|
window.removeEventListener("dragover", this._handleDragOver);
|
|
window.removeEventListener("drop", this._handleDrop);
|
|
}
|
|
|
|
_handleSetFile = async ({ file, slate }) => {
|
|
this.setState({ fileLoading: true });
|
|
|
|
let data = new FormData();
|
|
data.append("image", file);
|
|
|
|
const options = {
|
|
method: "POST",
|
|
headers: {
|
|
Accept: "application/json",
|
|
},
|
|
body: data,
|
|
};
|
|
|
|
const response = await fetch(`/api/data/${file.name}`, options);
|
|
const json = await response.json();
|
|
|
|
if (!json && json.data) {
|
|
this.setState({ sidebar: null, fileLoading: false });
|
|
return;
|
|
}
|
|
|
|
if (!json.data) {
|
|
this.setState({ sidebar: null, fileLoading: false });
|
|
return;
|
|
}
|
|
|
|
if (json && slate) {
|
|
const addResponse = await fetch(`/api/slates/add-url`, {
|
|
method: "POST",
|
|
headers: {
|
|
Accept: "application/json",
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify({ slate, data: { ...json.data } }),
|
|
});
|
|
|
|
if (!addResponse || addResponse.error) {
|
|
console.log(addResponse.error);
|
|
alert("TODO: Adding an image to Slate went wrong.");
|
|
}
|
|
}
|
|
|
|
await this.rehydrate();
|
|
|
|
this.setState({ sidebar: null, fileLoading: false });
|
|
};
|
|
|
|
_handleDragEnter = (e) => {
|
|
// TODO(jim): Styles.
|
|
console.log("dragenter", e);
|
|
};
|
|
|
|
_handleDragLeave = (e) => {
|
|
// TODO(jim): Styles.
|
|
console.log("dragleave", e);
|
|
};
|
|
|
|
_handleDragOver = (e) => {
|
|
e.preventDefault();
|
|
console.log("dragover", e);
|
|
};
|
|
|
|
_handleSidebarLoading = (sidebarLoading) => this.setState({ sidebarLoading });
|
|
|
|
_handleDrop = async (e) => {
|
|
e.preventDefault();
|
|
|
|
this.setState({ fileLoading: true });
|
|
|
|
this._handleAction({
|
|
type: "SIDEBAR",
|
|
value: "SIDEBAR_ADD_FILE_TO_BUCKET",
|
|
});
|
|
|
|
if (e.dataTransfer.items) {
|
|
for (var i = 0; i < e.dataTransfer.items.length; i++) {
|
|
if (e.dataTransfer.items[i].kind === "file") {
|
|
var file = e.dataTransfer.items[i].getAsFile();
|
|
console.log(file.name);
|
|
await this._handleSetFile({ file });
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
this.setState({ fileLoading: false });
|
|
};
|
|
|
|
rehydrate = async () => {
|
|
const response = await Actions.hydrateAuthenticatedUser();
|
|
|
|
console.log("REHYDRATION CALL", response);
|
|
|
|
if (!response || response.error) {
|
|
return null;
|
|
}
|
|
|
|
this.setState({
|
|
viewer: State.getInitialState(response.data),
|
|
selected: State.getSelectedState(response.data),
|
|
});
|
|
|
|
return { rehydrated: true };
|
|
};
|
|
|
|
_handleSubmit = async (data) => {
|
|
let response;
|
|
if (data.type === "CREATE_SLATE") {
|
|
response = await Actions.createSlate({
|
|
name: data.name,
|
|
});
|
|
}
|
|
|
|
if (data.type === "CREATE_WALLET_ADDRESS") {
|
|
response = await Actions.updateViewer({
|
|
type: "CREATE_FILECOIN_ADDRESS",
|
|
address: {
|
|
name: data.name,
|
|
type: data.wallet_type,
|
|
makeDefault: data.makeDefault,
|
|
},
|
|
});
|
|
}
|
|
|
|
if (data.type === "SEND_WALLET_ADDRESS_FILECOIN") {
|
|
response = await Actions.sendFilecoin({
|
|
source: data.source,
|
|
target: data.target,
|
|
amount: data.amount,
|
|
});
|
|
}
|
|
|
|
console.log({ response });
|
|
|
|
await this.rehydrate();
|
|
|
|
this._handleDismissSidebar();
|
|
|
|
return response;
|
|
};
|
|
|
|
_handleCancel = () => {
|
|
this._handleDismissSidebar();
|
|
};
|
|
|
|
_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";
|
|
if (!window.confirm(message)) {
|
|
return false;
|
|
}
|
|
|
|
let response = await Actions.deleteViewer();
|
|
console.log("DELETE_VIEWER", response);
|
|
|
|
await this._handleSignOut();
|
|
};
|
|
|
|
_handleAuthenticate = async (state) => {
|
|
// NOTE(jim): Kills existing session cookie if there is one.
|
|
const jwt = cookies.get(Credentials.session.key);
|
|
|
|
if (jwt) {
|
|
cookies.remove(Credentials.session.key);
|
|
}
|
|
|
|
// NOTE(jim): Acts as our existing username exists check.
|
|
// If the user exists, move on the sign in anyways.
|
|
let response = await Actions.createUser(state);
|
|
console.log("CREATE_USER", response);
|
|
|
|
response = await Actions.signIn(state);
|
|
if (response.error) {
|
|
console.log("SIGN IN ERROR", response);
|
|
return null;
|
|
}
|
|
|
|
if (response.token) {
|
|
// NOTE(jim):
|
|
// + One week.
|
|
// + Only requests to the same site.
|
|
// + Not using sessionStorage so the cookie doesn't leave when the browser dies.
|
|
cookies.set(Credentials.session.key, response.token, true, {
|
|
path: "/",
|
|
maxAge: 3600 * 24 * 7,
|
|
sameSite: "strict",
|
|
});
|
|
}
|
|
|
|
return await this.rehydrate();
|
|
};
|
|
|
|
_handleSignOut = () => {
|
|
const jwt = cookies.get(Credentials.session.key);
|
|
|
|
if (jwt) {
|
|
cookies.remove(Credentials.session.key);
|
|
window.location.reload();
|
|
}
|
|
};
|
|
|
|
_handleViewerChange = (e) => {
|
|
this.setState({
|
|
viewer: { ...this.state.viewer, [e.target.name]: e.target.value },
|
|
});
|
|
};
|
|
|
|
_handleSelectedChange = (e) => {
|
|
this.setState({
|
|
selected: { ...this.state.selected, [e.target.name]: e.target.value },
|
|
});
|
|
};
|
|
|
|
_handleDismissSidebar = () => {
|
|
this.setState({ sidebar: null, sidebarLoading: false, data: null });
|
|
};
|
|
|
|
_handleAction = (options) => {
|
|
console.log(options);
|
|
if (options.type === "NAVIGATE") {
|
|
return this._handleNavigateTo({ id: options.value }, options.data);
|
|
}
|
|
|
|
if (options.type === "NEW_WINDOW") {
|
|
return window.open(options.value);
|
|
}
|
|
|
|
if (options.type === "ACTION") {
|
|
return alert(JSON.stringify(options));
|
|
}
|
|
|
|
if (options.type === "DOWNLOAD") {
|
|
return alert(JSON.stringify(options));
|
|
}
|
|
|
|
if (options.type === "SIDEBAR") {
|
|
return this.setState({
|
|
sidebar: this.sidebars[options.value],
|
|
data: options.data,
|
|
});
|
|
}
|
|
|
|
return alert(JSON.stringify(options));
|
|
};
|
|
|
|
_handleNavigateTo = (next, data = null) => {
|
|
// TODO(jim): Refactor this hack for profile pages.
|
|
if (next.id === 5) {
|
|
window.open(`/@${this.state.viewer.username}`);
|
|
return;
|
|
}
|
|
|
|
this.state.history[this.state.currentIndex].scrollTop = window.scrollY;
|
|
this.state.history[this.state.currentIndex].data = data;
|
|
|
|
if (this.state.currentIndex !== this.state.history.length - 1) {
|
|
const adjustedArray = [...this.state.history];
|
|
adjustedArray.length = this.state.currentIndex + 1;
|
|
|
|
return this.setState(
|
|
{
|
|
history: [...adjustedArray, next],
|
|
currentIndex: this.state.currentIndex + 1,
|
|
data,
|
|
sidebar: null,
|
|
},
|
|
() => window.scrollTo(0, 0)
|
|
);
|
|
}
|
|
|
|
this.setState(
|
|
{
|
|
history: [...this.state.history, next],
|
|
currentIndex: this.state.currentIndex + 1,
|
|
data,
|
|
sidebar: null,
|
|
},
|
|
() => window.scrollTo(0, 0)
|
|
);
|
|
};
|
|
|
|
_handleBack = () => {
|
|
this.state.history[this.state.currentIndex].scrollTop = window.scrollY;
|
|
|
|
const next = this.state.history[this.state.currentIndex - 1];
|
|
|
|
this.setState(
|
|
{
|
|
currentIndex: this.state.currentIndex - 1,
|
|
sidebar: null,
|
|
data: { ...next.data },
|
|
},
|
|
() => {
|
|
console.log({ next });
|
|
window.scrollTo(0, next.scrollTop);
|
|
}
|
|
);
|
|
};
|
|
|
|
_handleForward = () => {
|
|
this.state.history[this.state.currentIndex].scrollTop = window.scrollY;
|
|
|
|
const next = this.state.history[this.state.currentIndex + 1];
|
|
|
|
this.setState(
|
|
{
|
|
currentIndex: this.state.currentIndex + 1,
|
|
sidebar: null,
|
|
data: { ...next.data },
|
|
},
|
|
() => {
|
|
console.log({ next });
|
|
window.scrollTo(0, next.scrollTop);
|
|
}
|
|
);
|
|
};
|
|
|
|
sidebars = {
|
|
SIDEBAR_FILE_STORAGE_DEAL: <SidebarFileStorageDeal />,
|
|
SIDEBAR_WALLET_SEND_FUNDS: <SidebarWalletSendFunds />,
|
|
SIDEBAR_CREATE_WALLET_ADDRESS: <SidebarCreateWalletAddress />,
|
|
SIDEBAR_ADD_FILE_TO_BUCKET: <SidebarAddFileToBucket />,
|
|
SIDEBAR_CREATE_SLATE: <SidebarCreateSlate />,
|
|
};
|
|
|
|
scenes = {
|
|
HOME: <SceneHome />,
|
|
WALLET: <SceneWallet />,
|
|
FOLDER: <SceneFilesFolder />,
|
|
FILE: <SceneFile />,
|
|
SLATE: <SceneSlate />,
|
|
DEALS: <SceneDeals />,
|
|
SETTINGS: <SceneSettings />,
|
|
SETTINGS_DEVELOPER: <SceneSettingsDeveloper />,
|
|
EDIT_ACCOUNT: <SceneEditAccount />,
|
|
SLATES: <SceneSlates />,
|
|
LOCAL_DATA: <SceneLocalData />,
|
|
};
|
|
|
|
render() {
|
|
// NOTE(jim): Not authenticated.
|
|
if (!this.state.viewer) {
|
|
return (
|
|
<WebsitePrototypeWrapper
|
|
title="Slate: sign in"
|
|
description="Sign in to your Slate account to manage your assets."
|
|
url="https://slate.host/application"
|
|
>
|
|
<SceneSignIn
|
|
onAuthenticate={this._handleAuthenticate}
|
|
onNavigateTo={this._handleNavigateTo}
|
|
/>
|
|
</WebsitePrototypeWrapper>
|
|
);
|
|
}
|
|
|
|
// NOTE(jim): Authenticated.
|
|
const navigation = NavigationData.generate(this.state.viewer);
|
|
const next = this.state.history[this.state.currentIndex];
|
|
const current = NavigationData.getCurrentById(navigation, next.id);
|
|
|
|
const navigationElement = (
|
|
<ApplicationNavigation
|
|
viewer={this.state.viewer}
|
|
activeId={current.target.id}
|
|
activeIds={current.activeIds}
|
|
navigation={navigation}
|
|
onNavigateTo={this._handleNavigateTo}
|
|
onAction={this._handleAction}
|
|
/>
|
|
);
|
|
|
|
const headerElement = (
|
|
<ApplicationHeader
|
|
viewer={this.state.viewer}
|
|
pageTitle={current.target.pageTitle}
|
|
currentIndex={this.state.currentIndex}
|
|
onBack={this._handleBack}
|
|
onForward={this._handleForward}
|
|
history={this.state.history}
|
|
onNavigateTo={this._handleNavigateTo}
|
|
onAction={this._handleAction}
|
|
onSignOut={this._handleSignOut}
|
|
/>
|
|
);
|
|
|
|
const scene = React.cloneElement(this.scenes[current.target.decorator], {
|
|
current: current.target,
|
|
data: this.state.data,
|
|
viewer: this.state.viewer,
|
|
selected: this.state.selected,
|
|
onNavigateTo: this._handleNavigateTo,
|
|
onSelectedChange: this._handleSelectedChange,
|
|
onViewerChange: this._handleViewerChange,
|
|
onDeleteYourself: this._handleDeleteYourself,
|
|
onAction: this._handleAction,
|
|
onBack: this._handleBack,
|
|
onForward: this._handleForward,
|
|
onRehydrate: this.rehydrate,
|
|
});
|
|
|
|
let sidebarElement;
|
|
if (this.state.sidebar) {
|
|
sidebarElement = React.cloneElement(this.state.sidebar, {
|
|
selected: this.state.selected,
|
|
viewer: this.state.viewer,
|
|
data: this.state.data,
|
|
fileLoading: this.state.fileLoading,
|
|
sidebarLoading: this.state.sidebarLoading,
|
|
onSelectedChange: this._handleSelectedChange,
|
|
onSubmit: this._handleSubmit,
|
|
onCancel: this._handleCancel,
|
|
onSetFile: this._handleSetFile,
|
|
onSidebarLoading: this._handleSidebarLoading,
|
|
onRehydrate: this.rehydrate,
|
|
});
|
|
}
|
|
|
|
const title = `Slate : ${current.target.pageTitle}`;
|
|
const description = "This is an early preview.";
|
|
const url = "https://fps.onrender.com/v1";
|
|
|
|
return (
|
|
<React.Fragment>
|
|
<WebsitePrototypeWrapper
|
|
title={title}
|
|
description={description}
|
|
url={url}
|
|
>
|
|
<ApplicationLayout
|
|
navigation={navigationElement}
|
|
header={headerElement}
|
|
sidebar={sidebarElement}
|
|
onDismissSidebar={this._handleDismissSidebar}
|
|
>
|
|
{scene}
|
|
</ApplicationLayout>
|
|
</WebsitePrototypeWrapper>
|
|
</React.Fragment>
|
|
);
|
|
}
|
|
}
|