Added basic pages for template editing BOD-85

2020-05-11 21:32:11 -07:00
parent 630e7df3fd
commit b518f84f5f
20 changed files with 455 additions and 197 deletions
--- a/client/src/components/shop-template-editor/shop-template-editor.component.jsx
+++ b/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());
+// }}
+// />