mirror of
https://github.com/filecoin-project/slate.git
synced 2024-11-22 12:24:02 +03:00
cleanup: imports and site navigation
This commit is contained in:
@wwwjim
parent
3a0cc561e3
commit
c5241e00f9
@ -37,6 +37,8 @@ function createWindow() {
|
||||
// Open the DevTools.
|
||||
mainWindow.webContents.openDevTools();
|
||||
// and load the index.html of the app.
|
||||
// TODO(jim):
|
||||
// We shouldn't hardcode this port.
|
||||
mainWindow.loadURL("http://localhost:1337");
|
||||
console.log("window created");
|
||||
}
|
||||
@ -49,7 +51,7 @@ app.whenReady().then(() => {
|
||||
bootServer();
|
||||
createWindow();
|
||||
|
||||
app.on("activate", function () {
|
||||
app.on("activate", function() {
|
||||
// On macOS it's common to re-create a window in the app when the
|
||||
// dock icon is clicked and there are no other windows open.
|
||||
if (BrowserWindow.getAllWindows().length === 0) createWindow();
|
||||
@ -59,7 +61,7 @@ app.whenReady().then(() => {
|
||||
// Quit when all windows are closed, except on macOS. There, it's common
|
||||
// for applications and their menu bar to stay active until the user quits
|
||||
// explicitly with Cmd + Q.
|
||||
app.on("window-all-closed", function () {
|
||||
app.on("window-all-closed", function() {
|
||||
if (process.platform !== "darwin") app.quit();
|
||||
});
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import * as React from "react";
|
||||
import * as System from "../dist";
|
||||
|
||||
export default class TestPage extends React.Component {
|
||||
export default class SlateReactSystemPage extends React.Component {
|
||||
render() {
|
||||
console.log(System.Constants);
|
||||
|
||||
407
pages/application.js
Normal file
407
pages/application.js
Normal file
@ -0,0 +1,407 @@
|
||||
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 SceneDataTransfer from "~/scenes/SceneDataTransfer";
|
||||
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 SceneLogs from "~/scenes/SceneLogs";
|
||||
import SceneMiners from "~/scenes/SceneMiners";
|
||||
import ScenePaymentChannels from "~/scenes/ScenePaymentChannels";
|
||||
import ScenePeers from "~/scenes/ScenePeers";
|
||||
import SceneSettings from "~/scenes/SceneSettings";
|
||||
import SceneStats from "~/scenes/SceneStats";
|
||||
import SceneStatus from "~/scenes/SceneStatus";
|
||||
import SceneStorageMarket from "~/scenes/SceneStorageMarket";
|
||||
import SceneWallet from "~/scenes/SceneWallet";
|
||||
import SceneSlates from "~/scenes/SceneSlates";
|
||||
import SceneSettingsDeveloper from "~/scenes/SceneSettingsDeveloper";
|
||||
|
||||
import SidebarCreateWalletAddress from "~/components/sidebars/SidebarCreateWalletAddress";
|
||||
import SidebarDeleteWalletAddress from "~/components/sidebars/SidebarDeleteWalletAddress";
|
||||
import SidebarWalletSendFunds from "~/components/sidebars/SidebarWalletSendFunds";
|
||||
import SidebarFileStorageDeal from "~/components/sidebars/SidebarFileStorageDeal";
|
||||
import SidebarFileRetrievalDeal from "~/components/sidebars/SidebarFileRetrievalDeal";
|
||||
import SidebarCreatePaymentChannel from "~/components/sidebars/SidebarCreatePaymentChannel";
|
||||
import SidebarAddMiner from "~/components/sidebars/SidebarAddMiner";
|
||||
import SidebarAddPeer from "~/components/sidebars/SidebarAddPeer";
|
||||
import SidebarNotifications from "~/components/sidebars/SidebarNotifications";
|
||||
import SidebarRedeemPaymentChannel from "~/components/sidebars/SidebarRedeemPaymentChannel";
|
||||
|
||||
import ApplicationNavigation from "~/components/core/ApplicationNavigation";
|
||||
import ApplicationHeader from "~/components/core/ApplicationHeader";
|
||||
import ApplicationLayout from "~/components/core/ApplicationLayout";
|
||||
import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
|
||||
|
||||
const getCurrentNavigationStateById = (navigation, targetId) => {
|
||||
let target = null;
|
||||
let activeIds = {};
|
||||
|
||||
const findById = (state, id) => {
|
||||
for (let i = 0; i < state.length; i++) {
|
||||
if (state[i].id === id) {
|
||||
target = state[i];
|
||||
activeIds[state[i].id] = true;
|
||||
}
|
||||
|
||||
if (!target && state[i].children) {
|
||||
activeIds[state[i].id] = true;
|
||||
findById(state[i].children, id);
|
||||
|
||||
if (!target) {
|
||||
activeIds[state[i].id] = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
findById(navigation, targetId);
|
||||
|
||||
return { target, activeIds };
|
||||
};
|
||||
|
||||
export const getServerSideProps = async (context) => {
|
||||
const data = await Actions.rehydrateViewer();
|
||||
|
||||
return {
|
||||
props: { ...context.query, ...data.data },
|
||||
};
|
||||
};
|
||||
|
||||
export default class ApplicationPage extends React.Component {
|
||||
_socket = null;
|
||||
|
||||
state = {
|
||||
history: [{ id: 1, scrollTop: 0 }],
|
||||
currentIndex: 0,
|
||||
data: null,
|
||||
selected: State.getSelectedState(this.props),
|
||||
viewer: State.getInitialState(this.props),
|
||||
sidebar: null,
|
||||
file: null,
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
this._socket = new WebSocket(`ws://localhost:${this.props.wsPort}`);
|
||||
this._socket.onmessage = (m) => {
|
||||
console.log(m);
|
||||
if (m.type === "message") {
|
||||
const parsed = JSON.parse(m.data);
|
||||
|
||||
if (parsed.action === "UPDATE_VIEWER") {
|
||||
this.rehydrate({ data: parsed.data });
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
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 }) => {
|
||||
let data = new FormData();
|
||||
data.append("image", file);
|
||||
|
||||
const options = {
|
||||
method: "POST",
|
||||
headers: {
|
||||
Accept: "application/json",
|
||||
},
|
||||
body: data,
|
||||
};
|
||||
|
||||
const response = await fetch(`/_/storage/${file.name}`, options);
|
||||
const json = await response.json();
|
||||
|
||||
if (json && json.success) {
|
||||
this.setState({ file });
|
||||
}
|
||||
};
|
||||
|
||||
_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);
|
||||
};
|
||||
|
||||
_handleDrop = async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
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._handleAction({ type: "SIDEBAR", value: "SIDEBAR_FILE_STORAGE_DEAL" });
|
||||
};
|
||||
|
||||
rehydrate = async ({ data }) => {
|
||||
this.setState({ viewer: { ...State.getInitialState(data) } });
|
||||
};
|
||||
|
||||
_handleSubmit = async (data) => {
|
||||
if (this.props.production) {
|
||||
alert("TODO");
|
||||
return this._handleDismissSidebar();
|
||||
}
|
||||
|
||||
if (data.type === "CREATE_WALLET_ADDRESS") {
|
||||
const address = await Actions.createWalletAddress({
|
||||
name: data.name,
|
||||
type: data.wallet_type,
|
||||
makeDefault: data.makeDefault,
|
||||
});
|
||||
}
|
||||
|
||||
if (data.type === "SEND_WALLET_ADDRESS_FILECOIN") {
|
||||
const response = await Actions.sendWalletAddressFilecoin({
|
||||
source: data.source,
|
||||
target: data.target,
|
||||
amount: data.amount,
|
||||
});
|
||||
}
|
||||
|
||||
this._handleDismissSidebar();
|
||||
};
|
||||
|
||||
_handleCancel = () => {
|
||||
this._handleDismissSidebar();
|
||||
};
|
||||
|
||||
_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 });
|
||||
};
|
||||
|
||||
_handleAction = (options) => {
|
||||
if (options.type === "NAVIGATE") {
|
||||
return this._handleNavigateTo({ id: options.value }, options.data);
|
||||
}
|
||||
|
||||
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] });
|
||||
}
|
||||
|
||||
return alert(JSON.stringify(options));
|
||||
};
|
||||
|
||||
_handleNavigateTo = (next, data = {}) => {
|
||||
this.state.history[this.state.currentIndex].scrollTop = window.scrollY;
|
||||
|
||||
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,
|
||||
},
|
||||
() => {
|
||||
window.scrollTo(0, 0);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
this.setState(
|
||||
{
|
||||
history: [...this.state.history, next],
|
||||
currentIndex: this.state.currentIndex + 1,
|
||||
data,
|
||||
},
|
||||
() => {
|
||||
window.scrollTo(0, 0);
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
_handleBack = () => {
|
||||
this.state.history[this.state.currentIndex].scrollTop = window.scrollY;
|
||||
|
||||
this.setState(
|
||||
{
|
||||
currentIndex: this.state.currentIndex - 1,
|
||||
},
|
||||
() => {
|
||||
const next = this.state.history[this.state.currentIndex];
|
||||
console.log({ next });
|
||||
window.scrollTo(0, next.scrollTop);
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
_handleForward = () => {
|
||||
this.state.history[this.state.currentIndex].scrollTop = window.scrollY;
|
||||
|
||||
this.setState(
|
||||
{
|
||||
currentIndex: this.state.currentIndex + 1,
|
||||
},
|
||||
() => {
|
||||
const next = this.state.history[this.state.currentIndex];
|
||||
console.log({ next });
|
||||
window.scrollTo(0, next.scrollTop);
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
sidebars = {
|
||||
SIDEBAR_NOTIFICATIONS: <SidebarNotifications />,
|
||||
SIDEBAR_ADD_PEER: <SidebarAddPeer />,
|
||||
SIDEBAR_ADD_MINER: <SidebarAddMiner />,
|
||||
SIDEBAR_CREATE_PAYMENT_CHANNEL: <SidebarCreatePaymentChannel />,
|
||||
SIDEBAR_FILE_STORAGE_DEAL: <SidebarFileStorageDeal />,
|
||||
SIDEBAR_FILE_RETRIEVAL_DEAL: <SidebarFileRetrievalDeal />,
|
||||
SIDEBAR_WALLET_SEND_FUNDS: <SidebarWalletSendFunds />,
|
||||
SIDEBAR_CREATE_WALLET_ADDRESS: <SidebarCreateWalletAddress />,
|
||||
SIDEBAR_DELETE_WALLET_ADDRESS: <SidebarDeleteWalletAddress />,
|
||||
SIDEBAR_REDEEM_PAYMENT_CHANNEL: <SidebarRedeemPaymentChannel />,
|
||||
};
|
||||
|
||||
scenes = {
|
||||
HOME: <SceneHome />,
|
||||
WALLET: <SceneWallet />,
|
||||
CHANNELS: <ScenePaymentChannels />,
|
||||
FOLDER: <SceneFilesFolder />,
|
||||
FILE: <SceneFile />,
|
||||
DEALS: <SceneDeals />,
|
||||
DATA_TRANSFER: <SceneDataTransfer />,
|
||||
STATS: <SceneStats />,
|
||||
STORAGE_MARKET: <SceneStorageMarket />,
|
||||
MINERS: <SceneMiners />,
|
||||
STATUS: <SceneStatus />,
|
||||
PEERS: <ScenePeers />,
|
||||
LOGS: <SceneLogs />,
|
||||
SETTINGS: <SceneSettings />,
|
||||
SETTINGS_DEVELOPER: <SceneSettingsDeveloper />,
|
||||
EDIT_ACCOUNT: <SceneEditAccount />,
|
||||
SLATES: <SceneSlates />,
|
||||
};
|
||||
|
||||
render() {
|
||||
const navigation = NavigationData.generate(this.state.viewer.library);
|
||||
const next = this.state.history[this.state.currentIndex];
|
||||
const current = getCurrentNavigationStateById(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}
|
||||
/>
|
||||
);
|
||||
|
||||
const scene = React.cloneElement(this.scenes[current.target.decorator], {
|
||||
viewer: this.state.viewer,
|
||||
selected: this.state.selected,
|
||||
data: current.target,
|
||||
file: this.state.data,
|
||||
onNavigateTo: this._handleNavigateTo,
|
||||
onSelectedChange: this._handleSelectedChange,
|
||||
onViewerChange: this._handleViewerChange,
|
||||
onAction: this._handleAction,
|
||||
onBack: this._handleBack,
|
||||
onForward: this._handleForward,
|
||||
});
|
||||
|
||||
let sidebarElement;
|
||||
if (this.state.sidebar) {
|
||||
sidebarElement = React.cloneElement(this.state.sidebar, {
|
||||
file: this.state.file,
|
||||
viewer: this.state.viewer,
|
||||
selected: this.state.selected,
|
||||
onSelectedChange: this._handleSelectedChange,
|
||||
onSubmit: this._handleSubmit,
|
||||
onCancel: this._handleCancel,
|
||||
onSetFile: this._handleSetFile,
|
||||
});
|
||||
}
|
||||
|
||||
const title = `Prototype 0.0.1 : ${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>
|
||||
);
|
||||
}
|
||||
}
|
||||
432
pages/index.js
432
pages/index.js
@ -1,407 +1,67 @@
|
||||
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 Constants from "~/common/constants";
|
||||
|
||||
import SceneDataTransfer from "~/scenes/SceneDataTransfer";
|
||||
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 SceneLogs from "~/scenes/SceneLogs";
|
||||
import SceneMiners from "~/scenes/SceneMiners";
|
||||
import ScenePaymentChannels from "~/scenes/ScenePaymentChannels";
|
||||
import ScenePeers from "~/scenes/ScenePeers";
|
||||
import SceneSettings from "~/scenes/SceneSettings";
|
||||
import SceneStats from "~/scenes/SceneStats";
|
||||
import SceneStatus from "~/scenes/SceneStatus";
|
||||
import SceneStorageMarket from "~/scenes/SceneStorageMarket";
|
||||
import SceneWallet from "~/scenes/SceneWallet";
|
||||
import SceneSlates from "~/scenes/SceneSlates";
|
||||
import SceneSettingsDeveloper from "~/scenes/SceneSettingsDeveloper";
|
||||
import { css } from "@emotion/react";
|
||||
|
||||
import SidebarCreateWalletAddress from "~/components/sidebars/SidebarCreateWalletAddress";
|
||||
import SidebarDeleteWalletAddress from "~/components/sidebars/SidebarDeleteWalletAddress";
|
||||
import SidebarWalletSendFunds from "~/components/sidebars/SidebarWalletSendFunds";
|
||||
import SidebarFileStorageDeal from "~/components/sidebars/SidebarFileStorageDeal";
|
||||
import SidebarFileRetrievalDeal from "~/components/sidebars/SidebarFileRetrievalDeal";
|
||||
import SidebarCreatePaymentChannel from "~/components/sidebars/SidebarCreatePaymentChannel";
|
||||
import SidebarAddMiner from "~/components/sidebars/SidebarAddMiner";
|
||||
import SidebarAddPeer from "~/components/sidebars/SidebarAddPeer";
|
||||
import SidebarNotifications from "~/components/sidebars/SidebarNotifications";
|
||||
import SidebarRedeemPaymentChannel from "~/components/sidebars/SidebarRedeemPaymentChannel";
|
||||
|
||||
import ApplicationNavigation from "~/components/core/ApplicationNavigation";
|
||||
import ApplicationHeader from "~/components/core/ApplicationHeader";
|
||||
import ApplicationLayout from "~/components/core/ApplicationLayout";
|
||||
import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
|
||||
|
||||
const getCurrentNavigationStateById = (navigation, targetId) => {
|
||||
let target = null;
|
||||
let activeIds = {};
|
||||
const STYLES_ROOT = css`
|
||||
padding: 128px 88px 256px 88px;
|
||||
|
||||
const findById = (state, id) => {
|
||||
for (let i = 0; i < state.length; i++) {
|
||||
if (state[i].id === id) {
|
||||
target = state[i];
|
||||
activeIds[state[i].id] = true;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
padding: 128px 24px 128px 24px;
|
||||
}
|
||||
`;
|
||||
|
||||
if (!target && state[i].children) {
|
||||
activeIds[state[i].id] = true;
|
||||
findById(state[i].children, id);
|
||||
const STYLES_HEADING = css`
|
||||
font-weight: 400;
|
||||
font-size: 2.88rem;
|
||||
line-height: 1.5;
|
||||
color: ${Constants.system.black};
|
||||
`;
|
||||
|
||||
if (!target) {
|
||||
activeIds[state[i].id] = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
findById(navigation, targetId);
|
||||
|
||||
return { target, activeIds };
|
||||
};
|
||||
const STYLES_PARAGRAPH = css`
|
||||
font-weight: 400;
|
||||
font-size: 2.88rem;
|
||||
line-height: 1.5;
|
||||
color: ${Constants.system.pitchBlack};
|
||||
`;
|
||||
|
||||
export const getServerSideProps = async (context) => {
|
||||
const data = await Actions.rehydrateViewer();
|
||||
|
||||
return {
|
||||
props: { ...context.query, ...data.data },
|
||||
props: { ...context.query },
|
||||
};
|
||||
};
|
||||
|
||||
export default class IndexPage extends React.Component {
|
||||
_socket = null;
|
||||
|
||||
state = {
|
||||
history: [{ id: 1, scrollTop: 0 }],
|
||||
currentIndex: 0,
|
||||
data: null,
|
||||
selected: State.getSelectedState(this.props),
|
||||
viewer: State.getInitialState(this.props),
|
||||
sidebar: null,
|
||||
file: null,
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
this._socket = new WebSocket(`ws://localhost:${this.props.wsPort}`);
|
||||
this._socket.onmessage = (m) => {
|
||||
console.log(m);
|
||||
if (m.type === "message") {
|
||||
const parsed = JSON.parse(m.data);
|
||||
|
||||
if (parsed.action === "UPDATE_VIEWER") {
|
||||
this.rehydrate({ data: parsed.data });
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
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 }) => {
|
||||
let data = new FormData();
|
||||
data.append("image", file);
|
||||
|
||||
const options = {
|
||||
method: "POST",
|
||||
headers: {
|
||||
Accept: "application/json",
|
||||
},
|
||||
body: data,
|
||||
};
|
||||
|
||||
const response = await fetch(`/_/storage/${file.name}`, options);
|
||||
const json = await response.json();
|
||||
|
||||
if (json && json.success) {
|
||||
this.setState({ file });
|
||||
}
|
||||
};
|
||||
|
||||
_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);
|
||||
};
|
||||
|
||||
_handleDrop = async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
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._handleAction({ type: "SIDEBAR", value: "SIDEBAR_FILE_STORAGE_DEAL" });
|
||||
};
|
||||
|
||||
rehydrate = async ({ data }) => {
|
||||
this.setState({ viewer: { ...State.getInitialState(data) } });
|
||||
};
|
||||
|
||||
_handleSubmit = async (data) => {
|
||||
if (this.props.production) {
|
||||
alert("TODO");
|
||||
return this._handleDismissSidebar();
|
||||
}
|
||||
|
||||
if (data.type === "CREATE_WALLET_ADDRESS") {
|
||||
const address = await Actions.createWalletAddress({
|
||||
name: data.name,
|
||||
type: data.wallet_type,
|
||||
makeDefault: data.makeDefault,
|
||||
});
|
||||
}
|
||||
|
||||
if (data.type === "SEND_WALLET_ADDRESS_FILECOIN") {
|
||||
const response = await Actions.sendWalletAddressFilecoin({
|
||||
source: data.source,
|
||||
target: data.target,
|
||||
amount: data.amount,
|
||||
});
|
||||
}
|
||||
|
||||
this._handleDismissSidebar();
|
||||
};
|
||||
|
||||
_handleCancel = () => {
|
||||
this._handleDismissSidebar();
|
||||
};
|
||||
|
||||
_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 });
|
||||
};
|
||||
|
||||
_handleAction = (options) => {
|
||||
if (options.type === "NAVIGATE") {
|
||||
return this._handleNavigateTo({ id: options.value }, options.data);
|
||||
}
|
||||
|
||||
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] });
|
||||
}
|
||||
|
||||
return alert(JSON.stringify(options));
|
||||
};
|
||||
|
||||
_handleNavigateTo = (next, data = {}) => {
|
||||
this.state.history[this.state.currentIndex].scrollTop = window.scrollY;
|
||||
|
||||
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,
|
||||
},
|
||||
() => {
|
||||
window.scrollTo(0, 0);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
this.setState(
|
||||
{
|
||||
history: [...this.state.history, next],
|
||||
currentIndex: this.state.currentIndex + 1,
|
||||
data,
|
||||
},
|
||||
() => {
|
||||
window.scrollTo(0, 0);
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
_handleBack = () => {
|
||||
this.state.history[this.state.currentIndex].scrollTop = window.scrollY;
|
||||
|
||||
this.setState(
|
||||
{
|
||||
currentIndex: this.state.currentIndex - 1,
|
||||
},
|
||||
() => {
|
||||
const next = this.state.history[this.state.currentIndex];
|
||||
console.log({ next });
|
||||
window.scrollTo(0, next.scrollTop);
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
_handleForward = () => {
|
||||
this.state.history[this.state.currentIndex].scrollTop = window.scrollY;
|
||||
|
||||
this.setState(
|
||||
{
|
||||
currentIndex: this.state.currentIndex + 1,
|
||||
},
|
||||
() => {
|
||||
const next = this.state.history[this.state.currentIndex];
|
||||
console.log({ next });
|
||||
window.scrollTo(0, next.scrollTop);
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
sidebars = {
|
||||
SIDEBAR_NOTIFICATIONS: <SidebarNotifications />,
|
||||
SIDEBAR_ADD_PEER: <SidebarAddPeer />,
|
||||
SIDEBAR_ADD_MINER: <SidebarAddMiner />,
|
||||
SIDEBAR_CREATE_PAYMENT_CHANNEL: <SidebarCreatePaymentChannel />,
|
||||
SIDEBAR_FILE_STORAGE_DEAL: <SidebarFileStorageDeal />,
|
||||
SIDEBAR_FILE_RETRIEVAL_DEAL: <SidebarFileRetrievalDeal />,
|
||||
SIDEBAR_WALLET_SEND_FUNDS: <SidebarWalletSendFunds />,
|
||||
SIDEBAR_CREATE_WALLET_ADDRESS: <SidebarCreateWalletAddress />,
|
||||
SIDEBAR_DELETE_WALLET_ADDRESS: <SidebarDeleteWalletAddress />,
|
||||
SIDEBAR_REDEEM_PAYMENT_CHANNEL: <SidebarRedeemPaymentChannel />,
|
||||
};
|
||||
|
||||
scenes = {
|
||||
HOME: <SceneHome />,
|
||||
WALLET: <SceneWallet />,
|
||||
CHANNELS: <ScenePaymentChannels />,
|
||||
FOLDER: <SceneFilesFolder />,
|
||||
FILE: <SceneFile />,
|
||||
DEALS: <SceneDeals />,
|
||||
DATA_TRANSFER: <SceneDataTransfer />,
|
||||
STATS: <SceneStats />,
|
||||
STORAGE_MARKET: <SceneStorageMarket />,
|
||||
MINERS: <SceneMiners />,
|
||||
STATUS: <SceneStatus />,
|
||||
PEERS: <ScenePeers />,
|
||||
LOGS: <SceneLogs />,
|
||||
SETTINGS: <SceneSettings />,
|
||||
SETTINGS_DEVELOPER: <SceneSettingsDeveloper />,
|
||||
EDIT_ACCOUNT: <SceneEditAccount />,
|
||||
SLATES: <SceneSlates />,
|
||||
};
|
||||
|
||||
render() {
|
||||
const navigation = NavigationData.generate(this.state.viewer.library);
|
||||
const next = this.state.history[this.state.currentIndex];
|
||||
const current = getCurrentNavigationStateById(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}
|
||||
/>
|
||||
);
|
||||
|
||||
const scene = React.cloneElement(this.scenes[current.target.decorator], {
|
||||
viewer: this.state.viewer,
|
||||
selected: this.state.selected,
|
||||
data: current.target,
|
||||
file: this.state.data,
|
||||
onNavigateTo: this._handleNavigateTo,
|
||||
onSelectedChange: this._handleSelectedChange,
|
||||
onViewerChange: this._handleViewerChange,
|
||||
onAction: this._handleAction,
|
||||
onBack: this._handleBack,
|
||||
onForward: this._handleForward,
|
||||
});
|
||||
|
||||
let sidebarElement;
|
||||
if (this.state.sidebar) {
|
||||
sidebarElement = React.cloneElement(this.state.sidebar, {
|
||||
file: this.state.file,
|
||||
viewer: this.state.viewer,
|
||||
selected: this.state.selected,
|
||||
onSelectedChange: this._handleSelectedChange,
|
||||
onSubmit: this._handleSubmit,
|
||||
onCancel: this._handleCancel,
|
||||
onSetFile: this._handleSetFile,
|
||||
});
|
||||
}
|
||||
|
||||
const title = `Prototype 0.0.1 : ${current.target.pageTitle}`;
|
||||
const description = "This is an early preview.";
|
||||
const url = "https://fps.onrender.com/v1";
|
||||
const title = `Slate`;
|
||||
const description =
|
||||
"Tne place for all of your assets, slates. Powered by Textile and Filecoin.";
|
||||
const url = "https://slate.host";
|
||||
|
||||
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>
|
||||
<WebsitePrototypeWrapper
|
||||
title={title}
|
||||
description={description}
|
||||
url={url}
|
||||
>
|
||||
<div css={STYLES_ROOT}>
|
||||
<h1 css={STYLES_HEADING}>Slate</h1>
|
||||
<p css={STYLES_PARAGRAPH}>
|
||||
One place for all of your assets, slates. Powered by{" "}
|
||||
<a href="https://docs.textile.io/">Textile</a> and{" "}
|
||||
<a href="https://filecoin.io/">Filecoin</a>.
|
||||
<br />
|
||||
<br />
|
||||
{!this.props.hide ? (
|
||||
<a href="/application">Test Application</a>
|
||||
) : null}
|
||||
<br />
|
||||
<a href="/system">View Design System</a>
|
||||
</p>
|
||||
</div>
|
||||
</WebsitePrototypeWrapper>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import * as React from "react";
|
||||
import * as System from "~/components/system";
|
||||
import Group from "~/components/system/Group";
|
||||
import * as Constants from "~/common/constants";
|
||||
|
||||
import Group from "~/components/system/Group";
|
||||
import SystemPage from "~/components/system/SystemPage";
|
||||
import ViewSourceLink from "~/components/system/ViewSourceLink";
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import * as React from "react";
|
||||
import * as System from "~/components/system";
|
||||
import Group from "~/components/system/Group";
|
||||
import * as Constants from "~/common/constants";
|
||||
|
||||
import Group from "~/components/system/Group";
|
||||
import SystemPage from "~/components/system/SystemPage";
|
||||
import ViewSourceLink from "~/components/system/ViewSourceLink";
|
||||
|
||||
|
||||
@ -3,7 +3,6 @@ import * as System from "~/components/system";
|
||||
import * as Constants from "~/common/constants";
|
||||
|
||||
import moment from "moment";
|
||||
|
||||
import Group from "~/components/system/Group";
|
||||
import SystemPage from "~/components/system/SystemPage";
|
||||
import ViewSourceLink from "~/components/system/ViewSourceLink";
|
||||
|
||||
@ -3,7 +3,6 @@ import * as System from "~/components/system";
|
||||
import * as Constants from "~/common/constants";
|
||||
|
||||
import moment from "moment";
|
||||
|
||||
import Group from "~/components/system/Group";
|
||||
import SystemPage from "~/components/system/SystemPage";
|
||||
import ViewSourceLink from "~/components/system/ViewSourceLink";
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import * as React from "react";
|
||||
import * as System from "~/components/system";
|
||||
import Group from "~/components/system/Group";
|
||||
import * as Constants from "~/common/constants";
|
||||
|
||||
import Group from "~/components/system/Group";
|
||||
import SystemPage from "~/components/system/SystemPage";
|
||||
import ViewSourceLink from "~/components/system/ViewSourceLink";
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import * as React from "react";
|
||||
import * as System from "~/components/system";
|
||||
import Group from "~/components/system/Group";
|
||||
import * as Constants from "~/common/constants";
|
||||
|
||||
import Group from "~/components/system/Group";
|
||||
import SystemPage from "~/components/system/SystemPage";
|
||||
import ViewSourceLink from "~/components/system/ViewSourceLink";
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import * as React from "react";
|
||||
import * as System from "~/components/system";
|
||||
import Group from "~/components/system/Group";
|
||||
import * as Constants from "~/common/constants";
|
||||
|
||||
import Group from "~/components/system/Group";
|
||||
import SystemPage from "~/components/system/SystemPage";
|
||||
import ViewSourceLink from "~/components/system/ViewSourceLink";
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import * as React from "react";
|
||||
import * as System from "~/components/system";
|
||||
import Group from "~/components/system/Group";
|
||||
import * as Constants from "~/common/constants";
|
||||
|
||||
import Group from "~/components/system/Group";
|
||||
import SystemPage from "~/components/system/SystemPage";
|
||||
import ViewSourceLink from "~/components/system/ViewSourceLink";
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import * as React from "react";
|
||||
import * as System from "~/components/system";
|
||||
import Group from "~/components/system/Group";
|
||||
|
||||
import Group from "~/components/system/Group";
|
||||
import SystemPage from "~/components/system/SystemPage";
|
||||
import ViewSourceLink from "~/components/system/ViewSourceLink";
|
||||
|
||||
|
||||
12
server.js
12
server.js
@ -416,16 +416,16 @@ app.prepare().then(async () => {
|
||||
.send({ success: true, data: { ...data, ...req.body } });
|
||||
});
|
||||
|
||||
server.get("/", async (req, res) => {
|
||||
if (productionWeb) {
|
||||
return res.redirect("/system");
|
||||
}
|
||||
|
||||
return app.render(req, res, "/", {
|
||||
server.get("/application", async (req, res) => {
|
||||
return app.render(req, res, "/application", {
|
||||
wsPort,
|
||||
});
|
||||
});
|
||||
|
||||
server.get("/", async (req, res) => {
|
||||
return app.render(req, res, "/", { hide: productionWeb });
|
||||
});
|
||||
|
||||
server.get("*", async (req, res) => {
|
||||
return nextRequestHandler(req, res, req.url);
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user