Have request node use canvas store to push updates

jsajal · jsajal · commit 5dc516bb7999 · 2024-03-25T14:02:40.000-07:00
diff --git a/src/components/molecules/flow/nodes/AuthNode.js b/src/components/molecules/flow/nodes/AuthNode.js
@@ -6,31 +6,12 @@ import useCanvasStore from 'stores/CanvasStore';
 const AuthNode = ({ id, data }) => {
   const setAuthNodeType = useCanvasStore((state) => state.setAuthNodeType);
   const setBasicAuthValues = useCanvasStore((state) => state.setBasicAuthValues);
-  /* its better to have no space strings as values since they are less error/bug prone */
-  // const initState = () => {
-  //   if (data.auth && data.auth.type) {
-  //     return data.auth.type; // should return basic-auth
-  //   } else {
-  //     data.auth = {};
-  //     data.auth.type = 'no-auth';
-  //     return 'no-auth';
-  //   }
-  // };
 
-  // // const [anchorEl, setAnchorEl] = React.useState(null);
-  // const [auth, setAuth] = React.useState(initState());
-
-  /**
-   * Not sure whether you need to set the value for data props/param or not.
-   * Technically you should not set the value for a prop/param in a component
-   * Check this and other places in this file once
-   */
   const handleChange = (value, option) => {
     setBasicAuthValues(id, option, value);
   };
 
   const handleSelection = (event) => {
-    //const selectedValue = event.target?.value;
     setAuthNodeType(id, event.target?.value);
   };
 
diff --git a/src/components/molecules/flow/nodes/RequestBody.js b/src/components/molecules/flow/nodes/RequestBody.js
@@ -3,24 +3,14 @@ import { PropTypes } from 'prop-types';
 import { EllipsisVerticalIcon } from '@heroicons/react/24/solid';
 import { DocumentArrowUpIcon } from '@heroicons/react/24/outline';
 import { Menu, Transition } from '@headlessui/react';
+import useCanvasStore from 'stores/CanvasStore';
 
-const requestBodyTypeOptions = ['None', 'form-data', 'raw-json', 'raw-txt'];
+const requestBodyTypeOptions = ['None', 'form-data', 'raw-json'];
 
-const RequestBody = ({ nodeData }) => {
-  const uploadFileForRequestNode = useRef(null);
-  const [bodyType, setBodyType] = useState(nodeData.requestBody ? nodeData.requestBody.type : 'None');
+const RequestBody = ({ nodeId, nodeData }) => {
+  const setRequestNodeBody = useCanvasStore((state) => state.setRequestNodeBody);
 
-  // form-data
-  const [fileName, setFileName] = useState(
-    nodeData.requestBody && nodeData.requestBody.body && nodeData.requestBody.body.name
-      ? nodeData.requestBody.body.name
-      : '',
-  );
-  const [fileValue, setFileValue] = useState(
-    nodeData.requestBody && nodeData.requestBody.body && nodeData.requestBody.body.value
-      ? nodeData.requestBody.body.name
-      : '',
-  );
+  const uploadFileForRequestNode = useRef(null);
 
   const handleFileUpload = async (e) => {
     if (!e.target.files) return;
@@ -38,66 +28,45 @@ const RequestBody = ({ nodeData }) => {
 
         const value = result;
 
-        setFileName(name);
-        setFileValue(value);
-
-        if (!nodeData.requestBody.body) {
-          nodeData.requestBody.body = {};
-        }
-
-        nodeData.requestBody.body.value = value;
-        nodeData.requestBody.body.name = name;
+        setRequestNodeBody(nodeId, 'form-data', {
+          value: value,
+          name: name,
+        });
       };
       reader.readAsDataURL(file);
     }
   };
 
-  const [fileKey, setFileKey] = useState(
-    bodyType === 'form-data' && nodeData.requestBody && nodeData.requestBody.body ? nodeData.requestBody.body.key : '',
-  );
   const handleFormDataKey = (e) => {
-    if (!nodeData.requestBody.body) {
-      nodeData.requestBody.body = {};
-    }
-    setFileKey(e.target.value);
-    nodeData.requestBody.body.key = e.target.value;
+    setRequestNodeBody(nodeId, 'form-data', {
+      key: e.target.value,
+    });
   };
 
-  // raw-json
-  const [jsonValue, setJsonValue] = useState(
-    bodyType === 'raw-json' && nodeData.requestBody && nodeData.requestBody.body ? nodeData.requestBody.body : '{}',
-  );
-
   const handleRawJson = (e) => {
-    setJsonValue(e.target.value);
-    nodeData.requestBody.body = e.target.value;
+    setRequestNodeBody(nodeId, 'raw-json', e.target.value);
   };
 
   const handleClose = (option) => {
-    nodeData.requestBody = {};
-    nodeData.requestBody.type = option;
-    setBodyType(option);
-
-    //console.log(`handleClose:: ${option}`);
-
     if (option == 'raw-json') {
-      nodeData.requestBody.body = jsonValue;
+      setRequestNodeBody(nodeId, option, '');
     } else if (option == 'form-data') {
-      nodeData.requestBody.body = {};
-      nodeData.requestBody.body.key = fileKey;
-      nodeData.requestBody.body.value = fileValue;
-      nodeData.requestBody.body.name = fileName;
+      setRequestNodeBody(nodeId, option, {
+        key: '',
+        value: '',
+        name: '',
+      });
     }
   };
 
   return (
     <>
-      <div className='px-2 py-4 border-t border-neutral-300 bg-slate-100'>
+      <div className='border-t border-neutral-300 bg-slate-100 px-2 py-4'>
         <div className='flex items-center justify-between font-medium'>
           <h3>Body</h3>
           <Menu as='div' className='relative inline-block text-left'>
             <Menu.Button data-click-from='body-type-menu' className='p-2'>
-              <EllipsisVerticalIcon className='w-4 h-4' aria-hidden='true' data-click-from='body-type-menu' />
+              <EllipsisVerticalIcon className='h-4 w-4' aria-hidden='true' data-click-from='body-type-menu' />
             </Menu.Button>
             <Transition
               as={Fragment}
@@ -109,13 +78,13 @@ const RequestBody = ({ nodeData }) => {
               leaveTo='transform opacity-0 scale-95'
             >
               <Menu.Items
-                className='absolute right-0 z-10 w-56 px-1 py-1 mt-2 origin-top-right bg-white divide-y divide-gray-100 rounded-md shadow-lg ring-1 ring-black/5 focus:outline-none'
+                className='absolute right-0 z-10 mt-2 w-56 origin-top-right divide-y divide-gray-100 rounded-md bg-white px-1 py-1 shadow-lg ring-1 ring-black/5 focus:outline-none'
                 data-click-from='body-type-menu'
               >
                 {requestBodyTypeOptions.map((bodyTypeOption, index) => (
                   <Menu.Item key={index} data-click-from='body-type-menu' onClick={() => handleClose(bodyTypeOption)}>
                     <button
-                      className='flex items-center w-full px-2 py-2 text-sm text-gray-900 rounded-md group hover:bg-slate-100'
+                      className='group flex w-full items-center rounded-md px-2 py-2 text-sm text-gray-900 hover:bg-slate-100'
                       data-click-from='body-type-menu'
                     >
                       {bodyTypeOption}
@@ -127,45 +96,45 @@ const RequestBody = ({ nodeData }) => {
           </Menu>
         </div>
       </div>
-      {bodyType === 'raw-json' && (
-        <div className='p-2 border border-t border-neutral-300 bg-slate-50'>
+      {nodeData.requestBody && nodeData.requestBody.type === 'raw-json' && (
+        <div className='border border-t border-neutral-300 bg-slate-50 p-2'>
           <textarea
-            placeholder={bodyType}
-            className='w-full p-2 nodrag nowheel'
+            placeholder='Enter json'
+            className='nodrag nowheel w-full p-2'
             name='username'
             onChange={(e) => handleRawJson(e)}
             rows={4}
-            value={jsonValue}
+            value={nodeData.requestBody.body}
           />
         </div>
       )}
-      {bodyType === 'form-data' && (
-        <div className='p-2 border-t border-neutral-300 bg-slate-50'>
-          <div className='flex items-center justify-between text-sm border rounded-md border-neutral-500 text-neutral-500 outline-0 focus:ring-0'>
+      {nodeData.requestBody && nodeData.requestBody.type === 'form-data' && (
+        <div className='border-t border-neutral-300 bg-slate-50 p-2'>
+          <div className='flex items-center justify-between rounded-md border border-neutral-500 text-sm text-neutral-500 outline-0 focus:ring-0'>
             <input
               placeholder='key'
-              className='pl-4 nodrag nowheel bg-slate-50'
+              className='nodrag nowheel bg-slate-50 pl-4'
               name='variable-value'
               onChange={(e) => handleFormDataKey(e)}
-              value={fileKey}
+              value={nodeData.requestBody.body.key}
             />
-            <div className='px-4 py-2 border-l rounded-br-md rounded-tr-md border-l-neutral-500'>File</div>
+            <div className='rounded-br-md rounded-tr-md border-l border-l-neutral-500 px-4 py-2'>File</div>
           </div>
           <div className='py-2'>
             <button
-              className='flex items-center justify-center w-full gap-2 p-2 border rounded-md cursor-pointer border-neutral-500 bg-slate-100 hover:bg-slate-200'
+              className='flex w-full cursor-pointer items-center justify-center gap-2 rounded-md border border-neutral-500 bg-slate-100 p-2 hover:bg-slate-200'
               onClick={() => {
                 uploadFileForRequestNode.current.click();
               }}
             >
-              <DocumentArrowUpIcon className='w-4 h-4 text-center' />
+              <DocumentArrowUpIcon className='h-4 w-4 text-center' />
               Upload File
               {/* Ref: https://stackoverflow.com/questions/37457128/react-open-file-browser-on-click-a-div */}
               <div className='hidden'>
                 <input type='file' id='file' ref={uploadFileForRequestNode} onChange={handleFileUpload} />
               </div>
             </button>
-            {fileName != '' ? fileName : 'Choose a file to upload'}
+            {nodeData.requestBody.body.name != '' ? nodeData.requestBody.body.name : 'Choose a file to upload'}
           </div>
         </div>
       )}
diff --git a/src/components/molecules/flow/nodes/RequestNode.js b/src/components/molecules/flow/nodes/RequestNode.js
@@ -6,101 +6,69 @@ import { getInputType } from 'utils/common';
 import { PlusIcon, TrashIcon } from '@heroicons/react/24/solid';
 import { getDefaultValue } from 'utils/common';
 import AddVariableModal from 'components/molecules/modals/flow/AddVariableModal';
+import useCanvasStore from 'stores/CanvasStore';
 
-function initialVariables(data) {
-  if (data.variables != undefined) {
-    return data.variables;
-  }
-  return {};
-}
+const RequestNode = ({ id, data }) => {
+  const setRequestNodeUrl = useCanvasStore((state) => state.setRequestNodeUrl);
+  const requestNodeAddVariable = useCanvasStore((state) => state.requestNodeAddVariable);
+  const requestNodeDeleteVariable = useCanvasStore((state) => state.requestNodeDeleteVariable);
+  const requestNodeChangeVariable = useCanvasStore((state) => state.requestNodeChangeVariable);
 
-const RequestNode = ({ data }) => {
   const [variableDialogOpen, setVariableDialogOpen] = useState(false);
-  const [variables, setVariables] = useState(initialVariables(data));
 
   const handleAddVariable = (name, type) => {
-    const newId = name;
-    const newVar = {
-      type: type,
-      value: getDefaultValue(type),
-    };
-    setVariables((prevVariables) => {
-      return { ...prevVariables, [newId]: newVar };
-    });
+    requestNodeAddVariable(id, name, type);
   };
 
-  const handleDeleteVariable = (event, id) => {
-    setVariables((currentVariables) => {
-      // eslint-disable-next-line no-unused-vars
-      const { [id]: _, ...newVariables } = currentVariables;
-      return newVariables;
-    });
+  const handleDeleteVariable = (event, vId) => {
+    requestNodeDeleteVariable(id, vId);
   };
 
-  const handleVariableChange = (event, id) => {
-    setVariables((currentVariables) => {
-      const updateVar = {
-        type: currentVariables[id].type,
-        value: event.target.value,
-      };
-      return { ...currentVariables, [id]: updateVar };
-    });
+  const handleVariableChange = (event, vId) => {
+    requestNodeChangeVariable(id, vId, event.target.value);
   };
 
-  // const handleBooleanChange = (event, id) => {
-  //   setVariables((currentVariables) => {
-  //     const updateVar = {
-  //       type: currentVariables[id].type,
-  //       value: event.target.checked,
-  //     };
-  //     return { ...currentVariables, [id]: updateVar };
-  //   });
-  // };
-
-  useEffect(() => {
-    data.variables = variables;
-  }, [variables]);
-
   const handleUrlInputChange = (event) => {
-    data.url = event.target.value;
+    setRequestNodeUrl(id, event.target.value);
   };
 
   const renderVariables = () => {
     return (
       <>
-        {Object.keys(variables).map((id) => (
-          <div className='flex items-center justify-between pb-2' key={id}>
-            <div className='flex items-center justify-between text-sm border rounded-md border-neutral-500 text-neutral-500 outline-0 focus:ring-0'>
-              {variables[id].type === 'Boolean' ? (
-                <select
-                  onChange={(e) => handleVariableChange(e, id)}
-                  name='boolean-val'
-                  className='nodrag h-9 w-full rounded-br-md rounded-tr-md  p-2.5 px-1 '
-                  value={variables[id].value}
-                >
-                  <option value='true'>True</option>
-                  <option value='false'>False</option>
-                </select>
-              ) : (
-                <input
-                  type={getInputType(variables[id].type)}
-                  className='nodrag nowheel block h-9 w-full rounded-bl-md rounded-tl-md  p-2.5'
-                  name='variable-value'
-                  data-type={getInputType(variables[id].type)}
-                  onChange={(e) => handleVariableChange(e, id)}
-                  value={variables[id].value}
-                />
-              )}
-              <label>{id}</label>
-              <div className='px-4 py-2 border-l rounded-br-md rounded-tr-md border-l-neutral-500'>
-                {variables[id].type}
+        {data.variables &&
+          Object.keys(data.variables).map((id) => (
+            <div className='flex items-center justify-between pb-2' key={id}>
+              <div className='flex items-center justify-between rounded-md border border-neutral-500 text-sm text-neutral-500 outline-0 focus:ring-0'>
+                {data.variables[id].type === 'Boolean' ? (
+                  <select
+                    onChange={(e) => handleVariableChange(e, id)}
+                    name='boolean-val'
+                    className='nodrag h-9 w-full rounded-br-md rounded-tr-md  p-2.5 px-1 '
+                    value={data.variables[id].value}
+                  >
+                    <option value='true'>True</option>
+                    <option value='false'>False</option>
+                  </select>
+                ) : (
+                  <input
+                    type={getInputType(data.variables[id].type)}
+                    className='nodrag nowheel block h-9 w-full rounded-bl-md rounded-tl-md  p-2.5'
+                    name='variable-value'
+                    data-type={getInputType(data.variables[id].type)}
+                    onChange={(e) => handleVariableChange(e, id)}
+                    value={data.variables[id].value}
+                  />
+                )}
+                <label>{id}</label>
+                <div className='rounded-br-md rounded-tr-md border-l border-l-neutral-500 px-4 py-2'>
+                  {data.variables[id].type}
+                </div>
+              </div>
+              <div onClick={(e) => handleDeleteVariable(e, id)} className='p-2 text-neutral-500'>
+                <TrashIcon className='h-4 w-4' />
               </div>
             </div>
-            <div onClick={(e) => handleDeleteVariable(e, id)} className='p-2 text-neutral-500'>
-              <TrashIcon className='w-4 h-4' />
-            </div>
-          </div>
-        ))}
+          ))}
       </>
     );
   };
@@ -124,15 +92,15 @@ const RequestNode = ({ data }) => {
             defaultValue={data.url ? data.url : ''}
           />
         </div>
-        <RequestBody nodeData={data} />
+        <RequestBody nodeId={id} nodeData={data} />
         <div className='border-t border-neutral-300 bg-slate-100'>
           <div className='flex items-center justify-between px-2 py-4 font-medium'>
             <h3>Variables</h3>
             <button className='p-2' onClick={() => setVariableDialogOpen(true)}>
-              <PlusIcon className='w-4 h-4' />
+              <PlusIcon className='h-4 w-4' />
             </button>
           </div>
-          <div className='p-2 pt-4 border-t border-neutral-300 bg-slate-50'>{renderVariables()}</div>
+          <div className='border-t border-neutral-300 bg-slate-50 p-2 pt-4'>{renderVariables()}</div>
         </div>
       </div>
       <AddVariableModal
diff --git a/src/stores/CanvasStore.js b/src/stores/CanvasStore.js
