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

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

@@ -18,11 +18,9 @@ export default function ShopTemplateSaveButton({
     logImEXEvent("shop_template_update");
 
     emailEditorRef.current.exportHtml(async (data) => {
-      console.log("RAW", data.html);
       inlineCss(data.html, {
         url: `${window.location.protocol}://${window.location.host}/`,
       }).then(async function (inlineHtml) {
-        console.log("Inline :>> ", inlineHtml);
         const result = await updateTemplate({
           variables: {
             templateId: templateId,

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>
   );
 }

client/src/components/shop-template-test-render/shop-template-test-render.component.jsx

@@ -0,0 +1,75 @@
+import { Button } from "antd";
+import axios from "axios";
+import gql from "graphql-tag";
+import inlineCss from "inline-css";
+import { JsonEditor as Editor } from "jsoneditor-react";
+import "jsoneditor-react/es/editor.min.css";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { client } from "../../App/App.container";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import { displayTemplateInWindowNoprint } from "../../utils/RenderTemplate";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+
+export function ShopTemplateTestRender({ bodyshop, query, emailEditorRef }) {
+  const [variables, setVariables] = useState({ id: "uuid" });
+  const [loading, setLoading] = useState(false);
+  const { t } = useTranslation();
+
+  const handleTestRender = async () => {
+    try {
+      setLoading(true);
+
+      emailEditorRef.current.exportHtml(async (data) => {
+        inlineCss(data.html, {
+          url: `${window.location.protocol}://${window.location.host}/`,
+        }).then(async function (inlineHtml) {
+          try {
+            const { data: contextData } = await client.query({
+              query: gql(query),
+              variables: variables,
+              fetchPolicy: "network-only",
+            });
+
+            const { data } = await axios.post("/render", {
+              view: inlineHtml,
+              context: { ...contextData, bodyshop: bodyshop },
+            });
+            displayTemplateInWindowNoprint(data);
+
+            setLoading(false);
+          } catch (error) {
+            setLoading(false);
+            alert(error);
+          }
+        });
+      });
+    } catch (error) {
+      setLoading(false);
+      alert(error);
+    }
+  };
+
+  return (
+    <div>
+      <Button loading={loading} onClick={handleTestRender}>
+        {t("bodyshop.actions.testrender")}
+      </Button>
+      <div style={{ width: "20rem" }}>
+        <Editor value={variables} onChange={(e) => setVariables(e)} />
+      </div>
+    </div>
+  );
+}
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ShopTemplateTestRender);

client/src/components/shop-templates-list/shop-templates-list.container.jsx

@@ -16,7 +16,7 @@ export default function ShopTemplatesListContainer() {
   const { t } = useTranslation();
   const search = queryString.parse(useLocation().search);
   const history = useHistory();
-  if (error) return <AlertComponent message={error.message} type='error' />;
+  if (error) return <AlertComponent message={error.message} type="error" />;
 
   const handleEdit = (record) => {
     if (record) {
@@ -39,7 +39,7 @@ export default function ShopTemplatesListContainer() {
       />
       <List
         loading={loading}
-        itemLayout='horizontal'
+        itemLayout="horizontal"
         dataSource={data ? data.templates : []}
         renderItem={(item) => (
           <List.Item
@@ -51,12 +51,13 @@ export default function ShopTemplatesListContainer() {
                 templateId={item.id}
                 refetch={refetch}
               />,
-            ]}>
+            ]}
+          >
             <Skeleton title={false} loading={item.loading} active>
-              <List.Item.Meta
-                title={TemplateList[item.name].title}
-                description={TemplateList[item.name].description}
-              />
+              <div style={{ display: "flex", flexDirection: "column" }}>
+                <div>{TemplateList[item.name].title}</div>
+                <div>{TemplateList[item.name].description}</div>
+              </div>
             </Skeleton>
           </List.Item>
         )}