Merge branch 'main' into beta

# Conflicts: # package-lock.json # src/app/app.component.ts # src/components/experience/components/experience/experience.component.ts # src/components/experience/components/experiences/experiences.component.ts # src/components/project/components/project/project.component.ts # src/components/project/components/projects/projects.component.ts # src/service/projects.service.ts
CaptainGlac1er · Sep 2, 2023 · 7f668e0 · 7f668e0
2 parents ce7cabd + 8a52d1e
commit 7f668e0
Show file tree

Hide file tree

Showing 12 changed files with 129 additions and 86 deletions.
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,15 @@
+angular-georgecolgrove
+Copyright (C) 2023  GlacierByte
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
diff --git a/README.md b/README.md
@@ -5,9 +5,9 @@ Replacement for my initial PHP version.
 
 
 ## Status Board
-|Dependencies|devDependencies|Licences|
-|:----------:|:-------------:|:------:|
-| [![dependencies Status](https://david-dm.org/CaptainGlac1er/angular-georgecolgrove/status.svg)](https://david-dm.org/CaptainGlac1er/angular-georgecolgrove) |[![devDependencies Status](https://david-dm.org/CaptainGlac1er/angular-georgecolgrove/dev-status.svg)](https://david-dm.org/CaptainGlac1er/angular-georgecolgrove?type=dev) | [![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2FCaptainGlac1er%2Fangular-georgecolgrove.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2FCaptainGlac1er%2Fangular-georgecolgrove?ref=badge_shield) |
+|                                                                        Dependencies                                                                         |                                                                               devDependencies                                                                               |                                                                                                                  Licences                                                                                                                  |
+|:-----------------------------------------------------------------------------------------------------------------------------------------------------------:|:---------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|:------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|
+| [![dependencies Status](https://david-dm.org/CaptainGlac1er/angular-georgecolgrove/status.svg)](https://david-dm.org/CaptainGlac1er/angular-georgecolgrove) | [![devDependencies Status](https://david-dm.org/CaptainGlac1er/angular-georgecolgrove/dev-status.svg)](https://david-dm.org/CaptainGlac1er/angular-georgecolgrove?type=dev) | [![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2FCaptainGlac1er%2Fangular-georgecolgrove.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2FCaptainGlac1er%2Fangular-georgecolgrove?ref=badge_shield) |
 
 ## Progress:
 [Trello Board](https://trello.com/b/T13W1xU9)
@@ -33,4 +33,4 @@ Run `npm run test` to execute the unit tests via [Karma](https://karma-runner.gi
 Run `npm run start:ssr` to start the server side render server
 
 ## License
-[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2FCaptainGlac1er%2Fangular-georgecolgrove.svg?type=large)](https://app.fossa.io/projects/git%2Bgithub.com%2FCaptainGlac1er%2Fangular-georgecolgrove?ref=badge_large)
+[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2FCaptainGlac1er%2Fangular-georgecolgrove.svg?type=large)](https://app.fossa.io/projects/git%2Bgithub.com%2FCaptainGlac1er%2Fangular-georgecolgrove?ref=badge_large)
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "angular-georgecolgrove",
   "version": "0.2.2",
-  "license": "MIT",
+  "license": "GPL-3.0-only",
   "repository": {
     "type": "git",
     "url": "https://github.com/CaptainGlac1er/angular-georgecolgrove.git"

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -5,7 +5,7 @@ import { environment } from '../environments/environment';
 import { IS_BROWSER } from '../shared/providers';
 
 
-declare let gtag: (...any: any[]) => unknown;
+declare let gtag: (...any: unknown[]) => unknown;
 
 @Component({
   selector: 'app-root',
@@ -28,7 +28,7 @@ export class AppComponent implements OnInit {
       gTagManagerScript.src = `https://www.googletagmanager.com/gtag/js?id=${environment.googleAnalyticsTag}`;
       document.head.appendChild(gTagManagerScript);
 
-      // register google analytics
+      // register Google Analytics
       const gaScript = document.createElement('script');
       gaScript.innerHTML = `
       window.dataLayer = window.dataLayer || [];

diff --git a/src/components/experience/components/experience/experience.component.ts b/src/components/experience/components/experience/experience.component.ts
@@ -5,6 +5,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { Project } from '../../../../interfaces/project';
 import { Title } from '@angular/platform-browser';
 import { IS_BROWSER } from '../../../../shared/providers';
+import { filter, map, switchMap } from 'rxjs';
 
 @Component({
   selector: 'app-experience',
@@ -27,21 +28,23 @@ export class ExperienceComponent implements OnInit {
     private titleService: Title) {}
 
   ngOnInit(): void {
-    this.route.paramMap.subscribe(params => {
-      const company = params.get('company');
-      if (company) {
-        this.experienceService.getJob(company).subscribe(item => {
-          this.job = item;
-          if (this.job === undefined) {
-            return this.router.navigate(['/experiences']);
-          } else {
-            this.titleService.setTitle(`George Walter Colgrove IV - ${this.job.title}`);
-            this.experienceService.getProjectsForJob(this.job).then((value => {
-              this.projectsForJob = value;
-            }));
-          }
-        });
-      }
+    this.route.paramMap.pipe(
+      map(params => params.get('company')),
+      filter(company => !!company),
+      switchMap(company => this.experienceService.getJob(company)),
+      switchMap(job => this.experienceService.getProjectsForJob(job).pipe(map(projects => ({ projects, job }))))
+    ).subscribe(({ projects, job }) => {
+      this.projectsForJob = projects;
+      this.job = job;
+      this.titleService.setTitle(`George Walter Colgrove IV - ${this.job.title}`);
     });
+
+    this.route.paramMap.pipe(
+      map(params => params.get('company')),
+      filter(company => !company),
+    ).subscribe(() => {
+      return this.router.navigate(['/experiences']);
+    })
+
   }
 }
diff --git a/src/components/experience/components/experiences/experiences.component.ts b/src/components/experience/components/experiences/experiences.component.ts
@@ -4,7 +4,7 @@ import { Title } from '@angular/platform-browser';
 import { ExperienceService } from '../../../../service/experience.service';
 import { DataRow } from '../../../../interfaces/data-row';
 import { IS_BROWSER } from '../../../../shared/providers';
-import { filter, map, Observable, shareReplay } from 'rxjs';
+import { EMPTY, filter, map, Observable, shareReplay } from 'rxjs';
 import { Job } from '../../../../interfaces/job';
 
 @Component({
@@ -13,18 +13,24 @@ import { Job } from '../../../../interfaces/job';
   styleUrls: ['./experiences.component.scss', '../../../../shared/css/page-listing.scss']
 })
 export class ExperiencesComponent implements OnInit {
-  jobs$: Observable<DataRow[] | undefined> = this.experienceService.fetchProjects().pipe(
-    filter((jobs): jobs is Job[] => !!jobs),
-    map(jobs => this.experienceService.convertJobArrayToTileDataArray(jobs)),
-    shareReplay(1)
-  );
+  jobs$: Observable<DataRow[]>;
 
   constructor(
     private route: ActivatedRoute,
     private experienceService: ExperienceService,
     private router: Router,
     @Inject(IS_BROWSER) private isBrowser: boolean,
-    private titleService: Title) {}
+    private titleService: Title) {
+    if(isBrowser) {
+      this.jobs$ = this.experienceService.fetchProjects().pipe(
+        filter((jobs): jobs is Job[] => !!jobs),
+        map(jobs => this.experienceService.convertJobArrayToTileDataArray(jobs)),
+        shareReplay(1)
+      );
+    } else {
+      this.jobs$ = EMPTY;
+    }
+  }
 
   ngOnInit(): void {
     this.titleService.setTitle(`George Walter Colgrove IV - Jobs`);

diff --git a/src/components/project/components/project/project.component.ts b/src/components/project/components/project/project.component.ts
@@ -3,6 +3,7 @@ import { Project } from '../../../../interfaces/project';
 import { ActivatedRoute, Router } from '@angular/router';
 import { ProjectsService } from '../../../../service/projects.service';
 import { Title } from '@angular/platform-browser';
+import { filter, map, switchMap } from 'rxjs';
 
 @Component({
   selector: 'app-project',
@@ -24,17 +25,20 @@ export class ProjectComponent implements OnInit {
 
   ngOnInit(): void {
     this.titleService.setTitle(`George Walter Colgrove IV - project`);
-    this.route.paramMap.subscribe(params => {
-      const project = params.get('project');
-      if (project) {
-        this.projectService.getProject(project).then(value => {
-          if (value === undefined) {
-            return this.router.navigate(['/projects']);
-          }
-          this.project = value;
-          this.titleService.setTitle(`George Walter Colgrove IV - ${this.project.title}`);
-        });
-      }
+    this.route.paramMap.pipe(
+      map(params => params.get('project')),
+      filter(project => !!project),
+      switchMap(project => this.projectService.getProject(project))
+    ).subscribe(value => {
+      this.project = value;
+      this.titleService.setTitle(`George Walter Colgrove IV - ${this.project.title}`);
     });
+
+    this.route.paramMap.pipe(
+      map(params => params.get('project')),
+      filter(project => !project),
+    ).subscribe(() => {
+      return this.router.navigate(['/projects']);
+    })
   }
 }
diff --git a/src/components/project/components/projects/projects.component.html b/src/components/project/components/projects/projects.component.html
@@ -1,14 +1,27 @@
 <div class="listing-body">
-    <a *ngFor="let aProject of projects | orderDate:'newestFirst'" [routerLink]="['/projects', aProject.tag]"
-       class="listing-row listing-single-column">
-        <h3 class="listing-title">
-            {{aProject.title}}
-        </h3>
-        <h4 class="listing-subtitle">
-            {{aProject.startDate | date:'shortDate'}} - {{(aProject.endDate | date:'shortDate') || 'Current'}}
-        </h4>
-        <div>
-            {{aProject.shortDescription}}
+    <ng-container *ngIf="projects$ | async as projects; else loading">
+        <a *ngFor="let aProject of projects | orderDate:'newestFirst'" [routerLink]="['/projects', aProject.tag]"
+           class="listing-row listing-single-column">
+            <h3 class="listing-title">
+                {{aProject.title}}
+            </h3>
+            <h4 class="listing-subtitle">
+                {{aProject.startDate | date:'shortDate'}} - {{(aProject.endDate | date:'shortDate') || 'Current'}}
+            </h4>
+            <div>
+                {{aProject.shortDescription}}
+            </div>
+        </a>
+    </ng-container>
+    <ng-template #loading>
+        <div class="listing-row listing-single-column">
+            <div class="loading"></div>
         </div>
-    </a>
+        <div class="listing-row listing-single-column">
+            <div class="loading"></div>
+        </div>
+        <div class="listing-row listing-single-column">
+            <div class="loading"></div>
+        </div>
+    </ng-template>
 </div>
diff --git a/src/components/project/components/projects/projects.component.ts b/src/components/project/components/projects/projects.component.ts
@@ -4,25 +4,31 @@ import { ProjectsService } from '../../../../service/projects.service';
 import { Project } from '../../../../interfaces/project';
 import { Title } from '@angular/platform-browser';
 import { IS_BROWSER } from '../../../../shared/providers';
+import { EMPTY, Observable, shareReplay } from 'rxjs';
 
 @Component({
   selector: 'app-projects',
   templateUrl: './projects.component.html',
   styleUrls: ['./projects.component.scss', '../../../../shared/css/page-listing.scss']
 })
 export class ProjectsComponent implements OnInit {
-  projects: Project[] | undefined;
+  projects$: Observable<Project[]>;
 
   constructor(
     private route: ActivatedRoute,
     private router: Router,
     private projectService: ProjectsService,
     private titleService: Title,
     @Inject(IS_BROWSER) private isBrowser: boolean
-    ) {}
+    ) {
+    if(isBrowser) {
+      this.projects$ = this.projectService.getProjectsData().pipe(shareReplay(1))
+    } else {
+      this.projects$ = EMPTY;
+    }
+  }
 
   ngOnInit(): void {
-    this.projectService.getProjectsData().then(value => this.projects = value);
     this.titleService.setTitle('George Walter Colgrove IV - Projects');
   }
 

diff --git a/src/service/experience.service.spec.ts b/src/service/experience.service.spec.ts
@@ -5,6 +5,7 @@ import Spy = jasmine.Spy;
 import { ProjectsService } from './projects.service';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { IS_BROWSER } from '../shared/providers';
+import { of } from 'rxjs';
 
 describe('ExperienceService', () => {
   let projectService: ProjectsService;
@@ -33,9 +34,12 @@ describe('ExperienceService', () => {
       spy = spyOn(projectService, 'getProjectsForJob');
     });
 
-    it('should return empty array with an undefined job', async () => {
-      spy.withArgs(undefined).and.returnValue(Promise.resolve([]));
-      expect(await service.getProjectsForJob(undefined)).toEqual([]);
+    it('should return empty array with an undefined job', (done) => {
+      spy.withArgs(undefined).and.returnValue(of([]));
+      service.getProjectsForJob(undefined).subscribe(projects => {
+        expect(projects).toEqual([]);
+        done();
+      });
     })
 
   })

diff --git a/src/service/experience.service.ts b/src/service/experience.service.ts
@@ -46,7 +46,7 @@ export class ExperienceService {
     );
   }
 
-  async getProjectsForJob(job: Job): Promise<Project[]> {
+  getProjectsForJob(job: Job): Observable<Project[]> {
     return this.projectService.getProjectsForJob(job);
   }
 }
diff --git a/src/service/projects.service.ts b/src/service/projects.service.ts
@@ -4,6 +4,7 @@ import { Job } from '../interfaces/job';
 import { HttpClient } from '@angular/common/http';
 import { environment } from '../environments/environment';
 import { IS_BROWSER } from '../shared/providers';
+import { map, Observable, of } from 'rxjs';
 
 @Injectable({
   providedIn: 'root'
@@ -15,44 +16,35 @@ export class ProjectsService {
     @Inject(IS_BROWSER) private isBrowser: boolean
   ) {}
 
-  async fetchProjects(): Promise<Project[] | undefined> {
+  fetchProjects(): Observable<Project[]> {
     if (this.isBrowser) {
-      return this.http.get<Project[]>(`${environment.cdn}/data/projects.json`).toPromise();
+      return this.http.get<Project[]>(`${environment.cdn}/data/projects.json`);
     }
-    return [];
+    return of([]);
   }
 
-  async getProjectsData(): Promise<Project[] | undefined> {
+  getProjectsData(): Observable<Project[]> {
     if(this.isBrowser) {
       return this.fetchProjects();
     }
-    return undefined;
+    return of([]);
   }
 
-  async getProject(tag: string): Promise<Project | undefined> {
-    const data = await this.getProjectsData();
-    if(!data) {
-      return undefined;
-    }
-    for (const item of data) {
-      if (item.tag === tag) {
-        return item;
-      }
-    }
-    return undefined;
+  getProject(tag: string): Observable<Project | undefined> {
+    return this.getProjectsData().pipe(
+      map(projects => projects.find(project => project.tag === tag))
+    )
   }
 
-  async getProjectsForJob(job: Job): Promise<Project[]> {
-    const projects: Project[] = [];
-    const data = await this.getProjectsData();
-    if (!data) {
-      return [];
-    }
-    for (const item of data) {
-      if (item.job === job.tag) {
-        projects.push(item);
-      }
-    }
-    return projects;
+  getProjectsForJob(job: Job): Observable<Project[]> {
+    return this.getProjectsData().pipe(
+      map(projects => projects.reduce<Project[]>((previousValue, currentValue) => {
+        console.log(currentValue, job)
+        if(currentValue.job === job.tag) {
+          previousValue.push(currentValue)
+        }
+        return previousValue;
+      }, []))
+    )
   }
 }