storage-deals: adds back placeholder component

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 (
       <React.Fragment>
         <System.P style={{ fontFamily: Constants.font.semiBold }}>
           Upload a file to the network
         </System.P>
-        <input
-          css={STYLES_FILE_HIDDEN}
-          type="file"
-          id="file"
-          onChange={this._handleUpload}
+
+        <div>
+          <img
+            src={`https://hub.textile.io${file.ipfs}`}
+            css={STYLES_IMAGE_PREVIEW}
+          />
+
+          <div css={STYLES_ITEM}>
+            <div css={STYLES_FOCUS}>{file.name}</div>
+            <div css={STYLES_SUBTEXT}>Name</div>
+          </div>
+
+          <div css={STYLES_ITEM}>
+            <div css={STYLES_FOCUS}>{Strings.bytesToSize(file.size)}</div>
+            <div css={STYLES_SUBTEXT}>File size</div>
+          </div>
+        </div>
+
+        <System.Input
+          containerStyle={{ marginTop: 48 }}
+          label="Deal duration"
+          name="settings_cold_default_duration"
+          placeholder="Type in epochs (~25 seconds)"
+          type="number"
+          value={this.state.settings_cold_default_duration}
+          onChange={this._handleChange}
         />
 
-        {this.props.file ? (
-          <div>
-            <img
-              src={`https://hub.textile.io${this.props.file.ipfs}`}
-              css={STYLES_IMAGE_PREVIEW}
-            />
+        <System.Input
+          containerStyle={{ marginTop: 24 }}
+          label="Replication factor"
+          name="settings_cold_default_replication_factor"
+          value={this.state.settings_cold_default_replication_factor}
+          onChange={this._handleChange}
+        />
 
-            <div css={STYLES_ITEM}>
-              <div css={STYLES_FOCUS}>{this.props.file.name}</div>
-              <div css={STYLES_SUBTEXT}>Name</div>
-            </div>
+        <System.SelectMenu
+          full
+          containerStyle={{ marginTop: 24 }}
+          name="address"
+          label="Payment address"
+          value={this.props.selected.address}
+          category="address"
+          onChange={this.props.onSelectedChange}
+          options={this.props.viewer.addresses}
+        />
 
-            <div css={STYLES_ITEM}>
-              <div css={STYLES_FOCUS}>{this.props.file.size}</div>
-              <div css={STYLES_SUBTEXT}>File size</div>
-            </div>
-          </div>
-        ) : null}
-
-        <System.ButtonSecondaryFull
-          type="label"
-          htmlFor="file"
-          style={{ marginTop: 24 }}
+        <System.ButtonPrimaryFull
+          style={{ marginTop: 48 }}
+          onClick={this._handleSubmit}
+          loading={this.props.sidebarLoading}
         >
-          Add file
-        </System.ButtonSecondaryFull>
+          Make storage deal
+        </System.ButtonPrimaryFull>
 
-        {this.props.file ? (
-          <System.Input
-            containerStyle={{ marginTop: 48 }}
-            label="Deal duration"
-            name="settings_cold_default_duration"
-            placeholder="Type in epochs (~25 seconds)"
-            type="number"
-            value={this.state.settings_cold_default_duration}
-            onChange={this._handleChange}
-          />
-        ) : null}
-
-        {this.props.file ? (
-          <System.Input
-            containerStyle={{ marginTop: 24 }}
-            label="Replication factor"
-            name="settings_cold_default_replication_factor"
-            value={this.state.settings_cold_default_replication_factor}
-            onChange={this._handleChange}
-          />
-        ) : null}
-
-        {this.props.file ? (
-          <System.SelectMenu
-            full
-            containerStyle={{ marginTop: 24 }}
-            name="address"
-            label="Payment address"
-            value={this.props.selected.address}
-            category="address"
-            onChange={this.props.onSelectedChange}
-            options={this.props.viewer.addresses}
-          />
-        ) : null}
-
-        {this.props.file ? (
-          <System.ButtonPrimaryFull
-            style={{ marginTop: 48 }}
-            onClick={this._handleSubmit}
+        {!this.props.sidebarLoading ? (
+          <System.ButtonSecondaryFull
+            style={{ marginTop: 16 }}
+            onClick={this._handleCancel}
           >
-            Make storage deal
-          </System.ButtonPrimaryFull>
+            Cancel deal
+          </System.ButtonSecondaryFull>
         ) : null}
       </React.Fragment>
     );

components/system/components/fragments/TableComponents.js

@@ -197,7 +197,7 @@ export const TableContent = ({
       return (
         <span
           css={STYLES_TABLE_CONTENT_LINK}
-          onClick={() => onAction({ type: "SIDEBAR", value: action })}
+          onClick={() => onAction({ type: "SIDEBAR", value: action, data })}
         >
           {text}
         </span>

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",
+  });
+};

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,
       });
     }

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 (

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}