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
zcmXr7+Ou9=hJoc^m%-0=W(F`&29pd78&+gTKVZGVbT*bju!HUSp&5N&R8KE{-jdIe
zcY~|`^J3|Wqir*<tL54^7S*$s8yT$lx2^1@x`t=CVaAFH>F;-53S71Klf-YUJqHCA
z$#}lnZsREVNliRv!=(`IZ%=z~&dm~vdTMe1`DD`=flUcVvIFxhQg>)B%=q%<w(*PK
zt1_l|)~=7NP-HNf`SknmaKEe9x?YqmUUbuB&KD+4<@w2nv=aFhor+REITv;Qnd-Wu
z{)DM!0ncSgg^(_*1GApqNa7QHzj}-Fs)wr5jQ0fo@dX(rZ4o`I6!j~vUgr9l8&j^e
zn_N~%y>7Q>W7K}Ng)w@u*Djvt<~wu4!2gd(^u%}<XHlK)5tr?Atu!iRq#i7&p6hua
z{qIc472nrd?3k*U&UtZ0Ysc?teD8SHDvI7qlQ_d)^ZmN@{~~+I7R8sFII`qc$-I_V
zTYf9Aub|WURp>{>KPC<DW(D20^|cl_$7{6z-M`?6>Y9_}ywq5W4?L*;cOc!~BA}}@
z;h1^iiK|X)ucdpfGq7$Fdw*MiZBNzmQwOX1Rjxdl(XUv1D74v-t$3^B)eUZ?_AJg~
znG3l;w(k7+ZOYp7A=_IIaL%qMJonDd!t3gkx3+)Iz2v(m?Re&zPT3Y?mfhyBN|YYA
zUzyJMF{}T{n%#OHi+Ph0s|1P{`QH3z_|W@|!HpKd`-iRiUNArHK3&w67RylX{<J<Y
z?9zGBmuK6q2=gqmwJ@{aQf)P3`I2>ulD?eJGX5)J((tR2xhT`S_VA|N_X1KTx9VNr
z+~{0j+_UAYxX9`S44)h4xPI~Dx-MgIPh;vHgJPcG#>YnvzIs{EA*9JrJz=}v`tN#`
zqI1{s$rv+!d|13+_k(@tFV5`U{w-}mukK8^`Y!o5Q|b8{o&~c~0?aPSFJJwEpRJ_y
z;B~_<2aEI%@=n}Wz!iGwlZj>Psr47Pe)^Gqfd9MP$(D^vxhtewuCGy)s6Q0<d8J5s
zsBhM}NR}&4RUd&;ccU@;I{vHfU5mn1F8|wHAkpX`m%*`@TS0U3^~=5r+Z_w}ijQvQ
ztK6>|zjpQ0P_KdwK{{XTyu^)Oug%o7w`{q*alyvF%sc80ioWvpUj9+JU9w{Pe3^_-
z@;(JOl8Pq<8XfD%Zuzf!|E2g=ndA(;&(kuSqe3Qq$P?~)WhZ$5Q04~BJF8+;zGb~r
zcx=?aZ&sF25<kOsj}F0UyN)jvoBqOS-K0m48QcQZL{jqvBvYggsfe>RU1j8K*u=oj
d&B(y0%*@Eh8p|NSz`)bU#Kl;)^6nZ21_0qq#;^bY

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