diff --git a/components/sidebars/SidebarFileStorageDeal.js b/components/sidebars/SidebarFileStorageDeal.js index 428f01f4..71214b33 100644 --- a/components/sidebars/SidebarFileStorageDeal.js +++ b/components/sidebars/SidebarFileStorageDeal.js @@ -51,21 +51,7 @@ export default class SidebarFileStorageDeal extends React.Component { .settings_cold_default_replication_factor, }; - _handleUpload = async (e) => { - e.persist(); - let file = e.target.files[0]; - - if (!file) { - alert("Something went wrong"); - return; - } - - await this.props.onSetFile({ file }); - }; - - _handleMakeDeal = async (src) => { - // TODO(jim): Make powergate deal with IPFS CID. - /* + _handleMakeDeal = async ({ ipfs }) => { const options = { method: "POST", credentials: "include", @@ -73,21 +59,21 @@ export default class SidebarFileStorageDeal extends React.Component { Accept: "application/json", "Content-Type": "application/json", }, - body: JSON.stringify({ src }), + body: JSON.stringify({ ipfs }), }; - const response = await fetch("/_/deals/storage", options); + const response = await fetch("/api/data/make-storage-deal", options); const json = await response.json(); return json; - */ - alert("TODO: Add back storage deals"); }; _handleSubmit = async (e) => { e.persist(); + this.props.onSidebarLoading(true); - const path = `/public/static/files/${this.props.file.name}`; - await this._handleMakeDeal(path); + await this._handleMakeDeal({ ipfs: this.props.data.ipfs }); + + alert("TODO: Finish 0.2.0 Powergate Update"); await this.props.onSubmit({}); }; @@ -101,87 +87,75 @@ export default class SidebarFileStorageDeal extends React.Component { }; render() { + const file = this.props.data; + return ( Upload a file to the network - + + + + {file.name} + Name + + + + {Strings.bytesToSize(file.size)} + File size + + + + - {this.props.file ? ( - - + - - {this.props.file.name} - Name - + - - {this.props.file.size} - File size - - - ) : null} - - - Add file - + Make storage deal + - {this.props.file ? ( - - ) : null} - - {this.props.file ? ( - - ) : null} - - {this.props.file ? ( - - ) : null} - - {this.props.file ? ( - - Make storage deal - + Cancel deal + ) : null} ); diff --git a/components/system/components/fragments/TableComponents.js b/components/system/components/fragments/TableComponents.js index c62e31af..b35f5ec5 100644 --- a/components/system/components/fragments/TableComponents.js +++ b/components/system/components/fragments/TableComponents.js @@ -197,7 +197,7 @@ export const TableContent = ({ return ( onAction({ type: "SIDEBAR", value: action })} + onClick={() => onAction({ type: "SIDEBAR", value: action, data })} > {text} diff --git a/pages/api/data/make-storage-deal.js b/pages/api/data/make-storage-deal.js new file mode 100644 index 00000000..fe25208b --- /dev/null +++ b/pages/api/data/make-storage-deal.js @@ -0,0 +1,19 @@ +import * as MW from "~/node_common/middleware"; +import * as Constants from "~/node_common/constants"; +import * as Data from "~/node_common/data"; +import * as Utilities from "~/node_common/utilities"; + +import FORM from "formidable"; +import FS from "fs-extra"; + +const initCORS = MW.init(MW.CORS); +const initAuth = MW.init(MW.RequireCookieAuthentication); + +export default async (req, res) => { + initCORS(req, res); + initAuth(req, res); + + return res.status(200).send({ + decorator: "SERVER_FILECOIN_STORAGE_DEAL", + }); +}; diff --git a/pages/application.js b/pages/application.js index 8c96de4b..dd1a83b1 100644 --- a/pages/application.js +++ b/pages/application.js @@ -87,6 +87,7 @@ export default class ApplicationPage extends React.Component { currentIndex: 0, data: null, sidebar: null, + sidebarLoading: false, }; async componentDidMount() { @@ -130,7 +131,7 @@ export default class ApplicationPage extends React.Component { await this.rehydrate(); - this.setState({ sidebar: null, fileLoading: false }); + this.setState({ sidebar: null, data: null, fileLoading: false }); }; _handleDragEnter = (e) => { @@ -148,6 +149,8 @@ export default class ApplicationPage extends React.Component { console.log("dragover", e); }; + _handleSidebarLoading = (sidebarLoading) => this.setState({ sidebarLoading }); + _handleDrop = async (e) => { e.preventDefault(); @@ -281,7 +284,7 @@ export default class ApplicationPage extends React.Component { }; _handleDismissSidebar = () => { - this.setState({ sidebar: null }); + this.setState({ sidebar: null, sidebarLoading: false, data: null }); }; _handleAction = (options) => { @@ -298,7 +301,10 @@ export default class ApplicationPage extends React.Component { } if (options.type === "SIDEBAR") { - return this.setState({ sidebar: this.sidebars[options.value] }); + return this.setState({ + sidebar: this.sidebars[options.value], + data: options.data, + }); } return alert(JSON.stringify(options)); @@ -470,12 +476,15 @@ export default class ApplicationPage extends React.Component { if (this.state.sidebar) { sidebarElement = React.cloneElement(this.state.sidebar, { viewer: this.state.viewer, + data: this.state.data, fileLoading: this.state.fileLoading, + sidebarLoading: this.state.sidebarLoading, selected: this.state.selected, onSelectedChange: this._handleSelectedChange, onSubmit: this._handleSubmit, onCancel: this._handleCancel, onSetFile: this._handleSetFile, + onSidebarLoading: this._handleSidebarLoading, onRehydrate: this.rehydrate, }); } diff --git a/scenes/SceneFilesFolder.js b/scenes/SceneFilesFolder.js index 91bead73..2889bfb6 100644 --- a/scenes/SceneFilesFolder.js +++ b/scenes/SceneFilesFolder.js @@ -24,24 +24,40 @@ export default class SceneFilesFolder extends React.Component { const data = { columns: [ - { key: "icon", hideLabel: true, width: "32px", type: "ICON" }, - { key: "file", name: "File", width: "100%", type: "FILE_LINK" }, - { key: "size", name: "Size", width: "140px", type: "FILE_SIZE" }, + { key: "file", name: "File", type: "FILE_LINK" }, + { + key: "size", + name: "Size", + width: "140px", + type: "FILE_SIZE", + }, { key: "date", name: "Date uploaded", width: "160px", + type: "FILE_DATE", tooltip: "This date represents when the file was first uploaded to IPFS.", - type: "FILE_DATE", }, { key: "network", name: "Network", type: "NETWORK_TYPE", }, + { + key: "button", + hideLabel: true, + type: "BUTTON", + action: "SIDEBAR_FILE_STORAGE_DEAL", + width: "148px", + }, ], - rows, + rows: this.props.viewer.library[0].children.map((each) => { + return { + ...each, + button: "Store on Filecoin", + }; + }), }; return ( diff --git a/scenes/SceneHome.js b/scenes/SceneHome.js index eefea421..b537139d 100644 --- a/scenes/SceneHome.js +++ b/scenes/SceneHome.js @@ -95,8 +95,20 @@ export default class SceneHome extends React.Component { name: "Network", type: "NETWORK_TYPE", }, + { + key: "button", + hideLabel: true, + type: "BUTTON", + action: "SIDEBAR_FILE_STORAGE_DEAL", + width: "148px", + }, ], - rows: this.props.viewer.library[0].children, + rows: this.props.viewer.library[0].children.map((each) => { + return { + ...each, + button: "Store on Filecoin", + }; + }), }} selectedRowId={this.state.data} onChange={this._handleChange}