Added pasteJSONButton but functionality is not complete

4 files changed, 82 insertions, 13 deletions

diff --git a/client/js/app/src/app/pages/querybuilder/Components/Buttons/PasteJSONButton.jsx b/client/js/app/src/app/pages/querybuilder/Components/Buttons/PasteJSONButton.jsx
new file mode 100644
index 00000000000..73dce637500
--- /dev/null
+++ b/client/js/app/src/app/pages/querybuilder/Components/Buttons/PasteJSONButton.jsx
@@ -0,0 +1,75 @@
+import React, { useContext, useState } from 'react';
+import ImageButton from './ImageButton';
+import pasteImage from '../../assets/img/paste.svg';
+import { QueryInputContext } from '../Contexts/QueryInputContext';
+
+export default function PasteJSONButton() {
+  const { inputs, setInputs, id, setId, levelZeroParameters, childMap } =
+    useContext(QueryInputContext);
+  const [paste, setPaste] = useState(false);
+
+  const handleClick = (e) => {
+    alert('Button is non-functional');
+    // setPaste(true);
+    // window.addEventListener('paste', handlePaste)
+  };
+
+  const handlePaste = (e) => {
+    setPaste(false);
+    const pastedData = e.clipboardData.getData('text');
+    alert('Converting JSON: \n\n ' + pastedData);
+    window.removeEventListener('paste', handlePaste);
+    convertPastedJSON(pastedData);
+  };
+
+  const convertPastedJSON = (pastedData) => {
+    try {
+      var json = JSON.parse(pastedData);
+      setId(1);
+      const newInputs = buildFromJSON(json, id);
+      setInputs(newInputs);
+    } catch (error) {
+      alert('Could not parse JSON, with error-message: \n\n' + error.message);
+    }
+  };
+
+  const buildFromJSON = (json, id) => {
+    let newInputs = [];
+    let keys = Object.keys(json);
+    for (let i = 0; i < keys.length; i++) {
+      let childId = 1;
+      let newInput = { id: id, type: keys[i] };
+      if (json[keys[i]] === Object) {
+        newInput['typeof'] = 'Parent';
+        newInput['input'] = '';
+        newInput['hasChildren'] = true;
+        let tempId = id + '.' + childId;
+        childId += 1;
+        newInput['children'] = buildFromJSON(json[keys[i]], tempId);
+      } else {
+        newInput['typeof'] = levelZeroParameters[keys[i]].type;
+        newInput['input'] = json[keys[i]];
+        newInput['hasChildren'] = false;
+        newInput['children'] = [];
+      }
+      setId(id + 1);
+      console.log(newInput);
+      newInputs.push(newInput);
+    }
+    return newInputs;
+  };
+
+  return (
+    <>
+      <ImageButton
+        id="pasteJSON"
+        className="pasteJSON"
+        image={pasteImage}
+        style={{ marginTop: '-2px', marginRight: '3px' }}
+        onClick={handleClick}
+      >
+        {paste ? 'Press CMD + V' : 'Paste JSON'}
+      </ImageButton>
+    </>
+  );
+}
diff --git a/client/js/app/src/app/pages/querybuilder/Components/Buttons/ShowQueryButton.jsx b/client/js/app/src/app/pages/querybuilder/Components/Buttons/ShowQueryButton.jsx
index db8c3f0bd27..789fc387b38 100644
--- a/client/js/app/src/app/pages/querybuilder/Components/Buttons/ShowQueryButton.jsx
+++ b/client/js/app/src/app/pages/querybuilder/Components/Buttons/ShowQueryButton.jsx
@@ -4,7 +4,6 @@ import SimpleButton from './SimpleButton';
 
 export default function ShowQueryButton() {
   const { query, showQuery, setShowQuery } = useContext(QueryContext);
-  //console.log(showQuery);
 
   const handleClick = () => {
     setShowQuery(!showQuery);
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 b285d27926e..c5410ae7c4a 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
@@ -28,8 +28,7 @@ export default function QueryInput() {
   const setPlaceholder = (id) => {
     try {
       const index = inputs.findIndex((element) => element.id === id);
-      const key = inputs[index].type;
-      return levelZeroParameters[key].type;
+      return inputs[index].typeof;
     } catch (error) {
       console.log(error);
     }
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 9032fb81faa..472ec1efe49 100644
--- a/client/js/app/src/app/pages/querybuilder/query-builder.jsx
+++ b/client/js/app/src/app/pages/querybuilder/query-builder.jsx
@@ -13,13 +13,13 @@ import {
 } from './Components/Contexts/ResponseContext';
 import ResponseBox from './Components/Text/ResponseBox';
 
-import pasteImage from './assets/img/paste.svg';
 import copyImage from './assets/img/copy.svg';
 
 import '../../styles/agency.css';
 import '../../styles/vespa.css';
 import ShowQueryButton from './Components/Buttons/ShowQueryButton';
 import { QueryProvider } from './Components/Contexts/QueryContext';
+import PasteJSONButton from './Components/Buttons/PasteJSONButton';
 
 //import 'bootstrap/dist/css/bootstrap.min.css'; //TODO: Find out how to get this css
 
@@ -42,16 +42,9 @@ export function QueryBuilder() {
                 </div>
                 <br />
                 <AddQueryInput />
+                <br />
+                <PasteJSONButton />
               </QueryInputProvider>
-              <br />
-              <ImageButton
-                id="pasteJSON"
-                className="pasteJSON"
-                image={pasteImage}
-                style={{ marginTop: '-2px', marginRight: '3px' }}
-              >
-                Paste JSON
-              </ImageButton>
               <ShowQueryButton />
             </QueryProvider>
             <TextBox className="response">Response</TextBox>
@@ -63,6 +56,9 @@ export function QueryBuilder() {
             height="30"
             width="30"
             tooltip="Copy"
+            onClick={() => {
+              alert('Button is non-functional');
+            }}
           >
             Copy
           </OverlayImageButton>