removed subcription in favour of input

Author: rfontanarosa

web/src/app/components/shared/data-visibility-control/data-visibility-control.component.ts

@@ -14,9 +14,8 @@
  * limitations under the License.
  */
 
-import { Component } from '@angular/core';
+import { Component, effect, input } from '@angular/core';
 import { MatSlideToggleChange } from '@angular/material/slide-toggle';
-import { Subscription } from 'rxjs';
 
 import { Survey, SurveyDataVisibility } from 'app/models/survey.model';
 import { AuthService } from 'app/services/auth/auth.service';
@@ -28,7 +27,7 @@ import { DraftSurveyService } from 'app/services/draft-survey/draft-survey.servi
   standalone: false,
 })
 export class DataVisibilityControlComponent {
-  private subscription = new Subscription();
+  survey = input<Survey>();
 
   selectedDataVisibility!: SurveyDataVisibility;
 
@@ -38,16 +37,14 @@ export class DataVisibilityControlComponent {
     readonly authService: AuthService,
     readonly draftSurveyService: DraftSurveyService
   ) {
-    this.subscription.add(
-      this.draftSurveyService
-        .getSurvey$()
-        .subscribe(survey => this.onSurveyLoaded(survey))
-    );
-  }
-
-  private async onSurveyLoaded(survey: Survey): Promise<void> {
-    this.selectedDataVisibility =
-      survey.dataVisibility || SurveyDataVisibility.CONTRIBUTOR_AND_ORGANIZERS;
+    effect(() => {
+      const survey = this.survey();
+      if (survey) {
+        this.selectedDataVisibility =
+          survey.dataVisibility ||
+          SurveyDataVisibility.CONTRIBUTOR_AND_ORGANIZERS;
+      }
+    });
   }
 
   changeDataVisibility(event: MatSlideToggleChange) {
@@ -59,8 +56,4 @@ export class DataVisibilityControlComponent {
 
     this.draftSurveyService.updateDataVisibility(dataVisibility);
   }
-
-  ngOnDestroy() {
-    this.subscription.unsubscribe();
-  }
 }

web/src/app/components/shared/general-access-control/general-access-control.component.ts

@@ -16,9 +16,8 @@
 
 import '@angular/localize/init';
 
-import { Component } from '@angular/core';
+import { Component, effect, input } from '@angular/core';
 import { Map } from 'immutable';
-import { Subscription } from 'rxjs';
 
 import { Survey, SurveyGeneralAccess } from 'app/models/survey.model';
 import { AuthService } from 'app/services/auth/auth.service';
@@ -53,7 +52,7 @@ const generalAccessLabels = Map<
   standalone: false,
 })
 export class GeneralAccessControlComponent {
-  private subscription = new Subscription();
+  survey = input<Survey>();
 
   selectedGeneralAccess!: SurveyGeneralAccess;
 
@@ -65,31 +64,24 @@ export class GeneralAccessControlComponent {
     readonly authService: AuthService,
     readonly draftSurveyService: DraftSurveyService
   ) {
-    this.subscription.add(
-      this.draftSurveyService
-        .getSurvey$()
-        .subscribe(survey => this.onSurveyLoaded(survey))
-    );
+    effect(() => {
+      const survey = this.survey();
+      if (survey) {
+        // Default to RESTRICTED for general access if not explicitly set.
+        // This is present for backward-compatibility with older surveys.
+        this.selectedGeneralAccess =
+          survey.generalAccess || SurveyGeneralAccess.RESTRICTED;
+      }
+    });
   }
 
   get generalAccessKeys(): SurveyGeneralAccess[] {
     return Array.from(this.generalAccessLabels.keys());
   }
 
-  private async onSurveyLoaded(survey: Survey): Promise<void> {
-    // Default to RESTRICTED for general access if not explicitly set.
-    // This is present for backward-compatibility with older surveys.
-    this.selectedGeneralAccess =
-      survey.generalAccess || SurveyGeneralAccess.RESTRICTED;
-  }
-
   changeGeneralAccess(generalAccess: SurveyGeneralAccess) {
     this.selectedGeneralAccess = generalAccess;
 
     this.draftSurveyService.updateGeneralAccess(generalAccess);
   }
-
-  ngOnDestroy() {
-    this.subscription.unsubscribe();
-  }
 }

