rework form logic

intro/4-ipfs-code-execution/web/src/App.scss

@@ -99,7 +99,7 @@ table {
 }
 
 .label {
-  width: 70px;
+  width: 240px;
   display: inline-block;
 }
 
@@ -160,43 +160,40 @@ table {
 }
 
 .gg-trash {
-    box-sizing: border-box;
+  box-sizing: border-box;
-    position: relative;
+  position: relative;
-    display: block;
+  display: block;
-    transform: scale(var(--ggs,1));
+  transform: scale(var(--ggs, 1));
-    width: 10px;
+  width: 10px;
-    height: 12px;
+  height: 12px;
-    border: 2px solid transparent;
+  border: 2px solid transparent;
-    box-shadow:
+  box-shadow: 0 0 0 2px, inset -2px 0 0, inset 2px 0 0;
-        0 0 0 2px,
+  border-bottom-left-radius: 1px;
-        inset -2px 0 0,
+  border-bottom-right-radius: 1px;
-        inset 2px 0 0;
+  margin-top: 4px;
-    border-bottom-left-radius: 1px;
-    border-bottom-right-radius: 1px;
-    margin-top: 4px
 }
 .gg-trash::after,
 .gg-trash::before {
-    content: "";
+  content: "";
-    display: block;
+  display: block;
-    box-sizing: border-box;
+  box-sizing: border-box;
-    position: absolute
+  position: absolute;
 }
 .gg-trash::after {
-    background: currentColor;
+  background: currentColor;
-    border-radius: 3px;
+  border-radius: 3px;
-    width: 16px;
+  width: 16px;
-    height: 2px;
+  height: 2px;
-    top: -4px;
+  top: -4px;
-    left: -5px
+  left: -5px;
 }
 .gg-trash::before {
-    width: 10px;
+  width: 10px;
-    height: 4px;
+  height: 4px;
-    border: 2px solid;
+  border: 2px solid;
-    border-bottom: transparent;
+  border-bottom: transparent;
-    border-top-left-radius: 2px;
+  border-top-left-radius: 2px;
-    border-top-right-radius: 2px;
+  border-top-right-radius: 2px;
-    top: -7px;
+  top: -7px;
-    left: -2px
+  left: -2px;
 }

intro/4-ipfs-code-execution/web/src/App.tsx

@@ -159,18 +159,22 @@ function App() {
           />
         )}
         {deployed && (
-          <Deployed
+          <>
-            setRpcAddr={setRpcAddr}
+            <IfsDeployed
-            rpcAddr={rpcAddr}
+              wasm={wasm}
-            setFileCID={setFileCID}
+              serviceId={serviceId}
-            fileCID={fileCID}
+              removeService={removeService}
-            fileSize={fileSize}
+            />
-            fileSizeCID={fileSizeCID}
+            <Deployed
-            getFileSize={getFileSize}
+              setRpcAddr={setRpcAddr}
-            wasm={wasm}
+              rpcAddr={rpcAddr}
-            serviceId={serviceId}
+              setFileCID={setFileCID}
-            removeService={removeService}
+              fileCID={fileCID}
-          />
+              fileSize={fileSize}
+              fileSizeCID={fileSizeCID}
+              getFileSize={getFileSize}
+            />
+          </>
         )}
       </div>
     </div>
