fix: unmount application view when ephemeral identifier changes

app/assets/javascripts/components/ApplicationGroupView.tsx

@@ -4,7 +4,6 @@ import { Component } from 'preact';
 import { ApplicationView } from './ApplicationView';
 
 type State = {
-  applications: WebApplication[];
   activeApplication?: WebApplication;
 };
 
@@ -15,36 +14,28 @@ type Props = {
 export class ApplicationGroupView extends Component<Props, State> {
   constructor(props: Props) {
     super(props);
-    this.state = {
-      applications: [],
-    };
+
     props.mainApplicationGroup.addApplicationChangeObserver(() => {
-      this.setState({
-        activeApplication: props.mainApplicationGroup
-          .primaryApplication as WebApplication,
-        applications:
-          props.mainApplicationGroup.getApplications() as WebApplication[],
-      });
+      const activeApplication = props.mainApplicationGroup
+        .primaryApplication as WebApplication;
+      this.setState({ activeApplication });
     });
+
     props.mainApplicationGroup.initialize();
   }
 
   render() {
     return (
       <>
-        {this.state.applications.map((application) => {
-          if (application === this.state.activeApplication) {
-            return (
-              <div id={application.identifier}>
-                <ApplicationView
-                  key={application.identifier}
-                  mainApplicationGroup={this.props.mainApplicationGroup}
-                  application={application}
-                />
-              </div>
-            );
-          }
-        })}
+        {this.state.activeApplication && (
+          <div id={this.state.activeApplication.identifier}>
+            <ApplicationView
+              key={this.state.activeApplication.ephemeralIdentifier}
+              mainApplicationGroup={this.props.mainApplicationGroup}
+              application={this.state.activeApplication}
+            />
+          </div>
+        )}
       </>
     );
   }