Storage refactor

src/components/Storage/Ranking.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+
+interface Asset {
+  provider: string;
+  timestamp: string;
+  asset: string;
+  speed: {
+    dnslookup: number;
+    connect: number;
+    appconnect: number;
+    pretransfer: number;
+    redirect: number;
+    starttransfer: number;
+    total: number;
+    size: number;
+  };
+}
+
+const calculateSpeed = (provider: Asset[]) => {
+  let transferred: number = 0;
+  let duration: number = 0;
+  let assets: string[] = [];
+  let url: string;
+  provider.map(({ speed, provider, asset }: Asset) => {
+    const { total, size } = speed;
+    transferred += size / 1000000;
+    duration += total;
+    assets.push(asset);
+    url = provider;
+  });
+  const speed = transferred / duration;
+  return { transferred, duration, assets, speed, url };
+};
+
+const Ranking = (props: { location: string; providers: any[] }) => {
+  const { location, providers } = props;
+  const speeds = providers.map((provider) => calculateSpeed(provider));
+  const sorted = speeds.sort((a, b) => b.speed - a.speed);
+  //console.log(location, sorted);
+  return (
+    <div className="col-3 mb-3">
+      <h3>{location}</h3>
+      {sorted
+        .slice(0, 5)
+        .map(({ url, assets, speed, duration, transferred }, i: number) => (
+          <div key={url} className="mb-1">
+            <b>
+              {i + 1}. {url}
+            </b>
+            <div>speed: {speed.toFixed()} mb/s</div>
+            <div>transferred: {transferred.toFixed()} mb</div>
+            <div>duration: {duration.toFixed()} s</div>
+          </div>
+        ))}
+    </div>
+  );
+};
+export default Ranking

src/components/Storage/Test.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import { Button } from "react-bootstrap";
+import Provider from "./Provider";
+import Loading from "../Loading";
+
+const Test = () => {
+  return (
+    <div>
+      <div className="form-group">
+        <input
+          className="form-control"
+          name="hash"
+          value={hash}
+          onChange={this.handleChange}
+        />
+        <Button
+          variant="success"
+          onClick={() => this.startTest(1)}
+          disabled={hash === ``}
+        >
+          Test selected resource
+        </Button>
+      </div>
+      <div className="form-group">
+        <input
+          className="form-control"
+          name="number"
+          value={number}
+          onChange={this.handleChange}
+        />
+        <Button variant="warning" onClick={() => this.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" />}
+    </div>
+  );
+};
+
+export default Test;

src/components/Storage/index.tsx

@@ -1,8 +1,10 @@
 import React from "react";
 import { Button } from "react-bootstrap";
-import Loading from "../Loading";
+import Ranking from "./Ranking";
+import Back from "../Back";
+
 import moment from "moment";
-import Provider from "./Provider";
+import Test from "./Test";
 import axios from "axios";
 
 interface IProps {
@@ -22,9 +24,11 @@ class Storage extends React.Component<IProps, IState> {
       loading: {},
       assets: [],
       speeds: {},
+      showTest: false,
     };
     this.startTest = this.startTest.bind(this);
     this.loadAsset = this.loadAsset.bind(this);
+    this.toggleShowTest = this.toggleShowTest.bind(this);
     this.handleChange = this.handleChange.bind(this);
   }
 
@@ -40,6 +44,10 @@ class Storage extends React.Component<IProps, IState> {
     this.setState({ speeds: data });
   }
 
+  toggleShowTest() {
+    this.setState({ showTest: !this.state.showTest });
+  }
+
   startTest(test: number) {
     const { hash, number } = this.state;
     const { assets } = this.props;
@@ -87,58 +95,28 @@ class Storage extends React.Component<IProps, IState> {
       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" />;
+    //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</h2>
-        <div className="form-group">
-          <input
-            className="form-control"
-            name="hash"
-            value={hash}
-            onChange={this.handleChange}
-          />
-          <Button
-            variant="success"
-            onClick={() => this.startTest(1)}
-            disabled={hash === ``}
-          >
-            Test selected resource
-          </Button>
-        </div>
-        <div className="form-group">
-          <input
-            className="form-control"
-            name="number"
-            value={number}
-            onChange={this.handleChange}
-          />
-          <Button variant="warning" onClick={() => this.startTest(2)}>
-            Test {number} out of {assets.length} assets
-          </Button>
-        </div>
+        <h2>Storage Providers Ranking</h2>
 
-        {(providers.length &&
-          providers.map((p) => (
-            <Provider
-              key={p.url}
-              loadAsset={this.loadAsset}
-              test={selectedAssets}
-              loading={loading}
-              startedAt={startedAt}
-              {...p}
-            />
-          ))) || <Loading target="provider list" />}
+        {showTest ? (
+          <Test />
+        ) : (
+          <Button variant="outline-dark float-right">
+            Perform your own test
+          </Button>
+        )}
 
-        <h2>Latest Speed Test</h2>
         <div className="d-flex flex-wrap ">
           {Object.keys(speeds).map((location) => (
-            <Location
+            <Ranking
               key={location}
               location={location}
               providers={speeds[location]}
@@ -146,68 +124,10 @@ class Storage extends React.Component<IProps, IState> {
           ))}
         </div>
 
-        <div className="position-fixed" style={{ right: "0px", top: "0px" }}>
-          <a href="/">Back</a>
-        </div>
+        <Back />
       </div>
     );
   }
 }
 
 export default Storage;
-
-interface Asset {
-  provider: string;
-  timestamp: string;
-  asset: string;
-  speed: {
-    dnslookup: number;
-    connect: number;
-    appconnect: number;
-    pretransfer: number;
-    redirect: number;
-    starttransfer: number;
-    total: number;
-    size: number;
-  };
-}
-
-const calculateSpeed = (provider: Asset[]) => {
-  let transferred: number = 0;
-  let duration: number = 0;
-  let assets: string[] = [];
-  let url: string;
-  provider.map(({ speed, provider, asset }: Asset) => {
-    const { total, size } = speed;
-    transferred += size / 1000000;
-    duration += total;
-    assets.push(asset);
-    url = provider;
-  });
-  const speed = transferred / duration;
-  return { transferred, duration, assets, speed, url };
-};
-
-const Location = (props: { location: string; providers: any[] }) => {
-  const { location, providers } = props;
-  const speeds = providers.map((provider) => calculateSpeed(provider));
-  const sorted = speeds.sort((a, b) => b.speed - a.speed);
-  //console.log(location, sorted);
-  return (
-    <div className="col-3 mb-3">
-      <h3>{location}</h3>
-      {sorted
-        .slice(0, 5)
-        .map(({ url, assets, speed, duration, transferred }, i: number) => (
-          <div key={url} className="mb-1">
-            <b>
-              {i + 1}. {url}
-            </b>
-            <div>speed: {speed.toFixed()} mb/s</div>
-            <div>transferred: {transferred.toFixed()} mb</div>
-            <div>duration: {duration.toFixed()} s</div>
-          </div>
-        ))}
-    </div>
-  );
-};