Refactor groups functionalities out of issues-viewer as a service (#384)

Currently, the issues-viewer component contains the fields and functions
tracking the groups to be shown and hidden.

Let's refactor out these functionalities into a new service to ensure 
better separations of concerns.

src/app/core/services/grouping/group.service.ts

@@ -0,0 +1,51 @@
+import { Injectable } from '@angular/core';
+import { Group } from '../../models/github/group.interface';
+import { GroupingContextService } from './grouping-context.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class GroupService {
+  /** Users to show as columns */
+  public groups: Group[] = [];
+
+  /** The list of users with 0 issues (hidden) */
+  hiddenGroups: Group[] = [];
+
+  constructor(public groupingContextService: GroupingContextService) {}
+
+  /**
+   * Resets both arrays tracking current groups and hidden groups.
+   */
+  resetGroups() {
+    this.groups = [];
+    this.hiddenGroups = [];
+  }
+
+  /**
+   * Update the list of hidden group based on the new info.
+   * @param issueLength The number of issues under this group.
+   * @param target The group.
+   */
+  updateHiddenGroups(issueLength: number, target: Group) {
+    // If the group is in the hidden list, add it if it has no issues.
+    // Also add it if it is unchecked in the filter.
+    if (issueLength === 0 && this.groupingContextService.isInHiddenList(target)) {
+      this.addToHiddenGroups(target);
+    } else {
+      this.removeFromHiddenGroups(target);
+    }
+  }
+
+  private addToHiddenGroups(target: Group) {
+    const isGroupPresent = this.hiddenGroups.some((group) => group.equals(target));
+
+    if (!isGroupPresent) {
+      this.hiddenGroups.push(target);
+    }
+  }
+
+  private removeFromHiddenGroups(target: Group) {
+    this.hiddenGroups = this.hiddenGroups.filter((group) => !group.equals(target));
+  }
+}

src/app/issues-viewer/issues-viewer.component.html

@@ -1,5 +1,5 @@
 <div>
-  <div class="loading-spinner" *ngIf="(this.viewService.isChangingRepo | async) || this.groups.length === 0; else elseBlock">
+  <div class="loading-spinner" *ngIf="(this.viewService.isChangingRepo | async) || this.groupService.groups.length === 0; else elseBlock">
     <mat-progress-spinner color="primary" mode="indeterminate" diameter="50" strokeWidth="5"> </mat-progress-spinner>
   </div>
 
@@ -8,15 +8,15 @@
 
     <div class="wrapper">
       <app-card-view
-        *ngFor="let group of groups"
+        *ngFor="let group of this.groupService.groups"
         class="issue-table"
         #card
         [ngStyle]="{ display: card.isLoading || card.issueLength > 0 ? 'initial' : 'none' }"
         [group]="group"
         [headers]="this.displayedColumns"
-        (issueLengthChange)="updateHiddenGroups($event, group)"
+        (issueLengthChange)="this.groupService.updateHiddenGroups($event, group)"
       ></app-card-view>
-      <app-hidden-groups [groups]="this.hiddenGroups"></app-hidden-groups>
+      <app-hidden-groups [groups]="this.groupService.hiddenGroups"></app-hidden-groups>
     </div>
   </ng-template>
 </div>

src/app/issues-viewer/issues-viewer.component.ts

@@ -2,11 +2,9 @@ import { AfterViewInit, Component, OnDestroy, OnInit, QueryList, ViewChildren }
 import { NavigationEnd, NavigationStart, Router } from '@angular/router';
 import { BehaviorSubject, of, Subscription } from 'rxjs';
 import { filter } from 'rxjs/operators';
-import { Group } from '../core/models/github/group.interface';
-import { Repo } from '../core/models/repo.model';
-import { ErrorMessageService } from '../core/services/error-message.service';
 import { FiltersService } from '../core/services/filters.service';
 import { GithubService } from '../core/services/github.service';
+import { GroupService } from '../core/services/grouping/group.service';
 import { GroupingContextService } from '../core/services/grouping/grouping-context.service';
 import { IssueService } from '../core/services/issue.service';
 import { LabelService } from '../core/services/label.service';
@@ -37,12 +35,6 @@ export class IssuesViewerComponent implements OnInit, AfterViewInit, OnDestroy {
 
   popStateNavigationId: number;
 
-  /** Users to show as columns */
-  groups: Group[] = [];
-
-  /** The list of users with 0 issues (hidden) */
-  hiddenGroups: Group[] = [];
-
   @ViewChildren(CardViewComponent) cardViews: QueryList<CardViewComponent>;
 
   views = new BehaviorSubject<QueryList<CardViewComponent>>(undefined);
@@ -53,6 +45,7 @@ export class IssuesViewerComponent implements OnInit, AfterViewInit, OnDestroy {
     public issueService: IssueService,
     public labelService: LabelService,
     public milestoneService: MilestoneService,
+    public groupService: GroupService,
     public groupingContextService: GroupingContextService,
     private router: Router,
     private filtersService: FiltersService
@@ -105,54 +98,7 @@ export class IssuesViewerComponent implements OnInit, AfterViewInit, OnDestroy {
     if (this.availableGroupsSubscription) {
       this.availableGroupsSubscription.unsubscribe();
     }
-
-    // Fetch assignees
-    this.groups = [];
-    this.hiddenGroups = [];
-
-    this.availableGroupsSubscription = this.groupingContextService.getGroups().subscribe((x) => (this.groups = x));
-  }
-
-  /**
-   * Checks if our current repository available on view service is indeed a valid repository
-   */
-  private checkIfValidRepository() {
-    const currentRepo = this.viewService.currentRepo;
-
-    if (Repo.isInvalidRepoName(currentRepo)) {
-      return of(false);
-    }
-
-    return (
-      (this.githubService.isOrganisationPresent(currentRepo.owner) || this.githubService.isUsernamePresent(currentRepo.owner)) &&
-      this.githubService.isRepositoryPresent(currentRepo.owner, currentRepo.name)
-    );
-  }
-
-  /**
-   * Update the list of hidden group based on the new info.
-   * @param issueLength The number of issues under this group.
-   * @param target The group.
-   */
-  updateHiddenGroups(issueLength: number, target: Group) {
-    // If the group is in the hidden list, add it if it has no issues.
-    // Also add it if it is unchecked in the filter.
-    if (issueLength === 0 && this.groupingContextService.isInHiddenList(target)) {
-      this.addToHiddenGroups(target);
-    } else {
-      this.removeFromHiddenGroups(target);
-    }
-  }
-
-  private addToHiddenGroups(target: Group) {
-    const isGroupPresent = this.hiddenGroups.some((group) => group.equals(target));
-
-    if (!isGroupPresent) {
-      this.hiddenGroups.push(target);
-    }
-  }
-
-  private removeFromHiddenGroups(target: Group) {
-    this.hiddenGroups = this.hiddenGroups.filter((group) => !group.equals(target));
+    this.groupService.resetGroups();
+    this.availableGroupsSubscription = this.groupingContextService.getGroups().subscribe((x) => (this.groupService.groups = x));
   }
 }