Added template previewing with non-functional GQL editor BOD-126

client/src/components/shop-template-editor/shop-template-editor.component.jsx

@@ -1,7 +1,28 @@
-import { Input } from "antd";
+import "codemirror/addon/hint/show-hint";
+import "codemirror/addon/lint/lint";
+import "codemirror-graphql/hint";
+import "codemirror-graphql/lint";
+import "codemirror-graphql/mode";
+
+import "codemirror/lib/codemirror.css";
+import "codemirror/theme/material.css";
+import "codemirror/addon/hint/show-hint";
+
 import React, { useEffect, useRef } from "react";
+import { Controlled as CmEditor } from "react-codemirror2";
 import EmailEditor from "react-email-editor";
+import GqlSchema from "../../graphql/schema";
 import ShopTemplateEditorSaveButton from "../shop-template-editor-save-button/shop-template-editor-save-button.component";
+import ShopTemplateTestRender from "../shop-template-test-render/shop-template-test-render.component";
+// CodeMirror.fromTextArea(document.getElementById("gqlcm"), {
+//   mode: "graphql",
+//   lint: {
+//     // schema: myGraphQLSchema,
+//   },
+//   hintOptions: {
+//     //  schema: myGraphQLSchema,
+//   },
+// });
 
 export default function ShopTemplateEditorComponent({
   templateId,
@@ -14,7 +35,12 @@ export default function ShopTemplateEditorComponent({
   const emailEditorRef = useRef(null);
 
   useEffect(() => {
-    if (json && Object.keys(json).length > 0 && emailEditorRef.current) {
+    if (
+      json &&
+      Object.keys(json).length > 0 &&
+      emailEditorRef &&
+      emailEditorRef.current
+    ) {
       emailEditorRef.current.loadDesign(json);
     }
   }, [json, emailEditorRef]);
@@ -25,16 +51,6 @@ export default function ShopTemplateEditorComponent({
     });
   }, [gql, seteditorContent]);
 
-  const exportJson = (props) => {
-    emailEditorRef.current.saveDesign((js) => {
-      seteditorContent({ ...editorContent, JSON: js });
-    });
-  };
-
-  const exportHtml = (props) => {
-    emailEditorRef.current.exportHtml((js) => {});
-  };
-
   return (
     <div>
       <ShopTemplateEditorSaveButton
@@ -42,8 +58,7 @@ export default function ShopTemplateEditorComponent({
         gql={editorContent.gql}
         emailEditorRef={emailEditorRef}
       />
-      <button onClick={exportJson}>json</button>
-      <button onClick={exportHtml}>html</button>
+
       <EmailEditor
         ref={emailEditorRef}
         options={{
@@ -61,14 +76,29 @@ export default function ShopTemplateEditorComponent({
           ],
         }}
       />
-      QUERY
-      <Input.TextArea
-        value={editorContent.gql}
-        rows={8}
-        onChange={(e) =>
-          seteditorContent({ ...editorContent, gql: e.target.value })
-        }
-      />
+      <div style={{ display: "flex" }}>
+        <CmEditor
+          value={editorContent.gql}
+          options={{
+            mode: "graphql",
+            lint: {
+              schema: GqlSchema,
+            },
+            hintOptions: {
+              schema: GqlSchema,
+            },
+            lineNumbers: true,
+          }}
+          onBeforeChange={(editor, data, value) => {
+            seteditorContent({ ...editorContent, gql: value });
+          }}
+        />
+        )
+        <ShopTemplateTestRender
+          query={editorContent.gql}
+          emailEditorRef={emailEditorRef}
+        />
+      </div>
     </div>
   );
 }