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;
 }
 
@@ -167,20 +167,17 @@ table {
   width: 10px;
   height: 12px;
   border: 2px solid transparent;
-    box-shadow:
+  box-shadow: 0 0 0 2px, inset -2px 0 0, inset 2px 0 0;
-        0 0 0 2px,
-        inset -2px 0 0,
-        inset 2px 0 0;
   border-bottom-left-radius: 1px;
   border-bottom-right-radius: 1px;
-    margin-top: 4px
+  margin-top: 4px;
 }
 .gg-trash::after,
 .gg-trash::before {
   content: "";
   display: block;
   box-sizing: border-box;
-    position: absolute
+  position: absolute;
 }
 .gg-trash::after {
   background: currentColor;
@@ -188,7 +185,7 @@ table {
   width: 16px;
   height: 2px;
   top: -4px;
-    left: -5px
+  left: -5px;
 }
 .gg-trash::before {
   width: 10px;
@@ -198,5 +195,5 @@ table {
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   top: -7px;
-    left: -2px
+  left: -2px;
 }

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

@@ -159,6 +159,12 @@ function App() {
           />
         )}
         {deployed && (
+          <>
+            <IfsDeployed
+              wasm={wasm}
+              serviceId={serviceId}
+              removeService={removeService}
+            />
             <Deployed
               setRpcAddr={setRpcAddr}
               rpcAddr={rpcAddr}
@@ -167,10 +173,8 @@ function App() {
               fileSize={fileSize}
               fileSizeCID={fileSizeCID}
               getFileSize={getFileSize}
-            wasm={wasm}
-            serviceId={serviceId}
-            removeService={removeService}
             />
+          </>
         )}
       </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
+        <br />
+        And specify CID of WebAssembly module.
+      </p>
+
+      <TextInput
+        text={"IPFS RPC address"}
         value={props.rpcAddr}
+        setValue={props.setRpcAddr}
       />
-        </div>
+
-        <div className="row">
+      <TextInput
-          <h2>Set process_files.wasm module CID</h2>
+        text={"process_files.wasm module CID"}
-          <p className="p">
-            To deploy a service, specify CID of WebAssembly module.
-          </p>
-          <input
-            className="input"
-            type="text"
-            onChange={(e) => props.setWasm(e.target.value)}
         value={props.wasm}
+        setValue={props.setWasm}
       />
-        </div>
-      </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,
-          you will be able to use that service to get sizes of IPFS files!
-        </p>
       <div className="row">
         <button className="btn btn-hello" onClick={props.deployService}>
           deploy service
         </button>
       </div>
-      </div>
+    </>
+  );
+};
+
+const IfsDeployed = (props: {
+  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>
+      </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;