From a61f05c03533488a508dc5257817d73cd0319b41 Mon Sep 17 00:00:00 2001
From: unknown <markuswondrak@gmail.com>
Date: Thu, 6 Feb 2020 16:17:34 +0100
Subject: [PATCH] events poc

---
 campaign/src/main.ts         |   8 ++++++--
 campaign/src/polyfills.ts    |   6 +++++-
 portal/src/App.jsx           |   3 +++
 portal/src/MicroFrontend.jsx |   9 ++++++---
 proxy/proxy.7z               | Bin 0 -> 970 bytes
 sale/content/sale/main.js    |  10 ++++++----
 search/src/App.jsx           |   9 ++++++++-
 search/src/index.js          |  33 +++++++++++++++++++++++++++++----
 8 files changed, 63 insertions(+), 15 deletions(-)
 create mode 100644 proxy/proxy.7z

diff --git a/campaign/src/main.ts b/campaign/src/main.ts
index 11d3836..74f651f 100644
--- a/campaign/src/main.ts
+++ b/campaign/src/main.ts
@@ -29,10 +29,14 @@ const mountFunction = () => {
 
 if (window.mount == null) {
   window.mount = {
-    Campaign: mountFunction
+    Campaign: {
+      mount: mountFunction
+    }
   };
 } else {
-  window.mount.Campaign = mountFunction;
+  window.mount.Campaign = {
+    mount: mountFunction
+  };
 }
 
  
\ No newline at end of file
diff --git a/campaign/src/polyfills.ts b/campaign/src/polyfills.ts
index 97e5499..caccca4 100644
--- a/campaign/src/polyfills.ts
+++ b/campaign/src/polyfills.ts
@@ -60,8 +60,12 @@ import 'zone.js/dist/zone';  // Included with Angular CLI.
 
 declare global {
 
+    interface MountDefinition {
+      mount: () => void;
+    }
+
     interface MountObject {
-      Campaign: () => void;
+      Campaign: MountDefinition;
     }
 
     interface Window {
diff --git a/portal/src/App.jsx b/portal/src/App.jsx
index 0df27a4..7611526 100644
--- a/portal/src/App.jsx
+++ b/portal/src/App.jsx
@@ -25,6 +25,9 @@ function App() {
           </div>
         </div>
       </div>
+      <div className="row">
+        <button onClick={() => window.mount.Search.save()}>Save</button>
+      </div>
     </div>
   );
 }
diff --git a/portal/src/MicroFrontend.jsx b/portal/src/MicroFrontend.jsx
index a2b5a46..534a14e 100644
--- a/portal/src/MicroFrontend.jsx
+++ b/portal/src/MicroFrontend.jsx
@@ -9,11 +9,12 @@ export default ({ name, path }) => {
   useEffect(() => {
 
     // add cache control here (maybe expire date)
-    const mountFunction = window.mount[name];
+    const mountFunction = window.mount[name] && window.mount[name].mount;
+    const unmountFunction = () => window.mount[name].unmount
 
     if (mountFunction) {
       mountFunction();
-      return;
+      return unmountFunction;
     }
 
     fetch(`${path}/asset-manifest.json`)
@@ -22,6 +23,8 @@ export default ({ name, path }) => {
         loadScripts(manifest, name, setDone);
       })
       .catch(e => console.log(e));
+
+    return unmountFunction;
   });
 
   return (
@@ -60,7 +63,7 @@ function loadScripts(manifest, name, setDone) {
     count--;
     if (count === 0) {
       console.log('mounting', name)
-      window.mount[name]();
+      window.mount[name].mount();
       setDone(true);
     }
   }
diff --git a/proxy/proxy.7z b/proxy/proxy.7z
new file mode 100644
index 0000000000000000000000000000000000000000..023e95e69d4be3d2effe30eae90c4143952296ed
GIT binary patch
literal 970
zcmV;*12z0Ndc3bE8~_BtiZJ<y0{{R30000Z0000000026sB2r`1=s@3T>ue?2Is<<
zj`StVqvwQg2yWO4fAgaoc*Ta9*CuU0fpUKZcQP=j{<e1MCn!l*F=(ieXYaYvQL4T2
z82dWB!4RSxN$R&eK^gKU7hJH?R4ex7joF=Q5?bXr-{+GxToAHg#A{J*IAypgp=k8<
z+cW6<s%Vr+eXm(~ApkU)<@ftnPSw_m=ys!`*)*K=0x2V(W5Oz74<SNwWb#9DiTssC
zxPQnsDR2za86Z@OI>4Ic*kTS9@2j*!s^KLY0p1Y)4pK5=v=z-FTKZmp9M{a)l-7qd
z(;#KnKD@D7zb2tvE?w5q&kGLB*f3B06kCyBL_-xUw^-9ZZ8|7;92(%Dd!0$ZXZ@KO
zsQ0ZnxRoJi3DKB^i2Iff?hLIV72akT%ny9`*E|1mKN*A}>9PoF9;zJcA10^TZjNw?
zL+VxWA^bFe?wV5DJxx0h&J8lZ?*3EZCn=I1N+tz!z~FoSz-K==P>OY6#y4Te)k3Y-
zXG*RxJAxMP+Yko4dZ)_4dXFU3<d}~kbHY`FF$QzBLDjHEbw30{7HOdi@rAkZ_LQy9
zRJVn|37dFv&h9=qO4XF@J^aq;4&EC<%+@S+v@-;|H|lgE<A>Cj0r6^&<gB|cNTUs6
zVR{gAqD|TUG2u(hFxZ3<-@`hN=mX`8%W{flT>y7S<$qCD($5v?&4$zy45B?aHb1m`
zI+&-VuA*Y}&uTOM7&L(Tc>{83OMSz#yWUV_lZ7tVvw=f!GmNzL7Zj_Y0P}&IMf6Sz
z*Bmh3D3!c0a|}~~<HW)0>2Qb=DFAzrw=S>uE_oH5tqvSB0rBB;zb)`TRr(2QyHA9M
zQtI50)$U{a0(H-P44|51P&U#Zr>pP}26T17*D>_LaxcLRk-l&WRnqb_Ifcrv(Y5mU
zXTT5l9?68Ur3-i)gx9Pg7=OZE^QjbfRZVKnSp?MOCE@@8004nA2d)p*M~b3XB-8%0
za2SC=9%u-?3m_?z*V9cPw?T0ZbH%d`dA}uJt*hl#N^r1JEc8A~7c%RuX(>NBgwwI0
zvHb(Me=u_O4UN<IdAAvOx1Stn@*hla*kW^%Q8LDeYlQzT-{}{%9AjuM^Ok9YT2zwo
zZWD~^J`vx-X|O5Ws$3-YYVIK8GLOERY7$}(0Jlhp5th2gr52ayLavhH;{ZlcCKP3E
s5E*0|!Xy_4g4F>DfU*Dw3jqKDBLe{e1zi9T000bu0tx|ksoksq0O3r=umAu6

literal 0
HcmV?d00001

diff --git a/sale/content/sale/main.js b/sale/content/sale/main.js
index 9e574f0..3c65f03 100644
--- a/sale/content/sale/main.js
+++ b/sale/content/sale/main.js
@@ -13,7 +13,7 @@ class Sale extends HTMLElement {
       </div>
     `;
   }
-} 
+}
 
 
 window.customElements.define('sale-component', Sale);
@@ -22,9 +22,11 @@ if (!window.mount) {
   window.mount = {};
 }
 
-window.mount.Sale = () => {
-  document.querySelector('#Sale-container').innerHTML = 
-    '<sale-component></sale-component>';
+window.mount.Sale = {
+  mount: () => {
+      document.querySelector('#Sale-container').innerHTML =
+        '<sale-component></sale-component>';
+  }
 }
 
 
diff --git a/search/src/App.jsx b/search/src/App.jsx
index a677483..388544d 100644
--- a/search/src/App.jsx
+++ b/search/src/App.jsx
@@ -1,10 +1,17 @@
 import React, {useState} from 'react';
 import './App.css';
 
-function App() {
+function App({ setSaveAction }) {
 
   const [query, setQuery] = useState('');
 
+  setSaveAction(
+    () => {
+      console.log('save clicked!')
+    }
+  );
+  
+
   const handleChange = e => {
     const newValue = e.target.value;
     if (newValue.length <= 20) {
diff --git a/search/src/index.js b/search/src/index.js
index d661ebe..10971d1 100644
--- a/search/src/index.js
+++ b/search/src/index.js
@@ -4,7 +4,32 @@ import './index.css';
 import App from './App';
 
 
-window.mount.Search = () => {
-    const MyComponent = 'App'
-    ReactDOM.render(<MyComponent />, document.getElementById('Search-container'));
-};
+class Mount {
+
+  constructor() {
+    this.mount = this.mount.bind(this) 
+    this.setSaveAction = this.setSaveAction.bind(this) 
+
+    this.container = document.getElementById('Search-container');
+  }
+
+  setSaveAction(action) {
+    this.save = action;
+  } 
+
+  mount(props = {}) {
+    console.log('mounting React component...')
+    
+    ReactDOM.render(
+      <App {...props} setSaveAction={this.setSaveAction} />, 
+      this.container
+    );
+  }
+
+  unmount() {
+    ReactDOM.unmountComponentAtNode(this.container);
+  }
+
+}
+
+window.mount.Search = new Mount();
-- 
GitLab