Automatically updating the UI when js api makes change to overrides.

single-spa · Aug 13, 2019 · f1d6a1f · f1d6a1f
1 parent 6363869
commit f1d6a1f
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 0 deletions.
diff --git a/src/ui/full-ui.component.js b/src/ui/full-ui.component.js
@@ -5,6 +5,13 @@ export default class FullUI extends Component {
   state = {
     showingPopup: false
   };
+  componentDidMount() {
+    window.addEventListener("import-map-overrides:change", this.doUpdate);
+  }
+  componentWillUnmount() {
+    window.removeEventListener("import-map-overrides:change", this.doUpdate);
+  }
+  doUpdate = () => this.forceUpdate();
   render(props, state) {
     const shouldShow =
       !props.customElement.hasAttribute("show-when-local-storage") ||

diff --git a/src/ui/list/list.component.js b/src/ui/list/list.component.js
@@ -32,6 +32,10 @@ export default class List extends Component {
     notOverriddenMapPromise.then(notOverriddenMap => {
       this.setState({ notOverriddenMap });
     });
+    window.addEventListener("import-map-overrides:change", this.doUpdate);
+  }
+  componentWillUnmount() {
+    window.removeEventListener("import-map-overrides:change", this.doUpdate);
   }
   componentDidUpdate(prevProps, prevState) {
     if (!prevState.dialogModule && this.state.dialogModule) {
@@ -156,6 +160,8 @@ export default class List extends Component {
     this.setState({ dialogModule: null });
   };
 
+  doUpdate = () => this.forceUpdate();
+
   addNewModule = (name, url) => {
     if (name && url) {
       window.importMapOverrides.addOverride(name, url);

diff --git a/src/ui/popup.component.js b/src/ui/popup.component.js
@@ -4,10 +4,13 @@ import List from "./list/list.component";
 export default class Popup extends Component {
   componentDidMount() {
     window.addEventListener("keydown", this.keydownListener);
+    window.addEventListener("import-map-overrides:change", this.doUpdate);
   }
   componentWillUnmount() {
     window.removeEventListener("keydown", this.keydownListener);
+    window.removeEventListener("import-map-overrides:change", this.doUpdate);
   }
+  doUpdate = () => this.forceUpdate();
   render(props) {
     return (
       <div className="imo-popup">