v-- multiple procedure field

Author: nqnguyen1

src/client/components/main/TRPC-composer/TRPCComposer.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 import { v4 as uuid } from 'uuid';
+// Import controllers
+import SendRequestButton from '../sharedComponents/requestButtons/SendRequestButton';
 // Import local components
 import TRPCMethodAndEndpointEntryForm from './TRPCMethodAndEndpointEntryForm';
 // Import Redux hooks
@@ -40,9 +42,7 @@ export default function TRPCComposer(props) {
     (state: RootState) => state.newRequest.newRequestBody
   );
 
-  const [procedures, setProcedures] = useState([
-    { method: 'QUERRY', endpoint: '.user', variable: '{hello:World}' },
-  ]);
+  const [procedures, setProcedures] = useState([{ PROCEDURE_DEFAULT }]);
 
   const {
     newRequestHeadersSet,
@@ -53,6 +53,7 @@ export default function TRPCComposer(props) {
     newRequestStreams,
   } = props;
 
+  console.log(Store.getState());
   /** newRequestFields slice from redux store, contains general request info*/
   const requestFields = useSelector(
     (state: RootState) => state.newRequestFields
@@ -65,7 +66,11 @@ export default function TRPCComposer(props) {
   // );
 
   let subscription: any;
-
+  const addProcedures = () => {
+    setProcedures((prev) => {
+      return [...prev, { ...PROCEDURE_DEFAULT }];
+    });
+  };
   // const sendRequest = () => {
   //   let isWebsocket = false;
   //   const links = [];
@@ -196,9 +201,17 @@ export default function TRPCComposer(props) {
 
         <TRPCProceduresContainer
           procedures={procedures}
-          sendRequest={sendRequest}
+          addProcedures={addProcedures}
         />
-
+        <button
+          className="button is-normal is-primary-100 add-request-button is-vertical-align-center is-justify-content-center no-border-please"
+          type="button"
+          style={{ margin: '10px' }}
+          onClick={addProcedures}
+        >
+          Add Procedure
+        </button>
+        <SendRequestButton onClick={sendRequest} />
         {/* {requestFields.method === 'SUBSCRIPTION' && ( ////for subscription
           <SendRequestButton
             onClick={() => subscription.unsubscribe()}

src/client/components/main/TRPC-composer/TRPCPrceduresEndPoint.tsx

@@ -112,9 +112,6 @@ const TRPCPrceduresEndPoint = (props) => {
           placeholder="Enter endpoint"
           onChange={onChangeHandler}
         />
-        <div id="tRPCButton" className="no-border-please button is-webrtc">
-          <span> Add Procedure</span>
-        </div>
       </div>
     </div>
   );

src/client/components/main/TRPC-composer/TRPCProcedure.tsx

@@ -9,10 +9,10 @@ export default function TRPCProcedure() {
     setProcedureType(type);
   };
   const endPointChangeHandler = (userEndpoint) => {
-    setEndpoint(userEndpoint);
+    setEndpoint(endpoint);
   };
   return (
-    <div>
+    <div style={container}>
       <TRPCPrceduresEndPoint
         procedureType={procedureType}
         setProcedureTypeHandler={setProcedureTypeHandler}
@@ -23,3 +23,8 @@ export default function TRPCProcedure() {
     </div>
   );
 }
+
+const container = {
+  border: '1px solid black',
+  padding: '10px 0px',
+};

src/client/components/main/TRPC-composer/TRPCProceduresContainer.tsx

@@ -1,24 +1,14 @@
 import React from 'react';
 import TRPCProcedure from './TRPCProcedure';
-import SendRequestButton from '../sharedComponents/requestButtons/SendRequestButton';
+
 export default function TRPCProceduresContainer(props) {
-  const procedureJSX = props.procedures.map((procedure) => {
-    const string = `method: ${procedure.method}  ; endpoint: ${procedure.endpoint}`;
-    return (
-      <li>
-        method: {procedure.method} &nbsp; endpoint: {procedure.endpoint} &nbsp;
-        variable: {procedure.variable}
-      </li>
-    );
+  const proceduresJSX = props.procedures.map((procedure, index) => {
+    return <TRPCProcedure key={index}></TRPCProcedure>;
   });
   return (
     <div>
-      <TRPCProcedure></TRPCProcedure>
-      <div>
-        <h3 style={h3Styles}>Your Procedure/s</h3>
-        {procedureJSX}
-        <SendRequestButton onClick={props.sendRequest} />
-      </div>
+      <h3 style={h3Styles}>Your Procedure/s</h3>
+      {proceduresJSX}
     </div>
   );
 }