improve storage providers test

src/components/Storage/Asset.tsx

@@ -1,25 +1,33 @@
-import React, { useEffect } from "react";
+import React from "react";
 import moment from "moment";
 
 const Asset = (props: {
-  loadAsset: (string, any, string) => void;
+  setAssetStatus: (string, any, string) => void;
   provider: string;
   id: string;
   status: string;
   startedAt: any;
   finishedAt: any;
 }) => {
-  const { loadAsset, provider, id, status, startedAt, finishedAt } = props;
+  const { setAssetStatus, provider, id, status, startedAt, finishedAt } = props;
+
+  const url = `${provider}asset/v0/${id}`;
   const bg = {
-    undefined: "warning",
+    undefined: "light",
     loading: "warning",
     loaded: "success",
     failed: "danger",
   };
-  //console.log(status, bg[status]);
-  useEffect(() => loadAsset(id, provider, "loading"), []);
 
-  const url = `${provider}asset/v0/${id}`;
+  if (!status === "loading")
+    return (
+      <div
+        className={`display-block bg-${bg[status]} p-1 mr-1`}
+        style={{ width: `50px` }}
+      >
+        waiting
+      </div>
+    );
 
   return (
     <div
@@ -27,22 +35,28 @@ const Asset = (props: {
       style={{ width: `50px` }}
     >
       <a href={url} title={id}>
-        {finishedAt
+        {!status
+          ? "waiting"
+          : finishedAt
           ? moment(finishedAt).diff(startedAt) / 1000
           : moment().diff(startedAt) / 1000}
-        s
-        <img
-          onLoad={() =>
-            status === "loaded" || loadAsset(id, provider, "loaded")
-          }
-          onError={() =>
-            status === "failed" || loadAsset(id, provider, "failed")
-          }
-          className="hidden"
-          alt={id}
-          style={{ display: "none" }}
-          src={url}
-        />
+
+        {status === "loading" ? (
+          <img
+            onLoad={() =>
+              status === "loaded" || setAssetStatus(id, provider, "loaded")
+            }
+            onError={() =>
+              status === "failed" || setAssetStatus(id, provider, "failed")
+            }
+            className="hidden"
+            alt={id}
+            style={{ display: "none" }}
+            src={url}
+          />
+        ) : (
+          <div />
+        )}
       </a>
     </div>
   );

src/components/Storage/Provider.tsx

@@ -2,13 +2,13 @@ import React from "react";
 import Asset from "./Asset";
 
 const Provider = (props: {
-  loadAsset: (id: string, provider: string, status: string) => void;
+  setAssetStatus: (id: string, provider: string, status: string) => void;
   loading: any[];
   startedAt: string | boolean;
   test: string[];
   url: string;
 }) => {
-  const { loadAsset, loading, test, url, startedAt } = props;
+  const { setAssetStatus, loading, test, url, startedAt } = props;
 
   return (
     <div key={url} className="m-2 d-flex flex-row">
@@ -23,10 +23,9 @@ const Provider = (props: {
         test.map((a) => (
           <Asset
             key={`${url}-${a}`}
-            loadAsset={loadAsset}
+            setAssetStatus={setAssetStatus}
             id={a}
             provider={url}
-            startedAt={startedAt}
             {...loading[`${url}-${a}`]}
           />
         ))}

src/components/Storage/Test.tsx

@@ -3,19 +3,42 @@ import { Button } from "react-bootstrap";
 import Provider from "./Provider";
 import Loading from "../Loading";
 
-const Test = () => {
+const Test = (props: {
+  handleChange: () => void;
+  startTest: (number) => void;
+  setAssetStatus: (id: string, provider: string, status: string) => void;
+  assets: string[];
+  hash: string;
+  number: number;
+  providers;
+  selectedAssets: string[];
+  loading: {};
+}) => {
+  const {
+    handleChange,
+    startTest,
+    setAssetStatus,
+    assets,
+    loading,
+    providers,
+    hash,
+    number,
+    selectedAssets,
+  } = props;
+  if (!providers.length) return <Loading target="providers" />;
+  if (!assets.length) return <Loading target="assets" />;
   return (
-    <div>
+    <div className="m-2 p-2 bg-secondary">
       <div className="form-group">
         <input
           className="form-control"
           name="hash"
           value={hash}
-          onChange={this.handleChange}
+          onChange={handleChange}
         />
         <Button
           variant="success"
-          onClick={() => this.startTest(1)}
+          onClick={() => startTest(1)}
           disabled={hash === ``}
         >
           Test selected resource
@@ -26,23 +49,21 @@ const Test = () => {
           className="form-control"
           name="number"
           value={number}
-          onChange={this.handleChange}
+          onChange={handleChange}
         />
-        <Button variant="warning" onClick={() => this.startTest(2)}>
+        <Button variant="warning" onClick={() => startTest(2)}>
           Test {number} out of {assets.length} assets
         </Button>
       </div>
-      {(providers.length &&
-        providers.map((p) => (
-          <Provider
-            key={p.url}
-            loadAsset={this.loadAsset}
-            test={selectedAssets}
-            loading={loading}
-            startedAt={startedAt}
-            {...p}
-          />
-        ))) || <Loading target="provider list" />}
+      {providers.map((p) => (
+        <Provider
+          key={p.url}
+          setAssetStatus={setAssetStatus}
+          test={selectedAssets}
+          loading={loading}
+          {...p}
+        />
+      ))}
     </div>
   );
 };

src/components/Storage/index.tsx

@@ -27,7 +27,7 @@ class Storage extends React.Component<IProps, IState> {
       showTest: false,
     };
     this.startTest = this.startTest.bind(this);
-    this.loadAsset = this.loadAsset.bind(this);
+    this.setAssetStatus = this.setAssetStatus.bind(this);
     this.toggleShowTest = this.toggleShowTest.bind(this);
     this.handleChange = this.handleChange.bind(this);
   }
@@ -48,9 +48,9 @@ class Storage extends React.Component<IProps, IState> {
     this.setState({ showTest: !this.state.showTest });
   }
 
-  startTest(test: number) {
+  async startTest(test: number) {
     const { hash, number } = this.state;
-    const { assets } = this.props;
+    const { assets, providers } = this.props;
     const loading = {};
     let selectedAssets = [];
 
@@ -67,21 +67,46 @@ class Storage extends React.Component<IProps, IState> {
       if (selectedAssets.find((a) => a === asset)) i--;
       else selectedAssets.push(asset);
     }
-    this.setState({ loading, startedAt: moment(), selectedAssets });
+    loading[`${providers[0].url}-${selectedAssets[0]}`] = "loading";
+    await this.setState({ loading, startedAt: moment(), selectedAssets });
+    this.loadWaitingAsset(selectedAssets, providers);
   }
 
-  loadAsset(id: string, provider: string, status: string) {
-    let { startedAt } = this.state;
+  setAssetStatus(id: string, provider: string, status: string) {
+    console.debug(id, provider, status);
     const tag = `${provider}-${id}`;
-    const value =
-      status === `loading`
-        ? { provider, id, status, startedAt }
-        : { provider, id, status, finishedAt: moment() };
-
     const { loading } = this.state;
-    loading[tag] = value;
+
+    if (status === `loading`)
+      loading[tag] = { provider, id, status, startedAt: moment() };
+    else {
+      loading[tag].finishedAt = moment();
+      loading[tag].status = status;
+      this.loadWaitingAsset();
+    }
     this.setState({ loading });
   }
+  loadWaitingAsset(
+    selectedAssets = this.state.selectedAssets,
+    providers = this.props.providers
+  ) {
+    const { loading } = this.state;
+    let provider: string;
+    const asset = selectedAssets.find((a) => {
+      const waiting = providers.find((p) =>
+        loading[`${p.url}-${a}`] ? false : true
+      );
+      if (!waiting) return false;
+      provider = waiting.url;
+      return true;
+    });
+
+    if (!asset) return this.testFinished();
+    this.setAssetStatus(asset, provider, "loading");
+  }
+  testFinished() {
+    // TODO
+  }
 
   handleChange(e) {
     this.setState({ [e.target.name]: e.target.value });
@@ -94,22 +119,31 @@ class Storage extends React.Component<IProps, IState> {
       hash,
       number,
       loading,
-      startedAt,
       showTest,
     } = this.state;
     const { providers, assets } = this.props;
 
-    //if (!providers.length) return <Loading target="storage providers" />;
-    //if (!assets.length) return <Loading target="assets" />;
-
     return (
       <div className="m-2 p-2 bg-light">
         <h2>Storage Providers Ranking</h2>
 
         {showTest ? (
-          <Test />
+          <Test
+            handleChange={this.handleChange}
+            startTest={this.startTest}
+            setAssetStatus={this.setAssetStatus}
+            assets={assets}
+            hash={hash}
+            loading={loading}
+            number={number}
+            providers={providers}
+            selectedAssets={selectedAssets}
+          />
         ) : (
-          <Button variant="outline-dark float-right">
+          <Button
+            variant="outline-dark float-right"
+            onClick={this.toggleShowTest}
+          >
             Perform your own test
           </Button>
         )}