deals: renders errors in a sane way and fixes bugs with updating the UI after polling

components/sidebars/SidebarFileStorageDeal.js

@@ -45,12 +45,20 @@ const STYLES_IMAGE_PREVIEW = css`
 
 export default class SidebarFileStorageDeal extends React.Component {
   state = {
-    settings_cold_default_duration: this.props.viewer
-      .settings_cold_default_duration,
-    settings_cold_default_replication_factor: this.props.viewer
-      .settings_cold_default_replication_factor,
+    settings_cold_default_duration: this.props.viewer.settings_cold_default_duration,
+    settings_cold_default_replication_factor: this.props.viewer.settings_cold_default_replication_factor,
   };
 
+  async componentDidMount() {
+    if (!this.props.viewer.settings_deals_auto_approve) {
+      return null;
+    }
+
+    console.log("SETTINGS: AUTO DEAL");
+
+    await this._handleSubmit();
+  }
+
   _handleMakeDeal = async ({ ipfs }) => {
     const options = {
       method: "POST",
@@ -69,7 +77,10 @@ export default class SidebarFileStorageDeal extends React.Component {
   };
 
   _handleSubmit = async (e) => {
-    e.persist();
+    if (e) {
+      e.persist();
+    }
+
     this.props.onSidebarLoading(true);
     await this._handleMakeDeal({ ipfs: this.props.data.ipfs });
     await this.props.onSubmit({});
@@ -88,15 +99,10 @@ export default class SidebarFileStorageDeal extends React.Component {
 
     return (
       <React.Fragment>
-        <System.P style={{ fontFamily: Constants.font.semiBold }}>
-          Upload a file to the network
-        </System.P>
+        <System.P style={{ fontFamily: Constants.font.semiBold }}>Upload a file to the network</System.P>
 
         <div>
-          <img
-            src={`https://hub.textile.io${file.ipfs}`}
-            css={STYLES_IMAGE_PREVIEW}
-          />
+          <img src={`https://hub.textile.io${file.ipfs}`} css={STYLES_IMAGE_PREVIEW} />
 
           <div css={STYLES_ITEM}>
             <div css={STYLES_FOCUS}>{file.name}</div>
@@ -109,48 +115,50 @@ export default class SidebarFileStorageDeal extends React.Component {
           </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.sidebarLoading ? (
+          <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}
 
-        <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}
-        />
+        {!this.props.sidebarLoading ? (
+          <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}
 
-        <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}
-        />
+        {!this.props.sidebarLoading ? (
+          <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}
 
         <System.ButtonPrimaryFull
           style={{ marginTop: 48 }}
           onClick={this._handleSubmit}
-          loading={this.props.sidebarLoading}
-        >
+          loading={this.props.sidebarLoading}>
           Make storage deal
         </System.ButtonPrimaryFull>
 
         {!this.props.sidebarLoading ? (
-          <System.ButtonSecondaryFull
-            style={{ marginTop: 16 }}
-            onClick={this._handleCancel}
-          >
+          <System.ButtonSecondaryFull style={{ marginTop: 16 }} onClick={this._handleCancel}>
             Cancel deal
           </System.ButtonSecondaryFull>
         ) : null}

pages/api/data/cid-status.js

@@ -37,19 +37,19 @@ export default async (req, res) => {
 
   const success = [];
   const failed = [];
+  const reset = [];
 
   for (let i = 0; i < req.body.data.length; i++) {
     const x = req.body.data[i];
 
     if (!x.job) {
-      console.log("-- NO JOB (3)");
       failed.push(x);
       continue;
     }
 
     if (!x.ipfs) {
-      console.log("-- NO IPFS (3)");
       failed.push(x);
+      continue;
     }
 
     let job;
@@ -68,10 +68,16 @@ export default async (req, res) => {
 
     if (job.status === 5) {
       console.log({ message: "SUCCESS", job });
+      x.error = null;
       success.push(x);
       continue;
     }
 
+    if (x.error) {
+      x.error = null;
+      reset.push(x);
+    }
+
     console.log({ message: "NOOP", job });
   }
 
@@ -115,8 +121,25 @@ export default async (req, res) => {
     }
   }
 
+  if (reset.length) {
+    for (let i = 0; i < reset.length; i++) {
+      let data = LibraryManager.getDataByIPFS(targetUser, reset[i].ipfs);
+      if (!data) {
+        continue;
+      }
+
+      data.error = null;
+
+      targetUser.data = LibraryManager.updateDataById({
+        user: targetUser,
+        id: data.id,
+        data,
+      });
+    }
+  }
+
   let response;
-  if (success.length || failed.length) {
+  if (success.length || failed.length || reset.length) {
     response = await Data.updateUserById({
       id: targetUser.id,
       data: targetUser.data,
@@ -125,7 +148,7 @@ export default async (req, res) => {
 
   return res.status(200).send({
     decorator: "SERVER_CID_CHECK",
-    update: success.length || failed.length,
+    update: success.length || failed.length || reset.length,
     updateResponse: response,
   });
 };

scenes/SceneFilesFolder.js

@@ -24,6 +24,7 @@ export default class SceneFilesFolder extends React.Component {
           ipfs: d.ipfs,
           cid: d.ipfs.replace("/ipfs/", ""),
           job: d.job,
+          error: d.error,
         });
       }
     });
@@ -56,10 +57,7 @@ export default class SceneFilesFolder extends React.Component {
     let rows = this.props.viewer.library[0].children.map((each) => {
       return {
         ...each,
-        button:
-          each.networks && each.networks.includes("FILECOIN")
-            ? null
-            : "Store on Filecoin",
+        button: each.networks && each.networks.includes("FILECOIN") ? null : "Store on Filecoin",
       };
     });
 
@@ -69,17 +67,9 @@ export default class SceneFilesFolder extends React.Component {
         {
           key: "size",
           name: "Size",
-          width: "140px",
+          width: "116px",
           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.",
-        },
         {
           key: "networks",
           name: "Networks",
@@ -96,7 +86,12 @@ export default class SceneFilesFolder extends React.Component {
           hideLabel: true,
           type: "BUTTON",
           action: "SIDEBAR_FILE_STORAGE_DEAL",
-          width: "148px",
+          width: "132px",
+        },
+        {
+          key: "error",
+          hideLabel: true,
+          width: "188px",
         },
       ],
       rows,
@@ -114,8 +109,7 @@ export default class SceneFilesFolder extends React.Component {
               type: "SIDEBAR",
               value: "SIDEBAR_ADD_FILE_TO_BUCKET",
             },
-          ]}
-        >
+          ]}>
           <System.Table
             key={this.props.current.folderId}
             data={data}