From f2925022e8ea7bec8ddfa4616e9ec3f5bfcc1e35 Mon Sep 17 00:00:00 2001
From: Anoop M D <anoop.md1421@gmail.com>
Date: Sun, 20 Mar 2022 14:14:41 +0530
Subject: [PATCH] feat: Using CodeEditor for displaying response (more
 performant, no flicker :D)

---
 .../ResponsePane/QueryResult/StyledWrapper.js |  5 --
 .../ResponsePane/QueryResult/index.js         | 52 ++-----------------
 renderer/components/ResponsePane/index.js     |  2 +-
 3 files changed, 5 insertions(+), 54 deletions(-)

diff --git a/renderer/components/ResponsePane/QueryResult/StyledWrapper.js b/renderer/components/ResponsePane/QueryResult/StyledWrapper.js
index d8c31f545..9ccca8b6f 100644
--- a/renderer/components/ResponsePane/QueryResult/StyledWrapper.js
+++ b/renderer/components/ResponsePane/QueryResult/StyledWrapper.js
@@ -2,14 +2,9 @@ import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
   div.CodeMirror {
-    border: solid 1px var(--color-codemirror-border);
     /* todo: find a better way */
     height: calc(100vh - 255px);
   }
-
-  textarea.cm-editor {
-    position: relative;
-  }
 `;
 
 export default StyledWrapper;
diff --git a/renderer/components/ResponsePane/QueryResult/index.js b/renderer/components/ResponsePane/QueryResult/index.js
index 3ad9fbed8..d4cc0770f 100644
--- a/renderer/components/ResponsePane/QueryResult/index.js
+++ b/renderer/components/ResponsePane/QueryResult/index.js
@@ -1,56 +1,12 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React from 'react';
+import CodeEditor from 'components/CodeEditor';
 import StyledWrapper from './StyledWrapper';
 
-let CodeMirror;
-const SERVER_RENDERED = typeof navigator === 'undefined' || global['PREVENT_CODEMIRROR_RENDER'] === true;
-
-if (!SERVER_RENDERED) {
-  CodeMirror = require('codemirror');
-}
-
-const QueryResult = ({data, width}) => {
-  const [cmEditor, setCmEditor] = useState(null);
-  const editor = useRef();
-
-  useEffect(() => {
-    if (editor.current && !cmEditor) {
-      const _cmEditor = CodeMirror.fromTextArea(editor.current, {
-        value: '',
-        lineNumbers: true,
-        matchBrackets: true,
-        autoCloseBrackets: true,
-        mode: "application/ld+json",
-        foldGutter: true,
-        gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
-        readOnly: true,
-        lineWrapping: true
-      });
-
-      setCmEditor(_cmEditor);
-    }
-
-    if(editor.current && cmEditor && data) {
-      cmEditor.setValue(JSON.stringify(data, null, 2));
-    }
-
-    return () => {
-      if(cmEditor) {
-        cmEditor.toTextArea();
-        setCmEditor(null);
-      }
-    }
-  }, [editor.current, cmEditor, data]);
-
-
+const QueryResult = ({value, width}) => {
   return (
     <StyledWrapper className="mt-4 px-3 w-full" style={{maxWidth: width}}>
       <div className="h-full">
-        <textarea
-          id="query-result"
-          ref={editor}
-          className="cm-editor"
-        >
-        </textarea>
+        <CodeEditor value={value || ''} />
       </div>
     </StyledWrapper>
   );
diff --git a/renderer/components/ResponsePane/index.js b/renderer/components/ResponsePane/index.js
index 6c2cb424b..f0449faa6 100644
--- a/renderer/components/ResponsePane/index.js
+++ b/renderer/components/ResponsePane/index.js
@@ -26,7 +26,7 @@ const ResponsePane = ({rightPaneWidth, response, isLoading}) => {
         return (
           <QueryResult
             width={rightPaneWidth}
-            data={response.data}
+            value={response.data ? JSON.stringify(response.data, null, 2) : ''}
           />
         );
       }