Load a larger number of repositories and make changes to the site to …

…accomodate this.

config/spec-bundle.js

@@ -15,6 +15,7 @@ Error.stackTraceLimit = Infinity;
 
 require('core-js/es6');
 require('core-js/es7/reflect');
+require('core-js/es7/object');
 
 // Typescript emit helpers polyfill
 require('ts-helpers');

config/webpack.common.js

@@ -268,7 +268,8 @@ module.exports = function (options) {
         watchOptions: {
           aggregateTimeout: 300,
           poll: 1000
-        }
+        },
+        compress: true,
       }
     });
 

src/app/app.module.ts

@@ -32,6 +32,7 @@ import { IsDefinedPipe } from './pipes/is-defined';
 import { APP_COMPONENTS } from './utils/app-components';
 import { AgencyService, AGENCIES } from './services/agency';
 import { AgencyApiService } from './services/agency-api';
+import { AgenciesIndexService, ReleasesIndexService } from './services/indexes';
 import { MobileService } from './services/mobile';
 import { ModalService } from './services/modal';
 import { RepoService } from './services/repo';
@@ -46,11 +47,13 @@ import { ElasticsearchTermService, LunrTermService, TermService } from './servic
 // Application wide providers
 const APP_PROVIDERS = [
   ...APP_RESOLVER_PROVIDERS,
+  AgenciesIndexService,
   AgencyService,
   AgencyApiService,
   MobileService,
   ModalService,
   MonacoEditorService,
+  ReleasesIndexService,
   RepoService,
   ReposService,
   { provide: SearchService, useClass: LunrSearchService },

src/app/components/autocomplete-result/autocomplete-result.component.ts

@@ -16,7 +16,7 @@ export class AutocompleteResultComponent {
     if (this.result.agency) { // it's a repo with an agency attribute
       this.resource['iconId'] = 'assets/img/logos/agencies/' + this.result.agency  + '-50x50.png';
       this.resource['imageIcon'] = true;
-      this.resource['url'] = '/explore-code/repos/' + this.result.repoID;
+      this.resource['url'] = `/explore-code/agencies/${this.result.agency}/repos/${this.result.name}`;
       this.resource['name'] = this.result.name;
     } else { // it's an agency
       this.resource['iconId'] = 'assets/img/logos/agencies/' + this.result.id  + '-50x50.png';

src/app/components/explore-code/agency/agency.component.spec.ts

@@ -3,6 +3,8 @@ import { Component } from '@angular/core';
 import { HttpModule } from '@angular/http';
 import { inject, TestBed } from '@angular/core/testing';
 
+import { InfiniteScrollModule } from 'ngx-infinite-scroll';
+
 import { Observable } from 'rxjs/Rx';
 
 import { AgencyComponent } from './index';
@@ -34,7 +36,8 @@ describe('AgencyComponent', () => {
       imports: [
         HttpModule,
         RouterModule,
-        MetaModule.forRoot()
+        MetaModule.forRoot(),
+        InfiniteScrollModule,
       ],
       providers: [
         AgencyService,

src/app/components/explore-code/agency/agency.component.ts

@@ -18,9 +18,13 @@ import { MetaService } from '@ngx-meta/core';
 export class AgencyComponent implements OnInit, OnDestroy {
   agency: Agency;
   public hasRepos: boolean = false;
-  public repos;
+  public repos = [];
   private eventSub: Subscription;
   private agencyReposSub: Subscription;
+  private allRepos = [];
+  private currentIndex = 0;
+  private pageSize = 20;
+  private isLoading = true;
 
   constructor(
     private agencyService: AgencyService,
@@ -43,6 +47,10 @@ export class AgencyComponent implements OnInit, OnDestroy {
       let id = params['id'];
 
       this.agency = this.agencyService.getAgency(id);
+      this.repos = [];
+      this.allRepos = [];
+      this.currentIndex = 0;
+      this.isLoading = true;
       this.agencyRepos();
 
       this.seoService.setTitle(this.agency.name, true);
@@ -64,28 +72,29 @@ export class AgencyComponent implements OnInit, OnDestroy {
   agencyRepos() {
     this.agencyReposSub = this.reposService.getJsonFile().
       subscribe((result) => {
-        if (result) {
-          this.repos = result['repos'].filter(repo => this.filterByAgency(repo));
+        if (result && result.releases !== null && typeof result.releases === 'object') {
+          this.allRepos = Object.values(result.releases).filter(repo => this.filterByAgency(repo))
+            .filter(repo => repo.permissions.usageType === 'openSource' || repo.permissions.usageType === 'governmentWideReuse');
+          this.repos = this.allRepos.slice(0, this.repos.length || this.pageSize);
+          this.currentIndex = this.repos.length || this.pageSize;
           this.hasRepos = this.checkRepos(this.repos);
+          this.isLoading = false;
         } else {
-          console.log('Error.');
+
         }
     });
   }
 
   checkRepos(repos) {
-    if (repos.length > 0) {
-      return true;
-    } else {
-      return false;
-    }
+    return repos.length > 0;
   }
 
   filterByAgency(repo) {
-    if (repo.agency !== undefined && repo.agency === this.agencyId()) {
-      return true;
-    } else {
-      return false;
-    }
+    return repo.agency !== undefined && repo.agency === this.agencyId();
+  }
+
+  onScroll() {
+    this.repos = [...this.repos, ...this.allRepos.slice(this.currentIndex, this.currentIndex + this.pageSize)];
+    this.currentIndex = this.currentIndex + this.pageSize;
   }
 }

src/app/components/explore-code/agency/agency.styles.scss

@@ -6,6 +6,18 @@
     font-size: 1.8em;
     margin-bottom: 0.2em;
   }
+
+  .loading-dialog {
+    text-align: center;
+
+    > p {
+      margin-top: 120px;
+    }
+
+    > img {
+      margin-bottom: 120px;
+    }
+  }
 }
 
 .repo {

src/app/components/explore-code/agency/agency.template.html

@@ -1,42 +1,53 @@
 <div *ngIf="agency" class="agency-container">
   <h1>{{ agency.name }}</h1>
 
-  <div *ngIf="hasRepos" class="repos-container">
-    <p class="repos-count">
-      {{ repos.length }} Featured {{ "Projects" | pluralize : repos.length }}
-    </p>
-    <ul class="repos-list usa-unstyled-list">
-      <li *ngFor="let repo of repos" class="repo">
-
-        <span *ngIf="repo.openSourceProject==1 || repo.governmentWideReuseProject==1">
-          <a routerLink="/explore-code/repos/{{repo.repoID}}">
-            <div class="card card--focusable">
-              <h3 class="repo-name">{{ repo.name }}</h3>
-              <p class="repo-description">
-                {{ repo.description | truncate : 200 }}
-              </p>
-              <ul class="usa-unstyled-list repo-features">
-                <li *ngFor="let language of repo.codeLanguage" class="language">
-                  <i class="icon devicons devicons-{{language.language | lowercase | languageIcon }}"></i>
-                  <span>{{ language.language }}</span>
-                </li>
-                <li>
-                  <i class="icon fa fa-code"></i>
-                  <span *ngIf="repo.openSourceProject==1 && repo.governmentWideReuseProject==0 ">Open Source</span>
-                  <span *ngIf="repo.governmentWideReuseProject==1 && repo.openSourceProject==0">Government-Wide Reuse</span>
-                  <span *ngIf="repo.openSourceProject==1 && repo.governmentWideReuseProject==1 ">Open Source</span>
-                </li>
-              </ul>
-            </div>
-          </a>
-        </span>
-      </li>
-    </ul>
+  <div class="loading-dialog" *ngIf="isLoading">
+    <p>Loading Results...</p>
+    <img alt="United States of America Flag" width="44" height="30" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIwLjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgogICB2aWV3Qm94PSIwIDAgMzAwIDIwNy41IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAzMDAgMjA3LjU7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KICAuc3Qwe2ZpbGw6I0YxNUQ1RDt9CiAgLnN0MXtmaWxsOiNGRkZGRkY7fQogIC5zdDJ7ZmlsbDojMzM4REM5O30KPC9zdHlsZT4KCjxkZWZzPgogIDxtYXNrIGlkPSJmbGFnTWFzayIgbWFza1VuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CiAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIC0zMDApIj4KICAgICAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJ0cmFuc2xhdGUiIGZyb209Ii0zMDAgMCIgdG89IjAgMCIgZHVyPSIzcyIgYmVnaW49IjBzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogICAgICA8dXNlIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhsaW5rOmhyZWY9IiN3YXZlIi8+CiAgICA8L2c+CiAgPC9tYXNrPgogIDxnIGlkPSJ3YXZlIj4KICAgIDxwYXRoIGZpbGw9IndoaXRlIiBkPSJNMzAwLDIwMS43YzAsMCwyMiwxMS44LDUwLDBjMjcuOC0xMS43LDUwLDAsNTAsMHMyNi42LDEyLDUwLDBzNTAsMCw1MCwwczIyLjksMTEuNyw1MC4xLDBjMjcuMi0xMS43LDUwLDAsNTAsMAogICAgICBWNS43YzAsMC0yOC4yLTExLjctNTAsMHMtNTAsMC01MCwwcy0yNS0xMi43LTUwLDBjLTIzLjQsMTEuOS01MCwwLTUwLDBzLTIzLjEtMTIuMi01MC4xLDBjLTI5LjUsMTMuMy01MCwwLTUwLDBsMCwwCiAgICAgIGMtMS4zLTAuNS0yOC42LTExLjQtNDkuOSwwYy0yMS44LDExLjctNTAsMC01MCwwcy0yNS0xMi43LTUwLDBjLTIzLjQsMTEuOS01MCwwLTUwLDBTNzYuOS02LjUsNTAsNS43QzIwLjUsMTksMCw1LjcsMCw1Ljd2MTk2CiAgICAgIGMwLDAsMjIsMTEuOCw1MCwwYzI3LjgtMTEuNyw1MCwwLDUwLDBzMjYuNiwxMiw1MCwwczUwLDAsNTAsMHMyMi45LDExLjcsNTAuMSwwQzI3Ni43LDE5MC4yLDI5OS4zLDIwMS4zLDMwMCwyMDEuN0wzMDAsMjAxLjd6Ii8+CiAgPC9nPgogIDxnIGlkPSJmbGFnIj4KICAgIDxyZWN0IGNsYXNzPSJzdDAiIHdpZHRoPSIzMDAiIGhlaWdodD0iMjA3LjUiLz4KICAgIDxyZWN0IHg9IjEzNC45IiB5PSIzMC40IiBjbGFzcz0ic3QxIiB3aWR0aD0iMTY1LjEiIGhlaWdodD0iMjcuOSIvPgogICAgPHJlY3QgeD0iMTM0LjkiIHk9IjkwLjciIGNsYXNzPSJzdDEiIHdpZHRoPSIxNjUuMSIgaGVpZ2h0PSIyNy45Ii8+CiAgICA8cmVjdCB5PSIxNDkuNSIgY2xhc3M9InN0MSIgd2lkdGg9IjMwMCIgaGVpZ2h0PSIyNy45Ii8+CiAgICA8cmVjdCBjbGFzcz0ic3QyIiB3aWR0aD0iMTM0LjkiIGhlaWdodD0iMTE4LjUiLz4KICA8L2c+CjwvZGVmcz4KICA8dXNlIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhsaW5rOmhyZWY9IiNmbGFnIiBtYXNrPSJ1cmwoI2ZsYWdNYXNrKSIvPgo8L3N2Zz4K" />
   </div>
 
-  <div *ngIf="!hasRepos">
-    <p>
-      No repositories found.
-    </p>
+  <div *ngIf="!isLoading">
+    <div *ngIf="hasRepos" class="repos-container">
+      <p class="repos-count">
+        {{ allRepos.length }} Featured {{ "Projects" | pluralize : allRepos.length }}
+      </p>
+      <ul
+          class="repos-list usa-unstyled-list"
+          infinite-scroll
+          [infiniteScrollDistance]="2"
+          [infiniteScrollThrottle]="500"
+          (scrolled)="onScroll()">
+        <li *ngFor="let repo of repos" class="repo">
+
+          <span *ngIf="repo.permissions.usageType === 'openSource' || repo.permissions.usageType === 'governmentWideReuse'">
+            <a routerLink="/explore-code/agencies/{{agency.id}}/repos/{{repo.name}}">
+              <div class="card card--focusable">
+                <h3 class="repo-name">{{ repo.name }}</h3>
+                <p class="repo-description">
+                  {{ repo.description | truncate : 200 }}
+                </p>
+                <ul class="usa-unstyled-list repo-features">
+                  <li *ngFor="let language of repo.languages" class="language">
+                    <i class="icon devicons devicons-{{language | lowercase | languageIcon }}"></i>
+                    <span>{{ language }}</span>
+                  </li>
+                  <li>
+                    <i class="icon fa fa-code"></i>
+                    <span *ngIf="repo.permissions.usageType === 'openSource'">Open Source</span>
+                    <span *ngIf="repo.permissions.usageType === 'governmentWideReuse'">Government-Wide Reuse</span>
+                  </li>
+                </ul>
+              </div>
+            </a>
+          </span>
+        </li>
+      </ul>
+    </div>
+
+    <div *ngIf="!hasRepos">
+      <p>
+        No repositories found.
+      </p>
+    </div>
   </div>
 </div>