Merge pull request #563 from keymanapp/fix/faces-are-not-working

fix: calculate user order for contributions at data load

Author: mcdurdin

public/src/app/data/data.model.ts

@@ -1,5 +1,6 @@
 import { platforms, PlatformSpec } from "../../../../shared/platforms";
 import { ServiceStateCache, ServiceState, ServiceIdentifier } from "../../../../shared/services";
+import { getTz } from "../../../../shared/users";
 import { sites, siteSentryNames, sitesWithState } from "../sites";
 import { EMPTY_STATUS, Status } from "../status/status.interface";
 import { pullEmoji } from "../utility/pullEmoji";
@@ -30,6 +31,7 @@ export class DataModel {
 
   sprintDays = [];
 
+  contributionUsers = [];
 
   // Phase data, grabbing from github's milestones for the keyman repo
   milestones = {};
@@ -98,6 +100,7 @@ export class DataModel {
         break;
       case ServiceIdentifier.GitHubContributions:
         this.status.contributions = data.contributions;
+        this.transformContributionUsers();
         break;
       case ServiceIdentifier.CommunitySite:
         this.status.communitySite = this.transformCommunitySiteData(data.communitySite.contributions);
@@ -142,6 +145,34 @@ export class DataModel {
     }
   }
 
+  nullUser = { login:'', avatarUrl: null, contributions: {
+    issues: { nodes: [] },
+    pullRequests: { nodes: [] },
+    reviews: { nodes: [] },
+    tests: { nodes: [] },
+  } };
+
+  private getTimezoneOffset(timeZone){
+    if(!timeZone) return undefined;
+    const str = new Date().toLocaleString('en', {timeZone, timeZoneName: 'longOffset'});
+    const [_,h,m] = (str.match(/([+-]\d+):(\d+)$/) || [, '+00', '00']).map(t => parseInt(t,10));
+    return h * 60 + (h > 0 ? +m : -m);
+  }
+
+  transformContributionUsers() {
+    let users = [];
+    if(this.status?.contributions?.data.repository.contributions.nodes) {
+      const usersWithTimeZones = this.status.contributions.data.repository.contributions.nodes.map(u => ({...u, tzOffset: this.getTimezoneOffset(getTz(u.login))}));
+      users = [].concat([this.nullUser],usersWithTimeZones.sort( (a:any, b:any) =>
+        a.tzOffset == b.tzOffset ? a.login.localeCompare(b.login) :
+        a.tzOffset == undefined ? 1 :
+        b.tzOffset == undefined ? -1 :
+        a.tzOffset - b.tzOffset
+      ));
+    }
+    this.contributionUsers = users;
+  }
+
   transformPlatformStatusData() {
     this.labeledPulls = [];
 

public/src/app/home/home.component.html

@@ -19,7 +19,7 @@
             </span>
 
             <span class="navbar-contributions" *ngIf="showContributions">
-              <span *ngFor="let user of contributionUsers()" class="navbar-contribution {{activeTab === user.login ? 'fixed' : ''}}">
+              <span *ngFor="let user of contributionUsers" class="navbar-contribution {{activeTab === user.login ? 'fixed' : ''}}">
                 <app-contributions (onSelectTab)="selectTab($event)" [user]="user"></app-contributions>
               </span>
               <span class="navbar-contribution">
@@ -51,7 +51,7 @@
   <div id="tabs">
 
     <ng-container *ngIf="showContributions">
-      <div id="tab-{{user.login ?? 'unassigned-contributions'}}" class="{{activeTab == user.login ? 'tab-active' : ''}}" *ngFor="let user of contributionUsers()">
+      <div id="tab-{{user.login ?? 'unassigned-contributions'}}" class="{{activeTab == user.login ? 'tab-active' : ''}}" *ngFor="let user of contributionUsers">
         <app-contributions-tab [user]="user"></app-contributions-tab>
       </div>
     </ng-container>

public/src/app/home/home.component.ts

@@ -44,6 +44,7 @@ export class HomeComponent {
   get phaseEnd() { return this.data.phaseEnd };
   get unlabeledPulls() { return this.data.unlabeledPulls };
   get serviceState() { return this.data.serviceState };
+  get contributionUsers() { return this.data.contributionUsers; }
 
   constructor(private statusService: StatusService, private route: ActivatedRoute, private zone: NgZone) {
   };
@@ -96,34 +97,6 @@ export class HomeComponent {
 
   // Tab View
 
-  nullUser = { login:'', avatarUrl: null, contributions: {
-    issues: { nodes: [] },
-    pullRequests: { nodes: [] },
-    reviews: { nodes: [] },
-    tests: { nodes: [] },
-  } };
-
-  private getTimezoneOffset(timeZone){
-    if(!timeZone) return undefined;
-    const str = new Date().toLocaleString('en', {timeZone, timeZoneName: 'longOffset'});
-    const [_,h,m] = (str.match(/([+-]\d+):(\d+)$/) || [, '+00', '00']).map(t => parseInt(t,10));
-    return h * 60 + (h > 0 ? +m : -m);
-  }
-
-  contributionUsers() {
-    let users = [];
-    if(this.status?.contributions?.data.repository.contributions.nodes) {
-      const usersWithTimeZones = this.status?.contributions?.data.repository.contributions.nodes.map(u => ({...u, tzOffset: this.getTimezoneOffset(getTz(u.login))}));
-      users = [].concat([this.nullUser],usersWithTimeZones.sort( (a:any, b:any) =>
-        a.tzOffset == b.tzOffset ? a.login.localeCompare(b.login) :
-        a.tzOffset == undefined ? 1 :
-        b.tzOffset == undefined ? -1 :
-        a.tzOffset - b.tzOffset
-      ));
-    }
-    return users;
-  }
-
   getAllContributions = () => {
     let text = '';
     for(let user of this.status?.contributions?.data.repository.contributions.nodes) {