WEB-624 refactor: remove hard-coded back-routing for component reload (#3045)

improve

improve

src/app/organization/sms-campaigns/view-campaign/view-campaign.component.ts

@@ -7,9 +7,11 @@
  */
 
 /** Angular Imports */
-import { Component, OnInit, ViewChild, inject } from '@angular/core';
+import { Component, OnInit, OnDestroy, ViewChild, inject } from '@angular/core';
 import { UntypedFormGroup, UntypedFormBuilder, ReactiveFormsModule } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 import {
   MatTableDataSource,
   MatTable,
@@ -37,6 +39,7 @@ import { DatepickerBase } from 'app/shared/form-dialog/formfield/model/datepicke
 import { OrganizationService } from '../../organization.service';
 import { SettingsService } from 'app/settings/settings.service';
 import { Dates } from 'app/core/utils/dates';
+import { DataReloadService } from 'app/core/services/data-reload.service';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { MatTabGroup, MatTab } from '@angular/material/tabs';
 import { MatList, MatListItem } from '@angular/material/list';
@@ -70,35 +73,32 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
     DateFormatPipe
   ]
 })
-export class ViewCampaignComponent implements OnInit {
+export class ViewCampaignComponent implements OnInit, OnDestroy {
   private router = inject(Router);
   private route = inject(ActivatedRoute);
-  dialog = inject(MatDialog);
+  private dialog = inject(MatDialog);
   private formBuilder = inject(UntypedFormBuilder);
   private dateUtils = inject(Dates);
   private organizationService = inject(OrganizationService);
   private settingsService = inject(SettingsService);
+  private dataReloadService = inject(DataReloadService);
 
-  /** Minimum date allowed. */
   minDate = new Date(2000, 0, 1);
-  /** Maximum date allowed. */
   maxDate = new Date();
-  /** SMS form. */
   smsForm: UntypedFormGroup;
-  /** SMS Campaign data. */
   smsCampaignData: any;
-  /** Message Status */
   status: any;
-  /** Data Table Columns */
   displayedColumns: string[] = [
     'Message',
     'Status',
     'Mobile No.',
     'Campaign Name'
   ];
-  /** Data source for SMS campaigns table. */
   dataSource = new MatTableDataSource();
 
+  private reloadContext!: string;
+  private destroy$ = new Subject<void>();
+
   /** Message Table Reference */
   @ViewChild('messageTable') messageTableRef: MatTable<Element>;
 
@@ -126,27 +126,32 @@ export class ViewCampaignComponent implements OnInit {
     }
   ];
 
-  /**
-   * Retrieves the SMS Campaign data from `resolve
-   * @param {Router} router Router
-   * @param {ActivatedRoute} route Activated Route
-   * @param {MatDialog} dialog Mat Dialog
-   * @param {FormBuilder} formBuilder Form Builder
-   * @param {Dates} dateUtils Date Utils
-   * @param {OrganizationService} organizationService Organization Service
-   * @param {SettingsService} settingsService Setting Service
-   */
-  constructor() {
-    this.route.data.subscribe((data: { smsCampaign: any }) => {
+  ngOnInit(): void {
+    this.route.data.pipe(takeUntil(this.destroy$)).subscribe((data: { smsCampaign: any }) => {
       this.smsCampaignData = data.smsCampaign;
+      this.reloadContext = `sms-campaign-${this.smsCampaignData.id}`;
+
+      // Subscribe to reload events after we have the campaign ID
+      this.dataReloadService
+        .getReloadObservable(this.reloadContext)
+        .pipe(takeUntil(this.destroy$))
+        .subscribe(() => {
+          this.refreshData();
+        });
     });
-  }
 
-  ngOnInit() {
     this.maxDate = this.settingsService.businessDate;
     this.createSMSForm();
   }
 
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+    if (this.reloadContext) {
+      this.dataReloadService.cleanup(this.reloadContext);
+    }
+  }
+
   /**
    * Creates the SMS form.
    */
@@ -300,14 +305,22 @@ export class ViewCampaignComponent implements OnInit {
   }
 
   /**
-   * Refetches data fot the component
-   * TODO: Replace by a custom reload component instead of hard-coded back-routing.
+   * Triggers a reload event for this campaign.
    */
-  private reload() {
-    const url: string = this.router.url;
-    this.router
-      .navigateByUrl(`/organization/sms-campaigns`, { skipLocationChange: true })
-      .then(() => this.router.navigate([url]));
+  private reload(): void {
+    this.dataReloadService.triggerReload(this.reloadContext);
+  }
+
+  /**
+   * Refreshes the campaign data when reload is triggered.
+   */
+  private refreshData(): void {
+    this.organizationService
+      .getSmsCampaign(this.smsCampaignData.id)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((data: any) => {
+        this.smsCampaignData = data;
+      });
   }
 
   /**