Merge pull request #5351 from matrix-org/t3chguy/cherry-pick/6

[Release] Widget fixes

src/components/views/elements/PersistedElement.js

@@ -21,6 +21,8 @@ import {throttle} from "lodash";
 import ResizeObserver from 'resize-observer-polyfill';
 
 import dis from '../../../dispatcher/dispatcher';
+import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import {MatrixClientPeg} from "../../../MatrixClientPeg";
 
 // Shamelessly ripped off Modal.js.  There's probably a better way
 // of doing reusable widgets like dialog boxes & menus where we go and
@@ -144,9 +146,11 @@ export default class PersistedElement extends React.Component {
     }
 
     renderApp() {
-        const content = <div ref={this.collectChild} style={this.props.style}>
-            {this.props.children}
-        </div>;
+        const content = <MatrixClientContext.Provider value={MatrixClientPeg.get()}>
+            <div ref={this.collectChild} style={this.props.style}>
+                {this.props.children}
+            </div>
+        </MatrixClientContext.Provider>;
 
         ReactDOM.render(content, getOrCreateContainer('mx_persistedElement_'+this.props.persistKey));
     }

src/components/views/right_panel/RoomSummaryCard.tsx

@@ -31,7 +31,6 @@ import {SetRightPanelPhasePayload} from "../../../dispatcher/payloads/SetRightPa
 import Modal from "../../../Modal";
 import ShareDialog from '../dialogs/ShareDialog';
 import {useEventEmitter} from "../../../hooks/useEventEmitter";
-import WidgetEchoStore from "../../../stores/WidgetEchoStore";
 import WidgetUtils from "../../../utils/WidgetUtils";
 import {IntegrationManagers} from "../../../integrations/IntegrationManagers";
 import SettingsStore from "../../../settings/SettingsStore";
@@ -77,7 +76,6 @@ export const useWidgets = (room: Room) => {
     }, [room]);
 
     useEffect(updateApps, [room]);
-    useEventEmitter(WidgetEchoStore, "update", updateApps);
     useEventEmitter(WidgetStore.instance, room.roomId, updateApps);
 
     return apps;

src/stores/WidgetEchoStore.js

@@ -55,7 +55,7 @@ class WidgetEchoStore extends EventEmitter {
             const widgetId = w.getStateKey();
             // If there's no echo, or the echo still has a widget present, show the *old* widget
             // we don't include widgets that have changed for the same reason we don't include new ones,
-            // ie. we'd need to fake matrix events to do so and therte's currently no need.
+            // ie. we'd need to fake matrix events to do so and there's currently no need.
             if (!roomEchoState[widgetId] || Object.keys(roomEchoState[widgetId]).length !== 0) {
                 echoedWidgets.push(w);
             }

src/stores/WidgetStore.ts

@@ -122,6 +122,15 @@ export default class WidgetStore extends AsyncStoreWithClient<IState> {
         if (!room) return;
         const roomInfo = this.roomMap.get(room.roomId);
         roomInfo.widgets = [];
+
+        // first clean out old widgets from the map which originate from this room
+        // otherwise we are out of sync with the rest of the app with stale widget events during removal
+        Array.from(this.widgetMap.values()).forEach(app => {
+            if (app.roomId === room.roomId) {
+                this.widgetMap.delete(app.id);
+            }
+        });
+
         this.generateApps(room).forEach(app => {
             this.widgetMap.set(app.id, app);
             roomInfo.widgets.push(app);