Added basic "publish" block logic.

layouts/scripts/dist/index.min.js

@@ -11314,7 +11314,7 @@ function Responsive(props = {}) {
 function setupResponsiveness(rootAttributes) {
   // INIT
   const wrapper = document.createElement('div');
-  document.querySelector('.page_toolbar').prepend(wrapper);
+  document.querySelector('.page_toolbar__middle').prepend(wrapper);
   const root = createRoot(wrapper);
   const html = /*#__PURE__*/React.createElement(Responsive, {
     rootAttributes: rootAttributes
@@ -11322,10 +11322,67 @@ function setupResponsiveness(rootAttributes) {
   root.render(html);
 }
 
+function Publish(props = {}) {
+  const [state, setState] = react.exports.useState({
+    loading: false
+  });
+
+  const updateState = update => setState(Object.assign({}, state, update));
+
+  return /*#__PURE__*/React.createElement("div", null, state.loading && /*#__PURE__*/React.createElement("div", {
+    className: "overlay overlay--loading"
+  }, "Loading, Please wait..."), /*#__PURE__*/React.createElement("button", {
+    onClick: submit,
+    disabled: state.loading,
+    className: "btn btn--primary"
+  }, "Publish"));
+
+  async function submit() {
+    const ready = confirm('Are you ready to submit the code?');
+
+    if (!ready) {
+      return;
+    }
+
+    updateState({
+      loading: true
+    });
+
+    try {
+      const response = await fetch(`/publish`);
+      const data = await response.json();
+
+      if (data.success) {
+        alert('Your code is successfully sent to project manager! Thank you!');
+      } else {
+        alert('Can\'t send your code, please try again or contact project manager.');
+      }
+    } catch (error) {
+      alert('Something went wrong, please try again or contact project manager.');
+    }
+
+    updateState({
+      loading: false
+    });
+  }
+}
+
+function setupPublish(rootAttributes) {
+  // INIT
+  const wrapper = document.createElement('div');
+  document.querySelector('.page_toolbar__right').prepend(wrapper);
+  const root = createRoot(wrapper);
+  const html = /*#__PURE__*/React.createElement(Publish, {
+    rootAttributes: rootAttributes
+  });
+  root.render(html);
+}
+
 const rootAttributes = {
   previewFrame: document.getElementById('preview_frame')
 };
-setupResponsiveness(rootAttributes); // const responsiveness = connectResponsiveness(rootAttributes);
+setupResponsiveness(rootAttributes);
+setupPublish(rootAttributes); // const responsiveness = connectResponsiveness(rootAttributes);
 // setTimeout(() => responsiveness.selectMode('tablet'), 5000)
 // setTimeout(() => responsiveness.selectMode('mobile'), 10000)
 
@@ -11343,7 +11400,7 @@ function initDataOptions() {
   }
 
   dataOptionsSelect.addEventListener('change', function () {
-    previewFrame.src = window.previewFrameUrl + '?data=' + this.value;
+    previewFrame.src = window.devTool.previewFrameUrl + '?data=' + this.value;
   });
 }
 //# sourceMappingURL=index.min.js.map

layouts/scripts/index.js

@@ -1,12 +1,14 @@
 'use strict';
 
 import {setupResponsiveness} from './toolbar/responsive.jsx';
+import {setupPublish} from "./toolbar/publish.jsx";
 
 const rootAttributes = {
   previewFrame: document.getElementById('preview_frame'),
 }
 
 setupResponsiveness(rootAttributes);
+setupPublish(rootAttributes)
 
 // const responsiveness = connectResponsiveness(rootAttributes);
 // setTimeout(() => responsiveness.selectMode('tablet'), 5000)
@@ -26,6 +28,6 @@ function initDataOptions() {
   }
 
   dataOptionsSelect.addEventListener('change', function () {
-    previewFrame.src = window.previewFrameUrl + '?data=' + this.value;
+    previewFrame.src = window.devTool.previewFrameUrl + '?data=' + this.value;
   });
 }

layouts/scripts/toolbar/publish.jsx

@@ -0,0 +1,47 @@
+import React, {useEffect, useState} from 'react';
+import * as ReactDOM from 'react-dom/client';
+
+function Publish(props = {}) {
+  const [state, setState] = useState({loading: false});
+  const updateState = (update) => setState(Object.assign({}, state, update));
+
+  return <div>
+    {state.loading &&
+      <div className="overlay overlay--loading">Loading, Please wait...</div>
+    }
+    <button onClick={submit} disabled={state.loading} className="btn btn--primary">Publish</button>
+  </div>;
+
+  async function submit() {
+    const ready = confirm('Are you ready to submit the code?');
+    if (!ready) {
+      return;
+    }
+
+    updateState({loading: true});
+
+    try {
+      const response = await fetch(`/publish`);
+      const data = await response.json();
+      if (data.success) {
+        alert('Your code is successfully sent to project manager! Thank you!');
+      } else {
+        alert('Can\'t send your code, please try again or contact project manager.');
+      }
+    } catch (error) {
+      alert('Something went wrong, please try again or contact project manager.');
+    }
+
+    updateState({loading: false});
+  }
+}
+
+export function setupPublish(rootAttributes) {
+  // INIT
+  const wrapper = document.createElement('div');
+  document.querySelector('.page_toolbar__right').prepend(wrapper)
+
+  const root = ReactDOM.createRoot(wrapper);
+  const html = (<Publish rootAttributes={rootAttributes}/>);
+  root.render(html);
+}

layouts/scripts/toolbar/responsive.jsx

@@ -73,7 +73,7 @@ function Responsive(props = {}) {
 export function setupResponsiveness(rootAttributes) {
   // INIT
   const wrapper = document.createElement('div');
-  document.querySelector('.page_toolbar').prepend(wrapper)
+  document.querySelector('.page_toolbar__middle').prepend(wrapper)
 
   const root = ReactDOM.createRoot(wrapper);
   const html = (<Responsive rootAttributes={rootAttributes}/>);