Rearranged shop template page to better handle previews & template editor BOD-126

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

@@ -8,7 +8,7 @@ import "codemirror/lib/codemirror.css";
 import "codemirror/theme/material.css";
 import "codemirror/addon/hint/show-hint";
 
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { Controlled as CmEditor } from "react-codemirror2";
 import EmailEditor from "react-email-editor";
 import GqlSchema from "../../graphql/schema";
@@ -32,18 +32,15 @@ export default function ShopTemplateEditorComponent({
   editorState,
 }) {
   const [editorContent, seteditorContent] = editorState;
+  const [editorLoaded, setEditorLoaded] = useState(false);
   const emailEditorRef = useRef(null);
 
   useEffect(() => {
-    if (
-      json &&
-      Object.keys(json).length > 0 &&
-      emailEditorRef &&
-      emailEditorRef.current
-    ) {
+    if (json && Object.keys(json).length > 0 && editorLoaded) {
+      console.log(emailEditorRef.current, !!emailEditorRef.current.loadDesign);
       emailEditorRef.current.loadDesign(json);
     }
-  }, [json, emailEditorRef]);
+  }, [json, emailEditorRef, editorLoaded]);
 
   useEffect(() => {
     seteditorContent((prevstate) => {
@@ -58,9 +55,11 @@ export default function ShopTemplateEditorComponent({
         gql={editorContent.gql}
         emailEditorRef={emailEditorRef}
       />
-
       <EmailEditor
+        style={{ width: "100%" }}
         ref={emailEditorRef}
+        minHeight="800px"
+        onLoad={() => setEditorLoaded(true)}
         options={{
           // customCSS: [
           //   window.location.protocol +
@@ -78,6 +77,7 @@ export default function ShopTemplateEditorComponent({
       />
       <div style={{ display: "flex" }}>
         <CmEditor
+          style={{ width: "30rem" }}
           value={editorContent.gql}
           options={{
             mode: "graphql",
@@ -93,7 +93,6 @@ export default function ShopTemplateEditorComponent({
             seteditorContent({ ...editorContent, gql: value });
           }}
         />
-        )
         <ShopTemplateTestRender
           query={editorContent.gql}
           emailEditorRef={emailEditorRef}

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

@@ -22,14 +22,20 @@ export default function ShopTemplateEditorContainer() {
   if (error) return <AlertComponent message={error.message} type="error" />;
 
   return (
-    <LoadingSpinner loading={loading}>
+    <div>
+      {loading ? (
+        <LoadingSpinner />
+      ) : (
+        <ShopTemplateEditorComponent
+          templateId={search.customTemplateId}
+          json={
+            data && data.templates_by_pk && data.templates_by_pk.jsontemplate
+          }
+          gql={data && data.templates_by_pk ? data.templates_by_pk.query : ""}
+          editorState={editorState}
+        />
+      )}
       {data && data.templates_by_pk ? data.templates_by_pk.name : ""}
-      <ShopTemplateEditorComponent
-        templateId={search.customTemplateId}
-        json={data && data.templates_by_pk && data.templates_by_pk.jsontemplate}
-        gql={data && data.templates_by_pk ? data.templates_by_pk.query : ""}
-        editorState={editorState}
-      />
-    </LoadingSpinner>
+    </div>
   );
 }