@@ -185,52 +189,10 @@ const Deployed = (props: {
   fileSize: string;
   fileSizeCID: string;
   getFileSize: () => Promise<void>;
-  wasm: string;
-  serviceId: string | null;
-  removeService: () => {};
 }) => {
   return (
     <>
-      <h2>Deployed</h2>
-      <table>
-        <tr>
-          <td className="bold">process_files.wasm CID:</td>
-          <td className="mono">{props.wasm}</td>
-          <td>
-            <button
-              className="btn-clipboard"
-              onClick={() => copyToClipboard(props.wasm)}
-            >
-              <i className="gg-clipboard"></i>
-            </button>
-          </td>
-        </tr>
-        <tr>
-          <td className="bold">ProcessFiles service ID:</td>
-          <td className="mono">{props.serviceId}</td>
-          <button
-            className="btn-clipboard"
-            onClick={() => props.removeService()}
-          >
-            <i className="gg-trash"></i>
-          </button>
-        </tr>
-        <tr>
-          <td className="bold">File Size:</td>
-          <td className="mono">{props.fileSize}</td>
-        </tr>
-      </table>
       <div>
-        <div className="row">
-          <h2>Set IPFS RPC address:</h2>
-          <p className="p">Specify IPFS to download file from</p>
-          <input
-            className="input"
-            type="text"
-            onChange={(e) => props.setRpcAddr(e.target.value)}
-            value={props.rpcAddr}
-          />
-        </div>
         <h2>Get file size</h2>
         <p className="p">
           Upload any file to IPFS node
@@ -278,43 +240,70 @@ const IpfsForm = (props: {
 }) => {
   return (
     <>
-      <div>
+      <h2>Ipfs</h2>
-        <div className="row">
+      <p>
-          <h2>Set IPFS RPC address:</h2>
+        process_files.wasm will be downloaded via IPFS to the Fluence node, and
-          <p className="p">Specify IPFS to download process_files.wasm from</p>
+        then a service will be dynamically created from it! After that, you will
-          <input
+        be able to use that service to get sizes of IPFS files!
-            className="input"
+        <br />
-            type="text"
+        To do so, please specify IPFS RPC address to download process_files.wasm
-            onChange={(e) => props.setRpcAddr(e.target.value)}
+        from
-            value={props.rpcAddr}
+        <br />
-          />
+        And specify CID of WebAssembly module.
-        </div>
+      </p>
-        <div className="row">
+
-          <h2>Set process_files.wasm module CID</h2>
+      <TextInput
-          <p className="p">
+        text={"IPFS RPC address"}
-            To deploy a service, specify CID of WebAssembly module.
+        value={props.rpcAddr}
-          </p>
+        setValue={props.setRpcAddr}
-          <input
+      />
-            className="input"
+
-            type="text"
+      <TextInput
-            onChange={(e) => props.setWasm(e.target.value)}
+        text={"process_files.wasm module CID"}
-            value={props.wasm}
+        value={props.wasm}
-          />
+        setValue={props.setWasm}
-        </div>
+      />
+      <div className="row">
+        <button className="btn btn-hello" onClick={props.deployService}>
+          deploy service
+        </button>
       </div>
-      <div>
+    </>
-        <h2>Deploy ProcessFiles service</h2>
+  );
-        <p className="p">
+};
-          process_files.wasm will be downloaded via IPFS to the Fluence node,
+
-          and then a service will be dynamically created from it! After that,
+const IfsDeployed = (props: {
-          you will be able to use that service to get sizes of IPFS files!
+  wasm: string;
-        </p>
+  serviceId: string | null;
-        <div className="row">
+  removeService: () => {};
-          <button className="btn btn-hello" onClick={props.deployService}>
+}) => {
-            deploy service
+  return (
+    <>
+      <h2>Deployed</h2>
+      <table>
+        <tr>
+          <td className="bold">process_files.wasm CID:</td>
+          <td className="mono">{props.wasm}</td>
+          <td>
+            <button
+              className="btn-clipboard"
+              onClick={() => copyToClipboard(props.wasm)}
+            >
+              <i className="gg-clipboard"></i>
+            </button>
+          </td>
+        </tr>
+        <tr>
+          <td className="bold">ProcessFiles service ID:</td>
+          <td className="mono">{props.serviceId}</td>
+          <button
+            className="btn-clipboard"
+            onClick={() => props.removeService()}
+          >
+            <i className="gg-trash"></i>
           </button>
-        </div>
+        </tr>
-      </div>
+      </table>
     </>
   );
 };
@@ -376,4 +365,23 @@ const Connected = (props: { client: FluenceClient }) => {
   );
 };
 
+const TextInput = (props: {
+  text: string;
+  value: string;
+  setValue: React.Dispatch<React.SetStateAction<string>>;
+}) => {
+  return (
+    <div className="row">
+      <label className="label bold">{props.text}</label>
+      <input
+        className="input"
+        type="text"
+        onChange={(e) => props.setValue(e.target.value)}
+        value={props.value}
+        required={true}
+      />
+    </div>
+  );
+};
+
 export default App;