web/src/app/components/shared/share-dialog/share-dialog.component.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { Component } from '@angular/core';
+import { Component, Inject } from '@angular/core';
 import {
   AbstractControl,
   FormControl,
@@ -23,10 +23,9 @@ import {
   ValidatorFn,
   Validators,
 } from '@angular/forms';
-import { MatDialogRef } from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { MatSelectChange } from '@angular/material/select';
 import { Map } from 'immutable';
-import { Subscription } from 'rxjs';
 
 import { AclEntry } from 'app/models/acl-entry.model';
 import { Role } from 'app/models/role.model';
@@ -65,17 +64,12 @@ export class ShareDialogComponent {
   /** The active survey. */
   private survey?: Survey;
 
-  private subscription = new Subscription();
-
   constructor(
     private dialogRef: MatDialogRef<ShareDialogComponent>,
-    private draftSurveyService: DraftSurveyService
+    private draftSurveyService: DraftSurveyService,
+    @Inject(MAT_DIALOG_DATA) data: { survey: Survey }
   ) {
-    this.subscription.add(
-      this.draftSurveyService
-        .getSurvey$()
-        .subscribe(survey => this.onSurveyLoaded(survey))
-    );
+    this.onSurveyLoaded(data.survey);
   }
 
   /**
@@ -128,13 +122,6 @@ export class ShareDialogComponent {
     this.dialogRef.close();
   }
 
-  /**
-   * Clean up Rx subscription when cleaning up the component.
-   */
-  ngOnDestroy(): void {
-    this.subscription.unsubscribe();
-  }
-
   /**
    * Update ACL and surveyId when survey is loaded.
    */

web/src/app/components/shared/share-list/share-list.component.ts

@@ -14,10 +14,9 @@
  * limitations under the License.
  */
 
-import { Component } from '@angular/core';
+import { Component, effect, input } from '@angular/core';
 import { MatSelectChange } from '@angular/material/select';
 import { Map } from 'immutable';
-import { Subscription } from 'rxjs';
 
 import { AclEntry } from 'app/models/acl-entry.model';
 import { Role } from 'app/models/role.model';
@@ -32,12 +31,11 @@ import { DraftSurveyService } from 'app/services/draft-survey/draft-survey.servi
   standalone: false,
 })
 export class ShareListComponent {
+  survey = input<Survey>();
+
   acl: Array<AclEntry> = [];
-  survey?: Survey;
   surveyOwnerEmail = '';
 
-  private subscription = new Subscription();
-
   readonly roleOptions = ROLE_OPTIONS;
 
   roles = Role;
@@ -46,16 +44,15 @@ export class ShareListComponent {
     readonly authService: AuthService,
     readonly draftSurveyService: DraftSurveyService
   ) {
-    this.subscription.add(
-      this.draftSurveyService
-        .getSurvey$()
-        .subscribe(survey => this.onSurveyLoaded(survey))
-    );
+    effect(() => {
+      const survey = this.survey();
+      if (survey) {
+        this.onSurveyLoaded(survey);
+      }
+    });
   }
 
   private async onSurveyLoaded(survey: Survey): Promise<void> {
-    this.survey = survey;
-
     const owner = await this.authService.getUser(survey.ownerId);
 
     this.surveyOwnerEmail = owner?.email || '';
@@ -88,8 +85,4 @@ export class ShareListComponent {
       Map(aclUpdate.map(entry => [entry.email, entry.role]))
     );
   }
-
-  ngOnDestroy() {
-    this.subscription.unsubscribe();
-  }
 }

web/src/app/components/shared/share-survey/share-survey.component.html

@@ -27,7 +27,7 @@
     </mat-card-header>
 
     <mat-card-content>
-      <ground-share-list></ground-share-list>
+      <ground-share-list [survey]="survey"></ground-share-list>
     </mat-card-content>
   </mat-card>
 
@@ -37,12 +37,12 @@
     </mat-card-header>
 
     <mat-card-content>
-      <ground-general-access-control></ground-general-access-control>
+      <ground-general-access-control [survey]="survey"></ground-general-access-control>
     </mat-card-content>
   </mat-card>
 
   <mat-card>
-    <ground-data-visibility-control class="floating-button"></ground-data-visibility-control>
+    <ground-data-visibility-control class="floating-button" [survey]="survey"></ground-data-visibility-control>
 
     <mat-card-header>
       <mat-card-title i18n="@@app.cards.dataVisibility.title">Data visibility</mat-card-title>