chore: update fork (#10)

* feat(routing): add routing per tab, ref: #7 (azerothcore#95)

* fix: watchers using subscriber_count var azerothcore#96 (azerothcore#97)

* fix: watchers using subscriber_count var azerothcore#96

* chore: restore package-lock.json

* doc: update README.md

* Show all modules from API (azerothcore#98)

* Show all modules from API

* Small improvements

* Remove unused imports

* chore: apply prettier

---------

Co-authored-by: drendog <[email protected]>
Co-authored-by: Mickaël Mauger <[email protected]>

README.md

@@ -1,27 +1,36 @@
 # Git Catalogue
 
-# [Live Demo](https://unict-dmi.github.io/git-catalogue/#/home)
+This is a generic project which allow to create a catalogue for your GitHub organization using the GitHub API.
 
-## Development server
+Example:
+- https://www.azerothcore.org/catalogue.html (the default version of the catalogue)
+- https://unict-dmi.github.io/git-catalogue/#/home (fork by another open-source community)
 
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
 
-## Code scaffolding
+## Development
 
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+This project is written with the Angular framework, to run it locally you can run:
 
-## Build
+```bash
+npm install
+npm start
+```
 
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
+It should work smootly using:
 
-## Running unit tests
+```
+node v14.15.1
+npm 6.14.8
+```
 
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+Feel free to use it and create your fork, don't forget to create a PR about it.
 
-## Running end-to-end tests
+### TODO
+- make it more customizable, let any developer to change some specific page content without creating any git conflict
+- show all repositories in the catalogue ( https://github.com/azerothcore/git-catalogue/issues/91 )
 
-Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
+### Credits
 
-## Further help
+- [Deku](https://github.com/deku) (original author of the [previous implementation](https://github.com/azerothcore/catalogue))
+- [Helias](https://github.com/Helias) (author and mantainer of the current catalogue version, contact me on Discord!)
 
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).

src/@types/index.d.ts

@@ -19,6 +19,11 @@ export type User = {
   site_admin: boolean;
 };
 
+export type RepositoriesPage = {
+  total_count: number;
+  items: Repository[];
+};
+
 export type Repository = {
   id: number;
   node_id: string;

src/app/home/home.component.html

@@ -47,7 +47,7 @@
 
           <mat-paginator
             [pageIndex]="page"
-            [length]="items.items.length"
+            [length]="items.length"
             [pageSize]="catalogueService.CONF.pageSize"
             (page)="onPageChange($event)"
             [hidePageSize]="true"

src/app/home/home.component.ts

@@ -35,14 +35,13 @@ export class HomeComponent {
     const index = tab.index;
     const tabName = Object.keys(this.catalogueService.CONF.tabs)[index];
     const path = `/tab${this.catalogueService.CONF.tabs[tabName].path}`;
-
     if (this.location.path() !== path) {
       this.location.go(path);
     }
   }
 
-  currentPageItems(modules: { items: Repository[] }): Repository[] {
-    let filteredItems = modules.items;
+  currentPageItems(modules: Repository[]): Repository[] {
+    let filteredItems = modules;
     if (!!this.search) {
       filteredItems = filteredItems.filter((item) => item.name.toLowerCase().indexOf(this.search.toLowerCase()) > -1);
     }

src/app/repo-details/repo-details.component.html

@@ -43,7 +43,7 @@ <h3 class="mt-3">About this repo</h3>
             ></a>
           </li>
           <li>
-            <fa-icon [icon]="faEye"></fa-icon> Watchers: <span class="float-right">{{ data.repo.watchers_count }}</span>
+            <fa-icon [icon]="faEye"></fa-icon> Watchers: <span class="float-right">{{ data.repo.subscribers_count }}</span>
           </li>
           <li>
             <fa-icon [icon]="faStar"></fa-icon> Stars: <span class="float-right">{{ data.repo.stargazers_count }}</span>

src/app/services/catalogue/catalogue.service.ts

@@ -1,18 +1,17 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { Location } from '@angular/common';
 import { Observable, of } from 'rxjs';
-import { tap } from 'rxjs/operators';
-import { Repository } from 'src/@types';
+import { map, reduce, tap } from 'rxjs/operators';
+import { Repository, RepositoriesPage } from 'src/@types';
 import { Config, Tab } from './catalogue.model';
 
 @Injectable({
   providedIn: 'root',
 })
 export class CatalogueService {
   CONF: Config;
-  items$: Record<string, Observable<Repository>> = {};
+  items$: Record<string, Observable<Repository[]>> = {};
 
   private configURL = 'assets/default.json';
 
@@ -26,9 +25,9 @@ export class CatalogueService {
     });
   }
 
-  private getLocalItems(tab: Tab): Observable<Repository> {
+  private getLocalItems(tab: Tab): Observable<Repository[]> {
     const { org = '', topic = '' } = tab;
-    const key = `${this.CONF.page}-${this.CONF.perPage}-${org}-${topic}`;
+    const key = `${org}-${topic}`;
     const item = localStorage.getItem(key);
 
     if (item && !this.expireMinutes(30, JSON.parse(item).timeDate)) {
@@ -38,16 +37,47 @@ export class CatalogueService {
     const topicFilter = topic ? `+topic:${topic}` : '';
     const orgFilter = org ? `org:${org}+` : '';
 
-    return this.getFromAPI(
-      `https://api.github.com/search/repositories?page=${this.CONF.page}&per_page=${this.CONF.perPage}&q=${orgFilter}fork:true${topicFilter}+sort:stars`,
-      key,
-    );
+    const perPage = this.CONF.perPage;
+    let totalSize = null;
+
+    const getPage = (page: number) => {
+      return this.http.get<RepositoriesPage>(
+        `https://api.github.com/search/repositories?page=${page}&per_page=${this.CONF.perPage}&q=${orgFilter}fork:true${topicFilter}+sort:stars`,
+      );
+    };
+
+    const pages$ = new Observable<Repository[]>((observer) => {
+      const emitItems = (page) => {
+        getPage(page)
+          .pipe(
+            map((res) => {
+              if (!totalSize) {
+                totalSize = res.total_count;
+              }
+              return res.items;
+            }),
+          )
+          .subscribe((items) => {
+            observer.next(items);
+            const hasNextPage = perPage * page < totalSize;
+            if (hasNextPage) {
+              emitItems(page + 1);
+            } else {
+              observer.complete();
+            }
+          });
+      };
+
+      emitItems(1);
+    }).pipe(reduce((acc, val) => acc.concat(val), []));
+
+    return this.storable(pages$, key);
   }
 
-  getFromAPI(URL: string, key: string): Observable<Repository> {
-    return this.http.get(URL).pipe(
+  storable<T extends Repository | Repository[]>(obs: Observable<T>, key: string): Observable<T> {
+    return obs.pipe(
       tap({
-        next: (data: Repository) => {
+        next: (data: any) => {
           localStorage.setItem(key, JSON.stringify({ timeDate: new Date().getTime(), value: data }));
         },
         error: (err) => {
@@ -72,7 +102,7 @@ export class CatalogueService {
       return of(JSON.parse(item).value);
     }
 
-    return this.getFromAPI(`https://api.github.com/repositories/${id}`, key);
+    return this.storable(this.http.get<Repository>(`https://api.github.com/repositories/${id}`), key);
   }
 
   get confTabsKeys(): string[] {
@@ -84,19 +114,21 @@ export class CatalogueService {
   }
 
   get tabIndex(): number {
-    if(!this.confTabPaths) {
+    if (!this.confTabPaths) {
       return -1;
     }
 
     const tabName = this.route.snapshot.paramMap.get('tab');
     return tabName ? this.confTabPaths.indexOf(`/${tabName}`) : 0;
   }
 
-  getRawReadmeDefault( repo: Repository ): Observable<string> {
-    return this.getRawReadme( repo.full_name, repo.default_branch );
+  getRawReadmeDefault(repo: Repository): Observable<string> {
+    return this.getRawReadme(repo.full_name, repo.default_branch);
   }
-
-  getRawReadme(repo: string, default_branch: string): Observable<string> {
-    return this.http.get(`https://raw.githubusercontent.com/${repo}/${default_branch}/README.md`, { responseType: 'text' });
+
+  getRawReadme(repo: string, defaultBranch: string): Observable<string> {
+    return this.http.get(`https://raw.githubusercontent.com/${repo}/${defaultBranch}/README.md?time=${Date.now()}`, {
+      responseType: 'text',
+    });
   }
 }

src/app/services/resolvers/repo-details-resolver.service.ts

@@ -8,7 +8,7 @@ import { CatalogueService } from '../catalogue/catalogue.service';
 export type RepoDetailsData = {
   repo: Repository;
   readme: string
-}
+};
 
 @Injectable({
   providedIn: 'root'
@@ -21,7 +21,7 @@ export class RepoDetailsResolverService implements Resolve<RepoDetailsData> {
     const id = route.params.id;
 
     const repo$ = this.catalogueService.getLocalRepo(id);
-    
+
     return repo$.pipe(
       switchMap( (repo) => forkJoin({
         repo: of(repo),