Added basic pages for template editing BOD-85

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

@@ -0,0 +1,91 @@
+import { Editor } from "@tinymce/tinymce-react";
+import React, { useEffect } from "react";
+import ShopTemplateEditorSaveButton from "../shop-template-editor-save-button/shop-template-editor-save-button.component";
+
+export default function ShopTemplateEditorComponent({
+  templateId,
+  html,
+  gql,
+  editorState,
+}) {
+  const [editorContent, seteditorContent] = editorState;
+
+  useEffect(() => {
+    console.log("HTML UE");
+    seteditorContent((prevstate) => {
+      return { ...prevstate, html: html };
+    });
+  }, [html, seteditorContent]);
+
+  useEffect(() => {
+    console.log("gql UE");
+    seteditorContent((prevstate) => {
+      return { ...prevstate, gql: gql };
+    });
+  }, [gql, seteditorContent]);
+
+  return (
+    <div>
+      Editor Here. template Editor
+      <ShopTemplateEditorSaveButton
+        templateId={templateId}
+        html={editorContent.html}
+        gql={editorContent.gql}
+      />
+      TEMPLATE
+      <Editor
+        value={editorContent.html}
+        apiKey='f3s2mjsd77ya5qvqkee9vgh612cm6h41e85efqakn2d0kknk' //TODO Pull this into app var
+        init={{
+          height: 500,
+          //menubar: false,
+          encoding: "raw",
+          extended_valid_elements: "span",
+          //entity_encoding: "raw",
+          plugins: [
+            "advlist autolink lists link image charmap print preview anchor",
+            "searchreplace visualblocks code fullscreen",
+            "insertdatetime media table paste code help wordcount",
+          ],
+          toolbar:
+            "undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help",
+        }}
+        onEditorChange={(text) =>
+          seteditorContent({ ...editorContent, html: text })
+        }
+      />
+      QUERY
+      <Editor
+        value={editorContent.gql}
+        apiKey='f3s2mjsd77ya5qvqkee9vgh612cm6h41e85efqakn2d0kknk' //TODO Pull this into app var
+        init={{
+          height: 500,
+          //menubar: false,
+          encoding: "raw",
+          extended_valid_elements: "span",
+          //entity_encoding: "raw",
+          plugins: [],
+          toolbar: "undo redo",
+        }}
+        onEditorChange={(text) =>
+          seteditorContent({ ...editorContent, gql: text })
+        }
+      />
+    </div>
+  );
+}
+
+// <GraphiQL
+// fetcher={async (graphQLParams) => {
+//   const data = await fetch(process.env.REACT_APP_GRAPHQL_ENDPOINT, {
+//     method: "POST",
+//     headers: {
+//       Accept: "application/json",
+//       "Content-Type": "application/json",
+//     },
+//     body: JSON.stringify(graphQLParams),
+//     credentials: "same-origin",
+//   });
+//   return data.json().catch(() => data.text());
+// }}
+// />

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

@@ -0,0 +1,34 @@
+import { useQuery } from "@apollo/react-hooks";
+import queryString from "query-string";
+import React, { useState } from "react";
+import { useLocation } from "react-router-dom";
+import { QUERY_TEMPLATE_BY_PK } from "../../graphql/templates.queries";
+import AlertComponent from "../alert/alert.component";
+import LoadingSpinner from "../loading-spinner/loading-spinner.component";
+import ShopTemplateEditorComponent from "./shop-template-editor.component";
+
+export default function ShopTemplateEditorContainer() {
+  const search = queryString.parse(useLocation().search);
+  const editorState = useState({ html: "", gql: "" });
+
+  const { loading, error, data } = useQuery(QUERY_TEMPLATE_BY_PK, {
+    variables: {
+      templateId: search.customTemplateId,
+    },
+    skip: !!!search.customTemplateId,
+  });
+
+  if (!!!search.customTemplateId) return <span>No selection.</span>;
+  if (error) return <AlertComponent message={error.message} type='error' />;
+
+  return (
+    <LoadingSpinner loading={loading}>
+      <ShopTemplateEditorComponent
+        templateId={search.customTemplateId}
+        html={data ? data.templates_by_pk.html : ""}
+        gql={data ? data.templates_by_pk.query : ""}
+        editorState={editorState}
+      />
+    </LoadingSpinner>
+  );
+}