Now parses the inputs and constructs a JSON object to send to the backend

10 files changed, 100 insertions, 28 deletions

diff --git a/client/js/app/src/app/pages/querybuilder/Components/Buttons/AddPropertyButton.jsx b/client/js/app/src/app/pages/querybuilder/Components/Buttons/AddPropertyButton.jsx
index 754fd29ff5e..47b5a67875b 100644
--- a/client/js/app/src/app/pages/querybuilder/Components/Buttons/AddPropertyButton.jsx
+++ b/client/js/app/src/app/pages/querybuilder/Components/Buttons/AddPropertyButton.jsx
@@ -22,10 +22,10 @@ export default function AddPropertyButton({ id }) {
       children = children[index].children;
     }
     let type = childMap[parentType];
-    type = type[Object.keys(type)[0]].name;
     children.push({
       id: id + '.' + childId,
-      type: type,
+      type: type[Object.keys(type)[0]].name,
+      typeof: type[Object.keys(type)[0]].type,
       input: '',
       hasChildren: false,
       children: [],
diff --git a/client/js/app/src/app/pages/querybuilder/Components/Buttons/AddQueryInputButton.jsx b/client/js/app/src/app/pages/querybuilder/Components/Buttons/AddQueryInputButton.jsx
index 5bf3cd61807..bdbf8a3f42f 100644
--- a/client/js/app/src/app/pages/querybuilder/Components/Buttons/AddQueryInputButton.jsx
+++ b/client/js/app/src/app/pages/querybuilder/Components/Buttons/AddQueryInputButton.jsx
@@ -17,6 +17,7 @@ export default function AddQueryInput() {
       {
         id: `${id + 1}`,
         type: 'yql',
+        typeof: 'String',
         input: '',
         hasChildren: false,
         children: [],
@@ -32,6 +33,7 @@ export default function AddQueryInput() {
       tooltip="Add row"
       height="0"
       width="0"
+      image={null}
     >
       +
     </OverlayImageButton>
diff --git a/client/js/app/src/app/pages/querybuilder/Components/Contexts/QueryInputContext.jsx b/client/js/app/src/app/pages/querybuilder/Components/Contexts/QueryInputContext.jsx
index 483751492ce..064bf51795b 100644
--- a/client/js/app/src/app/pages/querybuilder/Components/Contexts/QueryInputContext.jsx
+++ b/client/js/app/src/app/pages/querybuilder/Components/Contexts/QueryInputContext.jsx
@@ -125,22 +125,33 @@ export const QueryInputProvider = (prop) => {
     },
   };
 
-  const firstChoice =
-    levelZeroParameters[Object.keys(levelZeroParameters)[0]].name;
+  const firstChoice = levelZeroParameters[Object.keys(levelZeroParameters)[0]];
 
   const [inputs, setInputs] = useState([
     {
       id: '1',
-      type: firstChoice,
+      type: firstChoice.name,
+      typeof: firstChoice.type,
       input: '',
       hasChildren: false,
       children: [],
     },
   ]);
 
+  const [selectedItems, setSelectedItems] = useState([]);
+
   return (
     <QueryInputContext.Provider
-      value={{ inputs, setInputs, id, setId, levelZeroParameters, childMap }}
+      value={{
+        inputs,
+        setInputs,
+        id,
+        setId,
+        levelZeroParameters,
+        childMap,
+        selectedItems,
+        setSelectedItems,
+      }}
     >
       {prop.children}
     </QueryInputContext.Provider>
diff --git a/client/js/app/src/app/pages/querybuilder/Components/Text/Info.jsx b/client/js/app/src/app/pages/querybuilder/Components/Text/Info.jsx
index ecfde212968..d921c53a602 100644
--- a/client/js/app/src/app/pages/querybuilder/Components/Text/Info.jsx
+++ b/client/js/app/src/app/pages/querybuilder/Components/Text/Info.jsx
@@ -8,7 +8,6 @@ export default function Info({
   height = 15,
   width = 15,
 }) {
-  //TODO: Make popver reflect tooltip for selected query type
   const popover = (
     <Popover id={`inf${id}`}>
       <Popover.Header as="h3">Popover right</Popover.Header>
diff --git a/client/js/app/src/app/pages/querybuilder/Components/Text/QueryDropDownForm.jsx b/client/js/app/src/app/pages/querybuilder/Components/Text/QueryDropDownForm.jsx
index 2f79ddd6073..d9a3417752c 100644
--- a/client/js/app/src/app/pages/querybuilder/Components/Text/QueryDropDownForm.jsx
+++ b/client/js/app/src/app/pages/querybuilder/Components/Text/QueryDropDownForm.jsx
@@ -1,10 +1,17 @@
 import { QueryInputContext } from '../Contexts/QueryInputContext';
-import React, { useContext } from 'react';
+import React, { useCallback, useContext, useState } from 'react';
 import SimpleDropDownForm from './SimpleDropDownForm';
 
 export default function QueryDropdownForm({ choices, id, child = false }) {
-  const { inputs, setInputs, levelZeroParameters, childMap } =
-    useContext(QueryInputContext);
+  const {
+    inputs,
+    setInputs,
+    levelZeroParameters,
+    childMap,
+    selectedItems,
+    setSelectedItems,
+  } = useContext(QueryInputContext);
+  const [choice, setChoice] = useState();
 
   /**
    * Update the state of inputs to reflect the method chosen from the dropdown.
@@ -33,20 +40,28 @@ export default function QueryDropdownForm({ choices, id, child = false }) {
       children[index].type = newType;
       children[index].hasChildren = childChoices[newType].hasChildren;
       children[index].children = [];
+      children[index].typeof = childChoices[newType].type;
+      setSelectedItems([...selectedItems, newType]);
     } else {
       newInputs[index].type = newType;
       let hasChildren = levelZeroParameters[newType].hasChildren;
       newInputs[index].hasChildren = hasChildren;
       newInputs[index].children = [];
+      newInputs[index].typeof = levelZeroParameters[newType].type;
+      setSelectedItems([...selectedItems, newType]);
     }
     setInputs(newInputs);
+    setChoice(newType);
   };
 
+  //TODO: do not display options that have been chosen
+
   return (
     <SimpleDropDownForm
       id={id}
       onChange={updateType}
       choices={choices}
+      value={choice}
     ></SimpleDropDownForm>
   );
 }
diff --git a/client/js/app/src/app/pages/querybuilder/Components/Text/QueryInput.jsx b/client/js/app/src/app/pages/querybuilder/Components/Text/QueryInput.jsx
index e24774cd1f7..b285d27926e 100644
--- a/client/js/app/src/app/pages/querybuilder/Components/Text/QueryInput.jsx
+++ b/client/js/app/src/app/pages/querybuilder/Components/Text/QueryInput.jsx
@@ -18,7 +18,7 @@ export default function QueryInput() {
 
   const updateInput = (e) => {
     e.preventDefault();
-    const fid = parseInt(e.target.id.replace('v', ''));
+    const fid = e.target.id.replace('v', '');
     const newInputs = inputs.slice();
     const index = newInputs.findIndex((element) => element.id === fid);
     newInputs[index].input = e.target.value;
diff --git a/client/js/app/src/app/pages/querybuilder/Components/Text/QueryInputChild.jsx b/client/js/app/src/app/pages/querybuilder/Components/Text/QueryInputChild.jsx
index 37fb020dc45..0440d6ef1ba 100644
--- a/client/js/app/src/app/pages/querybuilder/Components/Text/QueryInputChild.jsx
+++ b/client/js/app/src/app/pages/querybuilder/Components/Text/QueryInputChild.jsx
@@ -28,7 +28,6 @@ export default function QueryInputChild({ id }) {
     children = traversedChildren.children;
     index = children.findIndex((element) => element.id === iterId);
     children[index].input = e.target.value;
-    console.log(children[index]);
     setInputs(newInputs);
   };
 
diff --git a/client/js/app/src/app/pages/querybuilder/Components/Text/SendQuery.jsx b/client/js/app/src/app/pages/querybuilder/Components/Text/SendQuery.jsx
index 14733d287c1..17a0ca2e085 100644
--- a/client/js/app/src/app/pages/querybuilder/Components/Text/SendQuery.jsx
+++ b/client/js/app/src/app/pages/querybuilder/Components/Text/SendQuery.jsx
@@ -1,9 +1,11 @@
-import React, { useState } from 'react';
+import React, { useContext, useState } from 'react';
 import SimpleDropDownForm from './SimpleDropDownForm';
 import SimpleButton from '../Buttons/SimpleButton';
 import SimpleForm from './SimpleForm';
+import { QueryInputContext } from '../Contexts/QueryInputContext';
 
 export default function SendQuery() {
+  const { inputs } = useContext(QueryInputContext);
   const messageMethods = { post: { name: 'POST' }, get: { name: 'GET' } };
   const [method, setMethod] = useState(messageMethods.post.name);
 
@@ -15,7 +17,49 @@ export default function SendQuery() {
 
   //TODO: Handle sending the query
   function handleClick() {
-    console.log('Click happened');
+    const json = buildJSON(inputs, {});
+    send(json);
+    console.log(json);
+  }
+
+  function send(json) {
+    console.log('Sending JSON');
+  }
+
+  function buildJSON(inputs, json) {
+    let queryJson = json;
+    for (let i = 0; i < inputs.length; i++) {
+      let current = inputs[i];
+      let key = current.type;
+      if (current.hasChildren) {
+        let child = {};
+        child = buildJSON(current.children, child);
+        queryJson[key] = child;
+      } else {
+        queryJson[key] = parseInput(current.input, current.typeof);
+      }
+    }
+    return queryJson;
+  }
+
+  function parseInput(input, type) {
+    switch (type) {
+      case 'Integer':
+      case 'Long':
+        return parseInt(input);
+        break;
+
+      case 'Float':
+        return parseFloat(input);
+        break;
+
+      case 'Boolean':
+        return input.toLowerCase() === 'true' ? true : false;
+        break;
+
+      default:
+        return input;
+    }
   }
 
   return (
diff --git a/client/js/app/src/app/pages/querybuilder/Components/Text/SimpleDropDownForm.jsx b/client/js/app/src/app/pages/querybuilder/Components/Text/SimpleDropDownForm.jsx
index 3bb781ddb7a..01288cea44f 100644
--- a/client/js/app/src/app/pages/querybuilder/Components/Text/SimpleDropDownForm.jsx
+++ b/client/js/app/src/app/pages/querybuilder/Components/Text/SimpleDropDownForm.jsx
@@ -1,18 +1,24 @@
-import { useSetState } from '@mantine/hooks';
-import React, { useEffect } from 'react';
-import { useState } from 'react';
+import React, { useContext, useEffect } from 'react';
+import { QueryInputContext } from '../Contexts/QueryInputContext';
 
 export default function SimpleDropDownForm({
   choices,
   id,
   className = 'input',
   onChange,
+  value,
 }) {
-  SimpleDropDownForm.defaultProps = {
-    onChange: handleChange,
-  };
+  const { selectedItems } = useContext(QueryInputContext);
 
-  const { choice, setChoice } = useState(choices[0]);
+  //FIXME: using the filtered list to render options results in dropdown not changing the displayed selection to what was actually selected.
+  let filtered = Object.keys(choices).filter(
+    (choice) => !selectedItems.includes(choice)
+  );
+  useEffect(() => {
+    filtered = Object.keys(choices).filter(
+      (choice) => !selectedItems.includes(choice)
+    );
+  }, [selectedItems]);
 
   const options = Object.keys(choices).map((choice) => {
     return (
@@ -22,13 +28,9 @@ export default function SimpleDropDownForm({
     );
   });
 
-  function handleChange(e) {
-    setChoice((choice) => (choice = e.target.value));
-  }
-
   return (
     <form id={id}>
-      <select className={className} id={id} value={choice} onChange={onChange}>
+      <select className={className} id={id} value={value} onChange={onChange}>
         {options}
       </select>
     </form>
diff --git a/client/js/app/src/app/pages/querybuilder/query-builder.jsx b/client/js/app/src/app/pages/querybuilder/query-builder.jsx
index 44a37f424fb..3e3e27b27b4 100644
--- a/client/js/app/src/app/pages/querybuilder/query-builder.jsx
+++ b/client/js/app/src/app/pages/querybuilder/query-builder.jsx
@@ -25,9 +25,9 @@ export function QueryBuilder() {
           <TextBox className={'intro-long'}>
             Select the method for sending a request and construct a query.
           </TextBox>
-          <SendQuery />
-          <br />
           <QueryInputProvider>
+            <SendQuery />
+            <br />
             <div id="request">
               <QueryInput />
             </div>