From 51e5c0df827038c459f7082fda8c24009e78bc01 Mon Sep 17 00:00:00 2001
From: Luke <lukas.trombach@auckland.ac.nz>
Date: Tue, 19 Oct 2021 13:42:58 +1300
Subject: [PATCH 01/39] Squashed commit of the following:

commit 2f22e091c547c9e647e9f535b3bb81543b685e3f
Author: Luke <lukas.trombach@auckland.ac.nz>
Date:   Thu Oct 14 15:31:14 2021 +1300

    fixed single quotes

commit 2dc309e3fc24270c6f30a4d21c0fb47ca0c20a4e
Author: Luke <lukas.trombach@auckland.ac.nz>
Date:   Thu Oct 14 15:12:24 2021 +1300

    removed subhub list from subhub component

commit 53b98473b68f6634cc785e8f13c16dfe04d9c78d
Author: Luke <lukas.trombach@auckland.ac.nz>
Date:   Thu Oct 14 15:11:23 2021 +1300

    removed software list from software component

commit fcb5263b6353cb77b3348aad52cbf92c1bb41eff
Author: Luke <lukas.trombach@auckland.ac.nz>
Date:   Thu Oct 14 15:09:07 2021 +1300

    removed service list from service component

commit 9207298e825167c05c2e18e4819d3aff8e4cabfd
Author: Luke <lukas.trombach@auckland.ac.nz>
Date:   Thu Oct 14 15:07:22 2021 +1300

    removed funding list from funding component

commit f5091c09e759d97916cacc18c8387eca08170834
Author: Luke <lukas.trombach@auckland.ac.nz>
Date:   Thu Oct 14 15:04:12 2021 +1300

    removed event list from event component

commit bd603898e50660672c3365e2c18c58ac8887a723
Author: Luke <lukas.trombach@auckland.ac.nz>
Date:   Thu Oct 14 15:00:24 2021 +1300

    removed all equipment query

commit feb33a4bf4e42662f5ee52c905e5d8070aaf6b77
Author: Luke <lukas.trombach@auckland.ac.nz>
Date:   Thu Oct 14 14:53:26 2021 +1300

    removed equipment list from equipment component

commit 9c811a8f114b8cc6111ad45c10e37f4060b863f7
Author: Luke <lukas.trombach@auckland.ac.nz>
Date:   Thu Oct 14 14:49:28 2021 +1300

    removed case study list from case study component

commit 22c4b6d4c44b55509a510d3ea6c6536816629ebf
Author: Luke <lukas.trombach@auckland.ac.nz>
Date:   Thu Oct 14 14:43:57 2021 +1300

    removed articles list from article component

commit 8c3e32fdc9c229b492b3dcafcc8aac6a17375aca
Author: Luke <lukas.trombach@auckland.ac.nz>
Date:   Thu Oct 14 14:19:33 2021 +1300

    broke out subhub list

commit b0bbef7dd45ba8342c55bea76cb46d6bb094b18b
Author: Luke <lukas.trombach@auckland.ac.nz>
Date:   Thu Oct 14 13:46:42 2021 +1300

    broke out software list

commit 0ce590baae043a2a43ec5f473f7e957bc130250a
Author: Luke <lukas.trombach@auckland.ac.nz>
Date:   Thu Oct 14 13:33:38 2021 +1300

    broke out service list

commit ac7f5cdbba687728c5426ff809c75d9006a8996b
Author: Luke <lukas.trombach@auckland.ac.nz>
Date:   Thu Oct 14 13:04:01 2021 +1300

    changed import for funding route

commit 7b0289b2c31a85da36067c0a3798bec1e61e8708
Author: Luke <lukas.trombach@auckland.ac.nz>
Date:   Thu Oct 14 12:35:12 2021 +1300

    broke out funding list

commit 877c6744a9d42e9bcd684665d2af656dc910dae7
Author: Luke <lukas.trombach@auckland.ac.nz>
Date:   Thu Oct 14 11:48:14 2021 +1300

    broke out event list

commit 8f14525e7f4425e6dd410a41b7290ecee1c4bc21
Author: Luke <lukas.trombach@auckland.ac.nz>
Date:   Thu Oct 14 11:28:38 2021 +1300

    broke out equipment list

commit 4b76f8b423d6c3087e8177c2c1d0eccfc1aaf599
Author: Luke <lukas.trombach@auckland.ac.nz>
Date:   Thu Oct 14 11:17:19 2021 +1300

    broke out case study list

commit 51d557cea4cdb520608d5839c8a715aa6a5fb9f1
Author: Luke <lukas.trombach@auckland.ac.nz>
Date:   Thu Oct 14 11:06:45 2021 +1300

    unsubscribe on destroy

commit 85446160d976d5b1f95a81ca1c99ca0a97f96fed
Merge: c48690f7 486d2893
Author: Luke <lukas.trombach@auckland.ac.nz>
Date:   Thu Oct 14 10:32:34 2021 +1300

    Merge branch 'master' into build-new-content-types-list-page

commit c48690f7c630d3a505ca0a2de031489fa60026f9
Author: Luke <lukas.trombach@auckland.ac.nz>
Date:   Thu Oct 14 10:32:12 2021 +1300

    broke out article list
---
 .../article-list/article-list.component.html  |   1 +
 .../article-list/article-list.component.scss  |   0
 .../article-list.component.spec.ts            |  25 ++++
 .../article-list/article-list.component.ts    |  30 +++++
 .../article.component.html}                   |   8 --
 .../article.component.scss}                   |   0
 .../article.component.spec.ts}                |   9 +-
 .../article.component.ts}                     |  89 ++++++-------
 .../articles/articles-routing.module.ts       |   6 +-
 .../components/articles/articles.module.ts    |   6 +-
 .../case-study-list.component.html            |   1 +
 .../case-study-list.component.scss            |   0
 .../case-study-list.component.spec.ts         |  25 ++++
 .../case-study-list.component.ts              |  30 +++++
 .../casestudys/case-study-routing.module.ts   |   6 +-
 .../case-study.component.html                 |   8 --
 .../case-study.component.scss                 |   0
 .../case-study.component.spec.ts              |   0
 .../{ => case-study}/case-study.component.ts  |  73 ++++-------
 .../casestudys/casestudys.module.ts           |   6 +-
 .../equipment-list.component.html             |   1 +
 .../equipment-list.component.scss             |   0
 .../equipment-list.component.spec.ts          |  25 ++++
 .../equipment-list.component.ts               |  30 +++++
 .../equipments/equipment-routing.module.ts    |   6 +-
 .../{ => equipment}/equipment.component.html  |   8 --
 .../{ => equipment}/equipment.component.scss  |   0
 .../equipment.component.spec.ts               |   0
 .../{ => equipment}/equipment.component.ts    |  77 +++++-------
 .../equipments/equipments.module.ts           |   5 +-
 .../event-list/event-list.component.html      |   1 +
 .../event-list/event-list.component.scss      |   0
 .../event-list/event-list.component.spec.ts   |  25 ++++
 .../events/event-list/event-list.component.ts |  29 +++++
 ...g.module.ts.ts => event-routing.module.ts} |   6 +-
 .../event.component.html}                     |   8 --
 .../event.component.scss}                     |   0
 .../event.component.spec.ts}                  |  12 +-
 .../event.component.ts}                       |  29 +----
 .../app/components/events/events.module.ts    |   7 +-
 .../funding-list/funding-list.component.html  |   1 +
 .../funding-list/funding-list.component.scss  |   0
 .../funding-list.component.spec.ts            |  25 ++++
 .../funding-list/funding-list.component.ts    |  30 +++++
 .../fundings/funding-routing.module.ts        |   6 +-
 .../funding.component.html}                   |   8 --
 .../funding.component.scss}                   |   0
 .../funding.component.spec.ts}                |  12 +-
 .../funding.component.ts}                     |  29 +----
 .../components/fundings/fundings.module.ts    |  10 +-
 .../service-list/service-list.component.html  |   1 +
 .../service-list/service-list.component.scss  |   0
 .../service-list.component.spec.ts            |  25 ++++
 .../service-list/service-list.component.ts    |  30 +++++
 .../service.component.html}                   |   8 --
 .../service.component.scss}                   |   0
 .../service.component.spec.ts}                |  12 +-
 .../service.component.ts}                     |  29 +----
 .../services/services-routing.module.ts       |   6 +-
 .../components/services/services.module.ts    |   5 +-
 .../collection-list.component.html            | 117 ++++++++++++------
 .../software-list.component.html              |   1 +
 .../software-list.component.scss              |   0
 .../software-list.component.spec.ts           |  25 ++++
 .../software-list/software-list.component.ts  |  30 +++++
 .../softwares/software-routing.module.ts      |   6 +-
 .../software.component.html}                  |   8 --
 .../software.component.scss}                  |   0
 .../software.component.spec.ts}               |  12 +-
 .../software.component.ts}                    |  87 +++++--------
 .../components/softwares/softwares.module.ts  |   5 +-
 .../subhub-list/subhub-list.component.html    |   1 +
 .../subhub-list/subhub-list.component.scss    |   0
 .../subhub-list/subhub-list.component.spec.ts |  25 ++++
 .../subhub-list/subhub-list.component.ts      |  29 +++++
 .../subhub.component.html}                    |  10 +-
 .../subhub.component.scss}                    |   0
 .../subhub.component.spec.ts}                 |  20 ++-
 .../subhub.component.ts}                      |  29 +----
 .../subhubs/subhubs-routing.module.ts         |   6 +-
 .../app/components/subhubs/subhubs.module.ts  |   7 +-
 research-hub-web/src/app/routing/routing.ts   |  60 +++------
 82 files changed, 773 insertions(+), 534 deletions(-)
 create mode 100644 research-hub-web/src/app/components/articles/article-list/article-list.component.html
 create mode 100644 research-hub-web/src/app/components/articles/article-list/article-list.component.scss
 create mode 100644 research-hub-web/src/app/components/articles/article-list/article-list.component.spec.ts
 create mode 100644 research-hub-web/src/app/components/articles/article-list/article-list.component.ts
 rename research-hub-web/src/app/components/articles/{articles.component.html => article/article.component.html} (94%)
 rename research-hub-web/src/app/components/articles/{articles.component.scss => article/article.component.scss} (100%)
 rename research-hub-web/src/app/components/articles/{articles.component.spec.ts => article/article.component.spec.ts} (96%)
 rename research-hub-web/src/app/components/articles/{articles.component.ts => article/article.component.ts} (63%)
 create mode 100644 research-hub-web/src/app/components/casestudys/case-study-list/case-study-list.component.html
 create mode 100644 research-hub-web/src/app/components/casestudys/case-study-list/case-study-list.component.scss
 create mode 100644 research-hub-web/src/app/components/casestudys/case-study-list/case-study-list.component.spec.ts
 create mode 100644 research-hub-web/src/app/components/casestudys/case-study-list/case-study-list.component.ts
 rename research-hub-web/src/app/components/casestudys/{ => case-study}/case-study.component.html (93%)
 rename research-hub-web/src/app/components/casestudys/{ => case-study}/case-study.component.scss (100%)
 rename research-hub-web/src/app/components/casestudys/{ => case-study}/case-study.component.spec.ts (100%)
 rename research-hub-web/src/app/components/casestudys/{ => case-study}/case-study.component.ts (68%)
 create mode 100644 research-hub-web/src/app/components/equipments/equipment-list/equipment-list.component.html
 create mode 100644 research-hub-web/src/app/components/equipments/equipment-list/equipment-list.component.scss
 create mode 100644 research-hub-web/src/app/components/equipments/equipment-list/equipment-list.component.spec.ts
 create mode 100644 research-hub-web/src/app/components/equipments/equipment-list/equipment-list.component.ts
 rename research-hub-web/src/app/components/equipments/{ => equipment}/equipment.component.html (96%)
 rename research-hub-web/src/app/components/equipments/{ => equipment}/equipment.component.scss (100%)
 rename research-hub-web/src/app/components/equipments/{ => equipment}/equipment.component.spec.ts (100%)
 rename research-hub-web/src/app/components/equipments/{ => equipment}/equipment.component.ts (64%)
 create mode 100644 research-hub-web/src/app/components/events/event-list/event-list.component.html
 create mode 100644 research-hub-web/src/app/components/events/event-list/event-list.component.scss
 create mode 100644 research-hub-web/src/app/components/events/event-list/event-list.component.spec.ts
 create mode 100644 research-hub-web/src/app/components/events/event-list/event-list.component.ts
 rename research-hub-web/src/app/components/events/{event-routing.module.ts.ts => event-routing.module.ts} (52%)
 rename research-hub-web/src/app/components/events/{events.component.html => event/event.component.html} (95%)
 rename research-hub-web/src/app/components/events/{events.component.scss => event/event.component.scss} (100%)
 rename research-hub-web/src/app/components/events/{events.component.spec.ts => event/event.component.spec.ts} (91%)
 rename research-hub-web/src/app/components/events/{events.component.ts => event/event.component.ts} (84%)
 create mode 100644 research-hub-web/src/app/components/fundings/funding-list/funding-list.component.html
 create mode 100644 research-hub-web/src/app/components/fundings/funding-list/funding-list.component.scss
 create mode 100644 research-hub-web/src/app/components/fundings/funding-list/funding-list.component.spec.ts
 create mode 100644 research-hub-web/src/app/components/fundings/funding-list/funding-list.component.ts
 rename research-hub-web/src/app/components/fundings/{fundings.component.html => funding/funding.component.html} (96%)
 rename research-hub-web/src/app/components/fundings/{fundings.component.scss => funding/funding.component.scss} (100%)
 rename research-hub-web/src/app/components/fundings/{fundings.component.spec.ts => funding/funding.component.spec.ts} (91%)
 rename research-hub-web/src/app/components/fundings/{fundings.component.ts => funding/funding.component.ts} (84%)
 create mode 100644 research-hub-web/src/app/components/services/service-list/service-list.component.html
 create mode 100644 research-hub-web/src/app/components/services/service-list/service-list.component.scss
 create mode 100644 research-hub-web/src/app/components/services/service-list/service-list.component.spec.ts
 create mode 100644 research-hub-web/src/app/components/services/service-list/service-list.component.ts
 rename research-hub-web/src/app/components/services/{services.component.html => service/service.component.html} (94%)
 rename research-hub-web/src/app/components/services/{services.component.scss => service/service.component.scss} (100%)
 rename research-hub-web/src/app/components/services/{services.component.spec.ts => service/service.component.spec.ts} (91%)
 rename research-hub-web/src/app/components/services/{services.component.ts => service/service.component.ts} (84%)
 create mode 100644 research-hub-web/src/app/components/softwares/software-list/software-list.component.html
 create mode 100644 research-hub-web/src/app/components/softwares/software-list/software-list.component.scss
 create mode 100644 research-hub-web/src/app/components/softwares/software-list/software-list.component.spec.ts
 create mode 100644 research-hub-web/src/app/components/softwares/software-list/software-list.component.ts
 rename research-hub-web/src/app/components/softwares/{softwares.component.html => software/software.component.html} (95%)
 rename research-hub-web/src/app/components/softwares/{softwares.component.scss => software/software.component.scss} (100%)
 rename research-hub-web/src/app/components/softwares/{softwares.component.spec.ts => software/software.component.spec.ts} (91%)
 rename research-hub-web/src/app/components/softwares/{softwares.component.ts => software/software.component.ts} (59%)
 create mode 100644 research-hub-web/src/app/components/subhubs/subhub-list/subhub-list.component.html
 create mode 100644 research-hub-web/src/app/components/subhubs/subhub-list/subhub-list.component.scss
 create mode 100644 research-hub-web/src/app/components/subhubs/subhub-list/subhub-list.component.spec.ts
 create mode 100644 research-hub-web/src/app/components/subhubs/subhub-list/subhub-list.component.ts
 rename research-hub-web/src/app/components/subhubs/{subhubs.component.html => subhub/subhub.component.html} (93%)
 rename research-hub-web/src/app/components/subhubs/{subhubs.component.scss => subhub/subhub.component.scss} (100%)
 rename research-hub-web/src/app/components/subhubs/{subhubs.component.spec.ts => subhub/subhub.component.spec.ts} (96%)
 rename research-hub-web/src/app/components/subhubs/{subhubs.component.ts => subhub/subhub.component.ts} (81%)

diff --git a/research-hub-web/src/app/components/articles/article-list/article-list.component.html b/research-hub-web/src/app/components/articles/article-list/article-list.component.html
new file mode 100644
index 000000000..a1470c85a
--- /dev/null
+++ b/research-hub-web/src/app/components/articles/article-list/article-list.component.html
@@ -0,0 +1 @@
+<app-collection-list [collection]="articles"></app-collection-list>
diff --git a/research-hub-web/src/app/components/articles/article-list/article-list.component.scss b/research-hub-web/src/app/components/articles/article-list/article-list.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/research-hub-web/src/app/components/articles/article-list/article-list.component.spec.ts b/research-hub-web/src/app/components/articles/article-list/article-list.component.spec.ts
new file mode 100644
index 000000000..921ecab9d
--- /dev/null
+++ b/research-hub-web/src/app/components/articles/article-list/article-list.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ArticleListComponent } from './article-list.component';
+
+describe('ArticleListComponent', () => {
+  let component: ArticleListComponent;
+  let fixture: ComponentFixture<ArticleListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ArticleListComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ArticleListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/research-hub-web/src/app/components/articles/article-list/article-list.component.ts b/research-hub-web/src/app/components/articles/article-list/article-list.component.ts
new file mode 100644
index 000000000..3da5152b7
--- /dev/null
+++ b/research-hub-web/src/app/components/articles/article-list/article-list.component.ts
@@ -0,0 +1,30 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { AllArticlesGQL, ArticleCollection } from '@app/graphql/schema';
+import { Subscription } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+@Component({
+  selector: 'app-article-list',
+  templateUrl: './article-list.component.html',
+  styleUrls: ['./article-list.component.scss']
+})
+export class ArticleListComponent implements OnInit, OnDestroy {
+  public articles: ArticleCollection
+
+  private subscription = new Subscription();
+
+  constructor(
+    private allArticlesGQL: AllArticlesGQL
+  ) { }
+
+  ngOnInit(): void {
+    this.subscription.add(this.allArticlesGQL.fetch().pipe(
+      map((result) => result.data.articleCollection as ArticleCollection)
+    ).subscribe(collection => this.articles = collection));
+  }
+
+  ngOnDestroy(): void {
+    this.subscription.unsubscribe();
+  }
+
+}
diff --git a/research-hub-web/src/app/components/articles/articles.component.html b/research-hub-web/src/app/components/articles/article/article.component.html
similarity index 94%
rename from research-hub-web/src/app/components/articles/articles.component.html
rename to research-hub-web/src/app/components/articles/article/article.component.html
index 3343b3d08..4df2769ed 100644
--- a/research-hub-web/src/app/components/articles/articles.component.html
+++ b/research-hub-web/src/app/components/articles/article/article.component.html
@@ -1,11 +1,3 @@
-<!-- If we're displaying a collection of articles-->
-<div
-    *ngIf="allArticles$ | async as allArticles"
-    class="site-padding margin-bottom top-padding"
-    ngClass.lt-md="site-padding-mobile margin-bottom top-padding">
-    <app-collection-list [collection]="allArticles"></app-collection-list>
-</div>
-
 <div id="article-container" *ngIf="article | async as article">
 
     <!-- Templates -->
diff --git a/research-hub-web/src/app/components/articles/articles.component.scss b/research-hub-web/src/app/components/articles/article/article.component.scss
similarity index 100%
rename from research-hub-web/src/app/components/articles/articles.component.scss
rename to research-hub-web/src/app/components/articles/article/article.component.scss
diff --git a/research-hub-web/src/app/components/articles/articles.component.spec.ts b/research-hub-web/src/app/components/articles/article/article.component.spec.ts
similarity index 96%
rename from research-hub-web/src/app/components/articles/articles.component.spec.ts
rename to research-hub-web/src/app/components/articles/article/article.component.spec.ts
index 19888a91a..2a0ce76fa 100644
--- a/research-hub-web/src/app/components/articles/articles.component.spec.ts
+++ b/research-hub-web/src/app/components/articles/article/article.component.spec.ts
@@ -1,11 +1,10 @@
 import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
-import { PageTitleService } from '../../services/page-title.service';
-import { ArticlesComponent } from './articles.component';
+import { PageTitleService } from '@services/page-title.service';
+import { ArticlesComponent } from './article.component';
 import { ApolloTestingController, ApolloTestingModule } from 'apollo-angular/testing';
-import { RouterModule, ActivatedRoute, convertToParamMap, Router } from '@angular/router';
-import { By } from '@angular/platform-browser';
+import { ActivatedRoute } from '@angular/router';
 import { Observable, of } from 'rxjs';
-import { ArticleCollection, AllArticlesGQL, Article } from '@graphql/schema';
+import { ArticleCollection, Article } from '@graphql/schema';
 import { CommonModule } from '@angular/common';
 import { MaterialModule } from '@app/app.material.module';
 import { SharedModule } from '@components/shared/app.shared.module';
diff --git a/research-hub-web/src/app/components/articles/articles.component.ts b/research-hub-web/src/app/components/articles/article/article.component.ts
similarity index 63%
rename from research-hub-web/src/app/components/articles/articles.component.ts
rename to research-hub-web/src/app/components/articles/article/article.component.ts
index 34a094912..749099ac7 100644
--- a/research-hub-web/src/app/components/articles/articles.component.ts
+++ b/research-hub-web/src/app/components/articles/article/article.component.ts
@@ -20,8 +20,8 @@ import supportsWebP from 'supports-webp';
 
 @Component({
   selector: 'app-articles',
-  templateUrl: './articles.component.html',
-  styleUrls: ['./articles.component.scss']
+  templateUrl: './article.component.html',
+  styleUrls: ['./article.component.scss']
 })
 export class ArticlesComponent implements OnInit, OnDestroy {
   nodeRenderers: Record<string, Type<NodeRenderer>> = {
@@ -94,59 +94,40 @@ export class ArticlesComponent implements OnInit, OnDestroy {
      * If this.slug is defined, we're loading an individual article,
      * therefore run the corresponding query. If not, return all articles.
      */
-    if (!!this.slug) {
-      // Check if the article slug is valid otherwise redirect to 404
-      this.getAllArticlesSlugs().subscribe(data => {
-        let slugs = [];
-        data.items.forEach(data => {
-          slugs.push(data.slug)
-        })
-        if (!slugs.includes(this.slug)) { this.router.navigate(['error/404']) }
-      });
-      this.article = this.getArticleBySlug(this.slug);
-      this.article$ = this.getArticleBySlug(this.slug).subscribe(data => {
-
-        // Strip nulls from related collection data.
-        data.relatedContactsCollection.items = data.relatedContactsCollection.items.filter(item => item);
-        data.relatedDocsCollection.items = data.relatedDocsCollection.items.filter(item => item);
-        data.relatedItemsCollection.items = data.relatedItemsCollection.items.filter(item => item);
-        data.relatedOrgsCollection.items = data.relatedOrgsCollection.items.filter(item => item);
-
-        // If Call To Action is an email address
-        if (data.callToAction?.match(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/)) {
-          data['callToAction'] = 'mailto:' + data['callToAction'];
-        }
-        
-        // Set banner image URL for webp format if webp is supported
-        if (data.banner?.url) {
-          this.bannerImageUrl = this.supportsWebp ? data.banner?.url + '?w=1900&fm=webp' : data.banner?.url + '?w=1900';
-        } else {
-          this.bannerImageUrl = undefined;
-        }
-
-        this.bodyMediaService.setBodyMedia(data.bodyText?.links);
-        this.pageTitleService.title = data.title;
-      });
-      this.parentSubHubs = await this.cerGraphQLService.getParentSubHubs(this.slug);
-    } else {
-      this.pageTitleService.title = 'Articles';
-      this.allArticles$ = this.getAllArticles();
-      try { this.article$.unsubscribe(); } catch { }
-    }
-  }
 
-  /**
-   * Function that returns all articles from the ArticleCollection as an observable
-   * of type ArticleCollection. This is then unwrapped with the async pipe.
-   *
-   * This function is only called if no slug parameter is present in the URL, i.e. the
-   * user is visiting article/slug-name.
-   */
-  public getAllArticles(): Observable<ArticleCollection> {
-    try {
-      return this.allArticlesGQL.fetch()
-        .pipe(pluck('data', 'articleCollection')) as Observable<ArticleCollection>
-    } catch (e) { console.error('Error loading all articles:', e) };
+    this.getAllArticlesSlugs().subscribe(data => {
+      let slugs = [];
+      data.items.forEach(data => {
+        slugs.push(data.slug)
+      })
+      if (!slugs.includes(this.slug)) { this.router.navigate(['error/404']) }
+    });
+    this.article = this.getArticleBySlug(this.slug);
+    this.article$ = this.getArticleBySlug(this.slug).subscribe(data => {
+
+      // Strip nulls from related collection data.
+      data.relatedContactsCollection.items = data.relatedContactsCollection.items.filter(item => item);
+      data.relatedDocsCollection.items = data.relatedDocsCollection.items.filter(item => item);
+      data.relatedItemsCollection.items = data.relatedItemsCollection.items.filter(item => item);
+      data.relatedOrgsCollection.items = data.relatedOrgsCollection.items.filter(item => item);
+
+      // If Call To Action is an email address
+      if (data.callToAction?.match(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/)) {
+        data['callToAction'] = 'mailto:' + data['callToAction'];
+      }
+
+      // Set banner image URL for webp format if webp is supported
+      if (data.banner?.url) {
+        this.bannerImageUrl = this.supportsWebp ? data.banner?.url + '?w=1900&fm=webp' : data.banner?.url + '?w=1900';
+      } else {
+        this.bannerImageUrl = undefined;
+      }
+
+      this.bodyMediaService.setBodyMedia(data.bodyText?.links);
+      this.pageTitleService.title = data.title;
+    });
+    this.parentSubHubs = await this.cerGraphQLService.getParentSubHubs(this.slug);
+
   }
 
   /**
diff --git a/research-hub-web/src/app/components/articles/articles-routing.module.ts b/research-hub-web/src/app/components/articles/articles-routing.module.ts
index b789e424f..e882beb51 100644
--- a/research-hub-web/src/app/components/articles/articles-routing.module.ts
+++ b/research-hub-web/src/app/components/articles/articles-routing.module.ts
@@ -1,9 +1,11 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
-import { ArticlesComponent } from './articles.component';
+import { ArticleListComponent } from './article-list/article-list.component';
+import { ArticlesComponent } from './article/article.component';
 
 const routes: Routes = [
-  { path: '', component: ArticlesComponent }
+  { path: '', component: ArticleListComponent },
+  { path: ':slug', component: ArticlesComponent }
 ];
 
 @NgModule({
diff --git a/research-hub-web/src/app/components/articles/articles.module.ts b/research-hub-web/src/app/components/articles/articles.module.ts
index 07b8d5d10..c69b8c7c8 100644
--- a/research-hub-web/src/app/components/articles/articles.module.ts
+++ b/research-hub-web/src/app/components/articles/articles.module.ts
@@ -1,14 +1,16 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ArticlesRoutingModule } from './articles-routing.module';
-import { ArticlesComponent } from './articles.component';
+import { ArticlesComponent } from './article/article.component';
 import { SharedModule } from '@components/shared/app.shared.module';
 import { NgxContentfulRichTextModule } from 'ngx-contentful-rich-text';
+import { ArticleListComponent } from './article-list/article-list.component';
 
 
 @NgModule({
   declarations: [
-    ArticlesComponent
+    ArticlesComponent,
+    ArticleListComponent
   ],
   imports: [
     CommonModule,
diff --git a/research-hub-web/src/app/components/casestudys/case-study-list/case-study-list.component.html b/research-hub-web/src/app/components/casestudys/case-study-list/case-study-list.component.html
new file mode 100644
index 000000000..be079019d
--- /dev/null
+++ b/research-hub-web/src/app/components/casestudys/case-study-list/case-study-list.component.html
@@ -0,0 +1 @@
+<app-collection-list [collection]="caseStudies"></app-collection-list>
diff --git a/research-hub-web/src/app/components/casestudys/case-study-list/case-study-list.component.scss b/research-hub-web/src/app/components/casestudys/case-study-list/case-study-list.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/research-hub-web/src/app/components/casestudys/case-study-list/case-study-list.component.spec.ts b/research-hub-web/src/app/components/casestudys/case-study-list/case-study-list.component.spec.ts
new file mode 100644
index 000000000..accdd56e1
--- /dev/null
+++ b/research-hub-web/src/app/components/casestudys/case-study-list/case-study-list.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CaseStudyListComponent } from './case-study-list.component';
+
+describe('CaseStudyListComponent', () => {
+  let component: CaseStudyListComponent;
+  let fixture: ComponentFixture<CaseStudyListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ CaseStudyListComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CaseStudyListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/research-hub-web/src/app/components/casestudys/case-study-list/case-study-list.component.ts b/research-hub-web/src/app/components/casestudys/case-study-list/case-study-list.component.ts
new file mode 100644
index 000000000..ab7ccdd9f
--- /dev/null
+++ b/research-hub-web/src/app/components/casestudys/case-study-list/case-study-list.component.ts
@@ -0,0 +1,30 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { AllCaseStudiesGQL, CaseStudyCollection } from '@app/graphql/schema';
+import { Subscription } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+@Component({
+  selector: 'app-case-study-list',
+  templateUrl: './case-study-list.component.html',
+  styleUrls: ['./case-study-list.component.scss']
+})
+export class CaseStudyListComponent implements OnInit, OnDestroy {
+  public caseStudies: CaseStudyCollection
+
+  private subscription = new Subscription();
+
+  constructor(
+    private allCaseStudiesGQL: AllCaseStudiesGQL
+  ) { }
+
+  ngOnInit(): void {
+    this.subscription.add(this.allCaseStudiesGQL.fetch().pipe(
+      map((result) => result.data.caseStudyCollection as CaseStudyCollection)
+    ).subscribe((collection) => this.caseStudies = collection));
+  }
+
+  ngOnDestroy(): void {
+    this.subscription.unsubscribe();
+  }
+
+}
diff --git a/research-hub-web/src/app/components/casestudys/case-study-routing.module.ts b/research-hub-web/src/app/components/casestudys/case-study-routing.module.ts
index a73013382..f6af59d49 100644
--- a/research-hub-web/src/app/components/casestudys/case-study-routing.module.ts
+++ b/research-hub-web/src/app/components/casestudys/case-study-routing.module.ts
@@ -1,9 +1,11 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
-import { CaseStudyComponent } from './case-study.component';
+import { CaseStudyListComponent } from './case-study-list/case-study-list.component';
+import { CaseStudyComponent } from './case-study/case-study.component';
 
 const routes: Routes = [
-  { path: '', component: CaseStudyComponent }
+  { path: '', component: CaseStudyListComponent },
+  { path: ':slug', component: CaseStudyComponent}
 ];
 
 @NgModule({
diff --git a/research-hub-web/src/app/components/casestudys/case-study.component.html b/research-hub-web/src/app/components/casestudys/case-study/case-study.component.html
similarity index 93%
rename from research-hub-web/src/app/components/casestudys/case-study.component.html
rename to research-hub-web/src/app/components/casestudys/case-study/case-study.component.html
index 186162681..94d4d4b77 100644
--- a/research-hub-web/src/app/components/casestudys/case-study.component.html
+++ b/research-hub-web/src/app/components/casestudys/case-study/case-study.component.html
@@ -1,11 +1,3 @@
-<!-- If we're displaying a collection of caseStudys-->
-<div
-    *ngIf="allCaseStudies$ | async as allCaseStudies"
-    class="site-padding margin-bottom top-padding"
-    ngClass.lt-md="site-padding-mobile margin-bottom top-padding">
-    <app-collection-list [collection]="allCaseStudies"></app-collection-list>
-</div>
-
 <div id="case-study-container" *ngIf="caseStudy | async as caseStudy">
 
     <!-- Templates -->
diff --git a/research-hub-web/src/app/components/casestudys/case-study.component.scss b/research-hub-web/src/app/components/casestudys/case-study/case-study.component.scss
similarity index 100%
rename from research-hub-web/src/app/components/casestudys/case-study.component.scss
rename to research-hub-web/src/app/components/casestudys/case-study/case-study.component.scss
diff --git a/research-hub-web/src/app/components/casestudys/case-study.component.spec.ts b/research-hub-web/src/app/components/casestudys/case-study/case-study.component.spec.ts
similarity index 100%
rename from research-hub-web/src/app/components/casestudys/case-study.component.spec.ts
rename to research-hub-web/src/app/components/casestudys/case-study/case-study.component.spec.ts
diff --git a/research-hub-web/src/app/components/casestudys/case-study.component.ts b/research-hub-web/src/app/components/casestudys/case-study/case-study.component.ts
similarity index 68%
rename from research-hub-web/src/app/components/casestudys/case-study.component.ts
rename to research-hub-web/src/app/components/casestudys/case-study/case-study.component.ts
index a58417788..a2f0300c5 100644
--- a/research-hub-web/src/app/components/casestudys/case-study.component.ts
+++ b/research-hub-web/src/app/components/casestudys/case-study/case-study.component.ts
@@ -94,56 +94,37 @@ export class CaseStudyComponent implements OnInit, OnDestroy {
      * If this.slug is defined, we're loading an individual CaseStudy,
      * therefore run the corresponding query. If not, return all CaseStudy.
      */
-    if (!!this.slug) {
-      this.getAllCaseStudySlugs().subscribe(data => {
-        let slugs = [];
-        data.items.forEach(data => {
-          slugs.push(data.slug)
-        })
-        if (!slugs.includes(this.slug)) { this.router.navigate(['error/404']) }
-      });
-      this.caseStudy = this.getCaseStudyBySlug(this.slug);
+    this.getAllCaseStudySlugs().subscribe(data => {
+      let slugs = [];
+      data.items.forEach(data => {
+        slugs.push(data.slug)
+      })
+      if (!slugs.includes(this.slug)) { this.router.navigate(['error/404']) }
+    });
+    this.caseStudy = this.getCaseStudyBySlug(this.slug);
 
-      /**
-       * If the page is SSO Protected then check if the user is authenticated
-       */
-      this.caseStudy$ = this.getCaseStudyBySlug(this.slug).subscribe(data => {
-        // Strip nulls from related collection data.
-        data.relatedContactsCollection.items = data.relatedContactsCollection.items.filter(item => item);
-        data.relatedDocsCollection.items = data.relatedDocsCollection.items.filter(item => item);
-        data.relatedItemsCollection.items = data.relatedItemsCollection.items.filter(item => item);
-        data.relatedOrgsCollection.items = data.relatedOrgsCollection.items.filter(item => item);
+    /**
+     * If the page is SSO Protected then check if the user is authenticated
+     */
+    this.caseStudy$ = this.getCaseStudyBySlug(this.slug).subscribe(data => {
+      // Strip nulls from related collection data.
+      data.relatedContactsCollection.items = data.relatedContactsCollection.items.filter(item => item);
+      data.relatedDocsCollection.items = data.relatedDocsCollection.items.filter(item => item);
+      data.relatedItemsCollection.items = data.relatedItemsCollection.items.filter(item => item);
+      data.relatedOrgsCollection.items = data.relatedOrgsCollection.items.filter(item => item);
 
-        // Set banner image URL for webp format if webp is supported
-        if (data.banner?.url) {
-          this.bannerImageUrl = this.supportsWebp ? data.banner?.url + '?w=1900&fm=webp' : data.banner?.url + '?w=1900';
-        } else {
-          this.bannerImageUrl = undefined;
-        }
+      // Set banner image URL for webp format if webp is supported
+      if (data.banner?.url) {
+        this.bannerImageUrl = this.supportsWebp ? data.banner?.url + '?w=1900&fm=webp' : data.banner?.url + '?w=1900';
+      } else {
+        this.bannerImageUrl = undefined;
+      }
 
-        this.bodyMediaService.setBodyMedia(data.bodyText.links);
-        this.pageTitleService.title = data.title;
-      });
-      this.parentSubHubs = await this.cerGraphQLService.getParentSubHubs(this.slug);
-    } else {
-      this.pageTitleService.title = 'Case Studies';
-      this.allCaseStudies$ = this.getAllCaseStudy();
-      try { this.caseStudy$.unsubscribe(); } catch { }
-    }
-  }
+      this.bodyMediaService.setBodyMedia(data.bodyText.links);
+      this.pageTitleService.title = data.title;
+    });
+    this.parentSubHubs = await this.cerGraphQLService.getParentSubHubs(this.slug);
 
-  /**
-   * Function that returns all CaseStudy from the CaseStudyCollection as an observable
-   * of type CaseStudyCollection. This is then unwrapped with the async pipe.
-   *
-   * This function is only called if no slug parameter is present in the URL, i.e. the
-   * user is visiting CaseStudy/slug-name.
-   */
-  public getAllCaseStudy(): Observable<CaseStudyCollection> {
-    try {
-      return this.allCaseStudyGQL.fetch()
-        .pipe(pluck('data', 'caseStudyCollection')) as Observable<CaseStudyCollection>
-    } catch (e) { console.error('Error loading all CaseStudy:', e) };
   }
 
   /**
diff --git a/research-hub-web/src/app/components/casestudys/casestudys.module.ts b/research-hub-web/src/app/components/casestudys/casestudys.module.ts
index c8ce8aac6..7495170d7 100644
--- a/research-hub-web/src/app/components/casestudys/casestudys.module.ts
+++ b/research-hub-web/src/app/components/casestudys/casestudys.module.ts
@@ -1,16 +1,18 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { CaseStudyRoutingModule } from './case-study-routing.module';
-import { CaseStudyComponent } from './case-study.component';
+import { CaseStudyComponent } from './case-study/case-study.component';
 import { SharedModule } from '@components/shared/app.shared.module';
 import { NgxContentfulRichTextModule } from 'ngx-contentful-rich-text';
 import { CaseStudyReferencesComponent } from './case-study-references/case-study-references.component';
+import { CaseStudyListComponent } from './case-study-list/case-study-list.component';
 
 
 @NgModule({
   declarations: [
     CaseStudyComponent,
-    CaseStudyReferencesComponent
+    CaseStudyReferencesComponent,
+    CaseStudyListComponent
   ],
   imports: [
     CommonModule,
diff --git a/research-hub-web/src/app/components/equipments/equipment-list/equipment-list.component.html b/research-hub-web/src/app/components/equipments/equipment-list/equipment-list.component.html
new file mode 100644
index 000000000..48fdf777c
--- /dev/null
+++ b/research-hub-web/src/app/components/equipments/equipment-list/equipment-list.component.html
@@ -0,0 +1 @@
+<app-collection-list [collection]="equipment"></app-collection-list>
diff --git a/research-hub-web/src/app/components/equipments/equipment-list/equipment-list.component.scss b/research-hub-web/src/app/components/equipments/equipment-list/equipment-list.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/research-hub-web/src/app/components/equipments/equipment-list/equipment-list.component.spec.ts b/research-hub-web/src/app/components/equipments/equipment-list/equipment-list.component.spec.ts
new file mode 100644
index 000000000..9381cce60
--- /dev/null
+++ b/research-hub-web/src/app/components/equipments/equipment-list/equipment-list.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EquipmentListComponent } from './equipment-list.component';
+
+describe('EquipmentListComponent', () => {
+  let component: EquipmentListComponent;
+  let fixture: ComponentFixture<EquipmentListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ EquipmentListComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EquipmentListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/research-hub-web/src/app/components/equipments/equipment-list/equipment-list.component.ts b/research-hub-web/src/app/components/equipments/equipment-list/equipment-list.component.ts
new file mode 100644
index 000000000..52b3d6c84
--- /dev/null
+++ b/research-hub-web/src/app/components/equipments/equipment-list/equipment-list.component.ts
@@ -0,0 +1,30 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { AllEquipmentGQL, EquipmentCollection } from '@app/graphql/schema';
+import { Subscription } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+@Component({
+  selector: 'app-equipment-list',
+  templateUrl: './equipment-list.component.html',
+  styleUrls: ['./equipment-list.component.scss']
+})
+export class EquipmentListComponent implements OnInit, OnDestroy {
+  public equipment: EquipmentCollection;
+
+  private subscription = new Subscription();
+
+  constructor(
+    private allEquipmentGQL: AllEquipmentGQL
+  ) { }
+
+  ngOnInit(): void {
+    this.subscription.add(this.allEquipmentGQL.fetch().pipe(
+      map((result) => result.data.equipmentCollection as EquipmentCollection)
+    ).subscribe((collection) => this.equipment = collection));
+  }
+
+  ngOnDestroy(): void {
+    this.subscription.unsubscribe();
+  }
+
+}
diff --git a/research-hub-web/src/app/components/equipments/equipment-routing.module.ts b/research-hub-web/src/app/components/equipments/equipment-routing.module.ts
index b1ed95f86..5c1452610 100644
--- a/research-hub-web/src/app/components/equipments/equipment-routing.module.ts
+++ b/research-hub-web/src/app/components/equipments/equipment-routing.module.ts
@@ -1,10 +1,12 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
-import { EquipmentComponent } from './equipment.component';
+import { EquipmentListComponent } from './equipment-list/equipment-list.component';
+import { EquipmentComponent } from './equipment/equipment.component';
 
 
 const routes: Routes = [
-  { path: '', component: EquipmentComponent }
+  { path: '', component: EquipmentListComponent },
+  { path: ':slug', component: EquipmentComponent}
 ];
 
 @NgModule({
diff --git a/research-hub-web/src/app/components/equipments/equipment.component.html b/research-hub-web/src/app/components/equipments/equipment/equipment.component.html
similarity index 96%
rename from research-hub-web/src/app/components/equipments/equipment.component.html
rename to research-hub-web/src/app/components/equipments/equipment/equipment.component.html
index 2230b1df8..9247b8074 100644
--- a/research-hub-web/src/app/components/equipments/equipment.component.html
+++ b/research-hub-web/src/app/components/equipments/equipment/equipment.component.html
@@ -1,11 +1,3 @@
-<!-- If we're displaying a collection of articles-->
-<div
-    *ngIf="allEquipment$ | async as allEquipment"
-    class="site-padding margin-bottom top-padding"
-    ngClass.lt-md="site-padding-mobile margin-bottom top-padding">
-    <app-collection-list [collection]="allEquipment"></app-collection-list>
-</div>
-
 <div id="equipment-container" *ngIf="equipment | async as equipment">
 
     <!-- Templates -->
diff --git a/research-hub-web/src/app/components/equipments/equipment.component.scss b/research-hub-web/src/app/components/equipments/equipment/equipment.component.scss
similarity index 100%
rename from research-hub-web/src/app/components/equipments/equipment.component.scss
rename to research-hub-web/src/app/components/equipments/equipment/equipment.component.scss
diff --git a/research-hub-web/src/app/components/equipments/equipment.component.spec.ts b/research-hub-web/src/app/components/equipments/equipment/equipment.component.spec.ts
similarity index 100%
rename from research-hub-web/src/app/components/equipments/equipment.component.spec.ts
rename to research-hub-web/src/app/components/equipments/equipment/equipment.component.spec.ts
diff --git a/research-hub-web/src/app/components/equipments/equipment.component.ts b/research-hub-web/src/app/components/equipments/equipment/equipment.component.ts
similarity index 64%
rename from research-hub-web/src/app/components/equipments/equipment.component.ts
rename to research-hub-web/src/app/components/equipments/equipment/equipment.component.ts
index cdb9cd775..004ab85d9 100644
--- a/research-hub-web/src/app/components/equipments/equipment.component.ts
+++ b/research-hub-web/src/app/components/equipments/equipment/equipment.component.ts
@@ -91,58 +91,39 @@ export class EquipmentComponent implements OnInit, OnDestroy {
      * If this.slug is defined, we're loading an individual Equipment,
      * therefore run the corresponding query. If not, return all Equipment.
      */
-    if (!!this.slug) {
-      // Check if the equipment slug is valid otherwise redirect to 404
-      this.getAllEquipmentSlugs().subscribe(data => {
-        let slugs = [];
-        data.items.forEach(data => {
-          slugs.push(data.slug)
-        })
-        if (!slugs.includes(this.slug)) { this.router.navigate(['error/404']) }
-      });
-      this.equipment = this.getEquipmentBySlug(this.slug);
-      this.equipment$ = this.getEquipmentBySlug(this.slug).subscribe(data => {
-        // Strip nulls from related collection data.
-        data.relatedContactsCollection.items = data.relatedContactsCollection.items.filter(item => item);
-        data.relatedDocsCollection.items = data.relatedDocsCollection.items.filter(item => item);
-        data.relatedItemsCollection.items = data.relatedItemsCollection.items.filter(item => item);
-        data.relatedOrgsCollection.items = data.relatedOrgsCollection.items.filter(item => item);
+    // Check if the equipment slug is valid otherwise redirect to 404
+    this.getAllEquipmentSlugs().subscribe(data => {
+      let slugs = [];
+      data.items.forEach(data => {
+        slugs.push(data.slug)
+      })
+      if (!slugs.includes(this.slug)) { this.router.navigate(['error/404']) }
+    });
+    this.equipment = this.getEquipmentBySlug(this.slug);
+    this.equipment$ = this.getEquipmentBySlug(this.slug).subscribe(data => {
+      // Strip nulls from related collection data.
+      data.relatedContactsCollection.items = data.relatedContactsCollection.items.filter(item => item);
+      data.relatedDocsCollection.items = data.relatedDocsCollection.items.filter(item => item);
+      data.relatedItemsCollection.items = data.relatedItemsCollection.items.filter(item => item);
+      data.relatedOrgsCollection.items = data.relatedOrgsCollection.items.filter(item => item);
 
-        // If Call To Action is an email address
-        if (data.callToAction?.match(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/)) {
-          data['callToAction'] = 'mailto:' + data['callToAction'];
-        }
+      // If Call To Action is an email address
+      if (data.callToAction?.match(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/)) {
+        data['callToAction'] = 'mailto:' + data['callToAction'];
+      }
 
-        // Set banner image URL for webp format if webp is supported
-        if (data.banner?.url) {
-          this.bannerImageUrl = this.supportsWebp ? data.banner?.url + '?w=1900&fm=webp' : data.banner?.url + '?w=1900';
-        } else {
-          this.bannerImageUrl = undefined;
-        }
+      // Set banner image URL for webp format if webp is supported
+      if (data.banner?.url) {
+        this.bannerImageUrl = this.supportsWebp ? data.banner?.url + '?w=1900&fm=webp' : data.banner?.url + '?w=1900';
+      } else {
+        this.bannerImageUrl = undefined;
+      }
 
-        this.bodyMediaService.setBodyMedia(data.bodyText?.links);
-        this.pageTitleService.title = data.title;
-      });
-      this.parentSubHubs = await this.cerGraphQLService.getParentSubHubs(this.slug);
-    } else {
-      this.pageTitleService.title = 'Equipment';
-      this.allEquipment$ = this.getAllEquipment();
-      try { this.equipment$.unsubscribe(); } catch { }
-    }
-  }
+      this.bodyMediaService.setBodyMedia(data.bodyText?.links);
+      this.pageTitleService.title = data.title;
+    });
+    this.parentSubHubs = await this.cerGraphQLService.getParentSubHubs(this.slug);
 
-  /**
-   * Function that returns all Equipment from the EquipmentCollection as an observable
-   * of type EquipmentCollection. This is then unwrapped with the async pipe.
-   *
-   * This function is only called if no slug parameter is present in the URL, i.e. the
-   * user is visiting Equipment/slug-name.
-   */
-  public getAllEquipment(): Observable<EquipmentCollection> {
-    try {
-      return this.allEquipmentGQL.fetch()
-        .pipe(pluck('data', 'equipmentCollection')) as Observable<EquipmentCollection>
-    } catch (e) { console.error('Error loading all Equipment:', e) };
   }
 
   /**
diff --git a/research-hub-web/src/app/components/equipments/equipments.module.ts b/research-hub-web/src/app/components/equipments/equipments.module.ts
index 213b58fcb..a8cef376c 100644
--- a/research-hub-web/src/app/components/equipments/equipments.module.ts
+++ b/research-hub-web/src/app/components/equipments/equipments.module.ts
@@ -2,12 +2,13 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
 import { EquipmentRoutingModule } from './equipment-routing.module';
-import { EquipmentComponent } from './equipment.component';
+import { EquipmentComponent } from './equipment/equipment.component';
 import { SharedModule } from '@components/shared/app.shared.module';
 import { NgxContentfulRichTextModule } from 'ngx-contentful-rich-text';
+import { EquipmentListComponent } from './equipment-list/equipment-list.component';
 
 @NgModule({
-  declarations: [EquipmentComponent],
+  declarations: [EquipmentComponent, EquipmentListComponent],
   imports: [
     CommonModule,
     EquipmentRoutingModule,
diff --git a/research-hub-web/src/app/components/events/event-list/event-list.component.html b/research-hub-web/src/app/components/events/event-list/event-list.component.html
new file mode 100644
index 000000000..7e18b9006
--- /dev/null
+++ b/research-hub-web/src/app/components/events/event-list/event-list.component.html
@@ -0,0 +1 @@
+<app-collection-list [collection]="events"></app-collection-list>
diff --git a/research-hub-web/src/app/components/events/event-list/event-list.component.scss b/research-hub-web/src/app/components/events/event-list/event-list.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/research-hub-web/src/app/components/events/event-list/event-list.component.spec.ts b/research-hub-web/src/app/components/events/event-list/event-list.component.spec.ts
new file mode 100644
index 000000000..d0e8eb551
--- /dev/null
+++ b/research-hub-web/src/app/components/events/event-list/event-list.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EventListComponent } from './event-list.component';
+
+describe('EventListComponent', () => {
+  let component: EventListComponent;
+  let fixture: ComponentFixture<EventListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ EventListComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EventListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/research-hub-web/src/app/components/events/event-list/event-list.component.ts b/research-hub-web/src/app/components/events/event-list/event-list.component.ts
new file mode 100644
index 000000000..0e7273b92
--- /dev/null
+++ b/research-hub-web/src/app/components/events/event-list/event-list.component.ts
@@ -0,0 +1,29 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { AllEventsGQL, EventCollection } from '@app/graphql/schema';
+import { Subscription } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+@Component({
+  selector: 'app-event-list',
+  templateUrl: './event-list.component.html',
+  styleUrls: ['./event-list.component.scss']
+})
+export class EventListComponent implements OnInit, OnDestroy {
+  public events: EventCollection;
+
+  private subscription = new Subscription();
+
+  constructor(
+    private allEventsGQL: AllEventsGQL
+  ) { }
+
+  ngOnInit(): void {
+    this.subscription.add(this.allEventsGQL.fetch().pipe(
+      map((result) => result.data.eventCollection as EventCollection)
+    ).subscribe((collection) => this.events = collection));
+  }
+
+  ngOnDestroy(): void {
+    this.subscription.unsubscribe();
+  }
+}
diff --git a/research-hub-web/src/app/components/events/event-routing.module.ts.ts b/research-hub-web/src/app/components/events/event-routing.module.ts
similarity index 52%
rename from research-hub-web/src/app/components/events/event-routing.module.ts.ts
rename to research-hub-web/src/app/components/events/event-routing.module.ts
index 5c28e9e77..2af2dd766 100644
--- a/research-hub-web/src/app/components/events/event-routing.module.ts.ts
+++ b/research-hub-web/src/app/components/events/event-routing.module.ts
@@ -1,10 +1,12 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
-import { EventsComponent } from './events.component';
+import { EventListComponent } from './event-list/event-list.component';
+import { EventComponent } from './event/event.component';
 
 
 const routes: Routes = [
-  { path: '', component: EventsComponent }
+  { path: '', component: EventListComponent },
+  { path: ':slug', component: EventComponent}
 ];
 
 @NgModule({
diff --git a/research-hub-web/src/app/components/events/events.component.html b/research-hub-web/src/app/components/events/event/event.component.html
similarity index 95%
rename from research-hub-web/src/app/components/events/events.component.html
rename to research-hub-web/src/app/components/events/event/event.component.html
index 0de0dfc02..6a8e57c06 100644
--- a/research-hub-web/src/app/components/events/events.component.html
+++ b/research-hub-web/src/app/components/events/event/event.component.html
@@ -1,11 +1,3 @@
-<!-- If we're displaying a collection of Events-->
-<div
-    *ngIf="allEvents$ | async as allEvents"
-    class="site-padding margin-bottom top-padding"
-    ngClass.lt-md="site-padding-mobile margin-bottom top-padding">
-    <app-collection-list [collection]="allEvents"></app-collection-list>
-</div>
-
 <div id="event-container" *ngIf="event | async as event">
 
     <!-- Templates -->
diff --git a/research-hub-web/src/app/components/events/events.component.scss b/research-hub-web/src/app/components/events/event/event.component.scss
similarity index 100%
rename from research-hub-web/src/app/components/events/events.component.scss
rename to research-hub-web/src/app/components/events/event/event.component.scss
diff --git a/research-hub-web/src/app/components/events/events.component.spec.ts b/research-hub-web/src/app/components/events/event/event.component.spec.ts
similarity index 91%
rename from research-hub-web/src/app/components/events/events.component.spec.ts
rename to research-hub-web/src/app/components/events/event/event.component.spec.ts
index f1d338bc8..2e467a1d3 100644
--- a/research-hub-web/src/app/components/events/events.component.spec.ts
+++ b/research-hub-web/src/app/components/events/event/event.component.spec.ts
@@ -1,6 +1,6 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { PageTitleService } from '@services/page-title.service';
-import { EventsComponent } from './events.component';
+import { EventComponent } from './event.component';
 import { ApolloTestingController, ApolloTestingModule } from 'apollo-angular/testing';
 import { ActivatedRoute } from '@angular/router';
 import { Observable, of } from 'rxjs';
@@ -13,8 +13,8 @@ import { RouterTestingModule } from '@angular/router/testing';
 import { MockModule, MockProvider } from 'ng-mocks';
 
 describe('EventsComponent', () => {
-  let component: EventsComponent;
-  let fixture: ComponentFixture<EventsComponent>;
+  let component: EventComponent;
+  let fixture: ComponentFixture<EventComponent>;
   let controller: ApolloTestingController;
 
   const mockAllEvent$: Observable<EventCollection> = of({
@@ -47,7 +47,7 @@ describe('EventsComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [
-        EventsComponent
+        EventComponent
       ],
       imports: [
         RouterTestingModule,
@@ -65,7 +65,7 @@ describe('EventsComponent', () => {
 
   beforeEach(() => {
     controller = TestBed.inject(ApolloTestingController);
-    fixture = TestBed.createComponent(EventsComponent);
+    fixture = TestBed.createComponent(EventComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
@@ -88,7 +88,7 @@ describe('EventsComponent', () => {
   describe('When a url slug is present', async () => {
     beforeEach(() => {
       controller = TestBed.inject(ApolloTestingController);
-      fixture = TestBed.createComponent(EventsComponent);
+      fixture = TestBed.createComponent(EventComponent);
       component = fixture.componentInstance;
       TestBed.inject(ActivatedRoute).params = of({
         slug: 'death-star'
diff --git a/research-hub-web/src/app/components/events/events.component.ts b/research-hub-web/src/app/components/events/event/event.component.ts
similarity index 84%
rename from research-hub-web/src/app/components/events/events.component.ts
rename to research-hub-web/src/app/components/events/event/event.component.ts
index f0112ced7..eda632a64 100644
--- a/research-hub-web/src/app/components/events/events.component.ts
+++ b/research-hub-web/src/app/components/events/event/event.component.ts
@@ -20,10 +20,10 @@ import supportsWebP from 'supports-webp';
 
 @Component({
   selector: 'app-events',
-  templateUrl: './events.component.html',
-  styleUrls: ['./events.component.scss']
+  templateUrl: './event.component.html',
+  styleUrls: ['./event.component.scss']
 })
-export class EventsComponent implements OnInit, OnDestroy {
+export class EventComponent implements OnInit, OnDestroy {
   nodeRenderers: Record<string, Type<NodeRenderer>> = {
     [BLOCKS.QUOTE]: BodyMediaComponent,
     [BLOCKS.EMBEDDED_ASSET]: BodyMediaComponent,
@@ -85,11 +85,6 @@ export class EventsComponent implements OnInit, OnDestroy {
    * Function that loads the Event/collection depending on if a slug is present.
    */
   private async _loadContent() {
-    /**
-     * If this.slug is defined, we're loading an individual Event,
-     * therefore run the corresponding query. If not, return all Events.
-     */
-    if (!!this.slug) {
       // Check if the article slug is valid otherwise redirect to 404
       this.getAllEventSlugs().subscribe(data => {
         let slugs = [];
@@ -123,25 +118,7 @@ export class EventsComponent implements OnInit, OnDestroy {
         this.pageTitleService.title = data.title;
       });
       this.parentSubHubs = await this.cerGraphQLService.getParentSubHubs(this.slug);
-    } else {
-      this.pageTitleService.title = 'Events';
-      this.allEvents$ = this.getAllEvents();
-      try { this.event$.unsubscribe(); } catch { }
-    }
-  }
 
-  /**
-   * Function that returns all Events from the EventCollection as an observable
-   * of type EventCollection. This is then unwrapped with the async pipe.
-   *
-   * This function is only called if no slug parameter is present in the URL, i.e. the
-   * user is visiting Event/slug-name.
-   */
-  public getAllEvents(): Observable<EventCollection> {
-    try {
-      return this.allEventsGQL.fetch()
-        .pipe(pluck('data', 'eventCollection')) as Observable<EventCollection>
-    } catch (e) { console.error('Error loading all Events:', e) };
   }
 
   /**
diff --git a/research-hub-web/src/app/components/events/events.module.ts b/research-hub-web/src/app/components/events/events.module.ts
index 59b1d3c4a..17a365b33 100644
--- a/research-hub-web/src/app/components/events/events.module.ts
+++ b/research-hub-web/src/app/components/events/events.module.ts
@@ -1,13 +1,14 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
-import { EventRoutingModule } from './event-routing.module.ts';
-import { EventsComponent } from './events.component';
+import { EventRoutingModule } from './event-routing.module';
+import { EventComponent } from './event/event.component';
 import { SharedModule } from '@components/shared/app.shared.module';
 import { NgxContentfulRichTextModule } from 'ngx-contentful-rich-text';
+import { EventListComponent } from './event-list/event-list.component';
 
 @NgModule({
-  declarations: [EventsComponent],
+  declarations: [EventComponent, EventListComponent],
   imports: [
     CommonModule,
     EventRoutingModule,
diff --git a/research-hub-web/src/app/components/fundings/funding-list/funding-list.component.html b/research-hub-web/src/app/components/fundings/funding-list/funding-list.component.html
new file mode 100644
index 000000000..94de422be
--- /dev/null
+++ b/research-hub-web/src/app/components/fundings/funding-list/funding-list.component.html
@@ -0,0 +1 @@
+<app-collection-list [collection]="fundings"></app-collection-list>
diff --git a/research-hub-web/src/app/components/fundings/funding-list/funding-list.component.scss b/research-hub-web/src/app/components/fundings/funding-list/funding-list.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/research-hub-web/src/app/components/fundings/funding-list/funding-list.component.spec.ts b/research-hub-web/src/app/components/fundings/funding-list/funding-list.component.spec.ts
new file mode 100644
index 000000000..51be079eb
--- /dev/null
+++ b/research-hub-web/src/app/components/fundings/funding-list/funding-list.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FundingListComponent } from './funding-list.component';
+
+describe('FundingListComponent', () => {
+  let component: FundingListComponent;
+  let fixture: ComponentFixture<FundingListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ FundingListComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FundingListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/research-hub-web/src/app/components/fundings/funding-list/funding-list.component.ts b/research-hub-web/src/app/components/fundings/funding-list/funding-list.component.ts
new file mode 100644
index 000000000..e9c82e223
--- /dev/null
+++ b/research-hub-web/src/app/components/fundings/funding-list/funding-list.component.ts
@@ -0,0 +1,30 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { AllFundingGQL, FundingCollection } from '@app/graphql/schema';
+import { Subscription } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+@Component({
+  selector: 'app-funding-list',
+  templateUrl: './funding-list.component.html',
+  styleUrls: ['./funding-list.component.scss']
+})
+export class FundingListComponent implements OnInit, OnDestroy {
+  public fundings: FundingCollection;
+
+  private subscription = new Subscription();
+
+  constructor(
+    private allFundingGQL: AllFundingGQL
+  ) { }
+
+  ngOnInit(): void {
+    this.subscription.add(this.allFundingGQL.fetch().pipe(
+      map((result) => result.data.fundingCollection as FundingCollection)
+    ).subscribe((collection) => this.fundings = collection));
+  }
+
+  ngOnDestroy(): void {
+    this.subscription.unsubscribe();
+  }
+
+}
diff --git a/research-hub-web/src/app/components/fundings/funding-routing.module.ts b/research-hub-web/src/app/components/fundings/funding-routing.module.ts
index 0b837b10a..c5a567ff1 100644
--- a/research-hub-web/src/app/components/fundings/funding-routing.module.ts
+++ b/research-hub-web/src/app/components/fundings/funding-routing.module.ts
@@ -1,10 +1,12 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
-import { FundingsComponent } from './fundings.component';
+import { FundingListComponent } from './funding-list/funding-list.component';
+import { FundingComponent } from './funding/funding.component';
 
 
 const routes: Routes = [
-  { path: '', component: FundingsComponent }
+  { path: '', component: FundingListComponent },
+  { path: ':slug', component: FundingComponent}
 ];
 
 @NgModule({
diff --git a/research-hub-web/src/app/components/fundings/fundings.component.html b/research-hub-web/src/app/components/fundings/funding/funding.component.html
similarity index 96%
rename from research-hub-web/src/app/components/fundings/fundings.component.html
rename to research-hub-web/src/app/components/fundings/funding/funding.component.html
index f6ace15fa..ac9827ade 100644
--- a/research-hub-web/src/app/components/fundings/fundings.component.html
+++ b/research-hub-web/src/app/components/fundings/funding/funding.component.html
@@ -1,11 +1,3 @@
-<!-- If we're displaying a collection of Fundings-->
-<div
-    *ngIf="allFundings$ | async as allFundings"
-    class="site-padding margin-bottom top-padding"
-    ngClass.lt-md="site-padding-mobile margin-bottom top-padding">
-    <app-collection-list [collection]="allFundings"></app-collection-list>
-</div>
-
 <div id="funding-container" *ngIf="funding | async as funding">
 
     <!-- Templates -->
diff --git a/research-hub-web/src/app/components/fundings/fundings.component.scss b/research-hub-web/src/app/components/fundings/funding/funding.component.scss
similarity index 100%
rename from research-hub-web/src/app/components/fundings/fundings.component.scss
rename to research-hub-web/src/app/components/fundings/funding/funding.component.scss
diff --git a/research-hub-web/src/app/components/fundings/fundings.component.spec.ts b/research-hub-web/src/app/components/fundings/funding/funding.component.spec.ts
similarity index 91%
rename from research-hub-web/src/app/components/fundings/fundings.component.spec.ts
rename to research-hub-web/src/app/components/fundings/funding/funding.component.spec.ts
index a4af3203d..f3d030dfb 100644
--- a/research-hub-web/src/app/components/fundings/fundings.component.spec.ts
+++ b/research-hub-web/src/app/components/fundings/funding/funding.component.spec.ts
@@ -1,6 +1,6 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { PageTitleService } from '@services/page-title.service';
-import { FundingsComponent } from './fundings.component';
+import { FundingComponent } from './funding.component';
 import { ApolloTestingController, ApolloTestingModule } from 'apollo-angular/testing';
 import { ActivatedRoute } from '@angular/router';
 import { Observable, of } from 'rxjs';
@@ -13,8 +13,8 @@ import { RouterTestingModule } from '@angular/router/testing';
 import { MockModule, MockProvider } from 'ng-mocks';
 
 describe('FundingsComponent', () => {
-  let component: FundingsComponent;
-  let fixture: ComponentFixture<FundingsComponent>;
+  let component: FundingComponent;
+  let fixture: ComponentFixture<FundingComponent>;
   let controller: ApolloTestingController;
 
   const mockAllFunding$: Observable<FundingCollection> = of({
@@ -47,7 +47,7 @@ describe('FundingsComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [
-        FundingsComponent
+        FundingComponent
       ],
       imports: [
         RouterTestingModule,
@@ -65,7 +65,7 @@ describe('FundingsComponent', () => {
 
   beforeEach(() => {
     controller = TestBed.inject(ApolloTestingController);
-    fixture = TestBed.createComponent(FundingsComponent);
+    fixture = TestBed.createComponent(FundingComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
@@ -88,7 +88,7 @@ describe('FundingsComponent', () => {
   describe('When a url slug is present', async () => {
     beforeEach(() => {
       controller = TestBed.inject(ApolloTestingController);
-      fixture = TestBed.createComponent(FundingsComponent);
+      fixture = TestBed.createComponent(FundingComponent);
       component = fixture.componentInstance;
       TestBed.inject(ActivatedRoute).params = of({
         slug: 'death-star'
diff --git a/research-hub-web/src/app/components/fundings/fundings.component.ts b/research-hub-web/src/app/components/fundings/funding/funding.component.ts
similarity index 84%
rename from research-hub-web/src/app/components/fundings/fundings.component.ts
rename to research-hub-web/src/app/components/fundings/funding/funding.component.ts
index 484da56d8..2c49d1447 100644
--- a/research-hub-web/src/app/components/fundings/fundings.component.ts
+++ b/research-hub-web/src/app/components/fundings/funding/funding.component.ts
@@ -20,10 +20,10 @@ import supportsWebP from 'supports-webp';
 
 @Component({
   selector: 'app-fundings',
-  templateUrl: './fundings.component.html',
-  styleUrls: ['./fundings.component.scss']
+  templateUrl: './funding.component.html',
+  styleUrls: ['./funding.component.scss']
 })
-export class FundingsComponent implements OnInit, OnDestroy {
+export class FundingComponent implements OnInit, OnDestroy {
   nodeRenderers: Record<string, Type<NodeRenderer>> = {
     [BLOCKS.QUOTE]: BodyMediaComponent,
     [BLOCKS.EMBEDDED_ASSET]: BodyMediaComponent,
@@ -84,11 +84,6 @@ export class FundingsComponent implements OnInit, OnDestroy {
    * Function that loads the Funding/collection depending on if a slug is present.
    */
   private async _loadContent() {
-    /**
-     * If this.slug is defined, we're loading an individual Funding,
-     * therefore run the corresponding query. If not, return all Fundings.
-     */
-    if (!!this.slug) {
       // Check if the article slug is valid otherwise redirect to 404
       this.getAllFundingSlugs().subscribe(data => {
         let slugs = [];
@@ -123,25 +118,7 @@ export class FundingsComponent implements OnInit, OnDestroy {
         this.pageTitleService.title = data.title;
       });
       this.parentSubHubs = await this.cerGraphQLService.getParentSubHubs(this.slug);
-    } else {
-      this.pageTitleService.title = 'Fundings';
-      this.allFundings$ = this.getAllFundings();
-      try { this.funding$.unsubscribe(); } catch { }
-    }
-  }
 
-  /**
-   * Function that returns all Fundings from the FundingCollection as an observable
-   * of type FundingCollection. This is then unwrapped with the async pipe.
-   *
-   * This function is only called if no slug parameter is present in the URL, i.e. the
-   * user is visiting Funding/slug-name.
-   */
-  public getAllFundings(): Observable<FundingCollection> {
-    try {
-      return this.allFundingGQL.fetch()
-        .pipe(pluck('data', 'fundingCollection')) as Observable<FundingCollection>
-    } catch (e) { console.error('Error loading all Fundings:', e) };
   }
 
   /**
diff --git a/research-hub-web/src/app/components/fundings/fundings.module.ts b/research-hub-web/src/app/components/fundings/fundings.module.ts
index 7bc8715eb..7ae02791b 100644
--- a/research-hub-web/src/app/components/fundings/fundings.module.ts
+++ b/research-hub-web/src/app/components/fundings/fundings.module.ts
@@ -1,17 +1,19 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { FundingsComponent } from './fundings.component';
+import { FundingComponent } from './funding/funding.component';
 import { FundingRoutingModule } from './funding-routing.module';
 import { SharedModule } from '@components/shared/app.shared.module';
 import { NgxContentfulRichTextModule } from 'ngx-contentful-rich-text';
 import { FundingPurposeComponent } from './funding-purpose/funding-purpose.component';
 import { FundingDeadlinesComponent } from './funding-deadlines/funding-deadlines.component';
+import { FundingListComponent } from './funding-list/funding-list.component';
 
 @NgModule({
   declarations: [
-    FundingsComponent,
+    FundingComponent,
     FundingPurposeComponent,
-    FundingDeadlinesComponent
+    FundingDeadlinesComponent,
+    FundingListComponent
   ],
   imports: [
     CommonModule,
@@ -20,4 +22,4 @@ import { FundingDeadlinesComponent } from './funding-deadlines/funding-deadlines
     NgxContentfulRichTextModule
   ]
 })
-export class FundingsModule { }
\ No newline at end of file
+export class FundingsModule { }
diff --git a/research-hub-web/src/app/components/services/service-list/service-list.component.html b/research-hub-web/src/app/components/services/service-list/service-list.component.html
new file mode 100644
index 000000000..50e57dc7f
--- /dev/null
+++ b/research-hub-web/src/app/components/services/service-list/service-list.component.html
@@ -0,0 +1 @@
+<app-collection-list [collection]="services">
diff --git a/research-hub-web/src/app/components/services/service-list/service-list.component.scss b/research-hub-web/src/app/components/services/service-list/service-list.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/research-hub-web/src/app/components/services/service-list/service-list.component.spec.ts b/research-hub-web/src/app/components/services/service-list/service-list.component.spec.ts
new file mode 100644
index 000000000..97c794920
--- /dev/null
+++ b/research-hub-web/src/app/components/services/service-list/service-list.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ServiceListComponent } from './service-list.component';
+
+describe('ServiceListComponent', () => {
+  let component: ServiceListComponent;
+  let fixture: ComponentFixture<ServiceListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ServiceListComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ServiceListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/research-hub-web/src/app/components/services/service-list/service-list.component.ts b/research-hub-web/src/app/components/services/service-list/service-list.component.ts
new file mode 100644
index 000000000..5e232e31d
--- /dev/null
+++ b/research-hub-web/src/app/components/services/service-list/service-list.component.ts
@@ -0,0 +1,30 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { AllServicesGQL, ServiceCollection } from '@app/graphql/schema';
+import { Subscription } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+@Component({
+  selector: 'app-service-list',
+  templateUrl: './service-list.component.html',
+  styleUrls: ['./service-list.component.scss']
+})
+export class ServiceListComponent implements OnInit, OnDestroy {
+  public services: ServiceCollection;
+
+  private subscription = new Subscription();
+
+  constructor(
+    private allServicesGQL: AllServicesGQL
+  ) { }
+
+  ngOnInit(): void {
+    this.subscription.add(this.allServicesGQL.fetch().pipe(
+      map((result) => result.data.serviceCollection as ServiceCollection)
+    ).subscribe((collection) => this.services = collection));
+  }
+
+  ngOnDestroy(): void {
+    this.subscription.unsubscribe();
+  }
+
+}
diff --git a/research-hub-web/src/app/components/services/services.component.html b/research-hub-web/src/app/components/services/service/service.component.html
similarity index 94%
rename from research-hub-web/src/app/components/services/services.component.html
rename to research-hub-web/src/app/components/services/service/service.component.html
index ad1935f20..0e6980179 100644
--- a/research-hub-web/src/app/components/services/services.component.html
+++ b/research-hub-web/src/app/components/services/service/service.component.html
@@ -1,11 +1,3 @@
-<!-- If we're displaying a collection of Services-->
-<div
-    *ngIf="allServices$ | async as allServices"
-    class="site-padding margin-bottom top-padding"
-    ngClass.lt-md="site-padding-mobile margin-bottom top-padding">
-    <app-collection-list [collection]="allServices"></app-collection-list></div>
-
-<!-- If we're displaying an individual service -->
 <div id="service-container" *ngIf="service | async as service">
 
     <!-- Templates -->
diff --git a/research-hub-web/src/app/components/services/services.component.scss b/research-hub-web/src/app/components/services/service/service.component.scss
similarity index 100%
rename from research-hub-web/src/app/components/services/services.component.scss
rename to research-hub-web/src/app/components/services/service/service.component.scss
diff --git a/research-hub-web/src/app/components/services/services.component.spec.ts b/research-hub-web/src/app/components/services/service/service.component.spec.ts
similarity index 91%
rename from research-hub-web/src/app/components/services/services.component.spec.ts
rename to research-hub-web/src/app/components/services/service/service.component.spec.ts
index 2247a8b84..20c5f75e9 100644
--- a/research-hub-web/src/app/components/services/services.component.spec.ts
+++ b/research-hub-web/src/app/components/services/service/service.component.spec.ts
@@ -1,6 +1,6 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { PageTitleService } from '@services/page-title.service';
-import { ServicesComponent } from './services.component';
+import { ServiceComponent } from './service.component';
 import { ApolloTestingController, ApolloTestingModule } from 'apollo-angular/testing';
 import { RouterModule, ActivatedRoute } from '@angular/router';
 import { Observable, of } from 'rxjs';
@@ -13,8 +13,8 @@ import { RouterTestingModule } from '@angular/router/testing';
 import { MockModule, MockProvider } from 'ng-mocks';
 
 describe('ServicesComponent', () => {
-  let component: ServicesComponent;
-  let fixture: ComponentFixture<ServicesComponent>;
+  let component: ServiceComponent;
+  let fixture: ComponentFixture<ServiceComponent>;
   let controller: ApolloTestingController;
 
   const mockAllServices$: Observable<ServiceCollection> = of({
@@ -47,7 +47,7 @@ describe('ServicesComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [
-        ServicesComponent
+        ServiceComponent
       ],
       imports: [
         RouterTestingModule,
@@ -65,7 +65,7 @@ describe('ServicesComponent', () => {
 
   beforeEach(() => {
     controller = TestBed.inject(ApolloTestingController);
-    fixture = TestBed.createComponent(ServicesComponent);
+    fixture = TestBed.createComponent(ServiceComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
@@ -88,7 +88,7 @@ describe('ServicesComponent', () => {
   describe('When a url slug is present', async () => {
     beforeEach(() => {
       controller = TestBed.inject(ApolloTestingController);
-      fixture = TestBed.createComponent(ServicesComponent);
+      fixture = TestBed.createComponent(ServiceComponent);
       component = fixture.componentInstance;
       TestBed.inject(ActivatedRoute).params = of({
         slug: 'death-star'
diff --git a/research-hub-web/src/app/components/services/services.component.ts b/research-hub-web/src/app/components/services/service/service.component.ts
similarity index 84%
rename from research-hub-web/src/app/components/services/services.component.ts
rename to research-hub-web/src/app/components/services/service/service.component.ts
index ead3b48d5..52d898828 100644
--- a/research-hub-web/src/app/components/services/services.component.ts
+++ b/research-hub-web/src/app/components/services/service/service.component.ts
@@ -20,10 +20,10 @@ import supportsWebP from 'supports-webp';
 
 @Component({
   selector: 'app-services',
-  templateUrl: './services.component.html',
-  styleUrls: ['./services.component.scss']
+  templateUrl: './service.component.html',
+  styleUrls: ['./service.component.scss']
 })
-export class ServicesComponent implements OnInit, OnDestroy {
+export class ServiceComponent implements OnInit, OnDestroy {
   nodeRenderers: Record<string, Type<NodeRenderer>> = {
     [BLOCKS.QUOTE]: BodyMediaComponent,
     [BLOCKS.EMBEDDED_ASSET]: BodyMediaComponent,
@@ -84,11 +84,6 @@ export class ServicesComponent implements OnInit, OnDestroy {
    * Function that loads the Service/collection depending on if a slug is present.
    */
   private async _loadContent() {
-    /**
-     * If this.slug is defined, we're loading an individual Service,
-     * therefore run the corresponding query. If not, return all Services.
-     */
-    if (!!this.slug) {
       // Check if the article slug is valid otherwise redirect to 404
       this.getAllServicesSlugs().subscribe(data => {
         let slugs = [];
@@ -122,25 +117,7 @@ export class ServicesComponent implements OnInit, OnDestroy {
         this.pageTitleService.title = data.title;
       });
       this.parentSubHubs = await this.cerGraphQLService.getParentSubHubs(this.slug);
-    } else {
-      this.pageTitleService.title = 'Services';
-      this.allServices$ = this.getAllServices();
-      try { this.service$.unsubscribe(); } catch { }
-    }
-  }
 
-  /**
-   * Function that returns all Services from the ServiceCollection as an observable
-   * of type ServiceCollection. This is then unwrapped with the async pipe.
-   *
-   * This function is only called if no slug parameter is present in the URL, i.e. the
-   * user is visiting Service/slug-name.
-   */
-  public getAllServices(): Observable<ServiceCollection> {
-    try {
-      return this.allServicesGQL.fetch()
-        .pipe(pluck('data', 'serviceCollection')) as Observable<ServiceCollection>
-    } catch (e) { console.error('Error loading all Services:', e) };
   }
 
   /**
diff --git a/research-hub-web/src/app/components/services/services-routing.module.ts b/research-hub-web/src/app/components/services/services-routing.module.ts
index b1272d693..5d1bd050a 100644
--- a/research-hub-web/src/app/components/services/services-routing.module.ts
+++ b/research-hub-web/src/app/components/services/services-routing.module.ts
@@ -1,10 +1,12 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
-import { ServicesComponent } from './services.component';
+import { ServiceListComponent } from './service-list/service-list.component';
+import { ServiceComponent } from './service/service.component';
 
 
 const routes: Routes = [
-  { path: '', component: ServicesComponent }
+  { path: '', component: ServiceListComponent },
+  { path: ':slug', component: ServiceComponent}
 ];
 
 @NgModule({
diff --git a/research-hub-web/src/app/components/services/services.module.ts b/research-hub-web/src/app/components/services/services.module.ts
index 51d986807..a0f2cd1e4 100644
--- a/research-hub-web/src/app/components/services/services.module.ts
+++ b/research-hub-web/src/app/components/services/services.module.ts
@@ -2,12 +2,13 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
 import { ServiceRoutingModule } from './services-routing.module';
-import { ServicesComponent } from './services.component';
+import { ServiceComponent } from './service/service.component';
 import { SharedModule } from '@components/shared/app.shared.module';
 import { NgxContentfulRichTextModule } from 'ngx-contentful-rich-text';
+import { ServiceListComponent } from './service-list/service-list.component';
 
 @NgModule({
-  declarations: [ServicesComponent],
+  declarations: [ServiceComponent, ServiceListComponent],
   imports: [
     CommonModule,
     ServiceRoutingModule,
diff --git a/research-hub-web/src/app/components/shared/collection-list/collection-list.component.html b/research-hub-web/src/app/components/shared/collection-list/collection-list.component.html
index 83a0ee77b..c1fe7ebfa 100644
--- a/research-hub-web/src/app/components/shared/collection-list/collection-list.component.html
+++ b/research-hub-web/src/app/components/shared/collection-list/collection-list.component.html
@@ -1,52 +1,91 @@
-<ng-container *ngIf="collection">
+<div
+  class="site-padding margin-bottom top-padding"
+  ngClass.lt-md="site-padding-mobile margin-bottom top-padding"
+>
+  <ng-container *ngIf="collection">
     <!-- Content Collection -->
     <h1 id="title">
-        {{ collection.__typename | humanCase }}
-    </h1>Found
+      {{ collection.__typename | humanCase }}
+    </h1>
+    Found
     <span class="search-results-text">
-        {{ collection.items.length }}
-    </span>results in
+      {{ collection.items.length }} </span
+    >results in
     <span class="search-results-text">
-        {{ collection.__typename | humanCase }}
+      {{ collection.__typename | humanCase }}
     </span>
 
     <!-- Content Collection -->
     <mat-nav-list>
-        <mat-card
-            *ngFor="let content of collection.items | paginate: { itemsPerPage: itemsPerPage , currentPage: pageNumber, totalItems: collection.items.length }">
-            <a [routerLink]="['/' + content.__typename.toLowerCase(), content.slug]" class="result-item"
-                [ngClass]="{'ssoProtected': content.ssoProtected }">
-                <mat-card-header>
-                    <div mat-card-avatar class="item-avatar">
-                        <div *ngIf="content.icon; else avatarIcon">
-                            <img srcset="{{content?.icon?.url}}?w=200&fm=webp,
-                                    {{content?.icon?.url}}?w=200" src="{{content?.icon?.url}}?w=200"
-                                alt="{{content?.icon?.description}}" class="item-avatar" width="100%"
-                                height="100%" />
-                        </div>
-                        <ng-template #avatarIcon>
-                            <mat-icon class="item-avatar-icon" [innerHTML]="getDefaultTypeIcon(content.__typename)">
-                            </mat-icon>
-                        </ng-template>
-                    </div>
-                    <mat-card-title>
-                        <p><span class="card-title">{{ content.title }}</span>&nbsp;
-                            <mat-icon *ngIf="content.ssoProtected" matTooltip="SSO Login Required">lock</mat-icon>
-                        </p>
-                    </mat-card-title>
-                    <mat-card-subtitle class="card-summary">
-                        {{ content.summary }}
-                    </mat-card-subtitle>
-                </mat-card-header>
-            </a>
-        </mat-card>
+      <mat-card
+        *ngFor="
+          let content of collection.items
+            | paginate
+              : {
+                  itemsPerPage: itemsPerPage,
+                  currentPage: pageNumber,
+                  totalItems: collection.items.length
+                }
+        "
+      >
+        <a
+          [routerLink]="['/' + content.__typename.toLowerCase(), content.slug]"
+          class="result-item"
+          [ngClass]="{ ssoProtected: content.ssoProtected }"
+        >
+          <mat-card-header>
+            <div mat-card-avatar class="item-avatar">
+              <div *ngIf="content.icon; else avatarIcon">
+                <img
+                  srcset="
+                    {{content?.icon?.url}}?w=200&fm=webp,
+                    {{content?.icon?.url}}?w=200
+                  "
+                  src="{{ content?.icon?.url }}?w=200"
+                  alt="{{ content?.icon?.description }}"
+                  class="item-avatar"
+                  width="100%"
+                  height="100%"
+                />
+              </div>
+              <ng-template #avatarIcon>
+                <mat-icon
+                  class="item-avatar-icon"
+                  [innerHTML]="getDefaultTypeIcon(content.__typename)"
+                >
+                </mat-icon>
+              </ng-template>
+            </div>
+            <mat-card-title>
+              <p>
+                <span class="card-title">{{ content.title }}</span
+                >&nbsp;
+                <mat-icon
+                  *ngIf="content.ssoProtected"
+                  matTooltip="SSO Login Required"
+                  >lock</mat-icon
+                >
+              </p>
+            </mat-card-title>
+            <mat-card-subtitle class="card-summary">
+              {{ content.summary }}
+            </mat-card-subtitle>
+          </mat-card-header>
+        </a>
+      </mat-card>
     </mat-nav-list>
 
     <!-- Paginator -->
     <div id="pagination">
-        <pagination-controls class="page-control" responsive="true"
-            (pageChange)="pageNumber = $event; scrollToTop()" screenReaderPaginationLabel="Pagination"
-            screenReaderPageLabel="page" screenReaderCurrentLabel="You're on page">
-        </pagination-controls>
+      <pagination-controls
+        class="page-control"
+        responsive="true"
+        (pageChange)="pageNumber = $event; scrollToTop()"
+        screenReaderPaginationLabel="Pagination"
+        screenReaderPageLabel="page"
+        screenReaderCurrentLabel="You're on page"
+      >
+      </pagination-controls>
     </div>
-</ng-container>
\ No newline at end of file
+  </ng-container>
+</div>
diff --git a/research-hub-web/src/app/components/softwares/software-list/software-list.component.html b/research-hub-web/src/app/components/softwares/software-list/software-list.component.html
new file mode 100644
index 000000000..9e661be18
--- /dev/null
+++ b/research-hub-web/src/app/components/softwares/software-list/software-list.component.html
@@ -0,0 +1 @@
+<app-collection-list [collection]="software"></app-collection-list>
diff --git a/research-hub-web/src/app/components/softwares/software-list/software-list.component.scss b/research-hub-web/src/app/components/softwares/software-list/software-list.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/research-hub-web/src/app/components/softwares/software-list/software-list.component.spec.ts b/research-hub-web/src/app/components/softwares/software-list/software-list.component.spec.ts
new file mode 100644
index 000000000..861394c64
--- /dev/null
+++ b/research-hub-web/src/app/components/softwares/software-list/software-list.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SoftwareListComponent } from './software-list.component';
+
+describe('SoftwareListComponent', () => {
+  let component: SoftwareListComponent;
+  let fixture: ComponentFixture<SoftwareListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SoftwareListComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SoftwareListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/research-hub-web/src/app/components/softwares/software-list/software-list.component.ts b/research-hub-web/src/app/components/softwares/software-list/software-list.component.ts
new file mode 100644
index 000000000..f69a04725
--- /dev/null
+++ b/research-hub-web/src/app/components/softwares/software-list/software-list.component.ts
@@ -0,0 +1,30 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { AllSoftwareGQL, SoftwareCollection } from '@app/graphql/schema';
+import { Subscription } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+@Component({
+  selector: 'app-software-list',
+  templateUrl: './software-list.component.html',
+  styleUrls: ['./software-list.component.scss']
+})
+export class SoftwareListComponent implements OnInit, OnDestroy {
+  public software: SoftwareCollection;
+
+  private subscription = new Subscription();
+
+  constructor(
+    private allSoftwareGQL: AllSoftwareGQL
+  ) { }
+
+  ngOnInit(): void {
+    this.subscription.add(this.allSoftwareGQL.fetch().pipe(
+      map((result) => result.data.softwareCollection as SoftwareCollection)
+    ).subscribe((collection) => this.software = collection));
+  }
+
+  ngOnDestroy(): void {
+    this.subscription.unsubscribe();
+  }
+
+}
diff --git a/research-hub-web/src/app/components/softwares/software-routing.module.ts b/research-hub-web/src/app/components/softwares/software-routing.module.ts
index 47b740ff3..7de37c224 100644
--- a/research-hub-web/src/app/components/softwares/software-routing.module.ts
+++ b/research-hub-web/src/app/components/softwares/software-routing.module.ts
@@ -1,10 +1,12 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
-import { SoftwaresComponent } from './softwares.component';
+import { SoftwareListComponent } from './software-list/software-list.component';
+import { SoftwareComponent } from './software/software.component';
 
 
 const routes: Routes = [
-  { path: '', component: SoftwaresComponent }
+  { path: '', component: SoftwareListComponent },
+  { path: ':slug', component: SoftwareComponent}
 ];
 
 @NgModule({
diff --git a/research-hub-web/src/app/components/softwares/softwares.component.html b/research-hub-web/src/app/components/softwares/software/software.component.html
similarity index 95%
rename from research-hub-web/src/app/components/softwares/softwares.component.html
rename to research-hub-web/src/app/components/softwares/software/software.component.html
index 87c18c31d..e4321b1bd 100644
--- a/research-hub-web/src/app/components/softwares/softwares.component.html
+++ b/research-hub-web/src/app/components/softwares/software/software.component.html
@@ -1,11 +1,3 @@
-<!-- If we're displaying a collection of Software-->
-<div
-    *ngIf="allSoftware$ | async as allSoftware"
-    class="site-padding margin-bottom top-padding"
-    ngClass.lt-md="site-padding-mobile margin-bottom top-padding">
-    <app-collection-list [collection]="allSoftware"></app-collection-list>
-</div>
-
 <div id="software-container" *ngIf="software | async as software">
 
     <!-- Templates -->
diff --git a/research-hub-web/src/app/components/softwares/softwares.component.scss b/research-hub-web/src/app/components/softwares/software/software.component.scss
similarity index 100%
rename from research-hub-web/src/app/components/softwares/softwares.component.scss
rename to research-hub-web/src/app/components/softwares/software/software.component.scss
diff --git a/research-hub-web/src/app/components/softwares/softwares.component.spec.ts b/research-hub-web/src/app/components/softwares/software/software.component.spec.ts
similarity index 91%
rename from research-hub-web/src/app/components/softwares/softwares.component.spec.ts
rename to research-hub-web/src/app/components/softwares/software/software.component.spec.ts
index d3309c625..ad75ff264 100644
--- a/research-hub-web/src/app/components/softwares/softwares.component.spec.ts
+++ b/research-hub-web/src/app/components/softwares/software/software.component.spec.ts
@@ -1,6 +1,6 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { PageTitleService } from '@services/page-title.service';
-import { SoftwaresComponent } from './softwares.component';
+import { SoftwareComponent } from './software.component';
 import { ApolloTestingController, ApolloTestingModule } from 'apollo-angular/testing';
 import { RouterModule, ActivatedRoute } from '@angular/router';
 import { Observable, of } from 'rxjs';
@@ -13,8 +13,8 @@ import { RouterTestingModule } from '@angular/router/testing';
 import { MockModule, MockProvider } from 'ng-mocks';
 
 describe('SoftwaresComponent', () => {
-  let component: SoftwaresComponent;
-  let fixture: ComponentFixture<SoftwaresComponent>;
+  let component: SoftwareComponent;
+  let fixture: ComponentFixture<SoftwareComponent>;
   let controller: ApolloTestingController;
 
   const mockAllSoftware$: Observable<SoftwareCollection> = of({
@@ -47,7 +47,7 @@ describe('SoftwaresComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [
-        SoftwaresComponent
+        SoftwareComponent
       ],
       imports: [
         RouterTestingModule,
@@ -65,7 +65,7 @@ describe('SoftwaresComponent', () => {
 
   beforeEach(() => {
     controller = TestBed.inject(ApolloTestingController);
-    fixture = TestBed.createComponent(SoftwaresComponent);
+    fixture = TestBed.createComponent(SoftwareComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
@@ -88,7 +88,7 @@ describe('SoftwaresComponent', () => {
   describe('When a url slug is present', async () => {
     beforeEach(() => {
       controller = TestBed.inject(ApolloTestingController);
-      fixture = TestBed.createComponent(SoftwaresComponent);
+      fixture = TestBed.createComponent(SoftwareComponent);
       component = fixture.componentInstance;
       TestBed.inject(ActivatedRoute).params = of({
         slug: 'death-star'
diff --git a/research-hub-web/src/app/components/softwares/softwares.component.ts b/research-hub-web/src/app/components/softwares/software/software.component.ts
similarity index 59%
rename from research-hub-web/src/app/components/softwares/softwares.component.ts
rename to research-hub-web/src/app/components/softwares/software/software.component.ts
index 221a20c70..8c952d372 100644
--- a/research-hub-web/src/app/components/softwares/softwares.component.ts
+++ b/research-hub-web/src/app/components/softwares/software/software.component.ts
@@ -20,10 +20,10 @@ import supportsWebP from 'supports-webp';
 
 @Component({
   selector: 'app-software',
-  templateUrl: './softwares.component.html',
-  styleUrls: ['./softwares.component.scss']
+  templateUrl: './software.component.html',
+  styleUrls: ['./software.component.scss']
 })
-export class SoftwaresComponent implements OnInit, OnDestroy {
+export class SoftwareComponent implements OnInit, OnDestroy {
   nodeRenderers: Record<string, Type<NodeRenderer>> = {
     [BLOCKS.QUOTE]: BodyMediaComponent,
     [BLOCKS.EMBEDDED_ASSET]: BodyMediaComponent,
@@ -84,62 +84,39 @@ export class SoftwaresComponent implements OnInit, OnDestroy {
    * Function that loads the Software/collection depending on if a slug is present.
    */
   private async _loadContent() {
-    /**
-     * If this.slug is defined, we're loading an individual Software,
-     * therefore run the corresponding query. If not, return all Software.
-     */
-    if (!!this.slug) {
-      // Check if the article slug is valid otherwise redirect to 404
-      this.getAllSoftwareSlugs().subscribe(data => {
-        let slugs = [];
-        data.items.forEach(data => {
-          slugs.push(data.slug)
-        })
-        if (!slugs.includes(this.slug)) { this.router.navigate(['error/404']) }
-      });
-      this.software = this.getSoftwareBySlug(this.slug);
-      this.software$ = this.getSoftwareBySlug(this.slug).subscribe(data => {
-        // Strip nulls from related collection data.
-        data.relatedContactsCollection.items = data.relatedContactsCollection.items.filter(item => item);
-        data.relatedDocsCollection.items = data.relatedDocsCollection.items.filter(item => item);
-        data.relatedItemsCollection.items = data.relatedItemsCollection.items.filter(item => item);
-        data.relatedOrgsCollection.items = data.relatedOrgsCollection.items.filter(item => item);
+    // Check if the article slug is valid otherwise redirect to 404
+    this.getAllSoftwareSlugs().subscribe(data => {
+      let slugs = [];
+      data.items.forEach(data => {
+        slugs.push(data.slug)
+      })
+      if (!slugs.includes(this.slug)) { this.router.navigate(['error/404']) }
+    });
+    this.software = this.getSoftwareBySlug(this.slug);
+    this.software$ = this.getSoftwareBySlug(this.slug).subscribe(data => {
+      // Strip nulls from related collection data.
+      data.relatedContactsCollection.items = data.relatedContactsCollection.items.filter(item => item);
+      data.relatedDocsCollection.items = data.relatedDocsCollection.items.filter(item => item);
+      data.relatedItemsCollection.items = data.relatedItemsCollection.items.filter(item => item);
+      data.relatedOrgsCollection.items = data.relatedOrgsCollection.items.filter(item => item);
 
-        // Set banner image URL for webp format if webp is supported
-        if (data.banner?.url) {
-          this.bannerImageUrl = this.supportsWebp ? data.banner?.url + '?w=1900&fm=webp' : data.banner?.url + '?w=1900';
-        } else {
-          this.bannerImageUrl = undefined;
-        }
+      // Set banner image URL for webp format if webp is supported
+      if (data.banner?.url) {
+        this.bannerImageUrl = this.supportsWebp ? data.banner?.url + '?w=1900&fm=webp' : data.banner?.url + '?w=1900';
+      } else {
+        this.bannerImageUrl = undefined;
+      }
 
-        // If Call To Action is an email address
-        if (data.callToAction?.match(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/)) {
-          data['callToAction'] = 'mailto:' + data['callToAction'];
-        }
+      // If Call To Action is an email address
+      if (data.callToAction?.match(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/)) {
+        data['callToAction'] = 'mailto:' + data['callToAction'];
+      }
 
-        this.bodyMediaService.setBodyMedia(data.bodyText?.links);
-        this.pageTitleService.title = data.title;
-      });
-      this.parentSubHubs = await this.cerGraphQLService.getParentSubHubs(this.slug);
-    } else {
-      this.pageTitleService.title = 'Software';
-      this.allSoftware$ = this.getAllSoftware();
-      try { this.software$.unsubscribe(); } catch { }
-    }
-  }
+      this.bodyMediaService.setBodyMedia(data.bodyText?.links);
+      this.pageTitleService.title = data.title;
+    });
+    this.parentSubHubs = await this.cerGraphQLService.getParentSubHubs(this.slug);
 
-  /**
-   * Function that returns all Software from the SoftwareCollection as an observable
-   * of type SoftwareCollection. This is then unwrapped with the async pipe.
-   *
-   * This function is only called if no slug parameter is present in the URL, i.e. the
-   * user is visiting Software/slug-name.
-   */
-  public getAllSoftware(): Observable<SoftwareCollection> {
-    try {
-      return this.allSoftwareGQL.fetch()
-        .pipe(pluck('data', 'softwareCollection')) as Observable<SoftwareCollection>
-    } catch (e) { console.error('Error loading all Software:', e) };
   }
 
   /**
diff --git a/research-hub-web/src/app/components/softwares/softwares.module.ts b/research-hub-web/src/app/components/softwares/softwares.module.ts
index 3bf909b06..e0159aed2 100644
--- a/research-hub-web/src/app/components/softwares/softwares.module.ts
+++ b/research-hub-web/src/app/components/softwares/softwares.module.ts
@@ -2,12 +2,13 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
 import { SoftwareRoutingModule } from './software-routing.module';
-import { SoftwaresComponent } from './softwares.component';
+import { SoftwareComponent } from './software/software.component';
 import { SharedModule } from '@components/shared/app.shared.module';
 import { NgxContentfulRichTextModule } from 'ngx-contentful-rich-text';
+import { SoftwareListComponent } from './software-list/software-list.component';
 
 @NgModule({
-  declarations: [SoftwaresComponent],
+  declarations: [SoftwareComponent, SoftwareListComponent],
   imports: [
     CommonModule,
     SoftwareRoutingModule,
diff --git a/research-hub-web/src/app/components/subhubs/subhub-list/subhub-list.component.html b/research-hub-web/src/app/components/subhubs/subhub-list/subhub-list.component.html
new file mode 100644
index 000000000..afaf62624
--- /dev/null
+++ b/research-hub-web/src/app/components/subhubs/subhub-list/subhub-list.component.html
@@ -0,0 +1 @@
+<app-collection-list [collection]="subhubs"></app-collection-list>
diff --git a/research-hub-web/src/app/components/subhubs/subhub-list/subhub-list.component.scss b/research-hub-web/src/app/components/subhubs/subhub-list/subhub-list.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/research-hub-web/src/app/components/subhubs/subhub-list/subhub-list.component.spec.ts b/research-hub-web/src/app/components/subhubs/subhub-list/subhub-list.component.spec.ts
new file mode 100644
index 000000000..d8539a0ad
--- /dev/null
+++ b/research-hub-web/src/app/components/subhubs/subhub-list/subhub-list.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SubhubListComponent } from './subhub-list.component';
+
+describe('SubhubListComponent', () => {
+  let component: SubhubListComponent;
+  let fixture: ComponentFixture<SubhubListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SubhubListComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SubhubListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/research-hub-web/src/app/components/subhubs/subhub-list/subhub-list.component.ts b/research-hub-web/src/app/components/subhubs/subhub-list/subhub-list.component.ts
new file mode 100644
index 000000000..6588ea34d
--- /dev/null
+++ b/research-hub-web/src/app/components/subhubs/subhub-list/subhub-list.component.ts
@@ -0,0 +1,29 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { AllSubHubGQL, SubHubCollection } from '@app/graphql/schema';
+import { Subscription } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+@Component({
+  selector: 'app-subhub-list',
+  templateUrl: './subhub-list.component.html',
+  styleUrls: ['./subhub-list.component.scss']
+})
+export class SubhubListComponent implements OnInit, OnDestroy {
+  public subhubs: SubHubCollection;
+
+  private subscription = new Subscription();
+
+  constructor(
+    private allSubhubGQL: AllSubHubGQL
+  ) { }
+
+  ngOnInit(): void {
+    this.subscription.add(this.allSubhubGQL.fetch().pipe(
+      map((result) => result.data.subHubCollection as SubHubCollection)
+    ).subscribe((collection) => this.subhubs = collection));
+  }
+
+  ngOnDestroy(): void {
+    this.subscription.unsubscribe();
+  }
+}
diff --git a/research-hub-web/src/app/components/subhubs/subhubs.component.html b/research-hub-web/src/app/components/subhubs/subhub/subhub.component.html
similarity index 93%
rename from research-hub-web/src/app/components/subhubs/subhubs.component.html
rename to research-hub-web/src/app/components/subhubs/subhub/subhub.component.html
index 615ee920f..4b11c0727 100644
--- a/research-hub-web/src/app/components/subhubs/subhubs.component.html
+++ b/research-hub-web/src/app/components/subhubs/subhub/subhub.component.html
@@ -1,14 +1,6 @@
-<!-- If we're displaying a collection of SubHubs-->
-<div
-    *ngIf="allSubHubs$ | async as allSubHubs"
-    class="site-padding margin-bottom top-padding"
-    ngClass.lt-md="site-padding-mobile margin-bottom top-padding">
-    <app-collection-list [collection]="allSubHubs"></app-collection-list>
-</div>
-
 <div style="overflow-x: hidden" class="results" *ngIf="subHub | async as subHub">
 
-    <div id='subhub-container'>
+    <div id="subhub-container">
 
         <!-- Templates -->
         <ng-template #subHubChildren><app-large-cards id="subHub-children" [contentItem]="subHub"></app-large-cards></ng-template>
diff --git a/research-hub-web/src/app/components/subhubs/subhubs.component.scss b/research-hub-web/src/app/components/subhubs/subhub/subhub.component.scss
similarity index 100%
rename from research-hub-web/src/app/components/subhubs/subhubs.component.scss
rename to research-hub-web/src/app/components/subhubs/subhub/subhub.component.scss
diff --git a/research-hub-web/src/app/components/subhubs/subhubs.component.spec.ts b/research-hub-web/src/app/components/subhubs/subhub/subhub.component.spec.ts
similarity index 96%
rename from research-hub-web/src/app/components/subhubs/subhubs.component.spec.ts
rename to research-hub-web/src/app/components/subhubs/subhub/subhub.component.spec.ts
index 4a9392841..6d46aeab2 100644
--- a/research-hub-web/src/app/components/subhubs/subhubs.component.spec.ts
+++ b/research-hub-web/src/app/components/subhubs/subhub/subhub.component.spec.ts
@@ -1,31 +1,27 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
-import { SubhubsComponent } from './subhubs.component';
 import { ApolloTestingController, ApolloTestingModule } from 'apollo-angular/testing';
 import { SharedModule } from '@components/shared/app.shared.module';
-import { SubhubsRoutingModule } from './subhubs-routing.module';
-import { RouterModule, ActivatedRoute } from '@angular/router';
+import { ActivatedRoute } from '@angular/router';
 
-import { By } from '@angular/platform-browser';
 import { CommonModule } from '@angular/common';
 import { MaterialModule } from '@app/app.material.module';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { Observable, of, from } from 'rxjs';
+import { Observable, of } from 'rxjs';
 import {
   SubHub,
   SubHubCollection,
-  AllSubHubGQL,
   AllContentItemParentSubHubsGQL,
-  SubHubOrder,
 } from "@graphql/schema";
 import { PageTitleService } from '@services/page-title.service';
 import { MockModule, MockProvider } from 'ng-mocks';
 import { RouterTestingModule } from '@angular/router/testing';
+import { SubhubComponent } from './subhub.component';
 
 
 describe('SubhubsComponent', () => {
-  let component: SubhubsComponent;
-  let fixture: ComponentFixture<SubhubsComponent>;
+  let component: SubhubComponent;
+  let fixture: ComponentFixture<SubhubComponent>;
   let backend: ApolloTestingController;
   let controller: ApolloTestingController;
   let subHubSpy: any; // returns mock query data
@@ -504,7 +500,7 @@ describe('SubhubsComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [SubhubsComponent],
+      declarations: [SubhubComponent],
       imports: [
         ApolloTestingModule,
         MockModule(CommonModule),
@@ -522,7 +518,7 @@ describe('SubhubsComponent', () => {
 
   beforeEach(() => {
     controller = TestBed.inject(ApolloTestingController);
-    fixture = TestBed.createComponent(SubhubsComponent);
+    fixture = TestBed.createComponent(SubhubComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
@@ -545,7 +541,7 @@ describe('SubhubsComponent', () => {
   describe('When a url slug is present', async () => {
     beforeEach(() => {
       controller = TestBed.inject(ApolloTestingController);
-      fixture = TestBed.createComponent(SubhubsComponent);
+      fixture = TestBed.createComponent(SubhubComponent);
       component = fixture.componentInstance;
       TestBed.inject(ActivatedRoute).params = of({
         slug: 'first-subhub'
diff --git a/research-hub-web/src/app/components/subhubs/subhubs.component.ts b/research-hub-web/src/app/components/subhubs/subhub/subhub.component.ts
similarity index 81%
rename from research-hub-web/src/app/components/subhubs/subhubs.component.ts
rename to research-hub-web/src/app/components/subhubs/subhub/subhub.component.ts
index 7106e6c90..5d719196b 100644
--- a/research-hub-web/src/app/components/subhubs/subhubs.component.ts
+++ b/research-hub-web/src/app/components/subhubs/subhub/subhub.component.ts
@@ -19,10 +19,10 @@ import supportsWebP from 'supports-webp';
 
 @Component({
   selector: 'app-subhubs',
-  templateUrl: './subhubs.component.html',
-  styleUrls: ['./subhubs.component.scss']
+  templateUrl: './subhub.component.html',
+  styleUrls: ['./subhub.component.scss']
 })
-export class SubhubsComponent implements OnInit, OnDestroy {
+export class SubhubComponent implements OnInit, OnDestroy {
   nodeRenderers: Record<string, Type<NodeRenderer>> = {
     [BLOCKS.QUOTE]: BodyMediaComponent,
     [BLOCKS.EMBEDDED_ASSET]: BodyMediaComponent,
@@ -89,11 +89,6 @@ export class SubhubsComponent implements OnInit, OnDestroy {
    * Function that loads the SubHub/collection depending on if a slug is present.
    */
   private async _loadContent() {
-    /**
-     * If this.slug is defined, we're loading an individual SubHub,
-     * therefore run the corresponding query. If not, return all SubHub.
-     */
-    if (!!this.slug) {
       this.subHub = this.getSubHubBySlug(this.slug);
       this.subHub$ = this.getSubHubBySlug(this.slug).subscribe(data => {
         // Remove nulls from server in case of error.
@@ -110,25 +105,7 @@ export class SubhubsComponent implements OnInit, OnDestroy {
         }
       });
       this.parentSubHubs = await this.cerGraphQLService.getParentSubHubs(this.slug);
-    } else {
-      this.pageTitleService.title = 'SubHub';
-      this.allSubHubs$ = this.getAllSubHubs();
-      try { this.subHub$.unsubscribe(); } catch { }
-    }
-  }
 
-  /**
-   * Function that returns all SubHub from the SubHubCollection as an observable
-   * of type SubHubCollection. This is then unwrapped with the async pipe.
-   *
-   * This function is only called if no slug parameter is present in the URL, i.e. the
-   * user is visiting SubHub/slug-name.
-   */
-  public getAllSubHubs(): Observable<SubHubCollection> {
-    try {
-      return this.allSubHubGQL.fetch()
-        .pipe(pluck('data', 'subHubCollection')) as Observable<SubHubCollection>
-    } catch (e) { console.error('Error loading all SubHub:', e) };
   }
 
   /**
diff --git a/research-hub-web/src/app/components/subhubs/subhubs-routing.module.ts b/research-hub-web/src/app/components/subhubs/subhubs-routing.module.ts
index bd9084b3b..1a0a69082 100644
--- a/research-hub-web/src/app/components/subhubs/subhubs-routing.module.ts
+++ b/research-hub-web/src/app/components/subhubs/subhubs-routing.module.ts
@@ -1,10 +1,12 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
-import { SubhubsComponent } from './subhubs.component';
+import { SubhubListComponent } from './subhub-list/subhub-list.component';
+import { SubhubComponent } from './subhub/subhub.component';
 
 
 const routes: Routes = [
-  {path: '', component: SubhubsComponent}
+  { path: '', component: SubhubListComponent },
+  { path: ':slug', component: SubhubComponent}
 ];
 
 @NgModule({
diff --git a/research-hub-web/src/app/components/subhubs/subhubs.module.ts b/research-hub-web/src/app/components/subhubs/subhubs.module.ts
index 24d0401cb..54c147d4f 100644
--- a/research-hub-web/src/app/components/subhubs/subhubs.module.ts
+++ b/research-hub-web/src/app/components/subhubs/subhubs.module.ts
@@ -2,12 +2,13 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
 import { SubhubsRoutingModule } from './subhubs-routing.module';
-import { SubhubsComponent } from './subhubs.component';
+import { SubhubComponent } from './subhub/subhub.component';
 import { SharedModule } from '@components/shared/app.shared.module';
 import { NgxContentfulRichTextModule } from 'ngx-contentful-rich-text';
+import { SubhubListComponent } from './subhub-list/subhub-list.component';
 
 @NgModule({
-  declarations: [SubhubsComponent],
+  declarations: [SubhubComponent, SubhubListComponent],
   imports: [
     CommonModule,
     SubhubsRoutingModule,
@@ -15,4 +16,4 @@ import { NgxContentfulRichTextModule } from 'ngx-contentful-rich-text';
     NgxContentfulRichTextModule
   ]
 })
-export class SubhubsModule { }
\ No newline at end of file
+export class SubhubsModule { }
diff --git a/research-hub-web/src/app/routing/routing.ts b/research-hub-web/src/app/routing/routing.ts
index a2eea331a..2c54f7871 100644
--- a/research-hub-web/src/app/routing/routing.ts
+++ b/research-hub-web/src/app/routing/routing.ts
@@ -36,79 +36,47 @@ export const appRoutes: Routes = [
       },
       {
         path: 'search',
-        loadChildren: () => import('@app/components/search-page/search-page.module').then((m) => m.SearchPageModule),
+        loadChildren: () => import('@components/search-page/search-page.module').then((m) => m.SearchPageModule),
       },
       {
         path: 'categories',
-        loadChildren: () => import('@app/components/categories-page/categories-page.module').then((m) => m.CategoriesPageModule),
+        loadChildren: () => import('@components/categories-page/categories-page.module').then((m) => m.CategoriesPageModule),
       },
       {
         path: 'activities',
-        loadChildren: () => import('@app/components/activities-page/activities-page.module').then((m) => m.ActivitiesPageModule),
+        loadChildren: () => import('@components/activities-page/activities-page.module').then((m) => m.ActivitiesPageModule),
       },
       {
         path: 'equipment',
-        loadChildren: () => import('@app/components/equipments/equipments.module').then(m => m.EquipmentsModule)
+        loadChildren: () => import('@components/equipments/equipments.module').then(m => m.EquipmentsModule)
       },
       {
-        path: 'equipment/:slug',
-        loadChildren: () => import('@app/components/equipments/equipments.module').then(m => m.EquipmentsModule)
-      },
-      {
-        path: 'casestudies',
-        loadChildren: () => import('@components/casestudys/casestudys.module').then(m => m.CasestudysModule)
-      },
-      {
-        path: 'casestudy/:slug',
+        path: 'casestudy',
         loadChildren: () => import('@components/casestudys/casestudys.module').then(m => m.CasestudysModule)
       },
       {
-        path: 'articles',
+        path: 'article',
         loadChildren: () => import('@components/articles/articles.module').then(m => m.ArticlesModule)
       },
       {
-        path: 'article/:slug',
-        loadChildren: () => import('@components/articles/articles.module').then(m => m.ArticlesModule)
-      },
-      {
-        path: 'event/:slug',
-        loadChildren: () => import('@app/components/events/events.module').then(m => m.EventsModule)
-      },
-      {
-        path: 'events',
-        loadChildren: () => import('@app/components/events/events.module').then(m => m.EventsModule)
-      },
-      {
-        path: 'funding/:slug',
-        loadChildren: () => import('@app/components/fundings/fundings.module').then(m => m.FundingsModule)
+        path: 'event',
+        loadChildren: () => import('@components/events/events.module').then(m => m.EventsModule)
       },
       {
         path: 'funding',
-        loadChildren: () => import('@app/components/fundings/fundings.module').then(m => m.FundingsModule)
-      },
-      {
-        path: 'subhub/:slug',
-        loadChildren: () => import('@components/subhubs/subhubs.module').then(m => m.SubhubsModule)
+        loadChildren: () => import('@components/fundings/fundings.module').then(m => m.FundingsModule)
       },
       {
-        path: 'subhubs',
+        path: 'subhub',
         loadChildren: () => import('@components/subhubs/subhubs.module').then(m => m.SubhubsModule)
       },
       {
-        path: 'services',
-        loadChildren: () => import('@app/components/services/services.module').then(m => m.ServicesModule)
-      },
-      {
-        path: 'service/:slug',
-        loadChildren: () => import('@app/components/services/services.module').then(m => m.ServicesModule)
-      },
-      {
-        path: 'software/:slug',
-        loadChildren: () => import('@app/components/softwares/softwares.module').then(m => m.SoftwaresModule)
+        path: 'service',
+        loadChildren: () => import('@components/services/services.module').then(m => m.ServicesModule)
       },
       {
         path: 'software',
-        loadChildren: () => import('@app/components/softwares/softwares.module').then(m => m.SoftwaresModule)
+        loadChildren: () => import('@components/softwares/softwares.module').then(m => m.SoftwaresModule)
       },
     ]
   },
@@ -118,6 +86,6 @@ export const appRoutes: Routes = [
    */
   {
     path: '**',
-    loadChildren: () =>  import("@app/components/subhub-routes-loader/subhub-routes-loader.module").then(m => m.SubHubRoutesLoaderModule)
+    loadChildren: () =>  import("@components/subhub-routes-loader/subhub-routes-loader.module").then(m => m.SubHubRoutesLoaderModule)
   }
 ];

From 3b70c8c59e827691166167f9f2a008269e1c7062 Mon Sep 17 00:00:00 2001
From: Luke <lukas.trombach@auckland.ac.nz>
Date: Wed, 20 Oct 2021 14:25:50 +1300
Subject: [PATCH 02/39] initial refactor of article component

---
 .../articles/article/article.component.html   |   2 +-
 .../articles/article/article.component.ts     | 138 +++++++-----------
 .../shared/cards/cards.component.html         |   6 +-
 .../shared/cards/cards.component.ts           |  32 ++--
 4 files changed, 70 insertions(+), 108 deletions(-)

diff --git a/research-hub-web/src/app/components/articles/article/article.component.html b/research-hub-web/src/app/components/articles/article/article.component.html
index 4df2769ed..096900d25 100644
--- a/research-hub-web/src/app/components/articles/article/article.component.html
+++ b/research-hub-web/src/app/components/articles/article/article.component.html
@@ -1,4 +1,4 @@
-<div id="article-container" *ngIf="article | async as article">
+<div id="article-container" *ngIf="article$ | async as article">
 
     <!-- Templates -->
     <ng-template #breadcrumbs>
diff --git a/research-hub-web/src/app/components/articles/article/article.component.ts b/research-hub-web/src/app/components/articles/article/article.component.ts
index 749099ac7..f33617cce 100644
--- a/research-hub-web/src/app/components/articles/article/article.component.ts
+++ b/research-hub-web/src/app/components/articles/article/article.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnDestroy, OnInit, Type } from '@angular/core';
+import { Component, OnInit, Type } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { BodyMediaComponent } from '@components/shared/body-media/body-media.component';
 import { BLOCKS, INLINES } from '@contentful/rich-text-types';
@@ -14,8 +14,8 @@ import { CerGraphqlService } from '@services/cer-graphql.service';
 import { PageTitleService } from '@services/page-title.service';
 import { NodeRenderer } from 'ngx-contentful-rich-text';
 import { DeviceDetectorService } from 'ngx-device-detector';
-import { Observable, Subscription } from 'rxjs';
-import { flatMap, pluck } from 'rxjs/operators';
+import { Observable, of, throwError } from 'rxjs';
+import { map, mergeMap, switchMap } from 'rxjs/operators';
 import supportsWebP from 'supports-webp';
 
 @Component({
@@ -23,7 +23,7 @@ import supportsWebP from 'supports-webp';
   templateUrl: './article.component.html',
   styleUrls: ['./article.component.scss']
 })
-export class ArticlesComponent implements OnInit, OnDestroy {
+export class ArticlesComponent implements OnInit {
   nodeRenderers: Record<string, Type<NodeRenderer>> = {
     [BLOCKS.QUOTE]: BodyMediaComponent,
     [BLOCKS.EMBEDDED_ASSET]: BodyMediaComponent,
@@ -34,13 +34,8 @@ export class ArticlesComponent implements OnInit, OnDestroy {
   };
 
   public isMobile: Boolean;
-  public bannerTextStyling;
-  public slug: string;
-  public article;
-  public article$: Subscription;
-  public route$: Subscription;
-  public bodyLinks$: Subscription;
-  public allArticles$: Observable<ArticleCollection>;
+  public bannerTextStyling = 'color: white; text-shadow: 0px 0px 8px #333333;';
+  public article$: Observable<Article>;
   public parentSubHubs;
   public supportsWebp: Boolean;
   public bannerImageUrl: string;
@@ -70,101 +65,66 @@ export class ArticlesComponent implements OnInit, OnDestroy {
     });
   }
 
-  async ngOnInit() {
-    /**
-     * Check if there is a slug URL parameter present. If so, this is
-     * passed to the getArticleBySlug() method.
-     */
-    this.route$ = this.route.params.subscribe(params => {
-      this.slug = params.slug || this.route.snapshot.data.slug;
-      this._loadContent();
-    });
+  ngOnInit() {
+    this.article$ = this.route.params.pipe(
+      map((params) => {
+        return (params.slug || this.route.snapshot.data.slug) as string;
+      }),
+      switchMap((slug) => this.loadArticle(slug))
+    );
 
-    /**
-     * Set styling for text if banner is present
-     */
-    this.bannerTextStyling = 'color: white; text-shadow: 0px 0px 8px #333333;';
   }
 
   /**
    * Function that loads the article/collection depending on if a slug is present.
    */
-  private async _loadContent() {
-    /**
-     * If this.slug is defined, we're loading an individual article,
-     * therefore run the corresponding query. If not, return all articles.
-     */
-
-    this.getAllArticlesSlugs().subscribe(data => {
-      let slugs = [];
-      data.items.forEach(data => {
-        slugs.push(data.slug)
+  private loadArticle(slug: string): Observable<Article> {
+    return this.getArticleBySlug(slug).pipe(
+      map(data => {
+
+        // Strip nulls from related collection data.
+        data.relatedContactsCollection.items = data.relatedContactsCollection.items.filter(item => item);
+        data.relatedDocsCollection.items = data.relatedDocsCollection.items.filter(item => item);
+        data.relatedItemsCollection.items = data.relatedItemsCollection.items.filter(item => item);
+        data.relatedOrgsCollection.items = data.relatedOrgsCollection.items.filter(item => item);
+
+        // If Call To Action is an email address
+        if (data.callToAction?.match(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/)) {
+          data['callToAction'] = 'mailto:' + data['callToAction'];
+        }
+
+        // Set banner image URL for webp format if webp is supported
+        if (data.banner?.url) {
+          this.bannerImageUrl = this.supportsWebp ? data.banner?.url + '?w=1900&fm=webp' : data.banner?.url + '?w=1900';
+        } else {
+          this.bannerImageUrl = undefined;
+        }
+
+        this.bodyMediaService.setBodyMedia(data.bodyText?.links);
+        this.pageTitleService.title = data.title;
+
+        return data;
       })
-      if (!slugs.includes(this.slug)) { this.router.navigate(['error/404']) }
-    });
-    this.article = this.getArticleBySlug(this.slug);
-    this.article$ = this.getArticleBySlug(this.slug).subscribe(data => {
-
-      // Strip nulls from related collection data.
-      data.relatedContactsCollection.items = data.relatedContactsCollection.items.filter(item => item);
-      data.relatedDocsCollection.items = data.relatedDocsCollection.items.filter(item => item);
-      data.relatedItemsCollection.items = data.relatedItemsCollection.items.filter(item => item);
-      data.relatedOrgsCollection.items = data.relatedOrgsCollection.items.filter(item => item);
-
-      // If Call To Action is an email address
-      if (data.callToAction?.match(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/)) {
-        data['callToAction'] = 'mailto:' + data['callToAction'];
-      }
-
-      // Set banner image URL for webp format if webp is supported
-      if (data.banner?.url) {
-        this.bannerImageUrl = this.supportsWebp ? data.banner?.url + '?w=1900&fm=webp' : data.banner?.url + '?w=1900';
-      } else {
-        this.bannerImageUrl = undefined;
-      }
-
-      this.bodyMediaService.setBodyMedia(data.bodyText?.links);
-      this.pageTitleService.title = data.title;
-    });
-    this.parentSubHubs = await this.cerGraphQLService.getParentSubHubs(this.slug);
+    );
 
-  }
+    // NOTE: this should be moved to the breadcrumb component
+    // this.parentSubHubs = await this.cerGraphQLService.getParentSubHubs(this.slug);
 
-  /**
-   * Function that returns all articles slugs from the ArticleCollection as an observable
-   * of type ArticleCollection. This is then unwrapped with the async pipe.
-   *
-   * This function called to determine if a valid slug has been searched otherwise redirect
-   *
-   */
-  public getAllArticlesSlugs(): Observable<ArticleCollection> {
-    try {
-      return this.allArticlesSlugsGQL.fetch()
-        .pipe(pluck('data', 'articleCollection')) as Observable<ArticleCollection>
-    } catch (e) { console.error('Error loading all articles:', e) };
   }
 
   /**
    * Function that returns an individual article from the ArticleCollection by it's slug
    * as an observable of type Article. This is then unwrapped with the async pipe.
    *
-   * This function is only called if no slug parameter is present in the URL, i.e.
-   * the user is visiting /articles.
-   *
    * @param slug The article's slug. Retrieved from the route parameter of the same name.
    */
   public getArticleBySlug(slug: string): Observable<Article> {
-    try {
-      return this.getArticleBySlugGQL.fetch({ slug: this.slug })
-        .pipe(flatMap(x => x.data.articleCollection.items)) as Observable<Article>;
-    } catch (e) { console.error(`Error loading article ${slug}:`, e); }
-  }
-
-  ngOnDestroy() {
-    try {
-      this.article$.unsubscribe();
-      this.route$.unsubscribe();
-      this.bodyLinks$.unsubscribe();
-    } catch { }
+    return this.getArticleBySlugGQL.fetch({ slug }).pipe(
+      mergeMap(x =>
+        x.data.articleCollection.items.length === 0
+          ? throwError(`Could not load article with slug "${slug}"`)
+          : of(x.data.articleCollection.items[0])
+      )
+    ) as Observable<Article>;
   }
 }
diff --git a/research-hub-web/src/app/components/shared/cards/cards.component.html b/research-hub-web/src/app/components/shared/cards/cards.component.html
index 5063ceb23..293858395 100644
--- a/research-hub-web/src/app/components/shared/cards/cards.component.html
+++ b/research-hub-web/src/app/components/shared/cards/cards.component.html
@@ -1,4 +1,4 @@
-<div *ngIf="_contentItem?.items?.length > 0">
+<div *ngIf="contentItem?.items?.length > 0">
   <!-- Title of card collection -->
   <h3 *ngIf="title">
     {{ title }}
@@ -11,7 +11,7 @@ <h3 *ngIf="title">
       role="navigation"
       fxFlex="19%"
       aria-label="Collection list"
-      *ngFor="let content of _contentItem.items"
+      *ngFor="let content of contentItem.items"
       class="collection"
     >
       <!-- Templates -->
@@ -42,7 +42,7 @@ <h3 *ngIf="title">
 
       <ng-template #standard>
         <mat-card role="list-item">
-          <ng-container *ngIf="content.banner; then image; else noImage">
+          <ng-container *ngIf="!hideImage; then image; else noImage">
           </ng-container>
           <span class="card-label">{{
             content.__typename | contentTypeDisplayName
diff --git a/research-hub-web/src/app/components/shared/cards/cards.component.ts b/research-hub-web/src/app/components/shared/cards/cards.component.ts
index 86ff4fec7..fb8ec9783 100644
--- a/research-hub-web/src/app/components/shared/cards/cards.component.ts
+++ b/research-hub-web/src/app/components/shared/cards/cards.component.ts
@@ -1,28 +1,30 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core';
 
 @Component({
   selector: 'app-cards',
   templateUrl: './cards.component.html',
   styleUrls: ['./cards.component.scss']
 })
-export class CardsComponent implements OnInit {
-  @Input() title;
-  public _contentItem;
-  @Input() contentItem;
-  @Input() hideImage?: boolean;
-  @Input() flex;
-
-  constructor() { }
+export class CardsComponent {
+  private _contentItem;
 
-  async ngOnInit() {
+  @Input()
+  set contentItem(value: any) {
     // Make a copy of the contentItem, so we can make changes to it without causing ChangedAfterCheckErrors.
     // Then, remove null items.
-    this._contentItem = Object.assign({}, this.contentItem);
+    this._contentItem = Object.assign({}, value);
     // Don't display content without a title or name.
     this._contentItem.items = this._contentItem.items?.filter(item => item && (item.title || item.name || item.maoriName));
-    // If you want to hide image when displayed
-    if (this.hideImage) { this._contentItem.items.forEach(element => {
-        try { delete element['banner'].url } catch {} });
-    };
+  };
+
+  get contentItem(): any {
+    return this._contentItem;
   }
+
+  @Input() title: string;
+  @Input() hideImage?: boolean;
+  @Input() flex: string;
+
+  constructor() { }
+
 }

From c23c6a969533f674a0cc986b71d4fb9bfa0f1c36 Mon Sep 17 00:00:00 2001
From: Luke <lukas.trombach@auckland.ac.nz>
Date: Tue, 9 Nov 2021 15:00:14 +1300
Subject: [PATCH 03/39] merge changes to article.component

---
 .../articles/article/article.component.ts     | 22 ++++++++-----------
 1 file changed, 9 insertions(+), 13 deletions(-)

diff --git a/research-hub-web/src/app/components/articles/article/article.component.ts b/research-hub-web/src/app/components/articles/article/article.component.ts
index f33617cce..ffb745135 100644
--- a/research-hub-web/src/app/components/articles/article/article.component.ts
+++ b/research-hub-web/src/app/components/articles/article/article.component.ts
@@ -1,18 +1,15 @@
 import { Component, OnInit, Type } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { BodyMediaComponent } from '@components/shared/body-media/body-media.component';
-import { BLOCKS, INLINES } from '@contentful/rich-text-types';
 import {
   AllArticlesGQL,
   AllArticlesSlugsGQL,
   Article,
-  ArticleCollection,
   GetArticleBySlugGQL
 } from '@graphql/schema';
 import { BodyMediaService } from '@services/body-media.service';
 import { CerGraphqlService } from '@services/cer-graphql.service';
 import { PageTitleService } from '@services/page-title.service';
-import { NodeRenderer } from 'ngx-contentful-rich-text';
+import { MarkRenderer, NodeRenderer } from 'ngx-contentful-rich-text';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { Observable, of, throwError } from 'rxjs';
 import { map, mergeMap, switchMap } from 'rxjs/operators';
@@ -24,14 +21,8 @@ import supportsWebP from 'supports-webp';
   styleUrls: ['./article.component.scss']
 })
 export class ArticlesComponent implements OnInit {
-  nodeRenderers: Record<string, Type<NodeRenderer>> = {
-    [BLOCKS.QUOTE]: BodyMediaComponent,
-    [BLOCKS.EMBEDDED_ASSET]: BodyMediaComponent,
-    [BLOCKS.EMBEDDED_ENTRY]: BodyMediaComponent,
-    [INLINES.ASSET_HYPERLINK]: BodyMediaComponent,
-    [INLINES.EMBEDDED_ENTRY]: BodyMediaComponent,
-    [INLINES.ENTRY_HYPERLINK]: BodyMediaComponent,
-  };
+  public nodeRenderers: Record<string, Type<NodeRenderer>>;
+  public markRenderers: Record<string, Type<MarkRenderer>>;
 
   public isMobile: Boolean;
   public bannerTextStyling = 'color: white; text-shadow: 0px 0px 8px #333333;';
@@ -53,6 +44,9 @@ export class ArticlesComponent implements OnInit {
   ) {
     this.detectDevice();
     this.detectWebP();
+
+    this.nodeRenderers = this.bodyMediaService.nodeRenderers;
+    this.markRenderers = this.bodyMediaService.markRenderers;
   }
 
   detectDevice() {
@@ -100,7 +94,9 @@ export class ArticlesComponent implements OnInit {
           this.bannerImageUrl = undefined;
         }
 
-        this.bodyMediaService.setBodyMedia(data.bodyText?.links);
+        // For each rich text field add the links to the link maps in the body media service to enable rich text rendering
+        this.bodyMediaService.buildLinkMaps(data.bodyText?.links);
+
         this.pageTitleService.title = data.title;
 
         return data;

From 76ae8f41230d931409a6e919d9a6371cf6282d4c Mon Sep 17 00:00:00 2001
From: Luke <lukas.trombach@auckland.ac.nz>
Date: Wed, 10 Nov 2021 14:45:50 +1300
Subject: [PATCH 04/39] more changes

---
 .../src/app/components/articles/article/article.component.ts  | 4 ++--
 .../src/app/components/articles/articles-routing.module.ts    | 4 ++--
 .../src/app/components/articles/articles.module.ts            | 4 ++--
 .../src/app/components/events/event/event.component.ts        | 4 ++--
 .../src/app/components/fundings/funding/funding.component.ts  | 4 ++--
 .../src/app/components/fundings/fundings.module.ts            | 4 ++--
 .../src/app/components/services/service/service.component.ts  | 4 ++--
 .../app/components/softwares/software/software.component.ts   | 2 +-
 .../src/app/components/subhubs/subhub/subhub.component.ts     | 4 ++--
 9 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/research-hub-web/src/app/components/articles/article/article.component.ts b/research-hub-web/src/app/components/articles/article/article.component.ts
index ffb745135..c8f4f717f 100644
--- a/research-hub-web/src/app/components/articles/article/article.component.ts
+++ b/research-hub-web/src/app/components/articles/article/article.component.ts
@@ -16,11 +16,11 @@ import { map, mergeMap, switchMap } from 'rxjs/operators';
 import supportsWebP from 'supports-webp';
 
 @Component({
-  selector: 'app-articles',
+  selector: 'app-article',
   templateUrl: './article.component.html',
   styleUrls: ['./article.component.scss']
 })
-export class ArticlesComponent implements OnInit {
+export class ArticleComponent implements OnInit {
   public nodeRenderers: Record<string, Type<NodeRenderer>>;
   public markRenderers: Record<string, Type<MarkRenderer>>;
 
diff --git a/research-hub-web/src/app/components/articles/articles-routing.module.ts b/research-hub-web/src/app/components/articles/articles-routing.module.ts
index e882beb51..5bc4df1f1 100644
--- a/research-hub-web/src/app/components/articles/articles-routing.module.ts
+++ b/research-hub-web/src/app/components/articles/articles-routing.module.ts
@@ -1,11 +1,11 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { ArticleListComponent } from './article-list/article-list.component';
-import { ArticlesComponent } from './article/article.component';
+import { ArticleComponent } from './article/article.component';
 
 const routes: Routes = [
   { path: '', component: ArticleListComponent },
-  { path: ':slug', component: ArticlesComponent }
+  { path: ':slug', component: ArticleComponent }
 ];
 
 @NgModule({
diff --git a/research-hub-web/src/app/components/articles/articles.module.ts b/research-hub-web/src/app/components/articles/articles.module.ts
index 61120992f..0a912a703 100644
--- a/research-hub-web/src/app/components/articles/articles.module.ts
+++ b/research-hub-web/src/app/components/articles/articles.module.ts
@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ArticlesRoutingModule } from './articles-routing.module';
-import { ArticlesComponent } from './article/article.component';
+import { ArticleComponent } from './article/article.component';
 import { SharedModule } from '@components/shared/app.shared.module';
 import { NgxContentfulRichTextModule } from 'ngx-contentful-rich-text';
 import { ArticleListComponent } from './article-list/article-list.component';
@@ -10,7 +10,7 @@ import { CardsModule } from '../cards/cards.module';
 
 @NgModule({
   declarations: [
-    ArticlesComponent,
+    ArticleComponent,
     ArticleListComponent
   ],
   imports: [
diff --git a/research-hub-web/src/app/components/events/event/event.component.ts b/research-hub-web/src/app/components/events/event/event.component.ts
index 6076a4417..8236a5723 100644
--- a/research-hub-web/src/app/components/events/event/event.component.ts
+++ b/research-hub-web/src/app/components/events/event/event.component.ts
@@ -17,11 +17,11 @@ import { flatMap, pluck } from 'rxjs/operators';
 import supportsWebP from 'supports-webp';
 
 @Component({
-  selector: 'app-events',
+  selector: 'app-event',
   templateUrl: './event.component.html',
   styleUrls: ['./event.component.scss']
 })
-export class EventsComponent implements OnInit, OnDestroy {
+export class EventComponent implements OnInit, OnDestroy {
   public nodeRenderers: Record<string, Type<NodeRenderer>>;
   public markRenderers: Record<string, Type<MarkRenderer>>;
   public slug: string;
diff --git a/research-hub-web/src/app/components/fundings/funding/funding.component.ts b/research-hub-web/src/app/components/fundings/funding/funding.component.ts
index 42502b30f..ecd323784 100644
--- a/research-hub-web/src/app/components/fundings/funding/funding.component.ts
+++ b/research-hub-web/src/app/components/fundings/funding/funding.component.ts
@@ -17,11 +17,11 @@ import { flatMap, pluck } from 'rxjs/operators';
 import supportsWebP from 'supports-webp';
 
 @Component({
-  selector: 'app-fundings',
+  selector: 'app-funding',
   templateUrl: './funding.component.html',
   styleUrls: ['./funding.component.scss']
 })
-export class FundingsComponent implements OnInit, OnDestroy {
+export class FundingComponent implements OnInit, OnDestroy {
   public nodeRenderers: Record<string, Type<NodeRenderer>>;
   public markRenderers: Record<string, Type<MarkRenderer>>;
   public slug: string;
diff --git a/research-hub-web/src/app/components/fundings/fundings.module.ts b/research-hub-web/src/app/components/fundings/fundings.module.ts
index 5baf864e1..f3a1e5c81 100644
--- a/research-hub-web/src/app/components/fundings/fundings.module.ts
+++ b/research-hub-web/src/app/components/fundings/fundings.module.ts
@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { FundingsComponent } from './funding/funding.component';
+import { FundingComponent } from './funding/funding.component';
 import { FundingRoutingModule } from './funding-routing.module';
 import { SharedModule } from '@components/shared/app.shared.module';
 import { NgxContentfulRichTextModule } from 'ngx-contentful-rich-text';
@@ -9,7 +9,7 @@ import { CardsModule } from '../cards/cards.module';
 
 @NgModule({
   declarations: [
-    FundingsComponent,
+    FundingComponent,
     FundingListComponent
   ],
   imports: [
diff --git a/research-hub-web/src/app/components/services/service/service.component.ts b/research-hub-web/src/app/components/services/service/service.component.ts
index e0e368bf8..707e80f1e 100644
--- a/research-hub-web/src/app/components/services/service/service.component.ts
+++ b/research-hub-web/src/app/components/services/service/service.component.ts
@@ -17,11 +17,11 @@ import { flatMap, pluck } from 'rxjs/operators';
 import supportsWebP from 'supports-webp';
 
 @Component({
-  selector: 'app-services',
+  selector: 'app-service',
   templateUrl: './service.component.html',
   styleUrls: ['./service.component.scss']
 })
-export class ServicesComponent implements OnInit, OnDestroy {
+export class ServiceComponent implements OnInit, OnDestroy {
   public nodeRenderers: Record<string, Type<NodeRenderer>>;
   public markRenderers: Record<string, Type<MarkRenderer>>;
   public slug: string;
diff --git a/research-hub-web/src/app/components/softwares/software/software.component.ts b/research-hub-web/src/app/components/softwares/software/software.component.ts
index 1c5f34042..1dcd6d6ee 100644
--- a/research-hub-web/src/app/components/softwares/software/software.component.ts
+++ b/research-hub-web/src/app/components/softwares/software/software.component.ts
@@ -21,7 +21,7 @@ import supportsWebP from 'supports-webp';
   templateUrl: './software.component.html',
   styleUrls: ['./software.component.scss']
 })
-export class SoftwaresComponent implements OnInit, OnDestroy {
+export class SoftwareComponent implements OnInit, OnDestroy {
   public nodeRenderers: Record<string, Type<NodeRenderer>>;
   public markRenderers: Record<string, Type<MarkRenderer>>;
   public slug: string;
diff --git a/research-hub-web/src/app/components/subhubs/subhub/subhub.component.ts b/research-hub-web/src/app/components/subhubs/subhub/subhub.component.ts
index 6f7cae8fa..176b1bf8a 100644
--- a/research-hub-web/src/app/components/subhubs/subhub/subhub.component.ts
+++ b/research-hub-web/src/app/components/subhubs/subhub/subhub.component.ts
@@ -16,11 +16,11 @@ import { flatMap, pluck } from 'rxjs/operators';
 import supportsWebP from 'supports-webp';
 
 @Component({
-  selector: 'app-subhubs',
+  selector: 'app-subhub',
   templateUrl: './subhub.component.html',
   styleUrls: ['./subhub.component.scss']
 })
-export class SubhubsComponent implements OnInit, OnDestroy {
+export class SubhubComponent implements OnInit, OnDestroy {
   public nodeRenderers: Record<string, Type<NodeRenderer>>;
   public markRenderers: Record<string, Type<MarkRenderer>>;
   public slug: string;

From 6e7ce10a095035edcad7c8ababfb3fb2fcd32bad Mon Sep 17 00:00:00 2001
From: Luke <lukas.trombach@auckland.ac.nz>
Date: Thu, 11 Nov 2021 10:05:02 +1300
Subject: [PATCH 05/39] fixes and 404 redirect

---
 .../articles/article/article.component.html   | 14 ++++---
 .../articles/article/article.component.ts     | 37 +++++++++----------
 .../case-study/case-study.component.html      | 16 ++++----
 3 files changed, 35 insertions(+), 32 deletions(-)

diff --git a/research-hub-web/src/app/components/articles/article/article.component.html b/research-hub-web/src/app/components/articles/article/article.component.html
index ff175ea59..5a292e171 100644
--- a/research-hub-web/src/app/components/articles/article/article.component.html
+++ b/research-hub-web/src/app/components/articles/article/article.component.html
@@ -1,4 +1,4 @@
-<div id="article-container" *ngIf="article$ | async as article">
+<div id="article-container" *ngIf="article">
   <div
     class="banner-container"
     [ngClass]="
@@ -115,7 +115,8 @@ <h3 *ngIf="article?.relatedContactsCollection.items.length > 0">
           <hr />
         </h3>
         <div
-          fxLayout.lg="column"
+          fxLayout="column"
+          fxLayoutGap="0px"
           fxLayout.lt-lg="row wrap"
           fxLayoutGap.lt-lg="25px"
           fxLayout.lt-sm="column"
@@ -133,7 +134,8 @@ <h3 *ngIf="article?.relatedDocsCollection.items.length > 0">
         </h3>
         <div
           id="documents"
-          fxLayout.lg="column"
+          fxLayout="column"
+          fxLayoutGap="0px"
           fxLayout.lt-lg="row wrap"
           fxLayoutGap.lt-lg="25px"
           fxLayout.lt-sm="column"
@@ -149,7 +151,8 @@ <h3 *ngIf="article?.relatedOrgsCollection.items.length > 0">
           <hr />
         </h3>
         <div
-          fxLayout.lg="column"
+          fxLayout="column"
+          fxLayoutGap="0px"
           fxLayout.lt-lg="row wrap"
           fxLayoutGap.lt-lg="25px"
           fxLayout.lt-sm="column"
@@ -175,7 +178,8 @@ <h3>
         </h3>
         <div
           id="you-might-be-interested-in"
-          fxLayout.lg="column"
+          fxLayout="column"
+          fxLayoutGap="0px"
           fxLayout.lt-lg="row wrap"
           fxLayoutGap.lt-lg="25px"
           fxLayout.lt-sm="column"
diff --git a/research-hub-web/src/app/components/articles/article/article.component.ts b/research-hub-web/src/app/components/articles/article/article.component.ts
index c8f4f717f..578a594c0 100644
--- a/research-hub-web/src/app/components/articles/article/article.component.ts
+++ b/research-hub-web/src/app/components/articles/article/article.component.ts
@@ -1,17 +1,11 @@
-import { Component, OnInit, Type } from '@angular/core';
+import { Component, OnDestroy, OnInit, Type } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import {
-  AllArticlesGQL,
-  AllArticlesSlugsGQL,
-  Article,
-  GetArticleBySlugGQL
-} from '@graphql/schema';
+import { Article, GetArticleBySlugGQL } from '@graphql/schema';
 import { BodyMediaService } from '@services/body-media.service';
-import { CerGraphqlService } from '@services/cer-graphql.service';
 import { PageTitleService } from '@services/page-title.service';
 import { MarkRenderer, NodeRenderer } from 'ngx-contentful-rich-text';
 import { DeviceDetectorService } from 'ngx-device-detector';
-import { Observable, of, throwError } from 'rxjs';
+import { Observable, of, Subscription, throwError } from 'rxjs';
 import { map, mergeMap, switchMap } from 'rxjs/operators';
 import supportsWebP from 'supports-webp';
 
@@ -20,23 +14,22 @@ import supportsWebP from 'supports-webp';
   templateUrl: './article.component.html',
   styleUrls: ['./article.component.scss']
 })
-export class ArticleComponent implements OnInit {
+export class ArticleComponent implements OnInit, OnDestroy {
   public nodeRenderers: Record<string, Type<NodeRenderer>>;
   public markRenderers: Record<string, Type<MarkRenderer>>;
 
+  private subscriptions = new Subscription();
+
   public isMobile: Boolean;
   public bannerTextStyling = 'color: white; text-shadow: 0px 0px 8px #333333;';
-  public article$: Observable<Article>;
+  public article: Article;
   public parentSubHubs;
   public supportsWebp: Boolean;
   public bannerImageUrl: string;
 
   constructor(
     public route: ActivatedRoute,
-    public allArticlesGQL: AllArticlesGQL,
-    public allArticlesSlugsGQL: AllArticlesSlugsGQL,
     public getArticleBySlugGQL: GetArticleBySlugGQL,
-    public cerGraphQLService: CerGraphqlService,
     public pageTitleService: PageTitleService,
     public bodyMediaService: BodyMediaService,
     public router: Router,
@@ -60,18 +53,24 @@ export class ArticleComponent implements OnInit {
   }
 
   ngOnInit() {
-    this.article$ = this.route.params.pipe(
+    this.subscriptions.add(this.route.params.pipe(
       map((params) => {
         return (params.slug || this.route.snapshot.data.slug) as string;
       }),
       switchMap((slug) => this.loadArticle(slug))
-    );
+    ).subscribe({
+      next: (article: Article) => this.article = article,
+      error: (error) => {
+        console.error(error);
+        this.router.navigateByUrl('/error/404');
+      }
+    }));
+  }
 
+  ngOnDestroy() {
+    this.subscriptions.unsubscribe();
   }
 
-  /**
-   * Function that loads the article/collection depending on if a slug is present.
-   */
   private loadArticle(slug: string): Observable<Article> {
     return this.getArticleBySlug(slug).pipe(
       map(data => {
diff --git a/research-hub-web/src/app/components/casestudys/case-study/case-study.component.html b/research-hub-web/src/app/components/casestudys/case-study/case-study.component.html
index e8f21d25d..e21c8a524 100644
--- a/research-hub-web/src/app/components/casestudys/case-study/case-study.component.html
+++ b/research-hub-web/src/app/components/casestudys/case-study/case-study.component.html
@@ -104,8 +104,8 @@ <h3 *ngIf="caseStudy?.relatedContactsCollection.items.length > 0">
           <hr />
         </h3>
         <div
-          fxLayout.lg="column"
-          fxLayoutGap.lg="0px"
+          fxLayout="column"
+          fxLayoutGap="0px"
           fxLayout.lt-lg="row wrap"
           fxLayoutGap.lt-lg="25px"
           fxLayout.lt-sm="column"
@@ -123,8 +123,8 @@ <h3 *ngIf="caseStudy?.relatedDocsCollection.items.length > 0">
           <hr />
         </h3>
         <div
-          fxLayout.lg="column"
-          fxLayoutGap.lg="0px"
+          fxLayout="column"
+          fxLayoutGap="0px"
           fxLayout.lt-lg="row wrap"
           fxLayoutGap.lt-lg="25px"
           fxLayout.lt-sm="column"
@@ -141,8 +141,8 @@ <h3 *ngIf="caseStudy?.relatedOrgsCollection.items.length > 0">
           <hr />
         </h3>
         <div
-          fxLayout.lg="column"
-          fxLayoutGap.lg="0px"
+          fxLayout="column"
+          fxLayoutGap="0px"
           fxLayout.lt-lg="row wrap"
           fxLayoutGap.lt-lg="25px"
           fxLayout.lt-sm="column"
@@ -168,8 +168,8 @@ <h3>
         </h3>
         <div
           id="you-might-be-interested-in"
-          fxLayout.lg="column"
-          fxLayoutGap.lg="0px"
+          fxLayout="column"
+          fxLayoutGap="0px"
           fxLayout.lt-lg="row wrap"
           fxLayoutGap.lt-lg="25px"
           fxLayout.lt-sm="column"

From e5f22a732029b1637460135b852ab27c0223e7f3 Mon Sep 17 00:00:00 2001
From: Luke <lukas.trombach@auckland.ac.nz>
Date: Thu, 11 Nov 2021 11:21:25 +1300
Subject: [PATCH 06/39] breadcrumb refactor

---
 .../articles/article/article.component.html   |  1 -
 .../case-study/case-study.component.html      |  1 -
 .../equipment/equipment.component.html        |  1 -
 .../events/event/event.component.html         |  1 -
 .../fundings/funding/funding.component.html   |  1 -
 .../search-page/search-page.component.html    |  2 +-
 .../services/service/service.component.html   |  1 -
 .../breadcrumbs/breadcrumbs.component.html    |  6 ++---
 .../breadcrumbs/breadcrumbs.component.ts      | 22 +++++++++++++++----
 .../software/software.component.html          |  1 -
 .../subhubs/subhub/subhub.component.html      |  1 -
 11 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/research-hub-web/src/app/components/articles/article/article.component.html b/research-hub-web/src/app/components/articles/article/article.component.html
index 5a292e171..285f1dd7c 100644
--- a/research-hub-web/src/app/components/articles/article/article.component.html
+++ b/research-hub-web/src/app/components/articles/article/article.component.html
@@ -79,7 +79,6 @@
 
   <div class="site-padding margin-bottom" ngClass.lt-md="site-padding-mobile">
     <app-breadcrumbs
-      [contentItem]="parentSubHubs"
       [title]="article.title"
     ></app-breadcrumbs>
 
diff --git a/research-hub-web/src/app/components/casestudys/case-study/case-study.component.html b/research-hub-web/src/app/components/casestudys/case-study/case-study.component.html
index e21c8a524..5e98011d9 100644
--- a/research-hub-web/src/app/components/casestudys/case-study/case-study.component.html
+++ b/research-hub-web/src/app/components/casestudys/case-study/case-study.component.html
@@ -50,7 +50,6 @@
 
   <div class="site-padding margin-bottom" ngClass.lt-md="site-padding-mobile">
     <app-breadcrumbs
-      [contentItem]="parentSubHubs"
       [title]="caseStudy.title"
     ></app-breadcrumbs>
 
diff --git a/research-hub-web/src/app/components/equipments/equipment/equipment.component.html b/research-hub-web/src/app/components/equipments/equipment/equipment.component.html
index 78af9999f..aebd12edf 100644
--- a/research-hub-web/src/app/components/equipments/equipment/equipment.component.html
+++ b/research-hub-web/src/app/components/equipments/equipment/equipment.component.html
@@ -6,7 +6,6 @@
     ngClass.lt-md="site-padding-mobile top-padding"
   >
     <app-breadcrumbs
-      [contentItem]="parentSubHubs"
       [title]="equipment.title"
     ></app-breadcrumbs>
     <!-- Title and Summary -->
diff --git a/research-hub-web/src/app/components/events/event/event.component.html b/research-hub-web/src/app/components/events/event/event.component.html
index f346848b2..0418d6d30 100644
--- a/research-hub-web/src/app/components/events/event/event.component.html
+++ b/research-hub-web/src/app/components/events/event/event.component.html
@@ -7,7 +7,6 @@
     ngClass.lt-md="site-padding-mobile top-padding"
   >
     <app-breadcrumbs
-      [contentItem]="parentSubHubs"
       [title]="event.title"
     ></app-breadcrumbs>
     <!-- Title and Summary -->
diff --git a/research-hub-web/src/app/components/fundings/funding/funding.component.html b/research-hub-web/src/app/components/fundings/funding/funding.component.html
index 039270a37..e2cdd76da 100644
--- a/research-hub-web/src/app/components/fundings/funding/funding.component.html
+++ b/research-hub-web/src/app/components/fundings/funding/funding.component.html
@@ -7,7 +7,6 @@
     ngClass.lt-md="site-padding-mobile top-padding"
   >
     <app-breadcrumbs
-      [contentItem]="parentSubHubs"
       [title]="funding.title"
     ></app-breadcrumbs>
 
diff --git a/research-hub-web/src/app/components/search-page/search-page.component.html b/research-hub-web/src/app/components/search-page/search-page.component.html
index af57c6f74..bbdc3788e 100644
--- a/research-hub-web/src/app/components/search-page/search-page.component.html
+++ b/research-hub-web/src/app/components/search-page/search-page.component.html
@@ -18,7 +18,7 @@
 
   <!-- Breadcrumbs -->
   <div class="site-padding" ngClass.lt-md="site-padding-mobile">
-    <app-breadcrumbs [contentItem]="" [title]="'Search'"></app-breadcrumbs>
+    <app-breadcrumbs [title]="'Search'"></app-breadcrumbs>
   </div>
 </div>
 
diff --git a/research-hub-web/src/app/components/services/service/service.component.html b/research-hub-web/src/app/components/services/service/service.component.html
index 4f73b7311..e811f8d1d 100644
--- a/research-hub-web/src/app/components/services/service/service.component.html
+++ b/research-hub-web/src/app/components/services/service/service.component.html
@@ -7,7 +7,6 @@
     ngClass.lt-md="site-padding-mobile top-padding"
   >
     <app-breadcrumbs
-      [contentItem]="parentSubHubs"
       [title]="service.title"
     ></app-breadcrumbs>
 
diff --git a/research-hub-web/src/app/components/shared/breadcrumbs/breadcrumbs.component.html b/research-hub-web/src/app/components/shared/breadcrumbs/breadcrumbs.component.html
index a223d6309..3db62b82b 100644
--- a/research-hub-web/src/app/components/shared/breadcrumbs/breadcrumbs.component.html
+++ b/research-hub-web/src/app/components/shared/breadcrumbs/breadcrumbs.component.html
@@ -2,8 +2,8 @@
     <span class="breadcrumb-subhub">
         <a [routerLink]="'/'">Home</a>
     </span>
-    <span class="breadcrumb-subhub" *ngFor="let subHub of contentItem?.slice().reverse()">
-        <a [routerLink]="'/subhub/' + subHub.slug">{{ subHub.title }}</a>
+    <span class="breadcrumb-subhub" *ngFor="let subHub of parentSubHubs?.slice().reverse()">
+        <a [routerLink]="['/subhub', subHub.slug]">{{ subHub.title }}</a>
     </span>
     <span id="breadcrumb-current-page">{{ title }}</span>
-</div>
\ No newline at end of file
+</div>
diff --git a/research-hub-web/src/app/components/shared/breadcrumbs/breadcrumbs.component.ts b/research-hub-web/src/app/components/shared/breadcrumbs/breadcrumbs.component.ts
index 8fc1b252d..9ba8e1369 100644
--- a/research-hub-web/src/app/components/shared/breadcrumbs/breadcrumbs.component.ts
+++ b/research-hub-web/src/app/components/shared/breadcrumbs/breadcrumbs.component.ts
@@ -1,13 +1,27 @@
 import { Component, OnInit, Input } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { CerGraphqlService, SubHubTitleAndSlug } from '@services/cer-graphql.service';
+import { from } from 'rxjs';
+import { map, mergeMap } from 'rxjs/operators';
 
 @Component({
   selector: 'app-breadcrumbs',
   templateUrl: './breadcrumbs.component.html',
   styleUrls: ['./breadcrumbs.component.scss']
 })
-export class BreadcrumbsComponent {
-  @Input() contentItem;
-  @Input() title;
+export class BreadcrumbsComponent implements OnInit {
+  @Input() title: string;
+  public parentSubHubs: SubHubTitleAndSlug[] = [];
 
-  constructor() { }
+  constructor(
+    private route: ActivatedRoute,
+    private cerGraphQLService: CerGraphqlService
+  ) { }
+
+  ngOnInit(): void {
+    this.route.paramMap.pipe(
+      map((paramMap) => paramMap.get('slug')),
+      mergeMap((slug: string) => from(this.cerGraphQLService.getParentSubHubs(slug)))
+    ).subscribe((result) => this.parentSubHubs = result);
+  }
 }
diff --git a/research-hub-web/src/app/components/softwares/software/software.component.html b/research-hub-web/src/app/components/softwares/software/software.component.html
index b9b7aa2db..435e0422d 100644
--- a/research-hub-web/src/app/components/softwares/software/software.component.html
+++ b/research-hub-web/src/app/components/softwares/software/software.component.html
@@ -8,7 +8,6 @@
   >
     <!-- Breadcrumbs -->
     <app-breadcrumbs
-      [contentItem]="parentSubHubs"
       [title]="software.title"
     ></app-breadcrumbs>
 
diff --git a/research-hub-web/src/app/components/subhubs/subhub/subhub.component.html b/research-hub-web/src/app/components/subhubs/subhub/subhub.component.html
index 9a76b53c7..8ef24f5ef 100644
--- a/research-hub-web/src/app/components/subhubs/subhub/subhub.component.html
+++ b/research-hub-web/src/app/components/subhubs/subhub/subhub.component.html
@@ -57,7 +57,6 @@
 
     <div class="site-padding" ngClass.lt-md="site-padding-mobile">
       <app-breadcrumbs
-        [contentItem]="parentSubHubs"
         [title]="subHub.title"
       ></app-breadcrumbs>
 

From 055d8d975299b7858a5e075f00529d5dc2e879ba Mon Sep 17 00:00:00 2001
From: Luke <lukas.trombach@auckland.ac.nz>
Date: Thu, 11 Nov 2021 12:41:18 +1300
Subject: [PATCH 07/39] final changes to article

---
 .../articles/article/article.component.html   | 13 +++----------
 .../articles/article/article.component.ts     | 19 +++----------------
 2 files changed, 6 insertions(+), 26 deletions(-)

diff --git a/research-hub-web/src/app/components/articles/article/article.component.html b/research-hub-web/src/app/components/articles/article/article.component.html
index 285f1dd7c..79493f002 100644
--- a/research-hub-web/src/app/components/articles/article/article.component.html
+++ b/research-hub-web/src/app/components/articles/article/article.component.html
@@ -1,13 +1,8 @@
 <div id="article-container" *ngIf="article">
   <div
     class="banner-container"
-    [ngClass]="
-      bannerImageUrl === undefined
-        ? ''
-        : isMobile
-        ? 'mobile-banner'
-        : 'standard-banner'
-    "
+    [ngClass]="{ 'standard-banner': bannerImageUrl }"
+    [ngClass.xs]="{ 'mobile-banner': bannerImageUrl }"
     [ngStyle]="
       bannerImageUrl && { 'background-image': 'url(' + bannerImageUrl + ')' }
     "
@@ -78,9 +73,7 @@
   </div>
 
   <div class="site-padding margin-bottom" ngClass.lt-md="site-padding-mobile">
-    <app-breadcrumbs
-      [title]="article.title"
-    ></app-breadcrumbs>
+    <app-breadcrumbs [title]="article.title"></app-breadcrumbs>
 
     <div fxLayout="row" fxLayoutAlign="space-around" fxLayout.lt-lg="column">
       <!-- Article Body -->
diff --git a/research-hub-web/src/app/components/articles/article/article.component.ts b/research-hub-web/src/app/components/articles/article/article.component.ts
index 578a594c0..23f2aff28 100644
--- a/research-hub-web/src/app/components/articles/article/article.component.ts
+++ b/research-hub-web/src/app/components/articles/article/article.component.ts
@@ -20,10 +20,8 @@ export class ArticleComponent implements OnInit, OnDestroy {
 
   private subscriptions = new Subscription();
 
-  public isMobile: Boolean;
   public bannerTextStyling = 'color: white; text-shadow: 0px 0px 8px #333333;';
   public article: Article;
-  public parentSubHubs;
   public supportsWebp: Boolean;
   public bannerImageUrl: string;
 
@@ -32,20 +30,14 @@ export class ArticleComponent implements OnInit, OnDestroy {
     public getArticleBySlugGQL: GetArticleBySlugGQL,
     public pageTitleService: PageTitleService,
     public bodyMediaService: BodyMediaService,
-    public router: Router,
-    private deviceService: DeviceDetectorService,
+    public router: Router
   ) {
-    this.detectDevice();
     this.detectWebP();
 
     this.nodeRenderers = this.bodyMediaService.nodeRenderers;
     this.markRenderers = this.bodyMediaService.markRenderers;
   }
 
-  detectDevice() {
-    this.isMobile = this.deviceService.isMobile();
-  }
-
   detectWebP() {
     supportsWebP.then(supported => {
       this.supportsWebp = supported;
@@ -62,7 +54,7 @@ export class ArticleComponent implements OnInit, OnDestroy {
       next: (article: Article) => this.article = article,
       error: (error) => {
         console.error(error);
-        this.router.navigateByUrl('/error/404');
+        this.router.navigate(['error', 404]);
       }
     }));
   }
@@ -74,7 +66,6 @@ export class ArticleComponent implements OnInit, OnDestroy {
   private loadArticle(slug: string): Observable<Article> {
     return this.getArticleBySlug(slug).pipe(
       map(data => {
-
         // Strip nulls from related collection data.
         data.relatedContactsCollection.items = data.relatedContactsCollection.items.filter(item => item);
         data.relatedDocsCollection.items = data.relatedDocsCollection.items.filter(item => item);
@@ -101,15 +92,11 @@ export class ArticleComponent implements OnInit, OnDestroy {
         return data;
       })
     );
-
-    // NOTE: this should be moved to the breadcrumb component
-    // this.parentSubHubs = await this.cerGraphQLService.getParentSubHubs(this.slug);
-
   }
 
   /**
    * Function that returns an individual article from the ArticleCollection by it's slug
-   * as an observable of type Article. This is then unwrapped with the async pipe.
+   * as an observable of type Article.
    *
    * @param slug The article's slug. Retrieved from the route parameter of the same name.
    */

From e68bd144fab9fcc6bbbf630297cece236ccc0839 Mon Sep 17 00:00:00 2001
From: Luke <lukas.trombach@auckland.ac.nz>
Date: Thu, 11 Nov 2021 13:01:54 +1300
Subject: [PATCH 08/39] final changes to case study

---
 .../case-study/case-study.component.html      |  15 +-
 .../case-study/case-study.component.ts        | 173 ++++++------------
 2 files changed, 62 insertions(+), 126 deletions(-)

diff --git a/research-hub-web/src/app/components/casestudys/case-study/case-study.component.html b/research-hub-web/src/app/components/casestudys/case-study/case-study.component.html
index 5e98011d9..4459975cf 100644
--- a/research-hub-web/src/app/components/casestudys/case-study/case-study.component.html
+++ b/research-hub-web/src/app/components/casestudys/case-study/case-study.component.html
@@ -1,13 +1,8 @@
-<div id="case-study-container" *ngIf="caseStudy | async as caseStudy">
+<div id="case-study-container" *ngIf="caseStudy">
   <div
     class="banner-container"
-    [ngClass]="
-      bannerImageUrl === undefined
-        ? ''
-        : isMobile
-        ? 'mobile-banner'
-        : 'standard-banner'
-    "
+    [ngClass]="{ 'standard-banner': bannerImageUrl }"
+    [ngClass.xs]="{ 'mobile-banner': bannerImageUrl }"
     [ngStyle]="
       bannerImageUrl && { 'background-image': 'url(' + bannerImageUrl + ')' }
     "
@@ -49,9 +44,7 @@
   </div>
 
   <div class="site-padding margin-bottom" ngClass.lt-md="site-padding-mobile">
-    <app-breadcrumbs
-      [title]="caseStudy.title"
-    ></app-breadcrumbs>
+    <app-breadcrumbs [title]="caseStudy.title"></app-breadcrumbs>
 
     <div fxLayout="row" fxLayoutAlign="space-around" fxLayout.lt-lg="column">
       <!-- caseStudy Body and References -->
diff --git a/research-hub-web/src/app/components/casestudys/case-study/case-study.component.ts b/research-hub-web/src/app/components/casestudys/case-study/case-study.component.ts
index e015e867c..e5c182c4c 100644
--- a/research-hub-web/src/app/components/casestudys/case-study/case-study.component.ts
+++ b/research-hub-web/src/app/components/casestudys/case-study/case-study.component.ts
@@ -1,19 +1,11 @@
 import { Component, OnDestroy, OnInit, Type } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import {
-  AllCaseStudiesGQL,
-  AllCaseStudySlugsGQL,
-  CaseStudy,
-  CaseStudyCollection,
-  GetCaseStudyBySlugGQL
-} from '@graphql/schema';
+import { CaseStudy, GetCaseStudyBySlugGQL } from '@graphql/schema';
 import { BodyMediaService } from '@services/body-media.service';
-import { CerGraphqlService } from '@services/cer-graphql.service';
 import { PageTitleService } from '@services/page-title.service';
 import { MarkRenderer, NodeRenderer } from 'ngx-contentful-rich-text';
-import { DeviceDetectorService } from 'ngx-device-detector';
-import { Observable, Subscription } from 'rxjs';
-import { catchError, flatMap, pluck } from 'rxjs/operators';
+import { Observable, of, Subscription, throwError } from 'rxjs';
+import { map, mergeMap, switchMap } from 'rxjs/operators';
 import supportsWebP from 'supports-webp';
 
 
@@ -25,141 +17,92 @@ import supportsWebP from 'supports-webp';
 export class CaseStudyComponent implements OnInit, OnDestroy {
   public nodeRenderers: Record<string, Type<NodeRenderer>>;
   public markRenderers: Record<string, Type<MarkRenderer>>;
-  public isMobile: Boolean;
-  public bannerTextStyling;
-  public slug: string;
-  public caseStudy;
-  public caseStudy$: Subscription;
-  public route$: Subscription;
-  public bodyLinks$: Subscription;
-  public allCaseStudies$: Observable<CaseStudyCollection>;
-  public parentSubHubs;
+
+  private subscriptions = new Subscription();
+
+  public bannerTextStyling = 'color: white; text-shadow: 0px 0px 8px #333333;';
+  public caseStudy: CaseStudy;
   public supportsWebp: Boolean;
   public bannerImageUrl: string;
 
   constructor(
     public route: ActivatedRoute,
-    public allCaseStudyGQL: AllCaseStudiesGQL,
-    public allCaseStudySlugsGQL: AllCaseStudySlugsGQL,
     public getCaseStudyBySlugGQL: GetCaseStudyBySlugGQL,
-    public cerGraphQLService: CerGraphqlService,
     public pageTitleService: PageTitleService,
     public bodyMediaService: BodyMediaService,
     public router: Router,
-    private deviceService: DeviceDetectorService
   ) {
-    this.detectDevice();
     this.detectWebP();
 
     this.nodeRenderers = this.bodyMediaService.nodeRenderers;
     this.markRenderers = this.bodyMediaService.markRenderers;
   }
 
-  detectDevice() {
-    this.isMobile = this.deviceService.isMobile();
-  }
-
   detectWebP() {
     supportsWebP.then(supported => {
       this.supportsWebp = supported;
     });
   }
 
-  async ngOnInit() {
-    /**
-     * Check if there is a slug URL parameter present. If so, this is
-     * passed to the getCaseStudyBySlug() method.
-     */
-    this.route$ = this.route.params.subscribe(params => {
-      this.slug = params.slug || this.route.snapshot.data.slug;
-      this._loadContent();
-    });
-
-    /**
-     * Set styling for text if banner is present
-     */
-    this.bannerTextStyling = 'color: white; text-shadow: 0px 0px 8px #333333;';
-  }
-
-  /**
-   * Function that loads the CaseStudy/collection depending on if a slug is present.
-   */
-  private async _loadContent() {
-    /**
-     * If this.slug is defined, we're loading an individual CaseStudy,
-     * therefore run the corresponding query. If not, return all CaseStudy.
-     */
-    this.getAllCaseStudySlugs().subscribe(data => {
-      let slugs = [];
-      data.items.forEach(data => {
-        slugs.push(data.slug)
-      })
-      if (!slugs.includes(this.slug)) { this.router.navigate(['error/404']) }
-    });
-    this.caseStudy = this.getCaseStudyBySlug(this.slug);
-
-    /**
-     * If the page is SSO Protected then check if the user is authenticated
-     */
-    this.caseStudy$ = this.getCaseStudyBySlug(this.slug).subscribe(data => {
-      // Strip nulls from related collection data.
-      data.relatedContactsCollection.items = data.relatedContactsCollection.items.filter(item => item);
-      data.relatedDocsCollection.items = data.relatedDocsCollection.items.filter(item => item);
-      data.relatedItemsCollection.items = data.relatedItemsCollection.items.filter(item => item);
-      data.relatedOrgsCollection.items = data.relatedOrgsCollection.items.filter(item => item);
-
-      // Set banner image URL for webp format if webp is supported
-      if (data.banner?.url) {
-        this.bannerImageUrl = this.supportsWebp ? data.banner?.url + '?w=1900&fm=webp' : data.banner?.url + '?w=1900';
-      } else {
-        this.bannerImageUrl = undefined;
+  ngOnInit() {
+    this.subscriptions.add(this.route.params.pipe(
+      map((params) => {
+        return (params.slug || this.route.snapshot.data.slug) as string;
+      }),
+      switchMap((slug) => this.loadCaseStudy(slug))
+    ).subscribe({
+      next: (caseStudy: CaseStudy) => this.caseStudy = caseStudy,
+      error: (error) => {
+        console.error(error);
+        this.router.navigate(['error', 404]);
       }
+    }));
+  }
 
-      // For each rich text field add the links to the link maps in the body media service to enable rich text rendering
-      this.bodyMediaService.buildLinkMaps(data.bodyText?.links);
-      this.bodyMediaService.buildLinkMaps(data.references?.links);
-
-      this.pageTitleService.title = data.title;
-    });
-    this.parentSubHubs = await this.cerGraphQLService.getParentSubHubs(this.slug);
-
+  ngOnDestroy(): void {
+    this.subscriptions.unsubscribe();
   }
 
-  /**
-   * Function that returns all CaseStudy slugs from the CaseStudyCollection as an observable
-   * of type CaseStudyCollection. This is then unwrapped with the async pipe.
-   *
-   * This function called to determine if a valid slug has been searched otherwise redirect
-   *
-   */
-  public getAllCaseStudySlugs(): Observable<CaseStudyCollection> {
-    try {
-      return this.allCaseStudySlugsGQL.fetch()
-        .pipe(pluck('data', 'caseStudyCollection')) as Observable<CaseStudyCollection>
-    } catch (e) { console.error('Error loading all case studies:', e) };
+  private loadCaseStudy(slug: string): Observable<CaseStudy> {
+    return this.getCaseStudyBySlug(slug).pipe(
+      map(data => {
+        // Strip nulls from related collection data.
+        data.relatedContactsCollection.items = data.relatedContactsCollection.items.filter(item => item);
+        data.relatedDocsCollection.items = data.relatedDocsCollection.items.filter(item => item);
+        data.relatedItemsCollection.items = data.relatedItemsCollection.items.filter(item => item);
+        data.relatedOrgsCollection.items = data.relatedOrgsCollection.items.filter(item => item);
+
+        // Set banner image URL for webp format if webp is supported
+        if (data.banner?.url) {
+          this.bannerImageUrl = this.supportsWebp ? data.banner?.url + '?w=1900&fm=webp' : data.banner?.url + '?w=1900';
+        } else {
+          this.bannerImageUrl = undefined;
+        }
+
+        // For each rich text field add the links to the link maps in the body media service to enable rich text rendering
+        this.bodyMediaService.buildLinkMaps(data.bodyText?.links);
+        this.bodyMediaService.buildLinkMaps(data.references?.links);
+
+        this.pageTitleService.title = data.title;
+
+        return data;
+      })
+    );
   }
 
   /**
-   * Function that returns an individual CaseStudy from the CaseStudyCollection by it's slug
-   * as an observable of type CaseStudy. This is then unwrapped with the async pipe.
+   * Function that returns an individual case study from the CaseStudyCollection by it's slug
+   * as an observable of type CaseStudy.
    *
-   * This function is only called if no slug parameter is present in the URL, i.e.
-   * the user is visiting /CaseStudy.
-   *
-   * @param slug The CaseStudy's slug. Retrieved from the route parameter of the same name.
+   * @param slug The case study's slug. Retrieved from the route parameter of the same name.
    */
   public getCaseStudyBySlug(slug: string): Observable<CaseStudy> {
-    try {
-      return this.getCaseStudyBySlugGQL.fetch({ slug: this.slug })
-        .pipe(flatMap(x => x.data.caseStudyCollection.items), catchError(() => (this.router.navigate(['/error/500'])))) as Observable<CaseStudy>;
-    } catch (e) { console.error(`Error loading CaseStudy ${slug}:`, e); }
-  }
-
-  ngOnDestroy() {
-    try {
-      this.caseStudy$.unsubscribe();
-      this.route$.unsubscribe();
-      this.bodyLinks$.unsubscribe();
-    } catch { }
+    return this.getCaseStudyBySlugGQL.fetch({ slug }).pipe(
+      mergeMap(x =>
+        x.data.caseStudyCollection.items.length === 0
+          ? throwError(`Could not load case study with slug "${slug}"`)
+          : of(x.data.caseStudyCollection.items[0])
+      )
+    ) as Observable<CaseStudy>;
   }
 }

From 4001b508360c275e1067702a9b177594377fcbf0 Mon Sep 17 00:00:00 2001
From: Luke <lukas.trombach@auckland.ac.nz>
Date: Thu, 11 Nov 2021 13:04:01 +1300
Subject: [PATCH 09/39] removed unused import from article

---
 .../src/app/components/articles/article/article.component.ts     | 1 -
 1 file changed, 1 deletion(-)

diff --git a/research-hub-web/src/app/components/articles/article/article.component.ts b/research-hub-web/src/app/components/articles/article/article.component.ts
index 23f2aff28..eca4dcb81 100644
--- a/research-hub-web/src/app/components/articles/article/article.component.ts
+++ b/research-hub-web/src/app/components/articles/article/article.component.ts
@@ -4,7 +4,6 @@ import { Article, GetArticleBySlugGQL } from '@graphql/schema';
 import { BodyMediaService } from '@services/body-media.service';
 import { PageTitleService } from '@services/page-title.service';
 import { MarkRenderer, NodeRenderer } from 'ngx-contentful-rich-text';
-import { DeviceDetectorService } from 'ngx-device-detector';
 import { Observable, of, Subscription, throwError } from 'rxjs';
 import { map, mergeMap, switchMap } from 'rxjs/operators';
 import supportsWebP from 'supports-webp';

From f77833d93e40effbe7593f6e239b72ff187bd67f Mon Sep 17 00:00:00 2001
From: Luke <lukas.trombach@auckland.ac.nz>
Date: Thu, 11 Nov 2021 13:22:05 +1300
Subject: [PATCH 10/39] final changes to equipment

---
 .../equipment/equipment.component.html        |  11 +-
 .../equipment/equipment.component.ts          | 165 ++++++------------
 2 files changed, 60 insertions(+), 116 deletions(-)

diff --git a/research-hub-web/src/app/components/equipments/equipment/equipment.component.html b/research-hub-web/src/app/components/equipments/equipment/equipment.component.html
index aebd12edf..e73b0a0c9 100644
--- a/research-hub-web/src/app/components/equipments/equipment/equipment.component.html
+++ b/research-hub-web/src/app/components/equipments/equipment/equipment.component.html
@@ -1,4 +1,4 @@
-<div id="equipment-container" *ngIf="equipment | async as equipment">
+<div id="equipment-container" *ngIf="equipment">
   <ng-container *ngTemplateOutlet="dynamicBanner"></ng-container>
 
   <div
@@ -153,13 +153,8 @@ <h3 *ngIf="equipment?.relatedDocsCollection.items.length > 0">
 <ng-template #dynamicBanner>
   <div
     class="banner-container"
-    [ngClass]="
-      bannerImageUrl === undefined
-        ? 'no-banner'
-        : isMobile
-        ? 'mobile-banner'
-        : 'standard-banner'
-    "
+    [ngClass]="{ 'standard-banner': bannerImageUrl }"
+    [ngClass.xs]="{ 'mobile-banner': bannerImageUrl }"
     [ngStyle]="
       bannerImageUrl && { 'background-image': 'url(' + bannerImageUrl + ')' }
     "
diff --git a/research-hub-web/src/app/components/equipments/equipment/equipment.component.ts b/research-hub-web/src/app/components/equipments/equipment/equipment.component.ts
index e12496f6b..b062453af 100644
--- a/research-hub-web/src/app/components/equipments/equipment/equipment.component.ts
+++ b/research-hub-web/src/app/components/equipments/equipment/equipment.component.ts
@@ -1,20 +1,11 @@
-import { Location } from '@angular/common';
 import { Component, OnDestroy, OnInit, Type } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import {
-  AllEquipmentGQL,
-  AllEquipmentSlugsGQL,
-  Equipment,
-  EquipmentCollection,
-  GetEquipmentBySlugGQL
-} from '@graphql/schema';
+import { Equipment, GetEquipmentBySlugGQL } from '@graphql/schema';
 import { BodyMediaService } from '@services/body-media.service';
-import { CerGraphqlService } from '@services/cer-graphql.service';
 import { PageTitleService } from '@services/page-title.service';
 import { MarkRenderer, NodeRenderer } from 'ngx-contentful-rich-text';
-import { DeviceDetectorService } from 'ngx-device-detector';
-import { Observable, Subscription } from 'rxjs';
-import { flatMap, pluck } from 'rxjs/operators';
+import { Observable, of, Subscription, throwError } from 'rxjs';
+import { map, mergeMap, switchMap } from 'rxjs/operators';
 import supportsWebP from 'supports-webp';
 
 @Component({
@@ -25,138 +16,96 @@ import supportsWebP from 'supports-webp';
 export class EquipmentComponent implements OnInit, OnDestroy {
   public nodeRenderers: Record<string, Type<NodeRenderer>>;
   public markRenderers: Record<string, Type<MarkRenderer>>;
-  public slug: string;
-  public equipment;
-  public equipment$: Subscription;
-  public route$: Subscription;
-  public bodyLinks$: Subscription;
-  public allEquipment$: Observable<EquipmentCollection>;
-  public parentSubHubs;
+
+  private subscriptions = new Subscription();
+
+  public equipment: Equipment;
   public isMobile: Boolean;
   public supportsWebp: Boolean;
   public bannerImageUrl: string;
 
   constructor(
     public route: ActivatedRoute,
-    public allEquipmentGQL: AllEquipmentGQL,
-    public allEquipmentSlugsGQL: AllEquipmentSlugsGQL,
     public getEquipmentBySlugGQL: GetEquipmentBySlugGQL,
-    public cerGraphQLService: CerGraphqlService,
     public pageTitleService: PageTitleService,
     public bodyMediaService: BodyMediaService,
     public router: Router,
-    private deviceService: DeviceDetectorService,
-    public location: Location
   ) {
-    this.detectDevice();
     this.detectWebP();
 
     this.nodeRenderers = this.bodyMediaService.nodeRenderers;
     this.markRenderers = this.bodyMediaService.markRenderers;
   }
 
-  // Detect if device is Mobile
-  detectDevice() {
-    this.isMobile = this.deviceService.isMobile();
-  }
-
   detectWebP() {
     supportsWebP.then(supported => {
       this.supportsWebp = supported;
     });
   }
 
-  async ngOnInit() {
-    /**
-     * Check if there is a slug URL parameter present. If so, this is
-     * passed to the getEquipmentBySlug() method.
-     */
-    this.route$ = this.route.params.subscribe(params => {
-      this.slug = params.slug || this.route.snapshot.data.slug;
-      this._loadContent();
-    });
+  ngOnInit() {
+    this.subscriptions.add(this.route.params.pipe(
+      map((params) => {
+        return (params.slug || this.route.snapshot.data.slug) as string;
+      }),
+      switchMap((slug) => this.loadEquipment(slug))
+    ).subscribe({
+      next: (equipment: Equipment) => this.equipment = equipment,
+      error: (error) => {
+        console.error(error);
+        this.router.navigate(['error', 404]);
+      }
+    }));
   }
 
-  /**
-   * Function that loads the Equipment/collection depending on if a slug is present.
-   */
-  private async _loadContent() {
-    /**
-     * If this.slug is defined, we're loading an individual Equipment,
-     * therefore run the corresponding query. If not, return all Equipment.
-     */
-    // Check if the equipment slug is valid otherwise redirect to 404
-    this.getAllEquipmentSlugs().subscribe(data => {
-      let slugs = [];
-      data.items.forEach(data => {
-        slugs.push(data.slug)
-      })
-      if (!slugs.includes(this.slug)) { this.router.navigate(['error/404']) }
-    });
-    this.equipment = this.getEquipmentBySlug(this.slug);
-    this.equipment$ = this.getEquipmentBySlug(this.slug).subscribe(data => {
-      // Strip nulls from related collection data.
-      data.relatedContactsCollection.items = data.relatedContactsCollection.items.filter(item => item);
-      data.relatedDocsCollection.items = data.relatedDocsCollection.items.filter(item => item);
-      data.relatedItemsCollection.items = data.relatedItemsCollection.items.filter(item => item);
-      data.relatedOrgsCollection.items = data.relatedOrgsCollection.items.filter(item => item);
+  ngOnDestroy(): void {
+    this.subscriptions.unsubscribe();
+  }
 
-      // If Call To Action is an email address
-      if (data.callToAction?.match(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/)) {
-        data['callToAction'] = 'mailto:' + data['callToAction'];
-      }
+  private loadEquipment(slug: string): Observable<Equipment> {
+    return this.getEquipmentBySlug(slug).pipe(
+      map((data) => {
+        // Strip nulls from related collection data.
+        data.relatedContactsCollection.items = data.relatedContactsCollection.items.filter(item => item);
+        data.relatedDocsCollection.items = data.relatedDocsCollection.items.filter(item => item);
+        data.relatedItemsCollection.items = data.relatedItemsCollection.items.filter(item => item);
+        data.relatedOrgsCollection.items = data.relatedOrgsCollection.items.filter(item => item);
 
-      // Set banner image URL for webp format if webp is supported
-      if (data.banner?.url) {
-        this.bannerImageUrl = this.supportsWebp ? data.banner?.url + '?w=1900&fm=webp' : data.banner?.url + '?w=1900';
-      } else {
-        this.bannerImageUrl = undefined;
-      }
+        // If Call To Action is an email address
+        if (data.callToAction?.match(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/)) {
+          data['callToAction'] = 'mailto:' + data['callToAction'];
+        }
 
-      // For each rich text field add the links to the link maps in the body media service to enable rich text rendering
-      this.bodyMediaService.buildLinkMaps(data.bodyText?.links);
+        // Set banner image URL for webp format if webp is supported
+        if (data.banner?.url) {
+          this.bannerImageUrl = this.supportsWebp ? data.banner?.url + '?w=1900&fm=webp' : data.banner?.url + '?w=1900';
+        } else {
+          this.bannerImageUrl = undefined;
+        }
 
-      this.pageTitleService.title = data.title;
-    });
-    this.parentSubHubs = await this.cerGraphQLService.getParentSubHubs(this.slug);
+        // For each rich text field add the links to the link maps in the body media service to enable rich text rendering
+        this.bodyMediaService.buildLinkMaps(data.bodyText?.links);
 
-  }
+        this.pageTitleService.title = data.title;
 
-  /**
-   * Function that returns all equipment slugs from the EquipmentCollection as an observable
-   * of type EquipmentCollection. This is then unwrapped with the async pipe.
-   *
-   * This function called to determine if a valid slug has been searched otherwise redirect
-   *
-   */
-  public getAllEquipmentSlugs(): Observable<EquipmentCollection> {
-    try {
-      return this.allEquipmentSlugsGQL.fetch()
-        .pipe(pluck('data', 'equipmentCollection')) as Observable<EquipmentCollection>
-    } catch (e) { console.error('Error loading all equipment', e) };
+        return data;
+      })
+    );
   }
 
   /**
-   * Function that returns an individual Equipment from the EquipmentCollection by it's slug
-   * as an observable of type Equipment. This is then unwrapped with the async pipe.
-   *
-   * This function is only called if no slug parameter is present in the URL, i.e.
-   * the user is visiting /Equipment.
+   * Function that returns an individual article from the ArticleCollection by it's slug
+   * as an observable of type Article.
    *
-   * @param slug The Equipment's slug. Retrieved from the route parameter of the same name.
+   * @param slug The article's slug. Retrieved from the route parameter of the same name.
    */
   public getEquipmentBySlug(slug: string): Observable<Equipment> {
-    try {
-      return this.getEquipmentBySlugGQL.fetch({ slug: this.slug })
-        .pipe(flatMap(x => x.data.equipmentCollection.items)) as Observable<Equipment>;
-    } catch (e) { console.error(`Error loading equipment ${slug}:`, e); }
-  }
-
-  ngOnDestroy() {
-    try {
-      this.equipment$.unsubscribe();
-      this.route$.unsubscribe();
-      this.bodyLinks$.unsubscribe();
-    } catch { }
+    return this.getEquipmentBySlugGQL.fetch({ slug }).pipe(
+      mergeMap(x =>
+        x.data.equipmentCollection.items.length === 0
+          ? throwError(`Could not load equipment with slug "${slug}"`)
+          : of(x.data.equipmentCollection.items[0])
+      )
+    ) as Observable<Equipment>;
   }
 }

From 14399338318579f3856828dc20908768dbe086b5 Mon Sep 17 00:00:00 2001
From: Luke <lukas.trombach@auckland.ac.nz>
Date: Thu, 11 Nov 2021 13:33:07 +1300
Subject: [PATCH 11/39] final changes to event

---
 .../events/event/event.component.html         |  11 +-
 .../events/event/event.component.ts           | 124 ++++++------------
 2 files changed, 41 insertions(+), 94 deletions(-)

diff --git a/research-hub-web/src/app/components/events/event/event.component.html b/research-hub-web/src/app/components/events/event/event.component.html
index 0418d6d30..470415945 100644
--- a/research-hub-web/src/app/components/events/event/event.component.html
+++ b/research-hub-web/src/app/components/events/event/event.component.html
@@ -1,4 +1,4 @@
-<div id="event-container" *ngIf="event | async as event">
+<div id="event-container" *ngIf="event">
   <!-- Banner -->
   <ng-container *ngTemplateOutlet="dynamicBanner"></ng-container>
 
@@ -116,13 +116,8 @@ <h3 *ngIf="event?.relatedDocsCollection.items.length > 0">
 <ng-template #dynamicBanner>
   <div
     class="banner-container"
-    [ngClass]="
-      bannerImageUrl === undefined
-        ? 'no-banner'
-        : isMobile
-        ? 'mobile-banner'
-        : 'standard-banner'
-    "
+    [ngClass]="{ 'standard-banner': bannerImageUrl }"
+    [ngClass.xs]="{ 'mobile-banner': bannerImageUrl }"
     [ngStyle]="
       bannerImageUrl && { 'background-image': 'url(' + bannerImageUrl + ')' }
     "
diff --git a/research-hub-web/src/app/components/events/event/event.component.ts b/research-hub-web/src/app/components/events/event/event.component.ts
index 8236a5723..43eab121f 100644
--- a/research-hub-web/src/app/components/events/event/event.component.ts
+++ b/research-hub-web/src/app/components/events/event/event.component.ts
@@ -1,19 +1,11 @@
 import { Component, OnDestroy, OnInit, Type } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import {
-  AllEventsGQL,
-  AllEventsSlugsGQL,
-  Event,
-  EventCollection,
-  GetEventBySlugGQL
-} from '@graphql/schema';
+import { Event, GetEventBySlugGQL } from '@graphql/schema';
 import { BodyMediaService } from '@services/body-media.service';
-import { CerGraphqlService } from '@services/cer-graphql.service';
 import { PageTitleService } from '@services/page-title.service';
 import { MarkRenderer, NodeRenderer } from 'ngx-contentful-rich-text';
-import { DeviceDetectorService } from 'ngx-device-detector';
-import { Observable, Subscription } from 'rxjs';
-import { flatMap, pluck } from 'rxjs/operators';
+import { Observable, of, Subscription, throwError } from 'rxjs';
+import { map, mergeMap, switchMap } from 'rxjs/operators';
 import supportsWebP from 'supports-webp';
 
 @Component({
@@ -24,72 +16,54 @@ import supportsWebP from 'supports-webp';
 export class EventComponent implements OnInit, OnDestroy {
   public nodeRenderers: Record<string, Type<NodeRenderer>>;
   public markRenderers: Record<string, Type<MarkRenderer>>;
-  public slug: string;
-  public event;
-  public event$: Subscription;
-  public route$: Subscription;
-  public bodyLinks$: Subscription;
-  public allEvents$: Observable<EventCollection>;
-  public parentSubHubs;
-  public isMobile: Boolean;
+
+  private subscriptions = new Subscription();
+
+  public event: Event;
   public supportsWebp: Boolean;
   public bannerImageUrl: string;
 
   constructor(
     public route: ActivatedRoute,
-    public allEventsGQL: AllEventsGQL,
-    public allEventSlugsGQL: AllEventsSlugsGQL,
     public getEventBySlugGQL: GetEventBySlugGQL,
-    public cerGraphQLService: CerGraphqlService,
     public pageTitleService: PageTitleService,
     public bodyMediaService: BodyMediaService,
     public router: Router,
-    private deviceService: DeviceDetectorService
   ) {
-    this.detectDevice();
     this.detectWebP();
 
     this.nodeRenderers = this.bodyMediaService.nodeRenderers;
     this.markRenderers = this.bodyMediaService.markRenderers;
   }
 
-  // Detect if device is Mobile
-  detectDevice() {
-    this.isMobile = this.deviceService.isMobile();
-  }
-
   detectWebP() {
     supportsWebP.then(supported => {
       this.supportsWebp = supported;
     });
   }
 
-  async ngOnInit() {
-    /**
-     * Check if there is a slug URL parameter present. If so, this is
-     * passed to the getEventBySlug() method.
-     */
-    this.route$ = this.route.params.subscribe(params => {
-      this.slug = params.slug || this.route.snapshot.data.slug;
-      this._loadContent();
-    });
+  ngOnInit() {
+    this.subscriptions.add(this.route.params.pipe(
+      map((params) => {
+        return (params.slug || this.route.snapshot.data.slug) as string;
+      }),
+      switchMap((slug) => this.loadEvent(slug))
+    ).subscribe({
+      next: (event: Event) => this.event = event,
+      error: (error) => {
+        console.error(error);
+        this.router.navigate(['error', 404]);
+      }
+    }));
   }
 
-  /**
-   * Function that loads the Event/collection depending on if a slug is present.
-   */
-  private async _loadContent() {
-      // Check if the article slug is valid otherwise redirect to 404
-      this.getAllEventSlugs().subscribe(data => {
-        let slugs = [];
-        data.items.forEach(data => {
-          slugs.push(data.slug)
-        })
-        if (!slugs.includes(this.slug)) { this.router.navigate(['error/404']) }
-      });
-      this.event = this.getEventBySlug(this.slug);
-      this.getEventBySlug(this.slug).subscribe(data => {
+  ngOnDestroy(): void {
+    this.subscriptions.unsubscribe();
+  }
 
+  private loadEvent(slug: string): Observable<Event> {
+    return this.getEventBySlug(slug).pipe(
+      map((data) => {
         // If Call To Action is an email address
         if (data.callToAction.match(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/)) {
           data['callToAction'] = 'mailto:' + data['callToAction'];
@@ -112,46 +86,24 @@ export class EventComponent implements OnInit, OnDestroy {
         this.bodyMediaService.buildLinkMaps(data.bodyText?.links);
 
         this.pageTitleService.title = data.title;
-      });
-      this.parentSubHubs = await this.cerGraphQLService.getParentSubHubs(this.slug);
 
+        return data;
+      }));
   }
 
   /**
-   * Function that returns all event slugs from the EventCollection as an observable
-   * of type EventCollection. This is then unwrapped with the async pipe.
-   *
-   * This function called to determine if a valid slug has been searched otherwise redirect
+   * Function that returns an individual event from the EventCollection by it's slug
+   * as an observable of type Event.
    *
-   */
-  public getAllEventSlugs(): Observable<EventCollection> {
-    try {
-      return this.allEventSlugsGQL.fetch()
-        .pipe(pluck('data', 'eventCollection')) as Observable<EventCollection>
-    } catch (e) { console.error('Error loading all events:', e) };
-  }
-
-  /**
-   * Function that returns an individual Event from the EventCollection by it's slug
-   * as an observable of type Event. This is then unwrapped with the async pipe.
-   *
-   * This function is only called if no slug parameter is present in the URL, i.e.
-   * the user is visiting /Events.
-   *
-   * @param slug The Event's slug. Retrieved from the route parameter of the same name.
+   * @param slug The event's slug. Retrieved from the route parameter of the same name.
    */
   public getEventBySlug(slug: string): Observable<Event> {
-    try {
-      return this.getEventBySlugGQL.fetch({ slug: this.slug })
-        .pipe(flatMap(x => x.data.eventCollection.items)) as Observable<Event>;
-    } catch (e) { console.error(`Error loading Event ${slug}:`, e); }
-  }
-
-  ngOnDestroy() {
-    try {
-      this.event$.unsubscribe();
-      this.route$.unsubscribe();
-      this.bodyLinks$.unsubscribe();
-    } catch { }
+    return this.getEventBySlugGQL.fetch({ slug }).pipe(
+      mergeMap(x =>
+        x.data.eventCollection.items.length === 0
+          ? throwError(`Could not load event with slug "${slug}"`)
+          : of(x.data.eventCollection.items[0])
+      )
+    ) as Observable<Event>;
   }
 }

From 41a7f04719879a3be1e6d78274a7bab4a9659347 Mon Sep 17 00:00:00 2001
From: Luke <lukas.trombach@auckland.ac.nz>
Date: Thu, 11 Nov 2021 13:51:39 +1300
Subject: [PATCH 12/39] final changes to funding

---
 .../fundings/funding/funding.component.html   |  15 +--
 .../fundings/funding/funding.component.ts     | 124 ++++++------------
 2 files changed, 43 insertions(+), 96 deletions(-)

diff --git a/research-hub-web/src/app/components/fundings/funding/funding.component.html b/research-hub-web/src/app/components/fundings/funding/funding.component.html
index e2cdd76da..181f1123d 100644
--- a/research-hub-web/src/app/components/fundings/funding/funding.component.html
+++ b/research-hub-web/src/app/components/fundings/funding/funding.component.html
@@ -1,4 +1,4 @@
-<div id="funding-container" *ngIf="funding | async as funding">
+<div id="funding-container" *ngIf="funding">
   <!-- Banner -->
   <ng-container *ngTemplateOutlet="dynamicBanner"></ng-container>
 
@@ -6,9 +6,7 @@
     class="site-padding margin-bottom"
     ngClass.lt-md="site-padding-mobile top-padding"
   >
-    <app-breadcrumbs
-      [title]="funding.title"
-    ></app-breadcrumbs>
+    <app-breadcrumbs [title]="funding.title"></app-breadcrumbs>
 
     <!-- Title and Summary -->
     <div fxLayout="column wrap">
@@ -184,13 +182,8 @@ <h3 *ngIf="funding?.relatedDocsCollection.items.length > 0">
 <ng-template #dynamicBanner>
   <div
     class="banner-container"
-    [ngClass]="
-      bannerImageUrl === undefined
-        ? 'no-banner'
-        : isMobile
-        ? 'mobile-banner'
-        : 'standard-banner'
-    "
+    [ngClass]="{ 'standard-banner': bannerImageUrl }"
+    [ngClass.xs]="{ 'mobile-banner': bannerImageUrl }"
     [ngStyle]="
       bannerImageUrl && { 'background-image': 'url(' + bannerImageUrl + ')' }
     "
diff --git a/research-hub-web/src/app/components/fundings/funding/funding.component.ts b/research-hub-web/src/app/components/fundings/funding/funding.component.ts
index ecd323784..9ff8ce58c 100644
--- a/research-hub-web/src/app/components/fundings/funding/funding.component.ts
+++ b/research-hub-web/src/app/components/fundings/funding/funding.component.ts
@@ -1,19 +1,11 @@
 import { Component, OnDestroy, OnInit, Type } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import {
-  AllFundingGQL,
-  AllFundingSlugsGQL,
-  Funding,
-  FundingCollection,
-  GetFundingBySlugGQL
-} from '@graphql/schema';
+import { Funding, GetFundingBySlugGQL } from '@graphql/schema';
 import { BodyMediaService } from '@services/body-media.service';
-import { CerGraphqlService } from '@services/cer-graphql.service';
 import { PageTitleService } from '@services/page-title.service';
 import { MarkRenderer, NodeRenderer } from 'ngx-contentful-rich-text';
-import { DeviceDetectorService } from 'ngx-device-detector';
-import { Observable, Subscription } from 'rxjs';
-import { flatMap, pluck } from 'rxjs/operators';
+import { Observable, of, Subscription, throwError } from 'rxjs';
+import { map, mergeMap, switchMap } from 'rxjs/operators';
 import supportsWebP from 'supports-webp';
 
 @Component({
@@ -24,71 +16,54 @@ import supportsWebP from 'supports-webp';
 export class FundingComponent implements OnInit, OnDestroy {
   public nodeRenderers: Record<string, Type<NodeRenderer>>;
   public markRenderers: Record<string, Type<MarkRenderer>>;
-  public slug: string;
-  public funding;
-  public funding$: Subscription;
-  public route$: Subscription;
-  public bodyLinks$: Subscription;
-  public allFundings$: Observable<FundingCollection>;
-  public parentSubHubs;
-  public isMobile: Boolean;
+
+  private subscriptions = new Subscription();
+
+  public funding: Funding;
   public supportsWebp: Boolean;
   public bannerImageUrl: string;
 
   constructor(
     public route: ActivatedRoute,
-    public allFundingGQL: AllFundingGQL,
-    public allFundingSlugsGQL: AllFundingSlugsGQL,
     public getFundingBySlugGQL: GetFundingBySlugGQL,
-    public cerGraphQLService: CerGraphqlService,
     public pageTitleService: PageTitleService,
     public bodyMediaService: BodyMediaService,
     public router: Router,
-    private deviceService: DeviceDetectorService
   ) {
-    this.detectDevice();
     this.detectWebP();
 
     this.nodeRenderers = this.bodyMediaService.nodeRenderers;
     this.markRenderers = this.bodyMediaService.markRenderers;
   }
 
-  detectDevice() {
-    this.isMobile = this.deviceService.isMobile();
-  }
-
   detectWebP() {
     supportsWebP.then(supported => {
       this.supportsWebp = supported;
     });
   }
 
-  async ngOnInit() {
-    /**
-     * Check if there is a slug URL parameter present. If so, this is
-     * passed to the getFundingBySlug() method.
-    */
-    this.route$ = this.route.params.subscribe(params => {
-      this.slug = params.slug || this.route.snapshot.data.slug;
-      this._loadContent();
-    });
+  ngOnInit() {
+    this.subscriptions.add(this.route.params.pipe(
+      map((params) => {
+        return (params.slug || this.route.snapshot.data.slug) as string;
+      }),
+      switchMap((slug) => this.loadFunding(slug))
+    ).subscribe({
+      next: (funding: Funding) => this.funding = funding,
+      error: (error) => {
+        console.error(error);
+        this.router.navigate(['error', 404]);
+      }
+    }));
   }
 
-  /**
-   * Function that loads the Funding/collection depending on if a slug is present.
-   */
-  private async _loadContent() {
-      // Check if the article slug is valid otherwise redirect to 404
-      this.getAllFundingSlugs().subscribe(data => {
-        let slugs = [];
-        data.items.forEach(data => {
-          slugs.push(data.slug)
-        })
-        if (!slugs.includes(this.slug)) { this.router.navigate(['error/404']) }
-      });
-      this.funding = this.getFundingBySlug(this.slug);
-      this.getFundingBySlug(this.slug).subscribe(data => {
+  ngOnDestroy(): void {
+    this.subscriptions.unsubscribe();
+  }
 
+  private loadFunding(slug: string): Observable<Funding> {
+    return this.getFundingBySlug(slug).pipe(
+      map((data) => {
         // If Call To Action is an email address
         if (data.callToAction?.match(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/)) {
           data['callToAction'] = 'mailto:' + data['callToAction'];
@@ -114,46 +89,25 @@ export class FundingComponent implements OnInit, OnDestroy {
         this.bodyMediaService.buildLinkMaps(data.deadlines?.links);
 
         this.pageTitleService.title = data.title;
-      });
-      this.parentSubHubs = await this.cerGraphQLService.getParentSubHubs(this.slug);
 
+        return data;
+      })
+    );
   }
 
   /**
-   * Function that returns all funding slugs from the FundingCollection as an observable
-   * of type FundingCollection. This is then unwrapped with the async pipe.
-   *
-   * This function called to determine if a valid slug has been searched otherwise redirect
+   * Function that returns an individual funding page from the FundingCollection by it's slug
+   * as an observable of type Funding.
    *
-   */
-  public getAllFundingSlugs(): Observable<FundingCollection> {
-    try {
-      return this.allFundingSlugsGQL.fetch()
-        .pipe(pluck('data', 'fundingCollection')) as Observable<FundingCollection>
-    } catch (e) { console.error('Error loading all fundings:', e) };
-  }
-
-  /**
-   * Function that returns an individual Funding from the FundingCollection by it's slug
-   * as an observable of type Funding. This is then unwrapped with the async pipe.
-   *
-   * This function is only called if no slug parameter is present in the URL, i.e.
-   * the user is visiting /Funding.
-   *
-   * @param slug The Funding's slug. Retrieved from the route parameter of the same name.
+   * @param slug The article's slug. Retrieved from the route parameter of the same name.
    */
   public getFundingBySlug(slug: string): Observable<Funding> {
-    try {
-      return this.getFundingBySlugGQL.fetch({ slug: this.slug })
-        .pipe(flatMap(x => x.data.fundingCollection.items)) as Observable<Funding>;
-    } catch (e) { console.error(`Error loading Funding ${slug}:`, e); }
-  }
-
-  ngOnDestroy() {
-    try {
-      this.funding$.unsubscribe();
-      this.route$.unsubscribe();
-      this.bodyLinks$.unsubscribe();
-    } catch { }
+    return this.getFundingBySlugGQL.fetch({ slug }).pipe(
+      mergeMap(x =>
+        x.data.fundingCollection.items.length === 0
+          ? throwError(`Could not load funding page with slug "${slug}"`)
+          : of(x.data.fundingCollection.items[0])
+      )
+    ) as Observable<Funding>;
   }
 }

From 0ab5e85a4c27d9f7c894ea63af39b64264987b9d Mon Sep 17 00:00:00 2001
From: Luke <lukas.trombach@auckland.ac.nz>
Date: Mon, 15 Nov 2021 15:02:15 +1300
Subject: [PATCH 13/39] changes to subhub component

---
 .../subhubs/subhub/subhub.component.html      |  11 +-
 .../subhubs/subhub/subhub.component.ts        | 108 +++++++-----------
 2 files changed, 45 insertions(+), 74 deletions(-)

diff --git a/research-hub-web/src/app/components/subhubs/subhub/subhub.component.html b/research-hub-web/src/app/components/subhubs/subhub/subhub.component.html
index 8ef24f5ef..28e3b6990 100644
--- a/research-hub-web/src/app/components/subhubs/subhub/subhub.component.html
+++ b/research-hub-web/src/app/components/subhubs/subhub/subhub.component.html
@@ -1,18 +1,13 @@
 <div
   style="overflow-x: hidden"
   class="results"
-  *ngIf="subHub | async as subHub"
+  *ngIf="subHub"
 >
   <div id="subhub-container" class="margin-bottom">
     <div
       class="banner-container"
-      [ngClass]="
-        bannerImageUrl === undefined
-          ? ''
-          : isMobile
-          ? 'mobile-banner'
-          : 'standard-banner'
-      "
+      [ngClass]="{ 'standard-banner': bannerImageUrl }"
+      [ngClass.xs]="{ 'mobile-banner': bannerImageUrl }"
       [ngStyle]="
         bannerImageUrl && {
           'background-image': 'url(' + bannerImageUrl + ')'
diff --git a/research-hub-web/src/app/components/subhubs/subhub/subhub.component.ts b/research-hub-web/src/app/components/subhubs/subhub/subhub.component.ts
index 176b1bf8a..91d9df2d7 100644
--- a/research-hub-web/src/app/components/subhubs/subhub/subhub.component.ts
+++ b/research-hub-web/src/app/components/subhubs/subhub/subhub.component.ts
@@ -1,18 +1,11 @@
 import { Component, OnDestroy, OnInit, Type } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import {
-  AllSubHubGQL,
-  GetSubHubBySlugGQL,
-  SubHub,
-  SubHubCollection
-} from '@graphql/schema';
+import { GetSubHubBySlugGQL, SubHub } from '@graphql/schema';
 import { BodyMediaService } from '@services/body-media.service';
-import { CerGraphqlService } from '@services/cer-graphql.service';
 import { PageTitleService } from '@services/page-title.service';
 import { MarkRenderer, NodeRenderer } from 'ngx-contentful-rich-text';
-import { DeviceDetectorService } from 'ngx-device-detector';
-import { Observable, Subscription } from 'rxjs';
-import { flatMap, pluck } from 'rxjs/operators';
+import { Observable, of, Subscription, throwError } from 'rxjs';
+import { map, mergeMap, switchMap } from 'rxjs/operators';
 import supportsWebP from 'supports-webp';
 
 @Component({
@@ -23,40 +16,27 @@ import supportsWebP from 'supports-webp';
 export class SubhubComponent implements OnInit, OnDestroy {
   public nodeRenderers: Record<string, Type<NodeRenderer>>;
   public markRenderers: Record<string, Type<MarkRenderer>>;
-  public slug: string;
-  public subHub;
-  public subHub$: Subscription;
-  public route$: Subscription;
-  public bodyLinks$: Subscription;
-  public allSubHubs$: Observable<SubHubCollection>;
-  public parentSubHubs;
-  public isMobile: Boolean;
-  public bannerTextStyling;
+
+  private subscriptions = new Subscription();
+
+  public subHub: SubHub;
+  public bannerTextStyling = 'color: white; text-shadow: 0px 0px 8px #333333;';
   public supportsWebp: Boolean;
   public bannerImageUrl: string;
 
   constructor(
     public route: ActivatedRoute,
-    public allSubHubGQL: AllSubHubGQL,
     public getSubHubBySlugGQL: GetSubHubBySlugGQL,
-    public cerGraphQLService: CerGraphqlService,
     public pageTitleService: PageTitleService,
     public bodyMediaService: BodyMediaService,
     public router: Router,
-    private deviceService: DeviceDetectorService
   ) {
-    this.detectDevice();
     this.detectWebP();
 
     this.nodeRenderers = this.bodyMediaService.nodeRenderers;
     this.markRenderers = this.bodyMediaService.markRenderers;
   }
 
-  // Detect if device is Mobile
-  detectDevice() {
-    this.isMobile = this.deviceService.isMobile();
-  }
-
   detectWebP() {
     supportsWebP.then(supported => {
       this.supportsWebp = supported;
@@ -64,27 +44,27 @@ export class SubhubComponent implements OnInit, OnDestroy {
   }
 
   async ngOnInit() {
-    /**
-     * Check if there is a slug URL parameter present. If so, this is
-     * passed to the getSubHubBySlug() method.
-     */
-    this.route$ = this.route.params.subscribe(params => {
-      this.slug = params.slug || this.route.snapshot.data.slug;
-      this._loadContent();
-    });
+    this.subscriptions.add(this.route.params.pipe(
+      map((params) => {
+        return (params.slug || this.route.snapshot.data.slug) as string;
+      }),
+      switchMap((slug) => this.loadSubHub(slug))
+    ).subscribe({
+      next: (subHub: SubHub) => this.subHub = subHub,
+      error: (error) => {
+        console.error(error);
+        this.router.navigate(['error', 404]);
+      }
+    }));
+  }
 
-    /**
-     * Set styling for text if banner is present
-     */
-    this.bannerTextStyling = 'color: white; text-shadow: 0px 0px 8px #333333;';
+  ngOnDestroy(): void {
+    this.subscriptions.unsubscribe();
   }
 
-  /**
-   * Function that loads the SubHub/collection depending on if a slug is present.
-   */
-  private async _loadContent() {
-      this.subHub = this.getSubHubBySlug(this.slug);
-      this.subHub$ = this.getSubHubBySlug(this.slug).subscribe(data => {
+  private loadSubHub(slug: string): Observable<SubHub> {
+    return this.getSubHubBySlug(slug).pipe(
+      map((data) => {
         // Remove nulls from server in case of error.
         data.internalPagesCollection.items = data.internalPagesCollection.items.filter(item => item);
         data.externalPagesCollection.items = data.externalPagesCollection.items.filter(item => item);
@@ -104,32 +84,28 @@ export class SubhubComponent implements OnInit, OnDestroy {
         } else {
           this.bannerImageUrl = undefined;
         }
-      });
-      this.parentSubHubs = await this.cerGraphQLService.getParentSubHubs(this.slug);
 
+        return data;
+      })
+    );
   }
 
   /**
-   * Function that returns an individual SubHub from the SubHubCollection by it's slug
-   * as an observable of type SubHub. This is then unwrapped with the async pipe.
-   *
-   * This function is only called if no slug parameter is present in the URL, i.e.
-   * the user is visiting /SubHub.
+   * Function that returns an individual subhub from the SubHubCollection by it's slug
+   * as an observable of type SubHub.
    *
-   * @param slug The SubHub's slug. Retrieved from the route parameter of the same name.
+   * @param slug The subhub's slug. Retrieved from the route parameter of the same name.
    */
   public getSubHubBySlug(slug: string): Observable<SubHub> {
-    try {
-      return this.getSubHubBySlugGQL.fetch({ slug: this.slug })
-        .pipe(flatMap(x => x.data.subHubCollection.items)) as Observable<SubHub>;
-    } catch (e) { console.error(`Error loading SubHub ${slug}:`, e); }
-  }
-
-  ngOnDestroy() {
-    try {
-      this.subHub$.unsubscribe();
-      this.route$.unsubscribe();
-      this.bodyLinks$.unsubscribe();
-    } catch { }
+    if (!slug) {
+      this.router.navigate(['subhub', 'list'])
+    }
+    return this.getSubHubBySlugGQL.fetch({ slug }).pipe(
+      mergeMap(x =>
+        x.data.subHubCollection.items.length === 0
+          ? throwError(`Could not load article with slug "${slug}"`)
+          : of(x.data.subHubCollection.items[0])
+      )
+    ) as Observable<SubHub>;
   }
 }

From 39fb0470d025972c892aaec92a5aed560fc9925f Mon Sep 17 00:00:00 2001
From: Luke <lukas.trombach@auckland.ac.nz>
Date: Mon, 15 Nov 2021 15:18:19 +1300
Subject: [PATCH 14/39] changes to service

---
 .../services/service/service.component.html   |  11 +-
 .../services/service/service.component.ts     | 125 ++++++------------
 2 files changed, 42 insertions(+), 94 deletions(-)

diff --git a/research-hub-web/src/app/components/services/service/service.component.html b/research-hub-web/src/app/components/services/service/service.component.html
index e811f8d1d..a58d26944 100644
--- a/research-hub-web/src/app/components/services/service/service.component.html
+++ b/research-hub-web/src/app/components/services/service/service.component.html
@@ -1,4 +1,4 @@
-<div id="service-container" *ngIf="service | async as service">
+<div id="service-container" *ngIf="service">
   <!-- Banner -->
   <ng-container *ngTemplateOutlet="dynamicBanner"></ng-container>
 
@@ -123,13 +123,8 @@ <h3 *ngIf="service?.relatedDocsCollection.items.length > 0">
 <ng-template #dynamicBanner>
   <div
     class="banner-container"
-    [ngClass]="
-      bannerImageUrl === undefined
-        ? 'no-banner'
-        : isMobile
-        ? 'mobile-banner'
-        : 'standard-banner'
-    "
+    [ngClass]="{ 'standard-banner': bannerImageUrl }"
+    [ngClass.xs]="{ 'mobile-banner': bannerImageUrl }"
     [ngStyle]="
       bannerImageUrl && { 'background-image': 'url(' + bannerImageUrl + ')' }
     "
diff --git a/research-hub-web/src/app/components/services/service/service.component.ts b/research-hub-web/src/app/components/services/service/service.component.ts
index 707e80f1e..1cb5fffda 100644
--- a/research-hub-web/src/app/components/services/service/service.component.ts
+++ b/research-hub-web/src/app/components/services/service/service.component.ts
@@ -1,19 +1,11 @@
 import { Component, OnDestroy, OnInit, Type } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import {
-  AllServicesGQL,
-  AllServicesSlugsGQL,
-  GetServiceBySlugGQL,
-  Service,
-  ServiceCollection
-} from '@graphql/schema';
+import { GetServiceBySlugGQL, Service } from '@graphql/schema';
 import { BodyMediaService } from '@services/body-media.service';
-import { CerGraphqlService } from '@services/cer-graphql.service';
 import { PageTitleService } from '@services/page-title.service';
 import { MarkRenderer, NodeRenderer } from 'ngx-contentful-rich-text';
-import { DeviceDetectorService } from 'ngx-device-detector';
-import { Observable, Subscription } from 'rxjs';
-import { flatMap, pluck } from 'rxjs/operators';
+import { Observable, of, Subscription, throwError } from 'rxjs';
+import { map, mergeMap, switchMap } from 'rxjs/operators';
 import supportsWebP from 'supports-webp';
 
 @Component({
@@ -24,71 +16,54 @@ import supportsWebP from 'supports-webp';
 export class ServiceComponent implements OnInit, OnDestroy {
   public nodeRenderers: Record<string, Type<NodeRenderer>>;
   public markRenderers: Record<string, Type<MarkRenderer>>;
-  public slug: string;
-  public service;
-  public service$: Subscription;
-  public route$: Subscription;
-  public bodyLinks$: Subscription;
-  public allServices$: Observable<ServiceCollection>;
-  public parentSubHubs;
-  public isMobile: Boolean;
+
+  private subscriptions = new Subscription();
+
+  public service: Service;
   public supportsWebp: Boolean;
   public bannerImageUrl: string;
 
   constructor(
     public route: ActivatedRoute,
-    public allServicesGQL: AllServicesGQL,
-    public allServicesSlugsGQL: AllServicesSlugsGQL,
     public getServiceBySlugGQL: GetServiceBySlugGQL,
-    public cerGraphQLService: CerGraphqlService,
     public pageTitleService: PageTitleService,
     public bodyMediaService: BodyMediaService,
     public router: Router,
-    private deviceService: DeviceDetectorService
   ) {
-    this.detectDevice();
     this.detectWebP();
 
     this.nodeRenderers = this.bodyMediaService.nodeRenderers;
     this.markRenderers = this.bodyMediaService.markRenderers;
   }
 
-  detectDevice() {
-    this.isMobile = this.deviceService.isMobile();
-  }
-
   detectWebP() {
     supportsWebP.then(supported => {
       this.supportsWebp = supported;
     });
   }
 
-  async ngOnInit() {
-    /**
-     * Check if there is a slug URL parameter present. If so, this is
-     * passed to the getServiceBySlug() method.
-     */
-    this.route$ = this.route.params.subscribe(params => {
-      this.slug = params.slug || this.route.snapshot.data.slug;
-      this._loadContent();
-    });
+  ngOnInit() {
+    this.subscriptions.add(this.route.params.pipe(
+      map((params) => {
+        return (params.slug || this.route.snapshot.data.slug) as string;
+      }),
+      switchMap((slug) => this.loadService(slug))
+    ).subscribe({
+      next: (service: Service) => this.service = service,
+      error: (error) => {
+        console.error(error);
+        this.router.navigate(['error', 404]);
+      }
+    }));
   }
 
-  /**
-   * Function that loads the Service/collection depending on if a slug is present.
-   */
-  private async _loadContent() {
-      // Check if the article slug is valid otherwise redirect to 404
-      this.getAllServicesSlugs().subscribe(data => {
-        let slugs = [];
-        data.items.forEach(data => {
-          slugs.push(data.slug)
-        })
-        if (!slugs.includes(this.slug)) { this.router.navigate(['error/404']) }
-      });
-      this.service = this.getServiceBySlug(this.slug);
-      this.service$ = this.getServiceBySlug(this.slug).subscribe(data => {
+  ngOnDestroy(): void {
+    this.subscriptions.unsubscribe();
+  }
 
+  private loadService(slug: string): Observable<Service> {
+    return this.getServiceBySlug(slug).pipe(
+      map(data => {
         // If Call To Action is an email address
         if (data.callToAction.match(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/)) {
           data['callToAction'] = 'mailto:' + data['callToAction'];
@@ -111,46 +86,24 @@ export class ServiceComponent implements OnInit, OnDestroy {
         this.bodyMediaService.buildLinkMaps(data.bodyText?.links);
 
         this.pageTitleService.title = data.title;
-      });
-      this.parentSubHubs = await this.cerGraphQLService.getParentSubHubs(this.slug);
-
+        return data;
+      })
+    );
   }
 
   /**
-   * Function that returns all services slugs from the ServiceCollection as an observable
-   * of type ServiceCollection. This is then unwrapped with the async pipe.
-   *
-   * This function called to determine if a valid slug has been searched otherwise redirect
+   * Function that returns an individual service from the ServiceCollection by it's slug
+   * as an observable of type Service.
    *
-   */
-  public getAllServicesSlugs(): Observable<ServiceCollection> {
-    try {
-      return this.allServicesSlugsGQL.fetch()
-        .pipe(pluck('data', 'serviceCollection')) as Observable<ServiceCollection>
-    } catch (e) { console.error('Error loading all services:', e) };
-  }
-
-  /**
-   * Function that returns an individual Service from the ServiceCollection by it's slug
-   * as an observable of type Service. This is then unwrapped with the async pipe.
-   *
-   * This function is only called if no slug parameter is present in the URL, i.e.
-   * the user is visiting /Services.
-   *
-   * @param slug The Service's slug. Retrieved from the route parameter of the same name.
+   * @param slug The service's slug. Retrieved from the route parameter of the same name.
    */
   public getServiceBySlug(slug: string): Observable<Service> {
-    try {
-      return this.getServiceBySlugGQL.fetch({ slug: this.slug })
-        .pipe(flatMap(x => x.data.serviceCollection.items)) as Observable<Service>;
-    } catch (e) { console.error(`Error loading Service ${slug}:`, e); }
-  }
-
-  ngOnDestroy() {
-    try {
-      this.service$.unsubscribe();
-      this.route$.unsubscribe();
-      this.bodyLinks$.unsubscribe();
-    } catch { }
+    return this.getServiceBySlugGQL.fetch({ slug }).pipe(
+      mergeMap(x =>
+        x.data.serviceCollection.items.length === 0
+          ? throwError(`Could not load article with slug "${slug}"`)
+          : of(x.data.serviceCollection.items[0])
+      )
+    ) as Observable<Service>;
   }
 }

From 886455db2ac40bb1ab720130bc1a4915a9ecde5b Mon Sep 17 00:00:00 2001
From: Luke <lukas.trombach@auckland.ac.nz>
Date: Mon, 15 Nov 2021 15:32:37 +1300
Subject: [PATCH 15/39] changes to software

---
 .../software/software.component.html          |  13 +-
 .../softwares/software/software.component.ts  | 157 +++++++-----------
 2 files changed, 60 insertions(+), 110 deletions(-)

diff --git a/research-hub-web/src/app/components/softwares/software/software.component.html b/research-hub-web/src/app/components/softwares/software/software.component.html
index 435e0422d..177a4ae8a 100644
--- a/research-hub-web/src/app/components/softwares/software/software.component.html
+++ b/research-hub-web/src/app/components/softwares/software/software.component.html
@@ -1,4 +1,4 @@
-<div id="software-container" *ngIf="software | async as software">
+<div id="software-container" *ngIf="software">
   <!-- Banner -->
   <ng-container *ngTemplateOutlet="dynamicBanner"></ng-container>
 
@@ -49,7 +49,7 @@
     <div
       class="section-2"
       *ngIf="
-        software.licensing ||
+        software.licencing ||
         software.cost ||
         software.access ||
         software.limitations
@@ -130,13 +130,8 @@ <h3 *ngIf="software?.relatedDocsCollection.items.length > 0">
 <ng-template #dynamicBanner>
   <div
     class="banner-container"
-    [ngClass]="
-      bannerImageUrl === undefined
-        ? 'no-banner'
-        : isMobile
-        ? 'mobile-banner'
-        : 'standard-banner'
-    "
+    [ngClass]="{ 'standard-banner': bannerImageUrl }"
+    [ngClass.xs]="{ 'mobile-banner': bannerImageUrl }"
     [ngStyle]="
       bannerImageUrl && { 'background-image': 'url(' + bannerImageUrl + ')' }
     "
diff --git a/research-hub-web/src/app/components/softwares/software/software.component.ts b/research-hub-web/src/app/components/softwares/software/software.component.ts
index 1dcd6d6ee..a511ce703 100644
--- a/research-hub-web/src/app/components/softwares/software/software.component.ts
+++ b/research-hub-web/src/app/components/softwares/software/software.component.ts
@@ -1,19 +1,11 @@
 import { Component, OnDestroy, OnInit, Type } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import {
-  AllSoftwareGQL,
-  AllSoftwareSlugsGQL,
-  GetSoftwareBySlugGQL,
-  Software,
-  SoftwareCollection
-} from '@graphql/schema';
+import { GetSoftwareBySlugGQL, Software } from '@graphql/schema';
 import { BodyMediaService } from '@services/body-media.service';
-import { CerGraphqlService } from '@services/cer-graphql.service';
 import { PageTitleService } from '@services/page-title.service';
 import { MarkRenderer, NodeRenderer } from 'ngx-contentful-rich-text';
-import { DeviceDetectorService } from 'ngx-device-detector';
-import { Observable, Subscription } from 'rxjs';
-import { flatMap, pluck } from 'rxjs/operators';
+import { Observable, of, Subscription, throwError } from 'rxjs';
+import { map, mergeMap, switchMap } from 'rxjs/operators';
 import supportsWebP from 'supports-webp';
 
 @Component({
@@ -24,130 +16,93 @@ import supportsWebP from 'supports-webp';
 export class SoftwareComponent implements OnInit, OnDestroy {
   public nodeRenderers: Record<string, Type<NodeRenderer>>;
   public markRenderers: Record<string, Type<MarkRenderer>>;
-  public slug: string;
-  public software;
-  public software$: Subscription;
-  public route$: Subscription;
-  public bodyLinks$: Subscription;
-  public allSoftware$: Observable<SoftwareCollection>;
-  public parentSubHubs;
-  public isMobile: Boolean;
+
+  private subscriptions = new Subscription();
+
+  public software: Software;
   public supportsWebp: Boolean;
   public bannerImageUrl: string;
 
   constructor(
     public route: ActivatedRoute,
-    public allSoftwareGQL: AllSoftwareGQL,
-    public allSoftwareSlugsGQL: AllSoftwareSlugsGQL,
     public getSoftwareBySlugGQL: GetSoftwareBySlugGQL,
-    public cerGraphQLService: CerGraphqlService,
     public pageTitleService: PageTitleService,
     public bodyMediaService: BodyMediaService,
     public router: Router,
-    private deviceService: DeviceDetectorService
   ) {
-    this.detectDevice();
     this.detectWebP();
 
     this.nodeRenderers = this.bodyMediaService.nodeRenderers;
     this.markRenderers = this.bodyMediaService.markRenderers;
   }
 
-  detectDevice() {
-    this.isMobile = this.deviceService.isMobile();
-  }
-
   detectWebP() {
     supportsWebP.then(supported => {
       this.supportsWebp = supported;
     });
   }
 
-  async ngOnInit() {
-    /**
-     * Check if there is a slug URL parameter present. If so, this is
-     * passed to the getSoftwareBySlug() method.
-     */
-    this.route$ = this.route.params.subscribe(params => {
-      this.slug = params.slug || this.route.snapshot.data.slug;
-      this._loadContent();
-    });
+  ngOnInit() {
+    this.subscriptions.add(this.route.params.pipe(
+      map((params) => {
+        return (params.slug || this.route.snapshot.data.slug) as string;
+      }),
+      switchMap((slug) => this.loadSoftware(slug))
+    ).subscribe({
+      next: (software: Software) => this.software = software,
+      error: (error) => {
+        console.error(error);
+        this.router.navigate(['error', 404]);
+      }
+    }));
   }
 
-  /**
-   * Function that loads the Software/collection depending on if a slug is present.
-   */
-  private async _loadContent() {
-    // Check if the article slug is valid otherwise redirect to 404
-    this.getAllSoftwareSlugs().subscribe(data => {
-      let slugs = [];
-      data.items.forEach(data => {
-        slugs.push(data.slug)
-      })
-      if (!slugs.includes(this.slug)) { this.router.navigate(['error/404']) }
-    });
-    this.software = this.getSoftwareBySlug(this.slug);
-    this.software$ = this.getSoftwareBySlug(this.slug).subscribe(data => {
-      // Strip nulls from related collection data.
-      data.relatedContactsCollection.items = data.relatedContactsCollection.items.filter(item => item);
-      data.relatedDocsCollection.items = data.relatedDocsCollection.items.filter(item => item);
-      data.relatedItemsCollection.items = data.relatedItemsCollection.items.filter(item => item);
-      data.relatedOrgsCollection.items = data.relatedOrgsCollection.items.filter(item => item);
+  ngOnDestroy(): void {
+    this.subscriptions.unsubscribe();
+  }
 
-      // Set banner image URL for webp format if webp is supported
-      if (data.banner?.url) {
-        this.bannerImageUrl = this.supportsWebp ? data.banner?.url + '?w=1900&fm=webp' : data.banner?.url + '?w=1900';
-      } else {
-        this.bannerImageUrl = undefined;
-      }
+  private loadSoftware(slug: string): Observable<Software> {
+    return this.getSoftwareBySlug(slug).pipe(
+      map(data => {
+        // Strip nulls from related collection data.
+        data.relatedContactsCollection.items = data.relatedContactsCollection.items.filter(item => item);
+        data.relatedDocsCollection.items = data.relatedDocsCollection.items.filter(item => item);
+        data.relatedItemsCollection.items = data.relatedItemsCollection.items.filter(item => item);
+        data.relatedOrgsCollection.items = data.relatedOrgsCollection.items.filter(item => item);
 
-      // If Call To Action is an email address
-      if (data.callToAction?.match(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/)) {
-        data['callToAction'] = 'mailto:' + data['callToAction'];
-      }
+        // Set banner image URL for webp format if webp is supported
+        if (data.banner?.url) {
+          this.bannerImageUrl = this.supportsWebp ? data.banner?.url + '?w=1900&fm=webp' : data.banner?.url + '?w=1900';
+        } else {
+          this.bannerImageUrl = undefined;
+        }
 
-      this.bodyMediaService.buildLinkMaps(data.bodyText?.links);
-      this.pageTitleService.title = data.title;
-    });
-    this.parentSubHubs = await this.cerGraphQLService.getParentSubHubs(this.slug);
+        // If Call To Action is an email address
+        if (data.callToAction?.match(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/)) {
+          data['callToAction'] = 'mailto:' + data['callToAction'];
+        }
 
-  }
+        this.bodyMediaService.buildLinkMaps(data.bodyText?.links);
+        this.pageTitleService.title = data.title;
 
-  /**
-   * Function that returns all software slugs from the SoftwareCollection as an observable
-   * of type SoftwareCollection. This is then unwrapped with the async pipe.
-   *
-   * This function called to determine if a valid slug has been searched otherwise redirect
-   *
-   */
-  public getAllSoftwareSlugs(): Observable<SoftwareCollection> {
-    try {
-      return this.allSoftwareSlugsGQL.fetch()
-        .pipe(pluck('data', 'softwareCollection')) as Observable<SoftwareCollection>
-    } catch (e) { console.error('Error loading all software:', e) };
+        return data;
+      })
+    );
   }
 
   /**
-   * Function that returns an individual Software from the SoftwareCollection by it's slug
-   * as an observable of type Software. This is then unwrapped with the async pipe.
-   *
-   * This function is only called if no slug parameter is present in the URL, i.e.
-   * the user is visiting /Software.
+   * Function that returns an individual software from the SoftwareCollection by it's slug
+   * as an observable of type Software.
    *
-   * @param slug The Software's slug. Retrieved from the route parameter of the same name.
+   * @param slug The software's slug. Retrieved from the route parameter of the same name.
    */
   public getSoftwareBySlug(slug: string): Observable<Software> {
-    try {
-      return this.getSoftwareBySlugGQL.fetch({ slug: this.slug })
-        .pipe(flatMap(x => x.data.softwareCollection.items)) as Observable<Software>;
-    } catch (e) { console.error(`Error loading Software ${slug}:`, e); }
-  }
-
-  ngOnDestroy() {
-    try {
-      this.software$.unsubscribe();
-      this.route$.unsubscribe();
-      this.bodyLinks$.unsubscribe();
-    } catch { }
+    return this.getSoftwareBySlugGQL.fetch({ slug }).pipe(
+      mergeMap(x =>
+        x.data.softwareCollection.items.length === 0
+          ? throwError(`Could not load article with slug "${slug}"`)
+          : of(x.data.softwareCollection.items[0])
+      )
+    ) as Observable<Software>;
   }
 }

From 1c37cc21835e6a638dc00a68aa002602cfae4848 Mon Sep 17 00:00:00 2001
From: Luke <lukas.trombach@auckland.ac.nz>
Date: Tue, 16 Nov 2021 10:32:11 +1300
Subject: [PATCH 16/39] fix for dynamic routing

---
 .../src/app/components/articles/articles-routing.module.ts   | 3 ++-
 .../app/components/casestudys/case-study-routing.module.ts   | 5 +++--
 .../app/components/equipments/equipment-routing.module.ts    | 5 +++--
 .../src/app/components/events/event-routing.module.ts        | 5 +++--
 .../src/app/components/fundings/funding-routing.module.ts    | 5 +++--
 .../src/app/components/services/services-routing.module.ts   | 5 +++--
 .../src/app/components/softwares/software-routing.module.ts  | 5 +++--
 .../subhub-routes-loader/subhub-routes-loader.component.ts   | 4 ++--
 .../src/app/components/subhubs/subhubs-routing.module.ts     | 5 +++--
 research-hub-web/src/app/routing/routing.ts                  | 2 +-
 research-hub-web/src/app/services/cer-graphql.service.ts     | 4 ++--
 11 files changed, 28 insertions(+), 20 deletions(-)

diff --git a/research-hub-web/src/app/components/articles/articles-routing.module.ts b/research-hub-web/src/app/components/articles/articles-routing.module.ts
index 5bc4df1f1..18a62e356 100644
--- a/research-hub-web/src/app/components/articles/articles-routing.module.ts
+++ b/research-hub-web/src/app/components/articles/articles-routing.module.ts
@@ -4,7 +4,8 @@ import { ArticleListComponent } from './article-list/article-list.component';
 import { ArticleComponent } from './article/article.component';
 
 const routes: Routes = [
-  { path: '', component: ArticleListComponent },
+  { path: '', component: ArticleComponent },
+  { path: 'list', component: ArticleListComponent },
   { path: ':slug', component: ArticleComponent }
 ];
 
diff --git a/research-hub-web/src/app/components/casestudys/case-study-routing.module.ts b/research-hub-web/src/app/components/casestudys/case-study-routing.module.ts
index f6af59d49..a0622893d 100644
--- a/research-hub-web/src/app/components/casestudys/case-study-routing.module.ts
+++ b/research-hub-web/src/app/components/casestudys/case-study-routing.module.ts
@@ -4,8 +4,9 @@ import { CaseStudyListComponent } from './case-study-list/case-study-list.compon
 import { CaseStudyComponent } from './case-study/case-study.component';
 
 const routes: Routes = [
-  { path: '', component: CaseStudyListComponent },
-  { path: ':slug', component: CaseStudyComponent}
+  { path: '', component: CaseStudyComponent },
+  { path: 'list', component: CaseStudyListComponent },
+  { path: ':slug', component: CaseStudyComponent }
 ];
 
 @NgModule({
diff --git a/research-hub-web/src/app/components/equipments/equipment-routing.module.ts b/research-hub-web/src/app/components/equipments/equipment-routing.module.ts
index 5c1452610..865d12f8d 100644
--- a/research-hub-web/src/app/components/equipments/equipment-routing.module.ts
+++ b/research-hub-web/src/app/components/equipments/equipment-routing.module.ts
@@ -5,8 +5,9 @@ import { EquipmentComponent } from './equipment/equipment.component';
 
 
 const routes: Routes = [
-  { path: '', component: EquipmentListComponent },
-  { path: ':slug', component: EquipmentComponent}
+  { path: '', component: EquipmentComponent },
+  { path: 'list', component: EquipmentListComponent },
+  { path: ':slug', component: EquipmentComponent }
 ];
 
 @NgModule({
diff --git a/research-hub-web/src/app/components/events/event-routing.module.ts b/research-hub-web/src/app/components/events/event-routing.module.ts
index 2af2dd766..61278688d 100644
--- a/research-hub-web/src/app/components/events/event-routing.module.ts
+++ b/research-hub-web/src/app/components/events/event-routing.module.ts
@@ -5,8 +5,9 @@ import { EventComponent } from './event/event.component';
 
 
 const routes: Routes = [
-  { path: '', component: EventListComponent },
-  { path: ':slug', component: EventComponent}
+  { path: '', component: EventComponent },
+  { path: 'list', component: EventListComponent },
+  { path: ':slug', component: EventComponent }
 ];
 
 @NgModule({
diff --git a/research-hub-web/src/app/components/fundings/funding-routing.module.ts b/research-hub-web/src/app/components/fundings/funding-routing.module.ts
index c5a567ff1..1ed4df547 100644
--- a/research-hub-web/src/app/components/fundings/funding-routing.module.ts
+++ b/research-hub-web/src/app/components/fundings/funding-routing.module.ts
@@ -5,8 +5,9 @@ import { FundingComponent } from './funding/funding.component';
 
 
 const routes: Routes = [
-  { path: '', component: FundingListComponent },
-  { path: ':slug', component: FundingComponent}
+  { path: '', component: FundingComponent },
+  { path: 'list', component: FundingListComponent },
+  { path: ':slug', component: FundingComponent }
 ];
 
 @NgModule({
diff --git a/research-hub-web/src/app/components/services/services-routing.module.ts b/research-hub-web/src/app/components/services/services-routing.module.ts
index 5d1bd050a..b9ed8de4d 100644
--- a/research-hub-web/src/app/components/services/services-routing.module.ts
+++ b/research-hub-web/src/app/components/services/services-routing.module.ts
@@ -5,8 +5,9 @@ import { ServiceComponent } from './service/service.component';
 
 
 const routes: Routes = [
-  { path: '', component: ServiceListComponent },
-  { path: ':slug', component: ServiceComponent}
+  { path: '', component: ServiceComponent },
+  { path: 'list', component: ServiceListComponent },
+  { path: ':slug', component: ServiceComponent }
 ];
 
 @NgModule({
diff --git a/research-hub-web/src/app/components/softwares/software-routing.module.ts b/research-hub-web/src/app/components/softwares/software-routing.module.ts
index 7de37c224..b7ed6b0bd 100644
--- a/research-hub-web/src/app/components/softwares/software-routing.module.ts
+++ b/research-hub-web/src/app/components/softwares/software-routing.module.ts
@@ -5,8 +5,9 @@ import { SoftwareComponent } from './software/software.component';
 
 
 const routes: Routes = [
-  { path: '', component: SoftwareListComponent },
-  { path: ':slug', component: SoftwareComponent}
+  { path: '', component: SoftwareComponent },
+  { path: 'list', component: SoftwareListComponent },
+  { path: ':slug', component: SoftwareComponent }
 ];
 
 @NgModule({
diff --git a/research-hub-web/src/app/components/subhub-routes-loader/subhub-routes-loader.component.ts b/research-hub-web/src/app/components/subhub-routes-loader/subhub-routes-loader.component.ts
index 9d41e7432..f70ca2689 100644
--- a/research-hub-web/src/app/components/subhub-routes-loader/subhub-routes-loader.component.ts
+++ b/research-hub-web/src/app/components/subhub-routes-loader/subhub-routes-loader.component.ts
@@ -17,9 +17,9 @@ export class SubHubRoutesLoaderComponent implements OnInit {
   async ngOnInit(): Promise<boolean> {
     if (!this.cerGraphqlService.hasPushedSubhubRoutes) {
       // If we haven't pushed the subhub routes yet, the route may
-      // be a subhub route. Load subhub routes. 
+      // be a subhub route. Load subhub routes.
       await this.cerGraphqlService.pushSubHubRoutes();
-      const currentUrl = await this.router.url;
+      const currentUrl = this.router.url;
       // Then re-navigate and see if the route works.
       return this.router.navigateByUrl(currentUrl);
     } else {
diff --git a/research-hub-web/src/app/components/subhubs/subhubs-routing.module.ts b/research-hub-web/src/app/components/subhubs/subhubs-routing.module.ts
index 1a0a69082..fb0f5f321 100644
--- a/research-hub-web/src/app/components/subhubs/subhubs-routing.module.ts
+++ b/research-hub-web/src/app/components/subhubs/subhubs-routing.module.ts
@@ -5,8 +5,9 @@ import { SubhubComponent } from './subhub/subhub.component';
 
 
 const routes: Routes = [
-  { path: '', component: SubhubListComponent },
-  { path: ':slug', component: SubhubComponent}
+  { path: '', component: SubhubComponent },
+  { path: 'list', component: SubhubListComponent },
+  { path: ':slug', component: SubhubComponent }
 ];
 
 @NgModule({
diff --git a/research-hub-web/src/app/routing/routing.ts b/research-hub-web/src/app/routing/routing.ts
index 2c54f7871..e795c046d 100644
--- a/research-hub-web/src/app/routing/routing.ts
+++ b/research-hub-web/src/app/routing/routing.ts
@@ -77,7 +77,7 @@ export const appRoutes: Routes = [
       {
         path: 'software',
         loadChildren: () => import('@components/softwares/softwares.module').then(m => m.SoftwaresModule)
-      },
+      }
     ]
   },
   /**
diff --git a/research-hub-web/src/app/services/cer-graphql.service.ts b/research-hub-web/src/app/services/cer-graphql.service.ts
index c1aaa5672..3ee602335 100644
--- a/research-hub-web/src/app/services/cer-graphql.service.ts
+++ b/research-hub-web/src/app/services/cer-graphql.service.ts
@@ -2,7 +2,6 @@ import { Injectable } from '@angular/core';
 import { Location } from '@angular/common';
 import { Router, Routes } from '@angular/router';
 import { GetAllSubHubChildPagesSlugsGQL } from '@graphql/schema';
-import { map } from 'rxjs/operators';
 
 /**
  * The interface of the breadcrumbsArray object returned by this service's getParentSubHubs()
@@ -257,7 +256,8 @@ class SubHubMap {
       path: curPath,
       loadChildren: () => import(`../components/${curObject.typeName.toLowerCase()}s/${curObject.typeName.toLowerCase()}s.module`)
         .then(m => m[curObject.typeName.toLowerCase().charAt(0).toUpperCase() + curObject.typeName.toLowerCase().slice(1) + 'sModule']),
-      data: { slug: curObject.slug }
+      data: { slug: curObject.slug },
+      pathMatch: 'full'
     });
 
     if (curObject.isSubHub()) {

From 6e1d854e2f92c42074966fabcf386c8426dd8fc4 Mon Sep 17 00:00:00 2001
From: Luke <lukas.trombach@auckland.ac.nz>
Date: Tue, 16 Nov 2021 12:55:40 +1300
Subject: [PATCH 17/39] added default images to cards

---
 .../cards/standard-card/standard-card.component.html  |  5 ++++-
 .../cards/standard-card/standard-card.component.ts    | 11 +++++++++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/research-hub-web/src/app/components/cards/standard-card/standard-card.component.html b/research-hub-web/src/app/components/cards/standard-card/standard-card.component.html
index 8ca4b7a46..1c97fac5a 100644
--- a/research-hub-web/src/app/components/cards/standard-card/standard-card.component.html
+++ b/research-hub-web/src/app/components/cards/standard-card/standard-card.component.html
@@ -47,5 +47,8 @@
   </picture>
 </ng-template>
 <ng-template #noImage>
-  <div style="margin-top: 12px"></div>
+  <picture>
+    <source srcset="{{ defaultImage.get(contentItem.__typename) }}?w=1000&fm=webp" type="image/webp" />
+    <img mat-card-image src="{{ defaultImage.get(contentItem.__typename) }}?w=1000" alt="default background" />
+  </picture>
 </ng-template>
diff --git a/research-hub-web/src/app/components/cards/standard-card/standard-card.component.ts b/research-hub-web/src/app/components/cards/standard-card/standard-card.component.ts
index 6a6ffcc0d..cc85f1bcf 100644
--- a/research-hub-web/src/app/components/cards/standard-card/standard-card.component.ts
+++ b/research-hub-web/src/app/components/cards/standard-card/standard-card.component.ts
@@ -23,5 +23,16 @@ export class StandardCardComponent {
   @Input() contentItem: PossibleContentItems;
   @Input() isSubhubChild = false;
 
+  public defaultImage: Map<PossibleContentItems['__typename'], string> = new Map<PossibleContentItems['__typename'], string>([
+    ['Article', 'https://images.ctfassets.net/vbuxn5csp0ik/7dPrwEcbk56xKfz5zTLvEP/0efddb4b6c9e1eda80d2fb8d1ee47275/card-background-article.png'],
+    ['CaseStudy', 'https://images.ctfassets.net/vbuxn5csp0ik/2qmi1RS1lZSgXj9xP47h8E/54eb4e54bfc00d26f34401293af1ed80/card-background-case-study.png'],
+    ['Equipment', 'https://images.ctfassets.net/vbuxn5csp0ik/1aSspX7erQzo9jVKStvwO9/6b141535dc463e8af1394f269100b9d7/card-background-equipment.png'],
+    ['Event', 'https://images.ctfassets.net/vbuxn5csp0ik/lwzGPgcdAAwSIR7PruzdG/de3e9093f3504a0e64d12a7751d5752e/card-background-event.png'],
+    ['Funding', 'https://images.ctfassets.net/vbuxn5csp0ik/3n0YDaiEq2xCtp8sols7LG/2ff1b20bb49bfc0da132f2500c8ab0eb/card-background-funding.png'],
+    ['Service', 'https://images.ctfassets.net/vbuxn5csp0ik/5NwXkH2EEsYbGj20IefKyp/102be11747b9de2e07980926e4498d27/card-background-service.png'],
+    ['Software', 'https://images.ctfassets.net/vbuxn5csp0ik/16eyRnz65svAAyUF08yfAZ/ea0cff6e1c51e1800e7d210168532516/card-background-software.png'],
+    ['SubHub', 'https://images.ctfassets.net/vbuxn5csp0ik/4A7fKybLu0221iqacf7BAz/df2882a80873bea2e3297e7ebc3f6f41/card-background-subhub.png']
+  ]);
+
   constructor() { }
 }

From 2f6837906f06b68171aacde9c7cd31ee100f0254 Mon Sep 17 00:00:00 2001
From: Luke <lukas.trombach@auckland.ac.nz>
Date: Tue, 16 Nov 2021 13:01:12 +1300
Subject: [PATCH 18/39] changed template name

---
 .../cards/standard-card/standard-card.component.html          | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/research-hub-web/src/app/components/cards/standard-card/standard-card.component.html b/research-hub-web/src/app/components/cards/standard-card/standard-card.component.html
index 1c97fac5a..28c41168b 100644
--- a/research-hub-web/src/app/components/cards/standard-card/standard-card.component.html
+++ b/research-hub-web/src/app/components/cards/standard-card/standard-card.component.html
@@ -4,7 +4,7 @@
 >
   <ng-container
     *ngTemplateOutlet="
-      contentItem?.banner ? image : noImage;
+      contentItem?.banner ? image : defaultCardImage;
       context: {
         $implicit: contentItem?.banner?.url,
         title: contentItem?.title
@@ -46,7 +46,7 @@
     <img mat-card-image src="{{ url }}?w=1000" alt="{{ title }}" />
   </picture>
 </ng-template>
-<ng-template #noImage>
+<ng-template #defaultCardImage>
   <picture>
     <source srcset="{{ defaultImage.get(contentItem.__typename) }}?w=1000&fm=webp" type="image/webp" />
     <img mat-card-image src="{{ defaultImage.get(contentItem.__typename) }}?w=1000" alt="default background" />

From c8900efa1f9c90f3e6873c9291d2671de3b12db5 Mon Sep 17 00:00:00 2001
From: Luke <lukas.trombach@auckland.ac.nz>
Date: Tue, 16 Nov 2021 13:01:47 +1300
Subject: [PATCH 19/39] formatting

---
 .../cards/standard-card/standard-card.component.html | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/research-hub-web/src/app/components/cards/standard-card/standard-card.component.html b/research-hub-web/src/app/components/cards/standard-card/standard-card.component.html
index 28c41168b..e2ded1727 100644
--- a/research-hub-web/src/app/components/cards/standard-card/standard-card.component.html
+++ b/research-hub-web/src/app/components/cards/standard-card/standard-card.component.html
@@ -46,9 +46,17 @@
     <img mat-card-image src="{{ url }}?w=1000" alt="{{ title }}" />
   </picture>
 </ng-template>
+
 <ng-template #defaultCardImage>
   <picture>
-    <source srcset="{{ defaultImage.get(contentItem.__typename) }}?w=1000&fm=webp" type="image/webp" />
-    <img mat-card-image src="{{ defaultImage.get(contentItem.__typename) }}?w=1000" alt="default background" />
+    <source
+      srcset="{{ defaultImage.get(contentItem.__typename) }}?w=1000&fm=webp"
+      type="image/webp"
+    />
+    <img
+      mat-card-image
+      src="{{ defaultImage.get(contentItem.__typename) }}?w=1000"
+      alt="default background"
+    />
   </picture>
 </ng-template>

From 5b37e6c264699e8f8baa387a16b9dd65610b411b Mon Sep 17 00:00:00 2001
From: Luke <lukas.trombach@auckland.ac.nz>
Date: Tue, 16 Nov 2021 15:44:47 +1300
Subject: [PATCH 20/39] streamlined observables

---
 .../articles/article/article.component.ts      | 18 ++++++++++--------
 .../case-study/case-study.component.ts         | 18 ++++++++++--------
 .../equipment/equipment.component.ts           | 18 ++++++++++--------
 .../components/events/event/event.component.ts | 18 ++++++++++--------
 .../fundings/funding/funding.component.ts      | 18 ++++++++++--------
 .../services/service/service.component.ts      | 18 ++++++++++--------
 .../softwares/software/software.component.ts   | 18 ++++++++++--------
 .../subhubs/subhub/subhub.component.ts         | 18 ++++++++++--------
 8 files changed, 80 insertions(+), 64 deletions(-)

diff --git a/research-hub-web/src/app/components/articles/article/article.component.ts b/research-hub-web/src/app/components/articles/article/article.component.ts
index eca4dcb81..ea5c33094 100644
--- a/research-hub-web/src/app/components/articles/article/article.component.ts
+++ b/research-hub-web/src/app/components/articles/article/article.component.ts
@@ -4,8 +4,8 @@ import { Article, GetArticleBySlugGQL } from '@graphql/schema';
 import { BodyMediaService } from '@services/body-media.service';
 import { PageTitleService } from '@services/page-title.service';
 import { MarkRenderer, NodeRenderer } from 'ngx-contentful-rich-text';
-import { Observable, of, Subscription, throwError } from 'rxjs';
-import { map, mergeMap, switchMap } from 'rxjs/operators';
+import { Observable, Subscription } from 'rxjs';
+import { map, switchMap } from 'rxjs/operators';
 import supportsWebP from 'supports-webp';
 
 @Component({
@@ -101,11 +101,13 @@ export class ArticleComponent implements OnInit, OnDestroy {
    */
   public getArticleBySlug(slug: string): Observable<Article> {
     return this.getArticleBySlugGQL.fetch({ slug }).pipe(
-      mergeMap(x =>
-        x.data.articleCollection.items.length === 0
-          ? throwError(`Could not load article with slug "${slug}"`)
-          : of(x.data.articleCollection.items[0])
-      )
-    ) as Observable<Article>;
+      map(x => {
+        if (x.data.articleCollection.items.length === 0) {
+          throw new Error(`Could not load article with slug "${slug}"`)
+        } else {
+          return x.data.articleCollection.items[0] as Article
+        }
+      })
+    );
   }
 }
diff --git a/research-hub-web/src/app/components/casestudys/case-study/case-study.component.ts b/research-hub-web/src/app/components/casestudys/case-study/case-study.component.ts
index e5c182c4c..d63a198bf 100644
--- a/research-hub-web/src/app/components/casestudys/case-study/case-study.component.ts
+++ b/research-hub-web/src/app/components/casestudys/case-study/case-study.component.ts
@@ -4,8 +4,8 @@ import { CaseStudy, GetCaseStudyBySlugGQL } from '@graphql/schema';
 import { BodyMediaService } from '@services/body-media.service';
 import { PageTitleService } from '@services/page-title.service';
 import { MarkRenderer, NodeRenderer } from 'ngx-contentful-rich-text';
-import { Observable, of, Subscription, throwError } from 'rxjs';
-import { map, mergeMap, switchMap } from 'rxjs/operators';
+import { Observable, Subscription } from 'rxjs';
+import { map, switchMap } from 'rxjs/operators';
 import supportsWebP from 'supports-webp';
 
 
@@ -98,11 +98,13 @@ export class CaseStudyComponent implements OnInit, OnDestroy {
    */
   public getCaseStudyBySlug(slug: string): Observable<CaseStudy> {
     return this.getCaseStudyBySlugGQL.fetch({ slug }).pipe(
-      mergeMap(x =>
-        x.data.caseStudyCollection.items.length === 0
-          ? throwError(`Could not load case study with slug "${slug}"`)
-          : of(x.data.caseStudyCollection.items[0])
-      )
-    ) as Observable<CaseStudy>;
+      map(x => {
+        if (x.data.caseStudyCollection.items.length === 0) {
+          throw new Error(`Could not load case study with slug "${slug}"`)
+        } else {
+          return x.data.caseStudyCollection.items[0] as CaseStudy
+        }
+      })
+    );
   }
 }
diff --git a/research-hub-web/src/app/components/equipments/equipment/equipment.component.ts b/research-hub-web/src/app/components/equipments/equipment/equipment.component.ts
index b062453af..83917938e 100644
--- a/research-hub-web/src/app/components/equipments/equipment/equipment.component.ts
+++ b/research-hub-web/src/app/components/equipments/equipment/equipment.component.ts
@@ -4,8 +4,8 @@ import { Equipment, GetEquipmentBySlugGQL } from '@graphql/schema';
 import { BodyMediaService } from '@services/body-media.service';
 import { PageTitleService } from '@services/page-title.service';
 import { MarkRenderer, NodeRenderer } from 'ngx-contentful-rich-text';
-import { Observable, of, Subscription, throwError } from 'rxjs';
-import { map, mergeMap, switchMap } from 'rxjs/operators';
+import { Observable, Subscription } from 'rxjs';
+import { map, switchMap } from 'rxjs/operators';
 import supportsWebP from 'supports-webp';
 
 @Component({
@@ -101,11 +101,13 @@ export class EquipmentComponent implements OnInit, OnDestroy {
    */
   public getEquipmentBySlug(slug: string): Observable<Equipment> {
     return this.getEquipmentBySlugGQL.fetch({ slug }).pipe(
-      mergeMap(x =>
-        x.data.equipmentCollection.items.length === 0
-          ? throwError(`Could not load equipment with slug "${slug}"`)
-          : of(x.data.equipmentCollection.items[0])
-      )
-    ) as Observable<Equipment>;
+      map(x => {
+        if (x.data.equipmentCollection.items.length === 0) {
+          throw new Error(`Could not load equipment with slug "${slug}"`)
+        } else {
+          return x.data.equipmentCollection.items[0] as Equipment
+        }
+      })
+    );
   }
 }
diff --git a/research-hub-web/src/app/components/events/event/event.component.ts b/research-hub-web/src/app/components/events/event/event.component.ts
index 43eab121f..60bb3278c 100644
--- a/research-hub-web/src/app/components/events/event/event.component.ts
+++ b/research-hub-web/src/app/components/events/event/event.component.ts
@@ -4,8 +4,8 @@ import { Event, GetEventBySlugGQL } from '@graphql/schema';
 import { BodyMediaService } from '@services/body-media.service';
 import { PageTitleService } from '@services/page-title.service';
 import { MarkRenderer, NodeRenderer } from 'ngx-contentful-rich-text';
-import { Observable, of, Subscription, throwError } from 'rxjs';
-import { map, mergeMap, switchMap } from 'rxjs/operators';
+import { Observable, Subscription } from 'rxjs';
+import { map, switchMap } from 'rxjs/operators';
 import supportsWebP from 'supports-webp';
 
 @Component({
@@ -99,11 +99,13 @@ export class EventComponent implements OnInit, OnDestroy {
    */
   public getEventBySlug(slug: string): Observable<Event> {
     return this.getEventBySlugGQL.fetch({ slug }).pipe(
-      mergeMap(x =>
-        x.data.eventCollection.items.length === 0
-          ? throwError(`Could not load event with slug "${slug}"`)
-          : of(x.data.eventCollection.items[0])
-      )
-    ) as Observable<Event>;
+      map(x => {
+        if (x.data.eventCollection.items.length === 0) {
+          throw new Error(`Could not load event with slug "${slug}"`)
+        } else {
+          return x.data.eventCollection.items[0] as Event
+        }
+      })
+    );
   }
 }
diff --git a/research-hub-web/src/app/components/fundings/funding/funding.component.ts b/research-hub-web/src/app/components/fundings/funding/funding.component.ts
index 9ff8ce58c..0bd6d6539 100644
--- a/research-hub-web/src/app/components/fundings/funding/funding.component.ts
+++ b/research-hub-web/src/app/components/fundings/funding/funding.component.ts
@@ -4,8 +4,8 @@ import { Funding, GetFundingBySlugGQL } from '@graphql/schema';
 import { BodyMediaService } from '@services/body-media.service';
 import { PageTitleService } from '@services/page-title.service';
 import { MarkRenderer, NodeRenderer } from 'ngx-contentful-rich-text';
-import { Observable, of, Subscription, throwError } from 'rxjs';
-import { map, mergeMap, switchMap } from 'rxjs/operators';
+import { Observable, Subscription } from 'rxjs';
+import { map, switchMap } from 'rxjs/operators';
 import supportsWebP from 'supports-webp';
 
 @Component({
@@ -103,11 +103,13 @@ export class FundingComponent implements OnInit, OnDestroy {
    */
   public getFundingBySlug(slug: string): Observable<Funding> {
     return this.getFundingBySlugGQL.fetch({ slug }).pipe(
-      mergeMap(x =>
-        x.data.fundingCollection.items.length === 0
-          ? throwError(`Could not load funding page with slug "${slug}"`)
-          : of(x.data.fundingCollection.items[0])
-      )
-    ) as Observable<Funding>;
+      map(x => {
+        if (x.data.fundingCollection.items.length === 0) {
+          throw new Error(`Could not load funding with slug "${slug}"`)
+        } else {
+          return x.data.fundingCollection.items[0] as Funding
+        }
+      })
+    );
   }
 }
diff --git a/research-hub-web/src/app/components/services/service/service.component.ts b/research-hub-web/src/app/components/services/service/service.component.ts
index 1cb5fffda..9f4b2beca 100644
--- a/research-hub-web/src/app/components/services/service/service.component.ts
+++ b/research-hub-web/src/app/components/services/service/service.component.ts
@@ -4,8 +4,8 @@ import { GetServiceBySlugGQL, Service } from '@graphql/schema';
 import { BodyMediaService } from '@services/body-media.service';
 import { PageTitleService } from '@services/page-title.service';
 import { MarkRenderer, NodeRenderer } from 'ngx-contentful-rich-text';
-import { Observable, of, Subscription, throwError } from 'rxjs';
-import { map, mergeMap, switchMap } from 'rxjs/operators';
+import { Observable, Subscription } from 'rxjs';
+import { map, switchMap } from 'rxjs/operators';
 import supportsWebP from 'supports-webp';
 
 @Component({
@@ -99,11 +99,13 @@ export class ServiceComponent implements OnInit, OnDestroy {
    */
   public getServiceBySlug(slug: string): Observable<Service> {
     return this.getServiceBySlugGQL.fetch({ slug }).pipe(
-      mergeMap(x =>
-        x.data.serviceCollection.items.length === 0
-          ? throwError(`Could not load article with slug "${slug}"`)
-          : of(x.data.serviceCollection.items[0])
-      )
-    ) as Observable<Service>;
+      map(x => {
+        if (x.data.serviceCollection.items.length === 0) {
+          throw new Error(`Could not load service with slug "${slug}"`)
+        } else {
+          return x.data.serviceCollection.items[0] as Service
+        }
+      })
+    );
   }
 }
diff --git a/research-hub-web/src/app/components/softwares/software/software.component.ts b/research-hub-web/src/app/components/softwares/software/software.component.ts
index a511ce703..66fdfc972 100644
--- a/research-hub-web/src/app/components/softwares/software/software.component.ts
+++ b/research-hub-web/src/app/components/softwares/software/software.component.ts
@@ -4,8 +4,8 @@ import { GetSoftwareBySlugGQL, Software } from '@graphql/schema';
 import { BodyMediaService } from '@services/body-media.service';
 import { PageTitleService } from '@services/page-title.service';
 import { MarkRenderer, NodeRenderer } from 'ngx-contentful-rich-text';
-import { Observable, of, Subscription, throwError } from 'rxjs';
-import { map, mergeMap, switchMap } from 'rxjs/operators';
+import { Observable, Subscription } from 'rxjs';
+import { map, switchMap } from 'rxjs/operators';
 import supportsWebP from 'supports-webp';
 
 @Component({
@@ -98,11 +98,13 @@ export class SoftwareComponent implements OnInit, OnDestroy {
    */
   public getSoftwareBySlug(slug: string): Observable<Software> {
     return this.getSoftwareBySlugGQL.fetch({ slug }).pipe(
-      mergeMap(x =>
-        x.data.softwareCollection.items.length === 0
-          ? throwError(`Could not load article with slug "${slug}"`)
-          : of(x.data.softwareCollection.items[0])
-      )
-    ) as Observable<Software>;
+      map(x => {
+        if (x.data.softwareCollection.items.length === 0) {
+          throw new Error(`Could not load software with slug "${slug}"`)
+        } else {
+          return x.data.softwareCollection.items[0] as Software
+        }
+      })
+    );
   }
 }
diff --git a/research-hub-web/src/app/components/subhubs/subhub/subhub.component.ts b/research-hub-web/src/app/components/subhubs/subhub/subhub.component.ts
index 91d9df2d7..9248044ec 100644
--- a/research-hub-web/src/app/components/subhubs/subhub/subhub.component.ts
+++ b/research-hub-web/src/app/components/subhubs/subhub/subhub.component.ts
@@ -4,8 +4,8 @@ import { GetSubHubBySlugGQL, SubHub } from '@graphql/schema';
 import { BodyMediaService } from '@services/body-media.service';
 import { PageTitleService } from '@services/page-title.service';
 import { MarkRenderer, NodeRenderer } from 'ngx-contentful-rich-text';
-import { Observable, of, Subscription, throwError } from 'rxjs';
-import { map, mergeMap, switchMap } from 'rxjs/operators';
+import { Observable, Subscription } from 'rxjs';
+import { map, switchMap } from 'rxjs/operators';
 import supportsWebP from 'supports-webp';
 
 @Component({
@@ -101,11 +101,13 @@ export class SubhubComponent implements OnInit, OnDestroy {
       this.router.navigate(['subhub', 'list'])
     }
     return this.getSubHubBySlugGQL.fetch({ slug }).pipe(
-      mergeMap(x =>
-        x.data.subHubCollection.items.length === 0
-          ? throwError(`Could not load article with slug "${slug}"`)
-          : of(x.data.subHubCollection.items[0])
-      )
-    ) as Observable<SubHub>;
+      map(x => {
+        if (x.data.subHubCollection.items.length === 0) {
+          throw new Error(`Could not load subHub with slug "${slug}"`)
+        } else {
+          return x.data.subHubCollection.items[0] as SubHub
+        }
+      })
+    );
   }
 }

From 9de1f77399495546bcbf826db11e44165dd54a80 Mon Sep 17 00:00:00 2001
From: Luke <lukas.trombach@auckland.ac.nz>
Date: Fri, 19 Nov 2021 11:27:52 +1300
Subject: [PATCH 21/39] workaround for 404 page flashing when viewing protected
 content

---
 .../app/components/articles/article/article.component.ts   | 7 +++++--
 .../casestudys/case-study/case-study.component.ts          | 7 +++++--
 .../components/equipments/equipment/equipment.component.ts | 7 +++++--
 .../src/app/components/events/event/event.component.ts     | 7 +++++--
 .../app/components/fundings/funding/funding.component.ts   | 7 +++++--
 .../app/components/services/service/service.component.ts   | 7 +++++--
 .../components/softwares/software/software.component.ts    | 7 +++++--
 .../src/app/components/subhubs/subhub/subhub.component.ts  | 7 +++++--
 8 files changed, 40 insertions(+), 16 deletions(-)

diff --git a/research-hub-web/src/app/components/articles/article/article.component.ts b/research-hub-web/src/app/components/articles/article/article.component.ts
index ea5c33094..54971f685 100644
--- a/research-hub-web/src/app/components/articles/article/article.component.ts
+++ b/research-hub-web/src/app/components/articles/article/article.component.ts
@@ -3,6 +3,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { Article, GetArticleBySlugGQL } from '@graphql/schema';
 import { BodyMediaService } from '@services/body-media.service';
 import { PageTitleService } from '@services/page-title.service';
+import { GraphQLError } from 'graphql';
 import { MarkRenderer, NodeRenderer } from 'ngx-contentful-rich-text';
 import { Observable, Subscription } from 'rxjs';
 import { map, switchMap } from 'rxjs/operators';
@@ -52,8 +53,10 @@ export class ArticleComponent implements OnInit, OnDestroy {
     ).subscribe({
       next: (article: Article) => this.article = article,
       error: (error) => {
-        console.error(error);
-        this.router.navigate(['error', 404]);
+        if (error! instanceof GraphQLError) {
+          console.error(error);
+          this.router.navigate(['error', 404]);
+        }
       }
     }));
   }
diff --git a/research-hub-web/src/app/components/casestudys/case-study/case-study.component.ts b/research-hub-web/src/app/components/casestudys/case-study/case-study.component.ts
index d63a198bf..773c84f95 100644
--- a/research-hub-web/src/app/components/casestudys/case-study/case-study.component.ts
+++ b/research-hub-web/src/app/components/casestudys/case-study/case-study.component.ts
@@ -3,6 +3,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { CaseStudy, GetCaseStudyBySlugGQL } from '@graphql/schema';
 import { BodyMediaService } from '@services/body-media.service';
 import { PageTitleService } from '@services/page-title.service';
+import { GraphQLError } from 'graphql';
 import { MarkRenderer, NodeRenderer } from 'ngx-contentful-rich-text';
 import { Observable, Subscription } from 'rxjs';
 import { map, switchMap } from 'rxjs/operators';
@@ -53,8 +54,10 @@ export class CaseStudyComponent implements OnInit, OnDestroy {
     ).subscribe({
       next: (caseStudy: CaseStudy) => this.caseStudy = caseStudy,
       error: (error) => {
-        console.error(error);
-        this.router.navigate(['error', 404]);
+        if (error! instanceof GraphQLError) {
+          console.error(error);
+          this.router.navigate(['error', 404]);
+        }
       }
     }));
   }
diff --git a/research-hub-web/src/app/components/equipments/equipment/equipment.component.ts b/research-hub-web/src/app/components/equipments/equipment/equipment.component.ts
index 83917938e..79a223d82 100644
--- a/research-hub-web/src/app/components/equipments/equipment/equipment.component.ts
+++ b/research-hub-web/src/app/components/equipments/equipment/equipment.component.ts
@@ -3,6 +3,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { Equipment, GetEquipmentBySlugGQL } from '@graphql/schema';
 import { BodyMediaService } from '@services/body-media.service';
 import { PageTitleService } from '@services/page-title.service';
+import { GraphQLError } from 'graphql';
 import { MarkRenderer, NodeRenderer } from 'ngx-contentful-rich-text';
 import { Observable, Subscription } from 'rxjs';
 import { map, switchMap } from 'rxjs/operators';
@@ -52,8 +53,10 @@ export class EquipmentComponent implements OnInit, OnDestroy {
     ).subscribe({
       next: (equipment: Equipment) => this.equipment = equipment,
       error: (error) => {
-        console.error(error);
-        this.router.navigate(['error', 404]);
+        if (error! instanceof GraphQLError) {
+          console.error(error);
+          this.router.navigate(['error', 404]);
+        }
       }
     }));
   }
diff --git a/research-hub-web/src/app/components/events/event/event.component.ts b/research-hub-web/src/app/components/events/event/event.component.ts
index 60bb3278c..775e81f25 100644
--- a/research-hub-web/src/app/components/events/event/event.component.ts
+++ b/research-hub-web/src/app/components/events/event/event.component.ts
@@ -3,6 +3,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { Event, GetEventBySlugGQL } from '@graphql/schema';
 import { BodyMediaService } from '@services/body-media.service';
 import { PageTitleService } from '@services/page-title.service';
+import { GraphQLError } from 'graphql';
 import { MarkRenderer, NodeRenderer } from 'ngx-contentful-rich-text';
 import { Observable, Subscription } from 'rxjs';
 import { map, switchMap } from 'rxjs/operators';
@@ -51,8 +52,10 @@ export class EventComponent implements OnInit, OnDestroy {
     ).subscribe({
       next: (event: Event) => this.event = event,
       error: (error) => {
-        console.error(error);
-        this.router.navigate(['error', 404]);
+        if (error! instanceof GraphQLError) {
+          console.error(error);
+          this.router.navigate(['error', 404]);
+        }
       }
     }));
   }
diff --git a/research-hub-web/src/app/components/fundings/funding/funding.component.ts b/research-hub-web/src/app/components/fundings/funding/funding.component.ts
index 0bd6d6539..3a3b3ef5d 100644
--- a/research-hub-web/src/app/components/fundings/funding/funding.component.ts
+++ b/research-hub-web/src/app/components/fundings/funding/funding.component.ts
@@ -3,6 +3,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { Funding, GetFundingBySlugGQL } from '@graphql/schema';
 import { BodyMediaService } from '@services/body-media.service';
 import { PageTitleService } from '@services/page-title.service';
+import { GraphQLError } from 'graphql';
 import { MarkRenderer, NodeRenderer } from 'ngx-contentful-rich-text';
 import { Observable, Subscription } from 'rxjs';
 import { map, switchMap } from 'rxjs/operators';
@@ -51,8 +52,10 @@ export class FundingComponent implements OnInit, OnDestroy {
     ).subscribe({
       next: (funding: Funding) => this.funding = funding,
       error: (error) => {
-        console.error(error);
-        this.router.navigate(['error', 404]);
+        if (error! instanceof GraphQLError) {
+          console.error(error);
+          this.router.navigate(['error', 404]);
+        }
       }
     }));
   }
diff --git a/research-hub-web/src/app/components/services/service/service.component.ts b/research-hub-web/src/app/components/services/service/service.component.ts
index 9f4b2beca..0982f9917 100644
--- a/research-hub-web/src/app/components/services/service/service.component.ts
+++ b/research-hub-web/src/app/components/services/service/service.component.ts
@@ -3,6 +3,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { GetServiceBySlugGQL, Service } from '@graphql/schema';
 import { BodyMediaService } from '@services/body-media.service';
 import { PageTitleService } from '@services/page-title.service';
+import { GraphQLError } from 'graphql';
 import { MarkRenderer, NodeRenderer } from 'ngx-contentful-rich-text';
 import { Observable, Subscription } from 'rxjs';
 import { map, switchMap } from 'rxjs/operators';
@@ -51,8 +52,10 @@ export class ServiceComponent implements OnInit, OnDestroy {
     ).subscribe({
       next: (service: Service) => this.service = service,
       error: (error) => {
-        console.error(error);
-        this.router.navigate(['error', 404]);
+        if (error! instanceof GraphQLError) {
+          console.error(error);
+          this.router.navigate(['error', 404]);
+        }
       }
     }));
   }
diff --git a/research-hub-web/src/app/components/softwares/software/software.component.ts b/research-hub-web/src/app/components/softwares/software/software.component.ts
index 66fdfc972..88e4751ef 100644
--- a/research-hub-web/src/app/components/softwares/software/software.component.ts
+++ b/research-hub-web/src/app/components/softwares/software/software.component.ts
@@ -3,6 +3,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { GetSoftwareBySlugGQL, Software } from '@graphql/schema';
 import { BodyMediaService } from '@services/body-media.service';
 import { PageTitleService } from '@services/page-title.service';
+import { GraphQLError } from 'graphql';
 import { MarkRenderer, NodeRenderer } from 'ngx-contentful-rich-text';
 import { Observable, Subscription } from 'rxjs';
 import { map, switchMap } from 'rxjs/operators';
@@ -51,8 +52,10 @@ export class SoftwareComponent implements OnInit, OnDestroy {
     ).subscribe({
       next: (software: Software) => this.software = software,
       error: (error) => {
-        console.error(error);
-        this.router.navigate(['error', 404]);
+        if (error! instanceof GraphQLError) {
+          console.error(error);
+          this.router.navigate(['error', 404]);
+        }
       }
     }));
   }
diff --git a/research-hub-web/src/app/components/subhubs/subhub/subhub.component.ts b/research-hub-web/src/app/components/subhubs/subhub/subhub.component.ts
index 9248044ec..77499b717 100644
--- a/research-hub-web/src/app/components/subhubs/subhub/subhub.component.ts
+++ b/research-hub-web/src/app/components/subhubs/subhub/subhub.component.ts
@@ -3,6 +3,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { GetSubHubBySlugGQL, SubHub } from '@graphql/schema';
 import { BodyMediaService } from '@services/body-media.service';
 import { PageTitleService } from '@services/page-title.service';
+import { GraphQLError } from 'graphql';
 import { MarkRenderer, NodeRenderer } from 'ngx-contentful-rich-text';
 import { Observable, Subscription } from 'rxjs';
 import { map, switchMap } from 'rxjs/operators';
@@ -52,8 +53,10 @@ export class SubhubComponent implements OnInit, OnDestroy {
     ).subscribe({
       next: (subHub: SubHub) => this.subHub = subHub,
       error: (error) => {
-        console.error(error);
-        this.router.navigate(['error', 404]);
+        if (error! instanceof GraphQLError) {
+          console.error(error);
+          this.router.navigate(['error', 404]);
+        }
       }
     }));
   }

From 37b4264f882c17a62c6e03b22a60651e436d695f Mon Sep 17 00:00:00 2001
From: Luke <lukas.trombach@auckland.ac.nz>
Date: Fri, 19 Nov 2021 12:33:51 +1300
Subject: [PATCH 22/39] redirect to list page if no slug is present

---
 .../src/app/components/articles/article/article.component.ts   | 3 +++
 .../components/casestudys/case-study/case-study.component.ts   | 3 +++
 .../app/components/equipments/equipment/equipment.component.ts | 3 +++
 .../src/app/components/events/event/event.component.ts         | 3 +++
 .../src/app/components/fundings/funding/funding.component.ts   | 3 +++
 .../src/app/components/services/service/service.component.ts   | 3 +++
 .../app/components/softwares/software/software.component.ts    | 3 +++
 7 files changed, 21 insertions(+)

diff --git a/research-hub-web/src/app/components/articles/article/article.component.ts b/research-hub-web/src/app/components/articles/article/article.component.ts
index 54971f685..466995935 100644
--- a/research-hub-web/src/app/components/articles/article/article.component.ts
+++ b/research-hub-web/src/app/components/articles/article/article.component.ts
@@ -103,6 +103,9 @@ export class ArticleComponent implements OnInit, OnDestroy {
    * @param slug The article's slug. Retrieved from the route parameter of the same name.
    */
   public getArticleBySlug(slug: string): Observable<Article> {
+    if (!slug) {
+      this.router.navigate(['article', 'list'])
+    }
     return this.getArticleBySlugGQL.fetch({ slug }).pipe(
       map(x => {
         if (x.data.articleCollection.items.length === 0) {
diff --git a/research-hub-web/src/app/components/casestudys/case-study/case-study.component.ts b/research-hub-web/src/app/components/casestudys/case-study/case-study.component.ts
index 773c84f95..298fb33c8 100644
--- a/research-hub-web/src/app/components/casestudys/case-study/case-study.component.ts
+++ b/research-hub-web/src/app/components/casestudys/case-study/case-study.component.ts
@@ -100,6 +100,9 @@ export class CaseStudyComponent implements OnInit, OnDestroy {
    * @param slug The case study's slug. Retrieved from the route parameter of the same name.
    */
   public getCaseStudyBySlug(slug: string): Observable<CaseStudy> {
+    if (!slug) {
+      this.router.navigate(['casestudy', 'list'])
+    }
     return this.getCaseStudyBySlugGQL.fetch({ slug }).pipe(
       map(x => {
         if (x.data.caseStudyCollection.items.length === 0) {
diff --git a/research-hub-web/src/app/components/equipments/equipment/equipment.component.ts b/research-hub-web/src/app/components/equipments/equipment/equipment.component.ts
index 79a223d82..f74b998d4 100644
--- a/research-hub-web/src/app/components/equipments/equipment/equipment.component.ts
+++ b/research-hub-web/src/app/components/equipments/equipment/equipment.component.ts
@@ -103,6 +103,9 @@ export class EquipmentComponent implements OnInit, OnDestroy {
    * @param slug The article's slug. Retrieved from the route parameter of the same name.
    */
   public getEquipmentBySlug(slug: string): Observable<Equipment> {
+    if (!slug) {
+      this.router.navigate(['equipment', 'list'])
+    }
     return this.getEquipmentBySlugGQL.fetch({ slug }).pipe(
       map(x => {
         if (x.data.equipmentCollection.items.length === 0) {
diff --git a/research-hub-web/src/app/components/events/event/event.component.ts b/research-hub-web/src/app/components/events/event/event.component.ts
index 775e81f25..e1d7b62e8 100644
--- a/research-hub-web/src/app/components/events/event/event.component.ts
+++ b/research-hub-web/src/app/components/events/event/event.component.ts
@@ -101,6 +101,9 @@ export class EventComponent implements OnInit, OnDestroy {
    * @param slug The event's slug. Retrieved from the route parameter of the same name.
    */
   public getEventBySlug(slug: string): Observable<Event> {
+    if (!slug) {
+      this.router.navigate(['event', 'list'])
+    }
     return this.getEventBySlugGQL.fetch({ slug }).pipe(
       map(x => {
         if (x.data.eventCollection.items.length === 0) {
diff --git a/research-hub-web/src/app/components/fundings/funding/funding.component.ts b/research-hub-web/src/app/components/fundings/funding/funding.component.ts
index 3a3b3ef5d..823246f37 100644
--- a/research-hub-web/src/app/components/fundings/funding/funding.component.ts
+++ b/research-hub-web/src/app/components/fundings/funding/funding.component.ts
@@ -105,6 +105,9 @@ export class FundingComponent implements OnInit, OnDestroy {
    * @param slug The article's slug. Retrieved from the route parameter of the same name.
    */
   public getFundingBySlug(slug: string): Observable<Funding> {
+    if (!slug) {
+      this.router.navigate(['funding', 'list'])
+    }
     return this.getFundingBySlugGQL.fetch({ slug }).pipe(
       map(x => {
         if (x.data.fundingCollection.items.length === 0) {
diff --git a/research-hub-web/src/app/components/services/service/service.component.ts b/research-hub-web/src/app/components/services/service/service.component.ts
index 0982f9917..d6c44f3b3 100644
--- a/research-hub-web/src/app/components/services/service/service.component.ts
+++ b/research-hub-web/src/app/components/services/service/service.component.ts
@@ -101,6 +101,9 @@ export class ServiceComponent implements OnInit, OnDestroy {
    * @param slug The service's slug. Retrieved from the route parameter of the same name.
    */
   public getServiceBySlug(slug: string): Observable<Service> {
+    if (!slug) {
+      this.router.navigate(['service', 'list'])
+    }
     return this.getServiceBySlugGQL.fetch({ slug }).pipe(
       map(x => {
         if (x.data.serviceCollection.items.length === 0) {
diff --git a/research-hub-web/src/app/components/softwares/software/software.component.ts b/research-hub-web/src/app/components/softwares/software/software.component.ts
index 88e4751ef..bb23c0556 100644
--- a/research-hub-web/src/app/components/softwares/software/software.component.ts
+++ b/research-hub-web/src/app/components/softwares/software/software.component.ts
@@ -100,6 +100,9 @@ export class SoftwareComponent implements OnInit, OnDestroy {
    * @param slug The software's slug. Retrieved from the route parameter of the same name.
    */
   public getSoftwareBySlug(slug: string): Observable<Software> {
+    if (!slug) {
+      this.router.navigate(['software', 'list'])
+    }
     return this.getSoftwareBySlugGQL.fetch({ slug }).pipe(
       map(x => {
         if (x.data.softwareCollection.items.length === 0) {

From a9af9f293adbc0c0f32bd5d5679a43f6a4956e94 Mon Sep 17 00:00:00 2001
From: Rose McColl <rosemccoll@hotmail.com>
Date: Fri, 19 Nov 2021 13:37:55 +1300
Subject: [PATCH 23/39] unit tests WIP

---
 .../article-list.component.spec.ts            |  9 ++-
 .../article/article.component.spec.ts         | 58 ++++++++---------
 .../case-study-list.component.spec.ts         |  9 ++-
 .../case-study/case-study.component.spec.ts   | 46 ++++++-------
 .../equipment-list.component.spec.ts          |  9 ++-
 .../equipment/equipment.component.spec.ts     | 46 ++++++-------
 .../event-list/event-list.component.spec.ts   |  9 ++-
 .../events/event/event.component.spec.ts      | 46 ++++++-------
 .../funding-list.component.spec.ts            |  9 ++-
 .../funding/funding.component.spec.ts         | 46 ++++++-------
 .../service-list.component.spec.ts            |  9 ++-
 .../service/service.component.spec.ts         | 46 ++++++-------
 .../breadcrumbs/breadcrumbs.component.spec.ts |  2 +-
 .../software-list.component.spec.ts           |  9 ++-
 .../software/software.component.spec.ts       | 46 ++++++-------
 .../subhub-list/subhub-list.component.spec.ts |  9 ++-
 .../subhubs/subhub/subhub.component.spec.ts   | 64 +++++++++----------
 17 files changed, 256 insertions(+), 216 deletions(-)

diff --git a/research-hub-web/src/app/components/articles/article-list/article-list.component.spec.ts b/research-hub-web/src/app/components/articles/article-list/article-list.component.spec.ts
index 921ecab9d..49e2127fe 100644
--- a/research-hub-web/src/app/components/articles/article-list/article-list.component.spec.ts
+++ b/research-hub-web/src/app/components/articles/article-list/article-list.component.spec.ts
@@ -1,19 +1,24 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-
+import { ApolloTestingController, ApolloTestingModule } from 'apollo-angular/testing';
 import { ArticleListComponent } from './article-list.component';
 
 describe('ArticleListComponent', () => {
   let component: ArticleListComponent;
   let fixture: ComponentFixture<ArticleListComponent>;
+  let controller: ApolloTestingController;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ ArticleListComponent ]
+      declarations: [ ArticleListComponent ],
+      imports: [
+        ApolloTestingModule,
+      ]
     })
     .compileComponents();
   });
 
   beforeEach(() => {
+    controller = TestBed.inject(ApolloTestingController);
     fixture = TestBed.createComponent(ArticleListComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
diff --git a/research-hub-web/src/app/components/articles/article/article.component.spec.ts b/research-hub-web/src/app/components/articles/article/article.component.spec.ts
index 2a0ce76fa..054a841a8 100644
--- a/research-hub-web/src/app/components/articles/article/article.component.spec.ts
+++ b/research-hub-web/src/app/components/articles/article/article.component.spec.ts
@@ -1,6 +1,6 @@
 import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { PageTitleService } from '@services/page-title.service';
-import { ArticlesComponent } from './article.component';
+import { ArticleComponent } from './article.component';
 import { ApolloTestingController, ApolloTestingModule } from 'apollo-angular/testing';
 import { ActivatedRoute } from '@angular/router';
 import { Observable, of } from 'rxjs';
@@ -12,10 +12,10 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterTestingModule } from '@angular/router/testing';
 import { MockModule, MockProvider } from 'ng-mocks';
 
-describe('ArticlesComponent', () => {
-  let component: ArticlesComponent;
+describe('ArticleComponent', () => {
+  let component: ArticleComponent;
   let appComponentService: PageTitleService;
-  let fixture: ComponentFixture<ArticlesComponent>;
+  let fixture: ComponentFixture<ArticleComponent>;
   let controller: ApolloTestingController;
   const mockAllArticles$: Observable<ArticleCollection> = of({
     'items': [
@@ -265,7 +265,7 @@ describe('ArticlesComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ArticlesComponent],
+      declarations: [ArticleComponent],
       imports: [
         ApolloTestingModule,
         MockModule(CommonModule),
@@ -281,7 +281,7 @@ describe('ArticlesComponent', () => {
 
   beforeEach(() => {
     controller = TestBed.inject(ApolloTestingController);
-    fixture = TestBed.createComponent(ArticlesComponent);
+    fixture = TestBed.createComponent(ArticleComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
@@ -295,29 +295,29 @@ describe('ArticlesComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  it('Should get all articles', () => {
-    spyOn(component, 'getAllArticles').and.returnValue(mockAllArticles$);
-    component.getAllArticles().subscribe(res => {
-      expect(res).toBeTruthy();
-    });
-  })
+  // it('Should get all articles', () => {
+  //   spyOn(component, 'getAllArticles').and.returnValue(mockAllArticles$);
+  //   component.getAllArticles().subscribe(res => {
+  //     expect(res).toBeTruthy();
+  //   });
+  // })
 
-  describe('When a url slug is present', async () => {
-    beforeEach(() => {
-      controller = TestBed.inject(ApolloTestingController);
-      fixture = TestBed.createComponent(ArticlesComponent);
-      component = fixture.componentInstance;
-      TestBed.inject(ActivatedRoute).params = of({
-        slug: 'first-article'
-      });
-      fixture.detectChanges();
-    });
+  // describe('When a url slug is present', async () => {
+  //   beforeEach(() => {
+  //     controller = TestBed.inject(ApolloTestingController);
+  //     fixture = TestBed.createComponent(ArticleComponent);
+  //     component = fixture.componentInstance;
+  //     TestBed.inject(ActivatedRoute).params = of({
+  //       slug: 'first-article'
+  //     });
+  //     fixture.detectChanges();
+  //   });
 
-    it('Should get a single article data', () => {
-      spyOn(component, 'getArticleBySlug').and.returnValue(mockArticle$);
-      component.getArticleBySlug(component.slug).subscribe(res => {
-        expect(res.slug).toEqual('first-article');
-      });
-    });
-  });
+  //   it('Should get a single article data', () => {
+  //     spyOn(component, 'getArticleBySlug').and.returnValue(mockArticle$);
+  //     component.getArticleBySlug(component.slug).subscribe(res => {
+  //       expect(res.slug).toEqual('first-article');
+  //     });
+  //   });
+  // });
 });
diff --git a/research-hub-web/src/app/components/casestudys/case-study-list/case-study-list.component.spec.ts b/research-hub-web/src/app/components/casestudys/case-study-list/case-study-list.component.spec.ts
index accdd56e1..86ad216a0 100644
--- a/research-hub-web/src/app/components/casestudys/case-study-list/case-study-list.component.spec.ts
+++ b/research-hub-web/src/app/components/casestudys/case-study-list/case-study-list.component.spec.ts
@@ -1,19 +1,24 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-
+import { ApolloTestingController, ApolloTestingModule } from 'apollo-angular/testing';
 import { CaseStudyListComponent } from './case-study-list.component';
 
 describe('CaseStudyListComponent', () => {
   let component: CaseStudyListComponent;
   let fixture: ComponentFixture<CaseStudyListComponent>;
+  let controller: ApolloTestingController;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ CaseStudyListComponent ]
+      declarations: [ CaseStudyListComponent ],
+      imports: [
+        ApolloTestingModule,
+      ]
     })
     .compileComponents();
   });
 
   beforeEach(() => {
+    controller = TestBed.inject(ApolloTestingController);
     fixture = TestBed.createComponent(CaseStudyListComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
diff --git a/research-hub-web/src/app/components/casestudys/case-study/case-study.component.spec.ts b/research-hub-web/src/app/components/casestudys/case-study/case-study.component.spec.ts
index bc2258ed6..fda2ce25f 100644
--- a/research-hub-web/src/app/components/casestudys/case-study/case-study.component.spec.ts
+++ b/research-hub-web/src/app/components/casestudys/case-study/case-study.component.spec.ts
@@ -77,30 +77,30 @@ describe('CaseStudyComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  it('Should get all case studies', () => {
-    spyOn(component, 'getAllCaseStudy').and.returnValue(mockAllCaseStudy$);
-    component.getAllCaseStudy().subscribe(res => {
-      expect(res).toBeTruthy();
-    });
-  });
+  // it('Should get all case studies', () => {
+  //   spyOn(component, 'getAllCaseStudy').and.returnValue(mockAllCaseStudy$);
+  //   component.getAllCaseStudy().subscribe(res => {
+  //     expect(res).toBeTruthy();
+  //   });
+  // });
 
-  describe('When a url slug is present', async () => {
-    beforeEach(() => {
-      controller = TestBed.inject(ApolloTestingController);
-      fixture = TestBed.createComponent(CaseStudyComponent);
-      component = fixture.componentInstance;
-      TestBed.inject(ActivatedRoute).params = of({
-        slug: 'death-star'
-      });
-      fixture.detectChanges();
-    });
+  // describe('When a url slug is present', async () => {
+  //   beforeEach(() => {
+  //     controller = TestBed.inject(ApolloTestingController);
+  //     fixture = TestBed.createComponent(CaseStudyComponent);
+  //     component = fixture.componentInstance;
+  //     TestBed.inject(ActivatedRoute).params = of({
+  //       slug: 'death-star'
+  //     });
+  //     fixture.detectChanges();
+  //   });
 
-    it('Should get a single case study data', () => {
-      spyOn(component, 'getCaseStudyBySlug').and.returnValue(mockCaseStudy$);
-      component.getCaseStudyBySlug(component.slug).subscribe(res => {
-        expect(res.slug).toEqual('death-star');
-      });
-    });
-  });
+  //   it('Should get a single case study data', () => {
+  //     spyOn(component, 'getCaseStudyBySlug').and.returnValue(mockCaseStudy$);
+  //     component.getCaseStudyBySlug(component.slug).subscribe(res => {
+  //       expect(res.slug).toEqual('death-star');
+  //     });
+  //   });
+  // });
 
 });
diff --git a/research-hub-web/src/app/components/equipments/equipment-list/equipment-list.component.spec.ts b/research-hub-web/src/app/components/equipments/equipment-list/equipment-list.component.spec.ts
index 9381cce60..b2af4385c 100644
--- a/research-hub-web/src/app/components/equipments/equipment-list/equipment-list.component.spec.ts
+++ b/research-hub-web/src/app/components/equipments/equipment-list/equipment-list.component.spec.ts
@@ -1,19 +1,24 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-
+import { ApolloTestingController, ApolloTestingModule } from 'apollo-angular/testing';
 import { EquipmentListComponent } from './equipment-list.component';
 
 describe('EquipmentListComponent', () => {
   let component: EquipmentListComponent;
   let fixture: ComponentFixture<EquipmentListComponent>;
+  let controller: ApolloTestingController;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ EquipmentListComponent ]
+      declarations: [ EquipmentListComponent ],
+      imports: [
+        ApolloTestingModule,
+      ]
     })
     .compileComponents();
   });
 
   beforeEach(() => {
+    controller = TestBed.inject(ApolloTestingController);
     fixture = TestBed.createComponent(EquipmentListComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
diff --git a/research-hub-web/src/app/components/equipments/equipment/equipment.component.spec.ts b/research-hub-web/src/app/components/equipments/equipment/equipment.component.spec.ts
index 56def8ec5..dae5186ed 100644
--- a/research-hub-web/src/app/components/equipments/equipment/equipment.component.spec.ts
+++ b/research-hub-web/src/app/components/equipments/equipment/equipment.component.spec.ts
@@ -79,29 +79,29 @@ describe('EquipmentComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  it('Should get all equipment', () => {
-    spyOn(component, 'getAllEquipment').and.returnValue(mockAllEquipment$);
-    component.getAllEquipment().subscribe(res => {
-      expect(res).toBeTruthy();
-    });
-  })
+  // it('Should get all equipment', () => {
+  //   spyOn(component, 'getAllEquipment').and.returnValue(mockAllEquipment$);
+  //   component.getAllEquipment().subscribe(res => {
+  //     expect(res).toBeTruthy();
+  //   });
+  // })
 
-  describe('When a url slug is present', async () => {
-    beforeEach(() => {
-      controller = TestBed.inject(ApolloTestingController);
-      fixture = TestBed.createComponent(EquipmentComponent);
-      component = fixture.componentInstance;
-      TestBed.inject(ActivatedRoute).params = of({
-        slug: 'death-star'
-      });
-      fixture.detectChanges();
-    })
+  // describe('When a url slug is present', async () => {
+  //   beforeEach(() => {
+  //     controller = TestBed.inject(ApolloTestingController);
+  //     fixture = TestBed.createComponent(EquipmentComponent);
+  //     component = fixture.componentInstance;
+  //     TestBed.inject(ActivatedRoute).params = of({
+  //       slug: 'death-star'
+  //     });
+  //     fixture.detectChanges();
+  //   })
 
-    it('Should get a single equipment data by Slug', () => {
-      spyOn(component, 'getEquipmentBySlug').and.returnValue(mockEquipment$);
-      component.getEquipmentBySlug(component.slug).subscribe(res => {
-        expect(res.slug).toEqual('death-star');
-      });
-    })
-  });
+  //   it('Should get a single equipment data by Slug', () => {
+  //     spyOn(component, 'getEquipmentBySlug').and.returnValue(mockEquipment$);
+  //     component.getEquipmentBySlug(component.slug).subscribe(res => {
+  //       expect(res.slug).toEqual('death-star');
+  //     });
+  //   })
+  // });
 });
diff --git a/research-hub-web/src/app/components/events/event-list/event-list.component.spec.ts b/research-hub-web/src/app/components/events/event-list/event-list.component.spec.ts
index d0e8eb551..e8e143ea8 100644
--- a/research-hub-web/src/app/components/events/event-list/event-list.component.spec.ts
+++ b/research-hub-web/src/app/components/events/event-list/event-list.component.spec.ts
@@ -1,19 +1,24 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-
+import { ApolloTestingController, ApolloTestingModule } from 'apollo-angular/testing';
 import { EventListComponent } from './event-list.component';
 
 describe('EventListComponent', () => {
   let component: EventListComponent;
   let fixture: ComponentFixture<EventListComponent>;
+  let controller: ApolloTestingController;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ EventListComponent ]
+      declarations: [ EventListComponent ],
+      imports: [
+        ApolloTestingModule,
+      ]
     })
     .compileComponents();
   });
 
   beforeEach(() => {
+    controller = TestBed.inject(ApolloTestingController);
     fixture = TestBed.createComponent(EventListComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
diff --git a/research-hub-web/src/app/components/events/event/event.component.spec.ts b/research-hub-web/src/app/components/events/event/event.component.spec.ts
index 2e467a1d3..c51b2b9f9 100644
--- a/research-hub-web/src/app/components/events/event/event.component.spec.ts
+++ b/research-hub-web/src/app/components/events/event/event.component.spec.ts
@@ -78,29 +78,29 @@ describe('EventsComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  it('should get all events', () => {
-    spyOn(component, 'getAllEvents').and.returnValue(mockAllEvent$);
-    component.getAllEvents().subscribe(res => {
-      expect(res).toBeTruthy();
-    });
-  })
+  // it('should get all events', () => {
+  //   spyOn(component, 'getAllEvents').and.returnValue(mockAllEvent$);
+  //   component.getAllEvents().subscribe(res => {
+  //     expect(res).toBeTruthy();
+  //   });
+  // })
 
-  describe('When a url slug is present', async () => {
-    beforeEach(() => {
-      controller = TestBed.inject(ApolloTestingController);
-      fixture = TestBed.createComponent(EventComponent);
-      component = fixture.componentInstance;
-      TestBed.inject(ActivatedRoute).params = of({
-        slug: 'death-star'
-      });
-      fixture.detectChanges();
-    })
+  // describe('When a url slug is present', async () => {
+  //   beforeEach(() => {
+  //     controller = TestBed.inject(ApolloTestingController);
+  //     fixture = TestBed.createComponent(EventComponent);
+  //     component = fixture.componentInstance;
+  //     TestBed.inject(ActivatedRoute).params = of({
+  //       slug: 'death-star'
+  //     });
+  //     fixture.detectChanges();
+  //   })
 
-    it('Should get a single Event data by Slug', () => {
-      spyOn(component, 'getEventBySlug').and.returnValue(mockEvent$);
-      component.getEventBySlug(component.slug).subscribe(res => {
-        expect(res.slug).toEqual('death-star');
-      });
-    })
-  });
+  //   it('Should get a single Event data by Slug', () => {
+  //     spyOn(component, 'getEventBySlug').and.returnValue(mockEvent$);
+  //     component.getEventBySlug(component.slug).subscribe(res => {
+  //       expect(res.slug).toEqual('death-star');
+  //     });
+  //   })
+  // });
 });
diff --git a/research-hub-web/src/app/components/fundings/funding-list/funding-list.component.spec.ts b/research-hub-web/src/app/components/fundings/funding-list/funding-list.component.spec.ts
index 51be079eb..fa8113d75 100644
--- a/research-hub-web/src/app/components/fundings/funding-list/funding-list.component.spec.ts
+++ b/research-hub-web/src/app/components/fundings/funding-list/funding-list.component.spec.ts
@@ -1,19 +1,24 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-
+import { ApolloTestingController, ApolloTestingModule } from 'apollo-angular/testing';
 import { FundingListComponent } from './funding-list.component';
 
 describe('FundingListComponent', () => {
   let component: FundingListComponent;
   let fixture: ComponentFixture<FundingListComponent>;
+  let controller: ApolloTestingController;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ FundingListComponent ]
+      declarations: [ FundingListComponent ],
+      imports: [
+        ApolloTestingModule,
+      ]
     })
     .compileComponents();
   });
 
   beforeEach(() => {
+    controller = TestBed.inject(ApolloTestingController);
     fixture = TestBed.createComponent(FundingListComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
diff --git a/research-hub-web/src/app/components/fundings/funding/funding.component.spec.ts b/research-hub-web/src/app/components/fundings/funding/funding.component.spec.ts
index f3d030dfb..8af8d253d 100644
--- a/research-hub-web/src/app/components/fundings/funding/funding.component.spec.ts
+++ b/research-hub-web/src/app/components/fundings/funding/funding.component.spec.ts
@@ -78,29 +78,29 @@ describe('FundingsComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  it('should get all fundings', () => {
-    spyOn(component, 'getAllFundings').and.returnValue(mockAllFunding$);
-    component.getAllFundings().subscribe(res => {
-      expect(res).toBeTruthy();
-    });
-  })
+  // it('should get all fundings', () => {
+  //   spyOn(component, 'getAllFundings').and.returnValue(mockAllFunding$);
+  //   component.getAllFundings().subscribe(res => {
+  //     expect(res).toBeTruthy();
+  //   });
+  // })
 
-  describe('When a url slug is present', async () => {
-    beforeEach(() => {
-      controller = TestBed.inject(ApolloTestingController);
-      fixture = TestBed.createComponent(FundingComponent);
-      component = fixture.componentInstance;
-      TestBed.inject(ActivatedRoute).params = of({
-        slug: 'death-star'
-      });
-      fixture.detectChanges();
-    })
+  // describe('When a url slug is present', async () => {
+  //   beforeEach(() => {
+  //     controller = TestBed.inject(ApolloTestingController);
+  //     fixture = TestBed.createComponent(FundingComponent);
+  //     component = fixture.componentInstance;
+  //     TestBed.inject(ActivatedRoute).params = of({
+  //       slug: 'death-star'
+  //     });
+  //     fixture.detectChanges();
+  //   })
 
-    it('Should get a single Funding data by Slug', () => {
-      spyOn(component, 'getFundingBySlug').and.returnValue(mockFunding$);
-      component.getFundingBySlug(component.slug).subscribe(res => {
-        expect(res.slug).toEqual('death-star');
-      });
-    })
-  });
+  //   it('Should get a single Funding data by Slug', () => {
+  //     spyOn(component, 'getFundingBySlug').and.returnValue(mockFunding$);
+  //     component.getFundingBySlug(component.slug).subscribe(res => {
+  //       expect(res.slug).toEqual('death-star');
+  //     });
+  //   })
+  // });
 });
diff --git a/research-hub-web/src/app/components/services/service-list/service-list.component.spec.ts b/research-hub-web/src/app/components/services/service-list/service-list.component.spec.ts
index 97c794920..225e0b41e 100644
--- a/research-hub-web/src/app/components/services/service-list/service-list.component.spec.ts
+++ b/research-hub-web/src/app/components/services/service-list/service-list.component.spec.ts
@@ -1,19 +1,24 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-
+import { ApolloTestingController, ApolloTestingModule } from 'apollo-angular/testing';
 import { ServiceListComponent } from './service-list.component';
 
 describe('ServiceListComponent', () => {
   let component: ServiceListComponent;
   let fixture: ComponentFixture<ServiceListComponent>;
+  let controller: ApolloTestingController;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ ServiceListComponent ]
+      declarations: [ ServiceListComponent ],
+      imports: [
+        ApolloTestingModule,
+      ]
     })
     .compileComponents();
   });
 
   beforeEach(() => {
+    controller = TestBed.inject(ApolloTestingController);
     fixture = TestBed.createComponent(ServiceListComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
diff --git a/research-hub-web/src/app/components/services/service/service.component.spec.ts b/research-hub-web/src/app/components/services/service/service.component.spec.ts
index 20c5f75e9..56379a18a 100644
--- a/research-hub-web/src/app/components/services/service/service.component.spec.ts
+++ b/research-hub-web/src/app/components/services/service/service.component.spec.ts
@@ -78,29 +78,29 @@ describe('ServicesComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  it('Should get all Service', () => {
-    spyOn(component, 'getAllServices').and.returnValue(mockAllServices$);
-    component.getAllServices().subscribe(res => {
-      expect(res).toBeTruthy();
-    });
-  })
+  // it('Should get all Service', () => {
+  //   spyOn(component, 'getAllServices').and.returnValue(mockAllServices$);
+  //   component.getAllServices().subscribe(res => {
+  //     expect(res).toBeTruthy();
+  //   });
+  // })
 
-  describe('When a url slug is present', async () => {
-    beforeEach(() => {
-      controller = TestBed.inject(ApolloTestingController);
-      fixture = TestBed.createComponent(ServiceComponent);
-      component = fixture.componentInstance;
-      TestBed.inject(ActivatedRoute).params = of({
-        slug: 'death-star'
-      });
-      fixture.detectChanges();
-    })
+  // describe('When a url slug is present', async () => {
+  //   beforeEach(() => {
+  //     controller = TestBed.inject(ApolloTestingController);
+  //     fixture = TestBed.createComponent(ServiceComponent);
+  //     component = fixture.componentInstance;
+  //     TestBed.inject(ActivatedRoute).params = of({
+  //       slug: 'death-star'
+  //     });
+  //     fixture.detectChanges();
+  //   })
 
-    it('Should get a single service data by Slug', () => {
-      spyOn(component, 'getServiceBySlug').and.returnValue(mockService$);
-      component.getServiceBySlug(component.slug).subscribe(res => {
-        expect(res.slug).toEqual('death-star');
-      });
-    })
-  });
+  //   it('Should get a single service data by Slug', () => {
+  //     spyOn(component, 'getServiceBySlug').and.returnValue(mockService$);
+  //     component.getServiceBySlug(component.slug).subscribe(res => {
+  //       expect(res.slug).toEqual('death-star');
+  //     });
+  //   })
+  // });
 });
diff --git a/research-hub-web/src/app/components/shared/breadcrumbs/breadcrumbs.component.spec.ts b/research-hub-web/src/app/components/shared/breadcrumbs/breadcrumbs.component.spec.ts
index ae107435e..f196659e7 100644
--- a/research-hub-web/src/app/components/shared/breadcrumbs/breadcrumbs.component.spec.ts
+++ b/research-hub-web/src/app/components/shared/breadcrumbs/breadcrumbs.component.spec.ts
@@ -31,7 +31,7 @@ describe('BreadcrumbsComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(BreadcrumbsComponent);
     component = fixture.componentInstance;
-    component.contentItem = breadCrumbs;
+    // component.contentItem = breadCrumbs;
     fixture.detectChanges();
   });
 
diff --git a/research-hub-web/src/app/components/softwares/software-list/software-list.component.spec.ts b/research-hub-web/src/app/components/softwares/software-list/software-list.component.spec.ts
index 861394c64..9007e0218 100644
--- a/research-hub-web/src/app/components/softwares/software-list/software-list.component.spec.ts
+++ b/research-hub-web/src/app/components/softwares/software-list/software-list.component.spec.ts
@@ -1,19 +1,24 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-
+import { ApolloTestingController, ApolloTestingModule } from 'apollo-angular/testing';
 import { SoftwareListComponent } from './software-list.component';
 
 describe('SoftwareListComponent', () => {
   let component: SoftwareListComponent;
   let fixture: ComponentFixture<SoftwareListComponent>;
+  let controller: ApolloTestingController;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ SoftwareListComponent ]
+      declarations: [ SoftwareListComponent ],
+      imports: [
+        ApolloTestingModule,
+      ]
     })
     .compileComponents();
   });
 
   beforeEach(() => {
+    controller = TestBed.inject(ApolloTestingController);
     fixture = TestBed.createComponent(SoftwareListComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
diff --git a/research-hub-web/src/app/components/softwares/software/software.component.spec.ts b/research-hub-web/src/app/components/softwares/software/software.component.spec.ts
index ad75ff264..fbae1ffa2 100644
--- a/research-hub-web/src/app/components/softwares/software/software.component.spec.ts
+++ b/research-hub-web/src/app/components/softwares/software/software.component.spec.ts
@@ -78,29 +78,29 @@ describe('SoftwaresComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  it('Should get all Software', () => {
-    spyOn(component, 'getAllSoftware').and.returnValue(mockAllSoftware$);
-    component.getAllSoftware().subscribe(res => {
-      expect(res).toBeTruthy();
-    });
-  })
+  // it('Should get all Software', () => {
+  //   spyOn(component, 'getAllSoftware').and.returnValue(mockAllSoftware$);
+  //   component.getAllSoftware().subscribe(res => {
+  //     expect(res).toBeTruthy();
+  //   });
+  // })
 
-  describe('When a url slug is present', async () => {
-    beforeEach(() => {
-      controller = TestBed.inject(ApolloTestingController);
-      fixture = TestBed.createComponent(SoftwareComponent);
-      component = fixture.componentInstance;
-      TestBed.inject(ActivatedRoute).params = of({
-        slug: 'death-star'
-      });
-      fixture.detectChanges();
-    })
+  // describe('When a url slug is present', async () => {
+  //   beforeEach(() => {
+  //     controller = TestBed.inject(ApolloTestingController);
+  //     fixture = TestBed.createComponent(SoftwareComponent);
+  //     component = fixture.componentInstance;
+  //     TestBed.inject(ActivatedRoute).params = of({
+  //       slug: 'death-star'
+  //     });
+  //     fixture.detectChanges();
+  //   })
 
-    it('Should get a single software data by Slug', () => {
-      spyOn(component, 'getSoftwareBySlug').and.returnValue(mockSoftware$);
-      component.getSoftwareBySlug(component.slug).subscribe(res => {
-        expect(res.slug).toEqual('death-star');
-      });
-    })
-  });
+  //   it('Should get a single software data by Slug', () => {
+  //     spyOn(component, 'getSoftwareBySlug').and.returnValue(mockSoftware$);
+  //     component.getSoftwareBySlug(component.slug).subscribe(res => {
+  //       expect(res.slug).toEqual('death-star');
+  //     });
+  //   })
+  // });
 });
diff --git a/research-hub-web/src/app/components/subhubs/subhub-list/subhub-list.component.spec.ts b/research-hub-web/src/app/components/subhubs/subhub-list/subhub-list.component.spec.ts
index d8539a0ad..fd4a09b50 100644
--- a/research-hub-web/src/app/components/subhubs/subhub-list/subhub-list.component.spec.ts
+++ b/research-hub-web/src/app/components/subhubs/subhub-list/subhub-list.component.spec.ts
@@ -1,19 +1,24 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-
+import { ApolloTestingController, ApolloTestingModule } from 'apollo-angular/testing';
 import { SubhubListComponent } from './subhub-list.component';
 
 describe('SubhubListComponent', () => {
   let component: SubhubListComponent;
   let fixture: ComponentFixture<SubhubListComponent>;
+  let controller: ApolloTestingController;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ SubhubListComponent ]
+      declarations: [ SubhubListComponent ],
+      imports: [
+        ApolloTestingModule,
+      ]
     })
     .compileComponents();
   });
 
   beforeEach(() => {
+    controller = TestBed.inject(ApolloTestingController);
     fixture = TestBed.createComponent(SubhubListComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
diff --git a/research-hub-web/src/app/components/subhubs/subhub/subhub.component.spec.ts b/research-hub-web/src/app/components/subhubs/subhub/subhub.component.spec.ts
index 6d46aeab2..24b7a225f 100644
--- a/research-hub-web/src/app/components/subhubs/subhub/subhub.component.spec.ts
+++ b/research-hub-web/src/app/components/subhubs/subhub/subhub.component.spec.ts
@@ -531,36 +531,36 @@ describe('SubhubsComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  it('Should get all SubHubs', () => {
-    spyOn(component, 'getAllSubHubs').and.returnValue(allMockSubHubs$);
-    component.getAllSubHubs().subscribe(res => {
-      expect(res).toBeTruthy();
-    });
-  })
-
-  describe('When a url slug is present', async () => {
-    beforeEach(() => {
-      controller = TestBed.inject(ApolloTestingController);
-      fixture = TestBed.createComponent(SubhubComponent);
-      component = fixture.componentInstance;
-      TestBed.inject(ActivatedRoute).params = of({
-        slug: 'first-subhub'
-      });
-      fixture.detectChanges();
-    })
-
-    it('Should get all SubHubs', async () => {
-      spyOn(component, 'getAllSubHubs').and.returnValue(allMockSubHubs$);
-      component.getAllSubHubs().subscribe(res => {
-        expect(res).toBeTruthy();
-      });
-    })
-
-    it('Should get a single SubHub', async () => {
-      spyOn(component, 'getSubHubBySlug').and.returnValue(singleSubHub$);
-      component.getSubHubBySlug(component.slug).subscribe(res => {
-        expect(res).toBeTruthy();
-      });
-    })
-  });
+  // it('Should get all SubHubs', () => {
+  //   spyOn(component, 'getAllSubHubs').and.returnValue(allMockSubHubs$);
+  //   component.getAllSubHubs().subscribe(res => {
+  //     expect(res).toBeTruthy();
+  //   });
+  // })
+
+  // describe('When a url slug is present', async () => {
+  //   beforeEach(() => {
+  //     controller = TestBed.inject(ApolloTestingController);
+  //     fixture = TestBed.createComponent(SubhubComponent);
+  //     component = fixture.componentInstance;
+  //     TestBed.inject(ActivatedRoute).params = of({
+  //       slug: 'first-subhub'
+  //     });
+  //     fixture.detectChanges();
+  //   })
+
+  //   it('Should get all SubHubs', async () => {
+  //     spyOn(component, 'getAllSubHubs').and.returnValue(allMockSubHubs$);
+  //     component.getAllSubHubs().subscribe(res => {
+  //       expect(res).toBeTruthy();
+  //     });
+  //   })
+
+  //   it('Should get a single SubHub', async () => {
+  //     spyOn(component, 'getSubHubBySlug').and.returnValue(singleSubHub$);
+  //     component.getSubHubBySlug(component.slug).subscribe(res => {
+  //       expect(res).toBeTruthy();
+  //     });
+  //   })
+  // });
 });

From 5d457291730cf362871167cd12d93b00d37f44c1 Mon Sep 17 00:00:00 2001
From: Rose McColl <rosemccoll@hotmail.com>
Date: Fri, 19 Nov 2021 14:23:13 +1300
Subject: [PATCH 24/39] unit tests wip

---
 .../article-list.component.spec.ts            |  5 +++++
 .../case-study-list.component.spec.ts         |  5 +++++
 .../equipment-list.component.spec.ts          |  5 +++++
 .../event-list/event-list.component.spec.ts   |  5 +++++
 .../funding-list.component.spec.ts            |  5 +++++
 .../service-list.component.spec.ts            |  5 +++++
 .../software-list.component.spec.ts           |  5 +++++
 .../subhub-list/subhub-list.component.spec.ts | 19 +++++++++++++++++++
 8 files changed, 54 insertions(+)

diff --git a/research-hub-web/src/app/components/articles/article-list/article-list.component.spec.ts b/research-hub-web/src/app/components/articles/article-list/article-list.component.spec.ts
index 49e2127fe..415487fab 100644
--- a/research-hub-web/src/app/components/articles/article-list/article-list.component.spec.ts
+++ b/research-hub-web/src/app/components/articles/article-list/article-list.component.spec.ts
@@ -1,6 +1,9 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ApolloTestingController, ApolloTestingModule } from 'apollo-angular/testing';
 import { ArticleListComponent } from './article-list.component';
+import { SharedModule } from '@components/shared/app.shared.module';
+import { MockModule } from 'ng-mocks';
+import { RouterTestingModule } from '@angular/router/testing';
 
 describe('ArticleListComponent', () => {
   let component: ArticleListComponent;
@@ -12,6 +15,8 @@ describe('ArticleListComponent', () => {
       declarations: [ ArticleListComponent ],
       imports: [
         ApolloTestingModule,
+        MockModule(SharedModule),
+        RouterTestingModule.withRoutes([])
       ]
     })
     .compileComponents();
diff --git a/research-hub-web/src/app/components/casestudys/case-study-list/case-study-list.component.spec.ts b/research-hub-web/src/app/components/casestudys/case-study-list/case-study-list.component.spec.ts
index 86ad216a0..cecea0213 100644
--- a/research-hub-web/src/app/components/casestudys/case-study-list/case-study-list.component.spec.ts
+++ b/research-hub-web/src/app/components/casestudys/case-study-list/case-study-list.component.spec.ts
@@ -1,6 +1,9 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ApolloTestingController, ApolloTestingModule } from 'apollo-angular/testing';
 import { CaseStudyListComponent } from './case-study-list.component';
+import { SharedModule } from '@components/shared/app.shared.module';
+import { MockModule } from 'ng-mocks';
+import { RouterTestingModule } from '@angular/router/testing';
 
 describe('CaseStudyListComponent', () => {
   let component: CaseStudyListComponent;
@@ -12,6 +15,8 @@ describe('CaseStudyListComponent', () => {
       declarations: [ CaseStudyListComponent ],
       imports: [
         ApolloTestingModule,
+        MockModule(SharedModule),
+        RouterTestingModule.withRoutes([])
       ]
     })
     .compileComponents();
diff --git a/research-hub-web/src/app/components/equipments/equipment-list/equipment-list.component.spec.ts b/research-hub-web/src/app/components/equipments/equipment-list/equipment-list.component.spec.ts
index b2af4385c..fc0cfd6a9 100644
--- a/research-hub-web/src/app/components/equipments/equipment-list/equipment-list.component.spec.ts
+++ b/research-hub-web/src/app/components/equipments/equipment-list/equipment-list.component.spec.ts
@@ -1,6 +1,9 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ApolloTestingController, ApolloTestingModule } from 'apollo-angular/testing';
 import { EquipmentListComponent } from './equipment-list.component';
+import { SharedModule } from '@components/shared/app.shared.module';
+import { MockModule } from 'ng-mocks';
+import { RouterTestingModule } from '@angular/router/testing';
 
 describe('EquipmentListComponent', () => {
   let component: EquipmentListComponent;
@@ -12,6 +15,8 @@ describe('EquipmentListComponent', () => {
       declarations: [ EquipmentListComponent ],
       imports: [
         ApolloTestingModule,
+        MockModule(SharedModule),
+        RouterTestingModule.withRoutes([])
       ]
     })
     .compileComponents();
diff --git a/research-hub-web/src/app/components/events/event-list/event-list.component.spec.ts b/research-hub-web/src/app/components/events/event-list/event-list.component.spec.ts
index e8e143ea8..d2aee078c 100644
--- a/research-hub-web/src/app/components/events/event-list/event-list.component.spec.ts
+++ b/research-hub-web/src/app/components/events/event-list/event-list.component.spec.ts
@@ -1,6 +1,9 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ApolloTestingController, ApolloTestingModule } from 'apollo-angular/testing';
 import { EventListComponent } from './event-list.component';
+import { SharedModule } from '@components/shared/app.shared.module';
+import { MockModule } from 'ng-mocks';
+import { RouterTestingModule } from '@angular/router/testing';
 
 describe('EventListComponent', () => {
   let component: EventListComponent;
@@ -12,6 +15,8 @@ describe('EventListComponent', () => {
       declarations: [ EventListComponent ],
       imports: [
         ApolloTestingModule,
+        MockModule(SharedModule),
+        RouterTestingModule.withRoutes([])
       ]
     })
     .compileComponents();
diff --git a/research-hub-web/src/app/components/fundings/funding-list/funding-list.component.spec.ts b/research-hub-web/src/app/components/fundings/funding-list/funding-list.component.spec.ts
index fa8113d75..0011e9907 100644
--- a/research-hub-web/src/app/components/fundings/funding-list/funding-list.component.spec.ts
+++ b/research-hub-web/src/app/components/fundings/funding-list/funding-list.component.spec.ts
@@ -1,6 +1,9 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ApolloTestingController, ApolloTestingModule } from 'apollo-angular/testing';
 import { FundingListComponent } from './funding-list.component';
+import { SharedModule } from '@components/shared/app.shared.module';
+import { MockModule } from 'ng-mocks';
+import { RouterTestingModule } from '@angular/router/testing';
 
 describe('FundingListComponent', () => {
   let component: FundingListComponent;
@@ -12,6 +15,8 @@ describe('FundingListComponent', () => {
       declarations: [ FundingListComponent ],
       imports: [
         ApolloTestingModule,
+        MockModule(SharedModule),
+        RouterTestingModule.withRoutes([])
       ]
     })
     .compileComponents();
diff --git a/research-hub-web/src/app/components/services/service-list/service-list.component.spec.ts b/research-hub-web/src/app/components/services/service-list/service-list.component.spec.ts
index 225e0b41e..04000966b 100644
--- a/research-hub-web/src/app/components/services/service-list/service-list.component.spec.ts
+++ b/research-hub-web/src/app/components/services/service-list/service-list.component.spec.ts
@@ -1,6 +1,9 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ApolloTestingController, ApolloTestingModule } from 'apollo-angular/testing';
 import { ServiceListComponent } from './service-list.component';
+import { SharedModule } from '@components/shared/app.shared.module';
+import { MockModule } from 'ng-mocks';
+import { RouterTestingModule } from '@angular/router/testing';
 
 describe('ServiceListComponent', () => {
   let component: ServiceListComponent;
@@ -12,6 +15,8 @@ describe('ServiceListComponent', () => {
       declarations: [ ServiceListComponent ],
       imports: [
         ApolloTestingModule,
+        MockModule(SharedModule),
+        RouterTestingModule.withRoutes([])
       ]
     })
     .compileComponents();
diff --git a/research-hub-web/src/app/components/softwares/software-list/software-list.component.spec.ts b/research-hub-web/src/app/components/softwares/software-list/software-list.component.spec.ts
index 9007e0218..0722e30a1 100644
--- a/research-hub-web/src/app/components/softwares/software-list/software-list.component.spec.ts
+++ b/research-hub-web/src/app/components/softwares/software-list/software-list.component.spec.ts
@@ -1,6 +1,9 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ApolloTestingController, ApolloTestingModule } from 'apollo-angular/testing';
 import { SoftwareListComponent } from './software-list.component';
+import { SharedModule } from '@components/shared/app.shared.module';
+import { MockModule } from 'ng-mocks';
+import { RouterTestingModule } from '@angular/router/testing';
 
 describe('SoftwareListComponent', () => {
   let component: SoftwareListComponent;
@@ -12,6 +15,8 @@ describe('SoftwareListComponent', () => {
       declarations: [ SoftwareListComponent ],
       imports: [
         ApolloTestingModule,
+        MockModule(SharedModule),
+        RouterTestingModule.withRoutes([])
       ]
     })
     .compileComponents();
diff --git a/research-hub-web/src/app/components/subhubs/subhub-list/subhub-list.component.spec.ts b/research-hub-web/src/app/components/subhubs/subhub-list/subhub-list.component.spec.ts
index fd4a09b50..10bff6c79 100644
--- a/research-hub-web/src/app/components/subhubs/subhub-list/subhub-list.component.spec.ts
+++ b/research-hub-web/src/app/components/subhubs/subhub-list/subhub-list.component.spec.ts
@@ -1,6 +1,9 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ApolloTestingController, ApolloTestingModule } from 'apollo-angular/testing';
 import { SubhubListComponent } from './subhub-list.component';
+import { SharedModule } from '@components/shared/app.shared.module';
+import { MockModule } from 'ng-mocks';
+import { RouterTestingModule } from '@angular/router/testing';
 
 describe('SubhubListComponent', () => {
   let component: SubhubListComponent;
@@ -12,6 +15,8 @@ describe('SubhubListComponent', () => {
       declarations: [ SubhubListComponent ],
       imports: [
         ApolloTestingModule,
+        MockModule(SharedModule),
+        RouterTestingModule.withRoutes([])
       ]
     })
     .compileComponents();
@@ -27,4 +32,18 @@ describe('SubhubListComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  // it('Should get all SubHubs', () => {
+    // spyOn(component, 'allSubhubGQL').and.returnValue(allMockSubHubs$);
+    // component.getAllSubHubs().subscribe(res => {
+    //   expect(res).toBeTruthy();
+    // });
+  // })
+
+    //   it('Should get all SubHubs', async () => {
+  //     spyOn(component, 'getAllSubHubs').and.returnValue(allMockSubHubs$);
+  //     component.getAllSubHubs().subscribe(res => {
+  //       expect(res).toBeTruthy();
+  //     });
+  //   })
 });

From 5149a85babb5f43e76e9f3d2f86144b8b4e5d5ff Mon Sep 17 00:00:00 2001
From: rosemcc <rosemccoll@hotmail.com>
Date: Mon, 22 Nov 2021 10:28:08 +1300
Subject: [PATCH 25/39] error handling

---
 .../app/components/articles/article/article.component.ts  | 8 ++++----
 .../casestudys/case-study/case-study.component.ts         | 8 ++++----
 .../equipments/equipment/equipment.component.ts           | 8 ++++----
 .../src/app/components/events/event/event.component.ts    | 8 ++++----
 .../app/components/fundings/funding/funding.component.ts  | 8 ++++----
 .../app/components/services/service/service.component.ts  | 8 ++++----
 .../components/softwares/software/software.component.ts   | 8 ++++----
 .../src/app/components/subhubs/subhub/subhub.component.ts | 8 ++++----
 8 files changed, 32 insertions(+), 32 deletions(-)

diff --git a/research-hub-web/src/app/components/articles/article/article.component.ts b/research-hub-web/src/app/components/articles/article/article.component.ts
index 466995935..43c6c3969 100644
--- a/research-hub-web/src/app/components/articles/article/article.component.ts
+++ b/research-hub-web/src/app/components/articles/article/article.component.ts
@@ -52,9 +52,9 @@ export class ArticleComponent implements OnInit, OnDestroy {
       switchMap((slug) => this.loadArticle(slug))
     ).subscribe({
       next: (article: Article) => this.article = article,
-      error: (error) => {
-        if (error! instanceof GraphQLError) {
-          console.error(error);
+      error: (error: Error) => {
+        console.error(error)
+        if (error.message.includes('Not found')) {
           this.router.navigate(['error', 404]);
         }
       }
@@ -109,7 +109,7 @@ export class ArticleComponent implements OnInit, OnDestroy {
     return this.getArticleBySlugGQL.fetch({ slug }).pipe(
       map(x => {
         if (x.data.articleCollection.items.length === 0) {
-          throw new Error(`Could not load article with slug "${slug}"`)
+          throw new Error(`Not found. Could not find article with slug "${slug}"`)
         } else {
           return x.data.articleCollection.items[0] as Article
         }
diff --git a/research-hub-web/src/app/components/casestudys/case-study/case-study.component.ts b/research-hub-web/src/app/components/casestudys/case-study/case-study.component.ts
index 298fb33c8..753242f8e 100644
--- a/research-hub-web/src/app/components/casestudys/case-study/case-study.component.ts
+++ b/research-hub-web/src/app/components/casestudys/case-study/case-study.component.ts
@@ -53,9 +53,9 @@ export class CaseStudyComponent implements OnInit, OnDestroy {
       switchMap((slug) => this.loadCaseStudy(slug))
     ).subscribe({
       next: (caseStudy: CaseStudy) => this.caseStudy = caseStudy,
-      error: (error) => {
-        if (error! instanceof GraphQLError) {
-          console.error(error);
+      error: (error: Error) => {
+        console.error(error)
+        if (error.message.includes('Not found')) {
           this.router.navigate(['error', 404]);
         }
       }
@@ -106,7 +106,7 @@ export class CaseStudyComponent implements OnInit, OnDestroy {
     return this.getCaseStudyBySlugGQL.fetch({ slug }).pipe(
       map(x => {
         if (x.data.caseStudyCollection.items.length === 0) {
-          throw new Error(`Could not load case study with slug "${slug}"`)
+          throw new Error(`Not found. Could not find case study with slug "${slug}"`)
         } else {
           return x.data.caseStudyCollection.items[0] as CaseStudy
         }
diff --git a/research-hub-web/src/app/components/equipments/equipment/equipment.component.ts b/research-hub-web/src/app/components/equipments/equipment/equipment.component.ts
index f74b998d4..f17f24eba 100644
--- a/research-hub-web/src/app/components/equipments/equipment/equipment.component.ts
+++ b/research-hub-web/src/app/components/equipments/equipment/equipment.component.ts
@@ -52,9 +52,9 @@ export class EquipmentComponent implements OnInit, OnDestroy {
       switchMap((slug) => this.loadEquipment(slug))
     ).subscribe({
       next: (equipment: Equipment) => this.equipment = equipment,
-      error: (error) => {
-        if (error! instanceof GraphQLError) {
-          console.error(error);
+      error: (error: Error) => {
+        console.error(error)
+        if (error.message.includes('Not found')) {
           this.router.navigate(['error', 404]);
         }
       }
@@ -109,7 +109,7 @@ export class EquipmentComponent implements OnInit, OnDestroy {
     return this.getEquipmentBySlugGQL.fetch({ slug }).pipe(
       map(x => {
         if (x.data.equipmentCollection.items.length === 0) {
-          throw new Error(`Could not load equipment with slug "${slug}"`)
+          throw new Error(`Not found. Could not find equipment with slug "${slug}"`)
         } else {
           return x.data.equipmentCollection.items[0] as Equipment
         }
diff --git a/research-hub-web/src/app/components/events/event/event.component.ts b/research-hub-web/src/app/components/events/event/event.component.ts
index e1d7b62e8..30f0cad93 100644
--- a/research-hub-web/src/app/components/events/event/event.component.ts
+++ b/research-hub-web/src/app/components/events/event/event.component.ts
@@ -51,9 +51,9 @@ export class EventComponent implements OnInit, OnDestroy {
       switchMap((slug) => this.loadEvent(slug))
     ).subscribe({
       next: (event: Event) => this.event = event,
-      error: (error) => {
-        if (error! instanceof GraphQLError) {
-          console.error(error);
+      error: (error: Error) => {
+        console.error(error)
+        if (error.message.includes('Not found')) {
           this.router.navigate(['error', 404]);
         }
       }
@@ -107,7 +107,7 @@ export class EventComponent implements OnInit, OnDestroy {
     return this.getEventBySlugGQL.fetch({ slug }).pipe(
       map(x => {
         if (x.data.eventCollection.items.length === 0) {
-          throw new Error(`Could not load event with slug "${slug}"`)
+          throw new Error(`Not found. Could not find event with slug "${slug}"`)
         } else {
           return x.data.eventCollection.items[0] as Event
         }
diff --git a/research-hub-web/src/app/components/fundings/funding/funding.component.ts b/research-hub-web/src/app/components/fundings/funding/funding.component.ts
index 823246f37..c884bffbd 100644
--- a/research-hub-web/src/app/components/fundings/funding/funding.component.ts
+++ b/research-hub-web/src/app/components/fundings/funding/funding.component.ts
@@ -51,9 +51,9 @@ export class FundingComponent implements OnInit, OnDestroy {
       switchMap((slug) => this.loadFunding(slug))
     ).subscribe({
       next: (funding: Funding) => this.funding = funding,
-      error: (error) => {
-        if (error! instanceof GraphQLError) {
-          console.error(error);
+      error: (error: Error) => {
+        console.error(error)
+        if (error.message.includes('Not found')) {
           this.router.navigate(['error', 404]);
         }
       }
@@ -111,7 +111,7 @@ export class FundingComponent implements OnInit, OnDestroy {
     return this.getFundingBySlugGQL.fetch({ slug }).pipe(
       map(x => {
         if (x.data.fundingCollection.items.length === 0) {
-          throw new Error(`Could not load funding with slug "${slug}"`)
+          throw new Error(`Not found. Could not find funding with slug "${slug}"`)
         } else {
           return x.data.fundingCollection.items[0] as Funding
         }
diff --git a/research-hub-web/src/app/components/services/service/service.component.ts b/research-hub-web/src/app/components/services/service/service.component.ts
index d6c44f3b3..b8691cc7c 100644
--- a/research-hub-web/src/app/components/services/service/service.component.ts
+++ b/research-hub-web/src/app/components/services/service/service.component.ts
@@ -51,9 +51,9 @@ export class ServiceComponent implements OnInit, OnDestroy {
       switchMap((slug) => this.loadService(slug))
     ).subscribe({
       next: (service: Service) => this.service = service,
-      error: (error) => {
-        if (error! instanceof GraphQLError) {
-          console.error(error);
+      error: (error: Error) => {
+        console.error(error)
+        if (error.message.includes('Not found')) {
           this.router.navigate(['error', 404]);
         }
       }
@@ -107,7 +107,7 @@ export class ServiceComponent implements OnInit, OnDestroy {
     return this.getServiceBySlugGQL.fetch({ slug }).pipe(
       map(x => {
         if (x.data.serviceCollection.items.length === 0) {
-          throw new Error(`Could not load service with slug "${slug}"`)
+          throw new Error(`Not found. Could not find service with slug "${slug}"`)
         } else {
           return x.data.serviceCollection.items[0] as Service
         }
diff --git a/research-hub-web/src/app/components/softwares/software/software.component.ts b/research-hub-web/src/app/components/softwares/software/software.component.ts
index bb23c0556..d169fc927 100644
--- a/research-hub-web/src/app/components/softwares/software/software.component.ts
+++ b/research-hub-web/src/app/components/softwares/software/software.component.ts
@@ -51,9 +51,9 @@ export class SoftwareComponent implements OnInit, OnDestroy {
       switchMap((slug) => this.loadSoftware(slug))
     ).subscribe({
       next: (software: Software) => this.software = software,
-      error: (error) => {
-        if (error! instanceof GraphQLError) {
-          console.error(error);
+      error: (error: Error) => {
+        console.error(error)
+        if (error.message.includes('Not found')) {
           this.router.navigate(['error', 404]);
         }
       }
@@ -106,7 +106,7 @@ export class SoftwareComponent implements OnInit, OnDestroy {
     return this.getSoftwareBySlugGQL.fetch({ slug }).pipe(
       map(x => {
         if (x.data.softwareCollection.items.length === 0) {
-          throw new Error(`Could not load software with slug "${slug}"`)
+          throw new Error(`Not found. Could not find software with slug "${slug}"`)
         } else {
           return x.data.softwareCollection.items[0] as Software
         }
diff --git a/research-hub-web/src/app/components/subhubs/subhub/subhub.component.ts b/research-hub-web/src/app/components/subhubs/subhub/subhub.component.ts
index 77499b717..5650ad623 100644
--- a/research-hub-web/src/app/components/subhubs/subhub/subhub.component.ts
+++ b/research-hub-web/src/app/components/subhubs/subhub/subhub.component.ts
@@ -52,9 +52,9 @@ export class SubhubComponent implements OnInit, OnDestroy {
       switchMap((slug) => this.loadSubHub(slug))
     ).subscribe({
       next: (subHub: SubHub) => this.subHub = subHub,
-      error: (error) => {
-        if (error! instanceof GraphQLError) {
-          console.error(error);
+      error: (error: Error) => {
+        console.error(error)
+        if (error.message.includes('Not found')) {
           this.router.navigate(['error', 404]);
         }
       }
@@ -106,7 +106,7 @@ export class SubhubComponent implements OnInit, OnDestroy {
     return this.getSubHubBySlugGQL.fetch({ slug }).pipe(
       map(x => {
         if (x.data.subHubCollection.items.length === 0) {
-          throw new Error(`Could not load subHub with slug "${slug}"`)
+          throw new Error(`Not found. Could not find subHub with slug "${slug}"`)
         } else {
           return x.data.subHubCollection.items[0] as SubHub
         }

From d890e7d3e3090eef8dfacdc579703415fae710c2 Mon Sep 17 00:00:00 2001
From: rosemcc <rosemccoll@hotmail.com>
Date: Mon, 22 Nov 2021 11:00:51 +1300
Subject: [PATCH 26/39] more error handling

---
 .../components/articles/article/article.component.ts  | 11 ++++++++---
 .../casestudys/case-study/case-study.component.ts     | 11 ++++++++---
 .../equipments/equipment/equipment.component.ts       | 11 ++++++++---
 .../app/components/events/event/event.component.ts    | 11 ++++++++---
 .../components/fundings/funding/funding.component.ts  | 11 ++++++++---
 .../components/services/service/service.component.ts  | 11 ++++++++---
 .../softwares/software/software.component.ts          | 11 ++++++++---
 .../app/components/subhubs/subhub/subhub.component.ts | 11 ++++++++---
 8 files changed, 64 insertions(+), 24 deletions(-)

diff --git a/research-hub-web/src/app/components/articles/article/article.component.ts b/research-hub-web/src/app/components/articles/article/article.component.ts
index 43c6c3969..41b6ca459 100644
--- a/research-hub-web/src/app/components/articles/article/article.component.ts
+++ b/research-hub-web/src/app/components/articles/article/article.component.ts
@@ -1,9 +1,9 @@
 import { Component, OnDestroy, OnInit, Type } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
+import { ApolloError } from '@apollo/client/errors';
 import { Article, GetArticleBySlugGQL } from '@graphql/schema';
 import { BodyMediaService } from '@services/body-media.service';
 import { PageTitleService } from '@services/page-title.service';
-import { GraphQLError } from 'graphql';
 import { MarkRenderer, NodeRenderer } from 'ngx-contentful-rich-text';
 import { Observable, Subscription } from 'rxjs';
 import { map, switchMap } from 'rxjs/operators';
@@ -53,9 +53,14 @@ export class ArticleComponent implements OnInit, OnDestroy {
     ).subscribe({
       next: (article: Article) => this.article = article,
       error: (error: Error) => {
-        console.error(error)
-        if (error.message.includes('Not found')) {
+        if (error instanceof ApolloError && error.message.includes('Authentication required')) {
+          console.warn('Waiting for redirect to Login page');
+        } else if (error.message.includes('Not found')) {
+          console.error(error);
           this.router.navigate(['error', 404]);
+        } else {
+          console.error(error);
+          this.router.navigate(['error', 500]);
         }
       }
     }));
diff --git a/research-hub-web/src/app/components/casestudys/case-study/case-study.component.ts b/research-hub-web/src/app/components/casestudys/case-study/case-study.component.ts
index 753242f8e..4f8cdd26e 100644
--- a/research-hub-web/src/app/components/casestudys/case-study/case-study.component.ts
+++ b/research-hub-web/src/app/components/casestudys/case-study/case-study.component.ts
@@ -1,9 +1,9 @@
 import { Component, OnDestroy, OnInit, Type } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
+import { ApolloError } from '@apollo/client/errors';
 import { CaseStudy, GetCaseStudyBySlugGQL } from '@graphql/schema';
 import { BodyMediaService } from '@services/body-media.service';
 import { PageTitleService } from '@services/page-title.service';
-import { GraphQLError } from 'graphql';
 import { MarkRenderer, NodeRenderer } from 'ngx-contentful-rich-text';
 import { Observable, Subscription } from 'rxjs';
 import { map, switchMap } from 'rxjs/operators';
@@ -54,9 +54,14 @@ export class CaseStudyComponent implements OnInit, OnDestroy {
     ).subscribe({
       next: (caseStudy: CaseStudy) => this.caseStudy = caseStudy,
       error: (error: Error) => {
-        console.error(error)
-        if (error.message.includes('Not found')) {
+        if (error instanceof ApolloError && error.message.includes('Authentication required')) {
+          console.warn('Waiting for redirect to Login page');
+        } else if (error.message.includes('Not found')) {
+          console.error(error);
           this.router.navigate(['error', 404]);
+        } else {
+          console.error(error);
+          this.router.navigate(['error', 500]);
         }
       }
     }));
diff --git a/research-hub-web/src/app/components/equipments/equipment/equipment.component.ts b/research-hub-web/src/app/components/equipments/equipment/equipment.component.ts
index f17f24eba..86c540709 100644
--- a/research-hub-web/src/app/components/equipments/equipment/equipment.component.ts
+++ b/research-hub-web/src/app/components/equipments/equipment/equipment.component.ts
@@ -1,9 +1,9 @@
 import { Component, OnDestroy, OnInit, Type } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
+import { ApolloError } from '@apollo/client/errors';
 import { Equipment, GetEquipmentBySlugGQL } from '@graphql/schema';
 import { BodyMediaService } from '@services/body-media.service';
 import { PageTitleService } from '@services/page-title.service';
-import { GraphQLError } from 'graphql';
 import { MarkRenderer, NodeRenderer } from 'ngx-contentful-rich-text';
 import { Observable, Subscription } from 'rxjs';
 import { map, switchMap } from 'rxjs/operators';
@@ -53,9 +53,14 @@ export class EquipmentComponent implements OnInit, OnDestroy {
     ).subscribe({
       next: (equipment: Equipment) => this.equipment = equipment,
       error: (error: Error) => {
-        console.error(error)
-        if (error.message.includes('Not found')) {
+        if (error instanceof ApolloError && error.message.includes('Authentication required')) {
+          console.warn('Waiting for redirect to Login page');
+        } else if (error.message.includes('Not found')) {
+          console.error(error);
           this.router.navigate(['error', 404]);
+        } else {
+          console.error(error);
+          this.router.navigate(['error', 500]);
         }
       }
     }));
diff --git a/research-hub-web/src/app/components/events/event/event.component.ts b/research-hub-web/src/app/components/events/event/event.component.ts
index 30f0cad93..5ff24799b 100644
--- a/research-hub-web/src/app/components/events/event/event.component.ts
+++ b/research-hub-web/src/app/components/events/event/event.component.ts
@@ -1,9 +1,9 @@
 import { Component, OnDestroy, OnInit, Type } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
+import { ApolloError } from '@apollo/client/errors';
 import { Event, GetEventBySlugGQL } from '@graphql/schema';
 import { BodyMediaService } from '@services/body-media.service';
 import { PageTitleService } from '@services/page-title.service';
-import { GraphQLError } from 'graphql';
 import { MarkRenderer, NodeRenderer } from 'ngx-contentful-rich-text';
 import { Observable, Subscription } from 'rxjs';
 import { map, switchMap } from 'rxjs/operators';
@@ -52,9 +52,14 @@ export class EventComponent implements OnInit, OnDestroy {
     ).subscribe({
       next: (event: Event) => this.event = event,
       error: (error: Error) => {
-        console.error(error)
-        if (error.message.includes('Not found')) {
+        if (error instanceof ApolloError && error.message.includes('Authentication required')) {
+          console.warn('Waiting for redirect to Login page');
+        } else if (error.message.includes('Not found')) {
+          console.error(error);
           this.router.navigate(['error', 404]);
+        } else {
+          console.error(error);
+          this.router.navigate(['error', 500]);
         }
       }
     }));
diff --git a/research-hub-web/src/app/components/fundings/funding/funding.component.ts b/research-hub-web/src/app/components/fundings/funding/funding.component.ts
index c884bffbd..3a5a0f3bc 100644
--- a/research-hub-web/src/app/components/fundings/funding/funding.component.ts
+++ b/research-hub-web/src/app/components/fundings/funding/funding.component.ts
@@ -1,9 +1,9 @@
 import { Component, OnDestroy, OnInit, Type } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
+import { ApolloError } from '@apollo/client/errors';
 import { Funding, GetFundingBySlugGQL } from '@graphql/schema';
 import { BodyMediaService } from '@services/body-media.service';
 import { PageTitleService } from '@services/page-title.service';
-import { GraphQLError } from 'graphql';
 import { MarkRenderer, NodeRenderer } from 'ngx-contentful-rich-text';
 import { Observable, Subscription } from 'rxjs';
 import { map, switchMap } from 'rxjs/operators';
@@ -52,9 +52,14 @@ export class FundingComponent implements OnInit, OnDestroy {
     ).subscribe({
       next: (funding: Funding) => this.funding = funding,
       error: (error: Error) => {
-        console.error(error)
-        if (error.message.includes('Not found')) {
+        if (error instanceof ApolloError && error.message.includes('Authentication required')) {
+          console.warn('Waiting for redirect to Login page');
+        } else if (error.message.includes('Not found')) {
+          console.error(error);
           this.router.navigate(['error', 404]);
+        } else {
+          console.error(error);
+          this.router.navigate(['error', 500]);
         }
       }
     }));
diff --git a/research-hub-web/src/app/components/services/service/service.component.ts b/research-hub-web/src/app/components/services/service/service.component.ts
index b8691cc7c..555c3cf8b 100644
--- a/research-hub-web/src/app/components/services/service/service.component.ts
+++ b/research-hub-web/src/app/components/services/service/service.component.ts
@@ -1,9 +1,9 @@
 import { Component, OnDestroy, OnInit, Type } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
+import { ApolloError } from '@apollo/client/errors';
 import { GetServiceBySlugGQL, Service } from '@graphql/schema';
 import { BodyMediaService } from '@services/body-media.service';
 import { PageTitleService } from '@services/page-title.service';
-import { GraphQLError } from 'graphql';
 import { MarkRenderer, NodeRenderer } from 'ngx-contentful-rich-text';
 import { Observable, Subscription } from 'rxjs';
 import { map, switchMap } from 'rxjs/operators';
@@ -52,9 +52,14 @@ export class ServiceComponent implements OnInit, OnDestroy {
     ).subscribe({
       next: (service: Service) => this.service = service,
       error: (error: Error) => {
-        console.error(error)
-        if (error.message.includes('Not found')) {
+        if (error instanceof ApolloError && error.message.includes('Authentication required')) {
+          console.warn('Waiting for redirect to Login page');
+        } else if (error.message.includes('Not found')) {
+          console.error(error);
           this.router.navigate(['error', 404]);
+        } else {
+          console.error(error);
+          this.router.navigate(['error', 500]);
         }
       }
     }));
diff --git a/research-hub-web/src/app/components/softwares/software/software.component.ts b/research-hub-web/src/app/components/softwares/software/software.component.ts
index d169fc927..1469b1271 100644
--- a/research-hub-web/src/app/components/softwares/software/software.component.ts
+++ b/research-hub-web/src/app/components/softwares/software/software.component.ts
@@ -1,9 +1,9 @@
 import { Component, OnDestroy, OnInit, Type } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
+import { ApolloError } from '@apollo/client/errors';
 import { GetSoftwareBySlugGQL, Software } from '@graphql/schema';
 import { BodyMediaService } from '@services/body-media.service';
 import { PageTitleService } from '@services/page-title.service';
-import { GraphQLError } from 'graphql';
 import { MarkRenderer, NodeRenderer } from 'ngx-contentful-rich-text';
 import { Observable, Subscription } from 'rxjs';
 import { map, switchMap } from 'rxjs/operators';
@@ -52,9 +52,14 @@ export class SoftwareComponent implements OnInit, OnDestroy {
     ).subscribe({
       next: (software: Software) => this.software = software,
       error: (error: Error) => {
-        console.error(error)
-        if (error.message.includes('Not found')) {
+        if (error instanceof ApolloError && error.message.includes('Authentication required')) {
+          console.warn('Waiting for redirect to Login page');
+        } else if (error.message.includes('Not found')) {
+          console.error(error);
           this.router.navigate(['error', 404]);
+        } else {
+          console.error(error);
+          this.router.navigate(['error', 500]);
         }
       }
     }));
diff --git a/research-hub-web/src/app/components/subhubs/subhub/subhub.component.ts b/research-hub-web/src/app/components/subhubs/subhub/subhub.component.ts
index 5650ad623..7de4fa441 100644
--- a/research-hub-web/src/app/components/subhubs/subhub/subhub.component.ts
+++ b/research-hub-web/src/app/components/subhubs/subhub/subhub.component.ts
@@ -1,9 +1,9 @@
 import { Component, OnDestroy, OnInit, Type } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
+import { ApolloError } from '@apollo/client/errors';
 import { GetSubHubBySlugGQL, SubHub } from '@graphql/schema';
 import { BodyMediaService } from '@services/body-media.service';
 import { PageTitleService } from '@services/page-title.service';
-import { GraphQLError } from 'graphql';
 import { MarkRenderer, NodeRenderer } from 'ngx-contentful-rich-text';
 import { Observable, Subscription } from 'rxjs';
 import { map, switchMap } from 'rxjs/operators';
@@ -53,9 +53,14 @@ export class SubhubComponent implements OnInit, OnDestroy {
     ).subscribe({
       next: (subHub: SubHub) => this.subHub = subHub,
       error: (error: Error) => {
-        console.error(error)
-        if (error.message.includes('Not found')) {
+        if (error instanceof ApolloError && error.message.includes('Authentication required')) {
+          console.warn('Waiting for redirect to Login page');
+        } else if (error.message.includes('Not found')) {
+          console.error(error);
           this.router.navigate(['error', 404]);
+        } else {
+          console.error(error);
+          this.router.navigate(['error', 500]);
         }
       }
     }));

From e2df9e26bc292cafdc6bb27f539484bc9b108d6d Mon Sep 17 00:00:00 2001
From: rosemcc <rosemccoll@hotmail.com>
Date: Mon, 22 Nov 2021 11:38:49 +1300
Subject: [PATCH 27/39] removing icons

---
 cer-graphql/validateUnauthenticatedQuery.ts   |  1 -
 .../article/article.component.spec.ts         |  6 ----
 .../standard-card.component.spec.ts           |  1 -
 .../inlines-embedded-entry.component.spec.ts  |  1 -
 .../inlines-entry-hyperlink.component.spec.ts |  1 -
 .../collection-list.component.html            | 22 -------------
 .../collection-list.component.scss            | 31 -------------------
 .../collection-list.component.spec.ts         | 16 ----------
 .../collection-list.component.ts              | 19 ------------
 .../subhubs/subhub/subhub.component.scss      |  4 ---
 .../fragments/public-fields.fragment.graphql  | 24 --------------
 .../get-equipment-by-slug.query.graphql       |  5 ---
 .../queries/get-event-by-slug.query.graphql   |  3 --
 .../queries/get-funding-by-slug.query.graphql |  3 --
 .../queries/get-service-by-slug.query.graphql |  5 ---
 research-hub-web/src/styles.scss              | 13 --------
 16 files changed, 155 deletions(-)

diff --git a/cer-graphql/validateUnauthenticatedQuery.ts b/cer-graphql/validateUnauthenticatedQuery.ts
index c9afb8b56..be02b20d4 100644
--- a/cer-graphql/validateUnauthenticatedQuery.ts
+++ b/cer-graphql/validateUnauthenticatedQuery.ts
@@ -42,7 +42,6 @@ const GRAPHQL_INTROSPECTION_FIELDS = [
     'linkedFrom',
     'slug',
     'banner',
-    'icon',
     ...GRAPHQL_INTROSPECTION_FIELDS
   ]);
   
diff --git a/research-hub-web/src/app/components/articles/article/article.component.spec.ts b/research-hub-web/src/app/components/articles/article/article.component.spec.ts
index 054a841a8..016b08445 100644
--- a/research-hub-web/src/app/components/articles/article/article.component.spec.ts
+++ b/research-hub-web/src/app/components/articles/article/article.component.spec.ts
@@ -237,12 +237,6 @@ describe('ArticleComponent', () => {
     },
     'slug': 'first-article',
     'searchable': true,
-    'icon': {
-      'title': 'Pippy',
-      'description': 'Sam\'s dog Pippy',
-      'url': 'https://imgs.ctfassets.net/vbuxn5csp0ik/014fpqFg0KmnP8NWc9Jyxe/0a1a14a6a0dd438443f70d5f917568fc/Screen_Shot_2020-07-23_at_3.12.46_PM.png',
-      '__typename': 'Asset'
-    },
     'relatedItemsCollection': {
       'items': [
         {
diff --git a/research-hub-web/src/app/components/cards/standard-card/standard-card.component.spec.ts b/research-hub-web/src/app/components/cards/standard-card/standard-card.component.spec.ts
index 4b1a1652d..d93cd46c6 100644
--- a/research-hub-web/src/app/components/cards/standard-card/standard-card.component.spec.ts
+++ b/research-hub-web/src/app/components/cards/standard-card/standard-card.component.spec.ts
@@ -36,7 +36,6 @@ describe('StandardCardComponent', () => {
       contentfulMetadata: {
         tags: [],
       },
-      icon: null,
       interestedPartiesCollection: null,
       keywords: null,
       linkedFrom: null,
diff --git a/research-hub-web/src/app/components/shared/body-media/inlines-embedded-entry/inlines-embedded-entry.component.spec.ts b/research-hub-web/src/app/components/shared/body-media/inlines-embedded-entry/inlines-embedded-entry.component.spec.ts
index 3e8eb1e74..f13f23bb1 100644
--- a/research-hub-web/src/app/components/shared/body-media/inlines-embedded-entry/inlines-embedded-entry.component.spec.ts
+++ b/research-hub-web/src/app/components/shared/body-media/inlines-embedded-entry/inlines-embedded-entry.component.spec.ts
@@ -26,7 +26,6 @@ describe('InlinesEmbeddedEntryComponent', () => {
 
   const contentItem = {
     "__typename": "Service",
-    "icon": null,
     "slug": "clinical-research-centre",
     "title": " Faculty of Medical and Health Sciences Clinical Research Centre",
     "summary": "These excellent facilities are available to staff and postgraduate students in the Faculty to carry out research involving human participants, as long as appropriate ethics approvals are in place.",
diff --git a/research-hub-web/src/app/components/shared/body-media/inlines-entry-hyperlink/inlines-entry-hyperlink.component.spec.ts b/research-hub-web/src/app/components/shared/body-media/inlines-entry-hyperlink/inlines-entry-hyperlink.component.spec.ts
index 8dc429c41..097a1a8ef 100644
--- a/research-hub-web/src/app/components/shared/body-media/inlines-entry-hyperlink/inlines-entry-hyperlink.component.spec.ts
+++ b/research-hub-web/src/app/components/shared/body-media/inlines-entry-hyperlink/inlines-entry-hyperlink.component.spec.ts
@@ -33,7 +33,6 @@ describe('InlinesEntryHyperlinkComponent', () => {
 
   const contentItem = {
     "__typename": "Event",
-    "icon": null,
     "slug": "abstract-writing",
     "title": "Abstract writing",
     "summary": "Learn how to write an effective abstract for conferences, events and publications.",
diff --git a/research-hub-web/src/app/components/shared/collection-list/collection-list.component.html b/research-hub-web/src/app/components/shared/collection-list/collection-list.component.html
index c1fe7ebfa..11d19ef41 100644
--- a/research-hub-web/src/app/components/shared/collection-list/collection-list.component.html
+++ b/research-hub-web/src/app/components/shared/collection-list/collection-list.component.html
@@ -34,28 +34,6 @@ <h1 id="title">
           [ngClass]="{ ssoProtected: content.ssoProtected }"
         >
           <mat-card-header>
-            <div mat-card-avatar class="item-avatar">
-              <div *ngIf="content.icon; else avatarIcon">
-                <img
-                  srcset="
-                    {{content?.icon?.url}}?w=200&fm=webp,
-                    {{content?.icon?.url}}?w=200
-                  "
-                  src="{{ content?.icon?.url }}?w=200"
-                  alt="{{ content?.icon?.description }}"
-                  class="item-avatar"
-                  width="100%"
-                  height="100%"
-                />
-              </div>
-              <ng-template #avatarIcon>
-                <mat-icon
-                  class="item-avatar-icon"
-                  [innerHTML]="getDefaultTypeIcon(content.__typename)"
-                >
-                </mat-icon>
-              </ng-template>
-            </div>
             <mat-card-title>
               <p>
                 <span class="card-title">{{ content.title }}</span
diff --git a/research-hub-web/src/app/components/shared/collection-list/collection-list.component.scss b/research-hub-web/src/app/components/shared/collection-list/collection-list.component.scss
index a0965e292..1b7c6f615 100644
--- a/research-hub-web/src/app/components/shared/collection-list/collection-list.component.scss
+++ b/research-hub-web/src/app/components/shared/collection-list/collection-list.component.scss
@@ -2,36 +2,12 @@
 @import "mixins";
 @import "styles-common";
 
-div.mat-card-avatar mat-icon {
-  color: $dark-blue;
-}
-
 div.collection {
   margin: 24px 0 24px 0;
 }
 
 .result-item {
   cursor: pointer;
-
-  &.ssoProtected {
-  }
-  $avatar-size: 64px;
-
-  .item-avatar {
-    width: $avatar-size;
-    height: $avatar-size;
-    margin-right: $avatar-size * 0.15;
-    img {
-      object-fit: cover;
-      width: $avatar-size;
-      height: $avatar-size;
-    }
-  }
-  .item-avatar-icon {
-    padding: 16px 0;
-    font-size: $avatar-size !important;
-    color: $dark-blue !important;
-  }
 }
 
 /**
@@ -75,13 +51,6 @@ mat-card {
   }
 }
 
-/**
- * Card Result Icon
- */
-.item-avatar-icon {
-  color: $light-blue !important;
-}
-
 /**
  * Pagination Controls
  */
diff --git a/research-hub-web/src/app/components/shared/collection-list/collection-list.component.spec.ts b/research-hub-web/src/app/components/shared/collection-list/collection-list.component.spec.ts
index f8550b153..43304f8b7 100644
--- a/research-hub-web/src/app/components/shared/collection-list/collection-list.component.spec.ts
+++ b/research-hub-web/src/app/components/shared/collection-list/collection-list.component.spec.ts
@@ -32,20 +32,4 @@ describe('CollectionListComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
-
-  describe("getDefaultIcon (function)", () => {
-
-    it("Should return the language icon name for a subhub", () => {
-      expect(component.getDefaultTypeIcon('SubHub')).toEqual('language');
-    });
-
-    it("Should return the home manage accounts icon name for a service", () => {
-      expect(component.getDefaultTypeIcon('Service')).toEqual('manage_accounts');
-    });
-
-    it("Should return the article icon name by default", () => {
-      expect(component.getDefaultTypeIcon('')).toEqual('article');
-    });
-
-  });
 });
diff --git a/research-hub-web/src/app/components/shared/collection-list/collection-list.component.ts b/research-hub-web/src/app/components/shared/collection-list/collection-list.component.ts
index a0f511564..2d719855d 100644
--- a/research-hub-web/src/app/components/shared/collection-list/collection-list.component.ts
+++ b/research-hub-web/src/app/components/shared/collection-list/collection-list.component.ts
@@ -22,23 +22,4 @@ export class CollectionListComponent implements OnChanges {
   scrollToTop() {
     document.querySelector('.main-content').scrollTo({ top: 0, behavior: 'smooth' });
   }
-
-  /**
-   * Returns a material-icon name. Called in the component when a content item doesn't
-   * have an avatar defined.
-   * @param __typename the type for which we're searching for a default icon.
-   */
-  public getDefaultTypeIcon(__typename: string): string {
-    switch (__typename.toLowerCase()) {
-      case 'article': return 'article';
-      case 'equipment': return 'handyman';
-      case 'subhub': return 'language';
-      case 'service': return 'manage_accounts';
-      case 'event': return 'event';
-      case 'software': return 'code';
-      case 'casestudy': return 'cases';
-      case 'funding': return 'paid';
-      default: return 'article'
-    }
-  }
 }
diff --git a/research-hub-web/src/app/components/subhubs/subhub/subhub.component.scss b/research-hub-web/src/app/components/subhubs/subhub/subhub.component.scss
index e4ee83450..e286eb971 100644
--- a/research-hub-web/src/app/components/subhubs/subhub/subhub.component.scss
+++ b/research-hub-web/src/app/components/subhubs/subhub/subhub.component.scss
@@ -16,10 +16,6 @@
   padding: 72px 0px;
 }
 
-div.mat-card-avatar mat-icon {
-  color: $dark-blue;
-}
-
 .related-item-summary {
   color: gray;
 }
diff --git a/research-hub-web/src/app/graphql/fragments/public-fields.fragment.graphql b/research-hub-web/src/app/graphql/fragments/public-fields.fragment.graphql
index c9df6a175..09a605b84 100644
--- a/research-hub-web/src/app/graphql/fragments/public-fields.fragment.graphql
+++ b/research-hub-web/src/app/graphql/fragments/public-fields.fragment.graphql
@@ -1,9 +1,6 @@
 fragment PublicFields on Entry {
     ... on Article {
       __typename
-      icon {
-        url
-      }
       slug
       title
       summary
@@ -15,9 +12,6 @@ fragment PublicFields on Entry {
     } 
     ... on CaseStudy {
       __typename
-      icon {
-        url
-      }
       banner {
         url
       }
@@ -29,9 +23,6 @@ fragment PublicFields on Entry {
     }
     ... on Equipment {
       __typename
-      icon {
-        url
-      }
       slug
       title
       summary
@@ -43,9 +34,6 @@ fragment PublicFields on Entry {
     }
   ... on Event {
       __typename
-      icon {
-        url
-      }
       slug
       title
       summary
@@ -57,9 +45,6 @@ fragment PublicFields on Entry {
     }
     ... on Funding {
       __typename
-      icon {
-        url
-      }
       slug
       title
       summary
@@ -71,9 +56,6 @@ fragment PublicFields on Entry {
     }
     ... on Service {
       __typename
-      icon {
-        url
-      }
       banner {
         url
       }
@@ -85,9 +67,6 @@ fragment PublicFields on Entry {
     }
   ... on Software {
       __typename
-      icon {
-        url
-      }
       banner {
         url
       }
@@ -99,9 +78,6 @@ fragment PublicFields on Entry {
     }
     ... on SubHub {
       __typename
-      icon {
-        url
-      }
       slug
       title
       summary
diff --git a/research-hub-web/src/app/graphql/queries/get-equipment-by-slug.query.graphql b/research-hub-web/src/app/graphql/queries/get-equipment-by-slug.query.graphql
index 353c1ddc8..bb127f7ce 100644
--- a/research-hub-web/src/app/graphql/queries/get-equipment-by-slug.query.graphql
+++ b/research-hub-web/src/app/graphql/queries/get-equipment-by-slug.query.graphql
@@ -12,11 +12,6 @@ query GetEquipmentBySlug($slug: String) {
       banner {
         url
       }
-      icon {
-        title
-        description
-        url
-      }
       summary
       callToAction
       callToActionLabel
diff --git a/research-hub-web/src/app/graphql/queries/get-event-by-slug.query.graphql b/research-hub-web/src/app/graphql/queries/get-event-by-slug.query.graphql
index 5818088d5..c2702960d 100644
--- a/research-hub-web/src/app/graphql/queries/get-event-by-slug.query.graphql
+++ b/research-hub-web/src/app/graphql/queries/get-event-by-slug.query.graphql
@@ -12,9 +12,6 @@ query GetEventBySlug($slug: String) {
       banner {
         url
       }
-      icon {
-        url
-      }
       summary
       bodyText {
         json
diff --git a/research-hub-web/src/app/graphql/queries/get-funding-by-slug.query.graphql b/research-hub-web/src/app/graphql/queries/get-funding-by-slug.query.graphql
index 3d5ec04dc..d094eac59 100644
--- a/research-hub-web/src/app/graphql/queries/get-funding-by-slug.query.graphql
+++ b/research-hub-web/src/app/graphql/queries/get-funding-by-slug.query.graphql
@@ -12,9 +12,6 @@ query GetFundingBySlug($slug: String) {
       banner {
         url
       }
-      icon {
-        url
-      }
       summary
       purpose {
         json
diff --git a/research-hub-web/src/app/graphql/queries/get-service-by-slug.query.graphql b/research-hub-web/src/app/graphql/queries/get-service-by-slug.query.graphql
index e8913c9c2..8f298ed4c 100644
--- a/research-hub-web/src/app/graphql/queries/get-service-by-slug.query.graphql
+++ b/research-hub-web/src/app/graphql/queries/get-service-by-slug.query.graphql
@@ -12,11 +12,6 @@ query GetServiceBySlug($slug: String) {
       banner {
         url
       }
-      icon {
-        title
-        description
-        url
-      }
       summary
       callToAction
       callToActionLabel
diff --git a/research-hub-web/src/styles.scss b/research-hub-web/src/styles.scss
index ac7921048..2614bd05a 100644
--- a/research-hub-web/src/styles.scss
+++ b/research-hub-web/src/styles.scss
@@ -177,19 +177,6 @@ mat-card.mat-card {
   margin: 8px 0;
   border-radius: 0%;
 }
-.avatar-btn > span.mat-button-wrapper {
-  padding-top: 0 !important;
-  margin-bottom: 0 !important;
-}
-.avatar-btn > span.mat-button-wrapper > img {
-  width: 56px;
-  height: 56px;
-}
-
-.chip-avatar {
-  margin-right: 16px;
-  border-radius: 50%;
-}
 
 app-search-filters {
   div.mat-list-text {

From b18197096d385e7d911adf016bd3868a0c8c2b41 Mon Sep 17 00:00:00 2001
From: rosemcc <rosemccoll@hotmail.com>
Date: Mon, 22 Nov 2021 13:09:35 +1300
Subject: [PATCH 28/39] delete unneeded module

---
 .../collection-list/collection-list.module.ts    | 16 ----------------
 1 file changed, 16 deletions(-)
 delete mode 100644 research-hub-web/src/app/components/shared/collection-list/collection-list.module.ts

diff --git a/research-hub-web/src/app/components/shared/collection-list/collection-list.module.ts b/research-hub-web/src/app/components/shared/collection-list/collection-list.module.ts
deleted file mode 100644
index 1b10e9efc..000000000
--- a/research-hub-web/src/app/components/shared/collection-list/collection-list.module.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-import { CollectionListComponent } from './collection-list.component';
-import { SharedModule } from '../app.shared.module';
-import { Routes, RouterModule, RouterLink } from '@angular/router';
-
-@NgModule({
-  declarations: [],
-  imports: [
-    CommonModule,
-    SharedModule,
-    RouterModule
-  ]
-})
-export class CollectionListModule { }

From 3a75638812d9e99a34d64a6c298785e92d847041 Mon Sep 17 00:00:00 2001
From: rosemcc <rosemccoll@hotmail.com>
Date: Mon, 22 Nov 2021 13:10:00 +1300
Subject: [PATCH 29/39] unit tests clean ups and mock breadcrumbs

---
 .../activities-page/activities-page.component.spec.ts     | 5 +++--
 .../components/articles/article/article.component.spec.ts | 8 ++++++--
 .../cards/contact-card/contact-card.component.spec.ts     | 4 ++--
 .../cards/standard-card/standard-card.component.spec.ts   | 6 ++++--
 .../casestudys/case-study/case-study.component.spec.ts    | 8 ++++++--
 .../equipments/equipment/equipment.component.spec.ts      | 6 ++++--
 .../app/components/events/event/event.component.spec.ts   | 6 ++++--
 .../components/fundings/funding/funding.component.spec.ts | 6 ++++--
 .../layout/notification/notification.component.spec.ts    | 5 +++--
 .../search-filters/search-filters.component.spec.ts       | 2 ++
 .../search-filter-bar/search-filter-bar.component.spec.ts | 2 ++
 .../components/services/service/service.component.spec.ts | 6 ++++--
 .../blocks-embedded-entry.component.spec.ts               | 1 -
 .../collection-list/collection-list.component.spec.ts     | 4 +++-
 .../softwares/software/software.component.spec.ts         | 6 ++++--
 .../components/subhubs/subhub/subhub.component.spec.ts    | 8 ++++++--
 16 files changed, 57 insertions(+), 26 deletions(-)

diff --git a/research-hub-web/src/app/components/activities-page/activities-page.component.spec.ts b/research-hub-web/src/app/components/activities-page/activities-page.component.spec.ts
index c546c10d7..819dd9f85 100644
--- a/research-hub-web/src/app/components/activities-page/activities-page.component.spec.ts
+++ b/research-hub-web/src/app/components/activities-page/activities-page.component.spec.ts
@@ -7,7 +7,7 @@ import { StageCollection, AllStagesGQL } from '@graphql/schema';
 import { Observable, of } from 'rxjs';
 import { MockComponent, MockProvider } from 'ng-mocks';
 import { PageTitleService } from '@services/page-title.service';
-
+import { RouterTestingModule } from '@angular/router/testing';
 
 describe('ActivitiesPageComponent', () => {
   let component: ActivitiesPageComponent;
@@ -49,7 +49,8 @@ describe('ActivitiesPageComponent', () => {
       ],
       imports: [
         HttpClientTestingModule,
-        ApolloTestingModule
+        ApolloTestingModule,
+        RouterTestingModule.withRoutes([])
       ],
       providers: [
         MockProvider(SearchService),
diff --git a/research-hub-web/src/app/components/articles/article/article.component.spec.ts b/research-hub-web/src/app/components/articles/article/article.component.spec.ts
index 016b08445..5c487fa41 100644
--- a/research-hub-web/src/app/components/articles/article/article.component.spec.ts
+++ b/research-hub-web/src/app/components/articles/article/article.component.spec.ts
@@ -10,7 +10,8 @@ import { MaterialModule } from '@app/app.material.module';
 import { SharedModule } from '@components/shared/app.shared.module';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterTestingModule } from '@angular/router/testing';
-import { MockModule, MockProvider } from 'ng-mocks';
+import { MockComponent, MockModule, MockProvider } from 'ng-mocks';
+import { BreadcrumbsComponent } from '@app/components/shared/breadcrumbs/breadcrumbs.component';
 
 describe('ArticleComponent', () => {
   let component: ArticleComponent;
@@ -259,7 +260,10 @@ describe('ArticleComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ArticleComponent],
+      declarations: [
+        ArticleComponent,
+        MockComponent(BreadcrumbsComponent)
+      ],
       imports: [
         ApolloTestingModule,
         MockModule(CommonModule),
diff --git a/research-hub-web/src/app/components/cards/contact-card/contact-card.component.spec.ts b/research-hub-web/src/app/components/cards/contact-card/contact-card.component.spec.ts
index 13501e6fa..608df70c2 100644
--- a/research-hub-web/src/app/components/cards/contact-card/contact-card.component.spec.ts
+++ b/research-hub-web/src/app/components/cards/contact-card/contact-card.component.spec.ts
@@ -1,5 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { MatCardModule } from '@angular/material/card';
+import { MaterialModule } from '@app/app.material.module';
 import { Person } from '@app/graphql/schema';
 import { MockModule } from 'ng-mocks';
 
@@ -13,7 +13,7 @@ describe('ContactCardComponent', () => {
     await TestBed.configureTestingModule({
       declarations: [ ContactCardComponent ],
       imports: [
-        MockModule(MatCardModule)
+        MockModule(MaterialModule)
       ]
     })
     .compileComponents();
diff --git a/research-hub-web/src/app/components/cards/standard-card/standard-card.component.spec.ts b/research-hub-web/src/app/components/cards/standard-card/standard-card.component.spec.ts
index d93cd46c6..8b73177d6 100644
--- a/research-hub-web/src/app/components/cards/standard-card/standard-card.component.spec.ts
+++ b/research-hub-web/src/app/components/cards/standard-card/standard-card.component.spec.ts
@@ -4,7 +4,7 @@ import { MatIconModule } from '@angular/material/icon';
 import { Article } from '@app/graphql/schema';
 import { ContentTypeDisplayNamePipe } from '@pipes/content-type-display-name.pipe';
 import { MockModule, MockPipe } from 'ng-mocks';
-
+import { RouterTestingModule } from '@angular/router/testing';
 import { StandardCardComponent } from './standard-card.component';
 
 describe('StandardCardComponent', () => {
@@ -20,7 +20,8 @@ describe('StandardCardComponent', () => {
       ],
       imports: [
         MockModule(MatCardModule),
-        MockModule(MatIconModule)
+        MockModule(MatIconModule),
+        RouterTestingModule.withRoutes([])
       ]
     })
       .compileComponents();
@@ -36,6 +37,7 @@ describe('StandardCardComponent', () => {
       contentfulMetadata: {
         tags: [],
       },
+      icon: null,
       interestedPartiesCollection: null,
       keywords: null,
       linkedFrom: null,
diff --git a/research-hub-web/src/app/components/casestudys/case-study/case-study.component.spec.ts b/research-hub-web/src/app/components/casestudys/case-study/case-study.component.spec.ts
index fda2ce25f..43c7db5c7 100644
--- a/research-hub-web/src/app/components/casestudys/case-study/case-study.component.spec.ts
+++ b/research-hub-web/src/app/components/casestudys/case-study/case-study.component.spec.ts
@@ -4,13 +4,14 @@ import { MaterialModule } from '@app/app.material.module';
 import { SharedModule } from '@components/shared/app.shared.module';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterTestingModule } from '@angular/router/testing';
-import { MockModule, MockProvider } from 'ng-mocks';
+import { MockComponent, MockModule, MockProvider } from 'ng-mocks';
 import { ApolloTestingController, ApolloTestingModule } from 'apollo-angular/testing';
 import { ActivatedRoute } from '@angular/router';
 import { Observable, of } from 'rxjs';
 import { CaseStudyComponent } from './case-study.component';
 import { PageTitleService } from '@services/page-title.service';
 import { CaseStudy, CaseStudyCollection } from '@app/graphql/schema';
+import { BreadcrumbsComponent } from '@app/components/shared/breadcrumbs/breadcrumbs.component';
 
 describe('CaseStudyComponent', () => {
   let component: CaseStudyComponent;
@@ -47,7 +48,10 @@ describe('CaseStudyComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ CaseStudyComponent ],
+      declarations: [
+        CaseStudyComponent,
+        MockComponent(BreadcrumbsComponent)
+      ],
       imports: [
         ApolloTestingModule,
         MockModule(CommonModule),
diff --git a/research-hub-web/src/app/components/equipments/equipment/equipment.component.spec.ts b/research-hub-web/src/app/components/equipments/equipment/equipment.component.spec.ts
index dae5186ed..2491ea10b 100644
--- a/research-hub-web/src/app/components/equipments/equipment/equipment.component.spec.ts
+++ b/research-hub-web/src/app/components/equipments/equipment/equipment.component.spec.ts
@@ -9,8 +9,9 @@ import { CommonModule } from '@angular/common';
 import { MaterialModule } from '@app/app.material.module';
 import { SharedModule } from '@components/shared/app.shared.module';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
-import { MockModule, MockProvider } from 'ng-mocks';
+import { MockComponent, MockModule, MockProvider } from 'ng-mocks';
 import { RouterTestingModule } from '@angular/router/testing';
+import { BreadcrumbsComponent } from '@app/components/shared/breadcrumbs/breadcrumbs.component';
 
 describe('EquipmentComponent', () => {
   let component: EquipmentComponent;
@@ -47,7 +48,8 @@ describe('EquipmentComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [
-        EquipmentComponent
+        EquipmentComponent,
+        MockComponent(BreadcrumbsComponent)
       ],
       imports: [
         RouterTestingModule,
diff --git a/research-hub-web/src/app/components/events/event/event.component.spec.ts b/research-hub-web/src/app/components/events/event/event.component.spec.ts
index c51b2b9f9..cfac60b19 100644
--- a/research-hub-web/src/app/components/events/event/event.component.spec.ts
+++ b/research-hub-web/src/app/components/events/event/event.component.spec.ts
@@ -10,7 +10,8 @@ import { MaterialModule } from '@app/app.material.module';
 import { SharedModule } from '@components/shared/app.shared.module';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterTestingModule } from '@angular/router/testing';
-import { MockModule, MockProvider } from 'ng-mocks';
+import { MockComponent, MockModule, MockProvider } from 'ng-mocks';
+import { BreadcrumbsComponent } from '@app/components/shared/breadcrumbs/breadcrumbs.component';
 
 describe('EventsComponent', () => {
   let component: EventComponent;
@@ -47,7 +48,8 @@ describe('EventsComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [
-        EventComponent
+        EventComponent,
+        MockComponent(BreadcrumbsComponent)
       ],
       imports: [
         RouterTestingModule,
diff --git a/research-hub-web/src/app/components/fundings/funding/funding.component.spec.ts b/research-hub-web/src/app/components/fundings/funding/funding.component.spec.ts
index 8af8d253d..c5f331d62 100644
--- a/research-hub-web/src/app/components/fundings/funding/funding.component.spec.ts
+++ b/research-hub-web/src/app/components/fundings/funding/funding.component.spec.ts
@@ -10,7 +10,8 @@ import { MaterialModule } from '@app/app.material.module';
 import { SharedModule } from '@components/shared/app.shared.module';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterTestingModule } from '@angular/router/testing';
-import { MockModule, MockProvider } from 'ng-mocks';
+import { MockComponent, MockModule, MockProvider } from 'ng-mocks';
+import { BreadcrumbsComponent } from '@app/components/shared/breadcrumbs/breadcrumbs.component';
 
 describe('FundingsComponent', () => {
   let component: FundingComponent;
@@ -47,7 +48,8 @@ describe('FundingsComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [
-        FundingComponent
+        FundingComponent,
+        MockComponent(BreadcrumbsComponent)
       ],
       imports: [
         RouterTestingModule,
diff --git a/research-hub-web/src/app/components/layout/notification/notification.component.spec.ts b/research-hub-web/src/app/components/layout/notification/notification.component.spec.ts
index 91f2c93d3..dc2be6c39 100644
--- a/research-hub-web/src/app/components/layout/notification/notification.component.spec.ts
+++ b/research-hub-web/src/app/components/layout/notification/notification.component.spec.ts
@@ -2,7 +2,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ApolloTestingModule } from 'apollo-angular/testing';
 import { MockModule } from 'ng-mocks';
 import { AppLayoutModule } from '../layout.module';
-
+import { MaterialModule } from '@app/app.material.module';
 import { NotificationComponent } from './notification.component';
 
 describe('NotificationComponent', () => {
@@ -14,7 +14,8 @@ describe('NotificationComponent', () => {
       declarations: [ NotificationComponent ],
       imports: [
         ApolloTestingModule,
-        MockModule(AppLayoutModule)
+        MockModule(AppLayoutModule),
+        MockModule(MaterialModule),
       ]
     })
     .compileComponents();
diff --git a/research-hub-web/src/app/components/layout/search-filters/search-filters.component.spec.ts b/research-hub-web/src/app/components/layout/search-filters/search-filters.component.spec.ts
index e2fee830c..44315de51 100644
--- a/research-hub-web/src/app/components/layout/search-filters/search-filters.component.spec.ts
+++ b/research-hub-web/src/app/components/layout/search-filters/search-filters.component.spec.ts
@@ -9,6 +9,7 @@ import { MatButtonHarness } from '@angular/material/button/testing';
 import { MatListModule } from '@angular/material/list';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatChipsModule } from '@angular/material/chips';
+import { MatIconModule } from '@angular/material/icon';
 import { FormsModule } from '@angular/forms';
 import { Category } from '@app/graphql/schema';
 
@@ -69,6 +70,7 @@ describe('SearchFiltersComponent', () => {
         FormsModule,
         MockModule(MatTabsModule),
         MockModule(MatChipsModule),
+        MatIconModule
       ]
     })
       .compileComponents();
diff --git a/research-hub-web/src/app/components/search-page/search-filter-bar/search-filter-bar.component.spec.ts b/research-hub-web/src/app/components/search-page/search-filter-bar/search-filter-bar.component.spec.ts
index 299a3a00a..c39b882b7 100644
--- a/research-hub-web/src/app/components/search-page/search-filter-bar/search-filter-bar.component.spec.ts
+++ b/research-hub-web/src/app/components/search-page/search-filter-bar/search-filter-bar.component.spec.ts
@@ -10,6 +10,7 @@ import { SearchFilterBarComponent } from './search-filter-bar.component';
 import { MatSelectModule } from '@angular/material/select';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { MatChipsModule } from '@angular/material/chips';
+import { MatIconModule } from '@angular/material/icon';
 import { ApolloTestingModule } from 'apollo-angular/testing';
 
 describe('SearchFilterBarComponent', () => {
@@ -27,6 +28,7 @@ describe('SearchFilterBarComponent', () => {
         HttpClientTestingModule,
         MatSelectModule,
         MatChipsModule,
+        MatIconModule,
         FormsModule,
         BrowserAnimationsModule
       ]
diff --git a/research-hub-web/src/app/components/services/service/service.component.spec.ts b/research-hub-web/src/app/components/services/service/service.component.spec.ts
index 56379a18a..92b83472b 100644
--- a/research-hub-web/src/app/components/services/service/service.component.spec.ts
+++ b/research-hub-web/src/app/components/services/service/service.component.spec.ts
@@ -10,7 +10,8 @@ import { MaterialModule } from '@app/app.material.module';
 import { SharedModule } from '@components/shared/app.shared.module';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
 import { RouterTestingModule } from '@angular/router/testing';
-import { MockModule, MockProvider } from 'ng-mocks';
+import { MockComponent, MockModule, MockProvider } from 'ng-mocks';
+import { BreadcrumbsComponent } from '@app/components/shared/breadcrumbs/breadcrumbs.component';
 
 describe('ServicesComponent', () => {
   let component: ServiceComponent;
@@ -47,7 +48,8 @@ describe('ServicesComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [
-        ServiceComponent
+        ServiceComponent,
+        MockComponent(BreadcrumbsComponent)
       ],
       imports: [
         RouterTestingModule,
diff --git a/research-hub-web/src/app/components/shared/body-media/blocks-embedded-entry/blocks-embedded-entry.component.spec.ts b/research-hub-web/src/app/components/shared/body-media/blocks-embedded-entry/blocks-embedded-entry.component.spec.ts
index e0b02553b..12ea20924 100644
--- a/research-hub-web/src/app/components/shared/body-media/blocks-embedded-entry/blocks-embedded-entry.component.spec.ts
+++ b/research-hub-web/src/app/components/shared/body-media/blocks-embedded-entry/blocks-embedded-entry.component.spec.ts
@@ -5,7 +5,6 @@ import { MockInstance, MockModule, MockProvider } from 'ng-mocks';
 import { BlocksEmbeddedEntryComponent } from './blocks-embedded-entry.component';
 import { RouterTestingModule } from '@angular/router/testing';
 import { SharedModule } from '@components/shared/app.shared.module';
-import { Entry } from '@app/graphql/schema';
 
 describe('BlocksEmbeddedEntryComponent', () => {
   let component: BlocksEmbeddedEntryComponent;
diff --git a/research-hub-web/src/app/components/shared/collection-list/collection-list.component.spec.ts b/research-hub-web/src/app/components/shared/collection-list/collection-list.component.spec.ts
index 43304f8b7..fabb48868 100644
--- a/research-hub-web/src/app/components/shared/collection-list/collection-list.component.spec.ts
+++ b/research-hub-web/src/app/components/shared/collection-list/collection-list.component.spec.ts
@@ -2,6 +2,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { CollectionListComponent } from './collection-list.component';
 import { SharedModule } from '../app.shared.module';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { RouterTestingModule } from '@angular/router/testing';
 import { MockModule } from 'ng-mocks';
 
 describe('CollectionListComponent', () => {
@@ -13,7 +14,8 @@ describe('CollectionListComponent', () => {
       declarations: [CollectionListComponent],
       imports: [
         MockModule(SharedModule),
-        HttpClientTestingModule
+        HttpClientTestingModule,
+        RouterTestingModule.withRoutes([])
       ]
     })
       .compileComponents();
diff --git a/research-hub-web/src/app/components/softwares/software/software.component.spec.ts b/research-hub-web/src/app/components/softwares/software/software.component.spec.ts
index fbae1ffa2..a2adad120 100644
--- a/research-hub-web/src/app/components/softwares/software/software.component.spec.ts
+++ b/research-hub-web/src/app/components/softwares/software/software.component.spec.ts
@@ -10,7 +10,8 @@ import { MaterialModule } from '@app/app.material.module';
 import { SharedModule } from '@components/shared/app.shared.module';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
 import { RouterTestingModule } from '@angular/router/testing';
-import { MockModule, MockProvider } from 'ng-mocks';
+import { MockComponent, MockModule, MockProvider } from 'ng-mocks';
+import { BreadcrumbsComponent } from '@app/components/shared/breadcrumbs/breadcrumbs.component';
 
 describe('SoftwaresComponent', () => {
   let component: SoftwareComponent;
@@ -47,7 +48,8 @@ describe('SoftwaresComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [
-        SoftwareComponent
+        SoftwareComponent,
+        MockComponent(BreadcrumbsComponent)
       ],
       imports: [
         RouterTestingModule,
diff --git a/research-hub-web/src/app/components/subhubs/subhub/subhub.component.spec.ts b/research-hub-web/src/app/components/subhubs/subhub/subhub.component.spec.ts
index 24b7a225f..e648b13c0 100644
--- a/research-hub-web/src/app/components/subhubs/subhub/subhub.component.spec.ts
+++ b/research-hub-web/src/app/components/subhubs/subhub/subhub.component.spec.ts
@@ -14,9 +14,10 @@ import {
   AllContentItemParentSubHubsGQL,
 } from "@graphql/schema";
 import { PageTitleService } from '@services/page-title.service';
-import { MockModule, MockProvider } from 'ng-mocks';
+import { MockComponent, MockModule, MockProvider } from 'ng-mocks';
 import { RouterTestingModule } from '@angular/router/testing';
 import { SubhubComponent } from './subhub.component';
+import { BreadcrumbsComponent } from '@app/components/shared/breadcrumbs/breadcrumbs.component';
 
 
 describe('SubhubsComponent', () => {
@@ -500,7 +501,10 @@ describe('SubhubsComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [SubhubComponent],
+      declarations: [
+        SubhubComponent,
+        MockComponent(BreadcrumbsComponent)
+      ],
       imports: [
         ApolloTestingModule,
         MockModule(CommonModule),

From ab448057fa1c2383cb77f3c9d602d0dfaf4dd7a5 Mon Sep 17 00:00:00 2001
From: rosemcc <rosemccoll@hotmail.com>
Date: Mon, 22 Nov 2021 13:41:29 +1300
Subject: [PATCH 30/39] breadcrumbs unit test

---
 .../shared/breadcrumbs/breadcrumbs.component.spec.ts      | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/research-hub-web/src/app/components/shared/breadcrumbs/breadcrumbs.component.spec.ts b/research-hub-web/src/app/components/shared/breadcrumbs/breadcrumbs.component.spec.ts
index f196659e7..2966f2505 100644
--- a/research-hub-web/src/app/components/shared/breadcrumbs/breadcrumbs.component.spec.ts
+++ b/research-hub-web/src/app/components/shared/breadcrumbs/breadcrumbs.component.spec.ts
@@ -1,5 +1,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
+import { CerGraphqlService } from '@services/cer-graphql.service';
+import { MockProvider } from 'ng-mocks';
 import { BreadcrumbsComponent } from './breadcrumbs.component';
 
 describe('BreadcrumbsComponent', () => {
@@ -23,7 +25,10 @@ describe('BreadcrumbsComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [ BreadcrumbsComponent ],
-      imports: [RouterTestingModule]
+      imports: [RouterTestingModule],
+      providers: [
+        MockProvider(CerGraphqlService),
+      ]
     })
     .compileComponents();
   });
@@ -31,7 +36,6 @@ describe('BreadcrumbsComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(BreadcrumbsComponent);
     component = fixture.componentInstance;
-    // component.contentItem = breadCrumbs;
     fixture.detectChanges();
   });
 

From 469956de644fd74f3fe712cfa8d9a7e507b6680d Mon Sep 17 00:00:00 2001
From: rosemcc <rosemccoll@hotmail.com>
Date: Mon, 22 Nov 2021 13:42:00 +1300
Subject: [PATCH 31/39] add page titles for list pages

---
 .../article-list/article-list.component.spec.ts      | 12 ++++++++++--
 .../articles/article-list/article-list.component.ts  |  8 ++++++--
 .../case-study-list.component.spec.ts                | 12 ++++++++++--
 .../case-study-list/case-study-list.component.ts     |  8 ++++++--
 .../equipment-list/equipment-list.component.spec.ts  | 12 ++++++++++--
 .../equipment-list/equipment-list.component.ts       |  6 +++++-
 .../events/event-list/event-list.component.spec.ts   | 12 ++++++++++--
 .../events/event-list/event-list.component.ts        |  6 +++++-
 .../funding-list/funding-list.component.spec.ts      | 12 ++++++++++--
 .../fundings/funding-list/funding-list.component.ts  |  6 +++++-
 .../service-list/service-list.component.spec.ts      | 12 ++++++++++--
 .../services/service-list/service-list.component.ts  |  6 +++++-
 .../software-list/software-list.component.spec.ts    | 12 ++++++++++--
 .../software-list/software-list.component.ts         |  6 +++++-
 .../subhub-list/subhub-list.component.spec.ts        | 12 ++++++++++--
 .../subhubs/subhub-list/subhub-list.component.ts     |  6 +++++-
 16 files changed, 122 insertions(+), 26 deletions(-)

diff --git a/research-hub-web/src/app/components/articles/article-list/article-list.component.spec.ts b/research-hub-web/src/app/components/articles/article-list/article-list.component.spec.ts
index 415487fab..c2f0b2a45 100644
--- a/research-hub-web/src/app/components/articles/article-list/article-list.component.spec.ts
+++ b/research-hub-web/src/app/components/articles/article-list/article-list.component.spec.ts
@@ -2,8 +2,10 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ApolloTestingController, ApolloTestingModule } from 'apollo-angular/testing';
 import { ArticleListComponent } from './article-list.component';
 import { SharedModule } from '@components/shared/app.shared.module';
-import { MockModule } from 'ng-mocks';
+import { MockComponent, MockModule, MockProvider } from 'ng-mocks';
 import { RouterTestingModule } from '@angular/router/testing';
+import { PageTitleService } from '@services/page-title.service';
+import { CollectionListComponent } from '@app/components/shared/collection-list/collection-list.component';
 
 describe('ArticleListComponent', () => {
   let component: ArticleListComponent;
@@ -12,11 +14,17 @@ describe('ArticleListComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ ArticleListComponent ],
+      declarations: [
+        ArticleListComponent,
+        MockComponent(CollectionListComponent)
+      ],
       imports: [
         ApolloTestingModule,
         MockModule(SharedModule),
         RouterTestingModule.withRoutes([])
+      ],
+      providers: [
+        MockProvider(PageTitleService)
       ]
     })
     .compileComponents();
diff --git a/research-hub-web/src/app/components/articles/article-list/article-list.component.ts b/research-hub-web/src/app/components/articles/article-list/article-list.component.ts
index 3da5152b7..88b6c044e 100644
--- a/research-hub-web/src/app/components/articles/article-list/article-list.component.ts
+++ b/research-hub-web/src/app/components/articles/article-list/article-list.component.ts
@@ -2,6 +2,7 @@ import { Component, OnDestroy, OnInit } from '@angular/core';
 import { AllArticlesGQL, ArticleCollection } from '@app/graphql/schema';
 import { Subscription } from 'rxjs';
 import { map } from 'rxjs/operators';
+import { PageTitleService } from '@services/page-title.service';
 
 @Component({
   selector: 'app-article-list',
@@ -9,15 +10,18 @@ import { map } from 'rxjs/operators';
   styleUrls: ['./article-list.component.scss']
 })
 export class ArticleListComponent implements OnInit, OnDestroy {
-  public articles: ArticleCollection
+  public articles: ArticleCollection;
+  public title: string = 'Article Collection';
 
   private subscription = new Subscription();
 
   constructor(
-    private allArticlesGQL: AllArticlesGQL
+    private allArticlesGQL: AllArticlesGQL,
+    public pageTitleService: PageTitleService
   ) { }
 
   ngOnInit(): void {
+    this.pageTitleService.title = this.title;
     this.subscription.add(this.allArticlesGQL.fetch().pipe(
       map((result) => result.data.articleCollection as ArticleCollection)
     ).subscribe(collection => this.articles = collection));
diff --git a/research-hub-web/src/app/components/casestudys/case-study-list/case-study-list.component.spec.ts b/research-hub-web/src/app/components/casestudys/case-study-list/case-study-list.component.spec.ts
index cecea0213..113eb65a7 100644
--- a/research-hub-web/src/app/components/casestudys/case-study-list/case-study-list.component.spec.ts
+++ b/research-hub-web/src/app/components/casestudys/case-study-list/case-study-list.component.spec.ts
@@ -2,8 +2,10 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ApolloTestingController, ApolloTestingModule } from 'apollo-angular/testing';
 import { CaseStudyListComponent } from './case-study-list.component';
 import { SharedModule } from '@components/shared/app.shared.module';
-import { MockModule } from 'ng-mocks';
+import { MockComponent, MockModule, MockProvider } from 'ng-mocks';
 import { RouterTestingModule } from '@angular/router/testing';
+import { PageTitleService } from '@services/page-title.service';
+import { CollectionListComponent } from '@app/components/shared/collection-list/collection-list.component';
 
 describe('CaseStudyListComponent', () => {
   let component: CaseStudyListComponent;
@@ -12,11 +14,17 @@ describe('CaseStudyListComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ CaseStudyListComponent ],
+      declarations: [
+        CaseStudyListComponent,
+        MockComponent(CollectionListComponent)
+      ],
       imports: [
         ApolloTestingModule,
         MockModule(SharedModule),
         RouterTestingModule.withRoutes([])
+      ],
+      providers: [
+        MockProvider(PageTitleService),
       ]
     })
     .compileComponents();
diff --git a/research-hub-web/src/app/components/casestudys/case-study-list/case-study-list.component.ts b/research-hub-web/src/app/components/casestudys/case-study-list/case-study-list.component.ts
index ab7ccdd9f..1e4c917ae 100644
--- a/research-hub-web/src/app/components/casestudys/case-study-list/case-study-list.component.ts
+++ b/research-hub-web/src/app/components/casestudys/case-study-list/case-study-list.component.ts
@@ -2,6 +2,7 @@ import { Component, OnDestroy, OnInit } from '@angular/core';
 import { AllCaseStudiesGQL, CaseStudyCollection } from '@app/graphql/schema';
 import { Subscription } from 'rxjs';
 import { map } from 'rxjs/operators';
+import { PageTitleService } from '@services/page-title.service';
 
 @Component({
   selector: 'app-case-study-list',
@@ -9,15 +10,18 @@ import { map } from 'rxjs/operators';
   styleUrls: ['./case-study-list.component.scss']
 })
 export class CaseStudyListComponent implements OnInit, OnDestroy {
-  public caseStudies: CaseStudyCollection
+  public caseStudies: CaseStudyCollection;
+  public title: string = 'Case Study Collection';
 
   private subscription = new Subscription();
 
   constructor(
-    private allCaseStudiesGQL: AllCaseStudiesGQL
+    private allCaseStudiesGQL: AllCaseStudiesGQL,
+    public pageTitleService: PageTitleService
   ) { }
 
   ngOnInit(): void {
+    this.pageTitleService.title = this.title;
     this.subscription.add(this.allCaseStudiesGQL.fetch().pipe(
       map((result) => result.data.caseStudyCollection as CaseStudyCollection)
     ).subscribe((collection) => this.caseStudies = collection));
diff --git a/research-hub-web/src/app/components/equipments/equipment-list/equipment-list.component.spec.ts b/research-hub-web/src/app/components/equipments/equipment-list/equipment-list.component.spec.ts
index fc0cfd6a9..7bdfe0f7a 100644
--- a/research-hub-web/src/app/components/equipments/equipment-list/equipment-list.component.spec.ts
+++ b/research-hub-web/src/app/components/equipments/equipment-list/equipment-list.component.spec.ts
@@ -2,8 +2,10 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ApolloTestingController, ApolloTestingModule } from 'apollo-angular/testing';
 import { EquipmentListComponent } from './equipment-list.component';
 import { SharedModule } from '@components/shared/app.shared.module';
-import { MockModule } from 'ng-mocks';
+import { MockComponent, MockModule, MockProvider } from 'ng-mocks';
 import { RouterTestingModule } from '@angular/router/testing';
+import { PageTitleService } from '@services/page-title.service';
+import { CollectionListComponent } from '@app/components/shared/collection-list/collection-list.component';
 
 describe('EquipmentListComponent', () => {
   let component: EquipmentListComponent;
@@ -12,11 +14,17 @@ describe('EquipmentListComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ EquipmentListComponent ],
+      declarations: [
+        EquipmentListComponent,
+        MockComponent(CollectionListComponent)
+      ],
       imports: [
         ApolloTestingModule,
         MockModule(SharedModule),
         RouterTestingModule.withRoutes([])
+      ],
+      providers: [
+        MockProvider(PageTitleService),
       ]
     })
     .compileComponents();
diff --git a/research-hub-web/src/app/components/equipments/equipment-list/equipment-list.component.ts b/research-hub-web/src/app/components/equipments/equipment-list/equipment-list.component.ts
index 52b3d6c84..92f5bcad2 100644
--- a/research-hub-web/src/app/components/equipments/equipment-list/equipment-list.component.ts
+++ b/research-hub-web/src/app/components/equipments/equipment-list/equipment-list.component.ts
@@ -1,5 +1,6 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { AllEquipmentGQL, EquipmentCollection } from '@app/graphql/schema';
+import { PageTitleService } from '@services/page-title.service';
 import { Subscription } from 'rxjs';
 import { map } from 'rxjs/operators';
 
@@ -10,14 +11,17 @@ import { map } from 'rxjs/operators';
 })
 export class EquipmentListComponent implements OnInit, OnDestroy {
   public equipment: EquipmentCollection;
+  public title: string = 'Equipment Collection';
 
   private subscription = new Subscription();
 
   constructor(
-    private allEquipmentGQL: AllEquipmentGQL
+    private allEquipmentGQL: AllEquipmentGQL,
+    public pageTitleService: PageTitleService
   ) { }
 
   ngOnInit(): void {
+    this.pageTitleService.title = this.title;
     this.subscription.add(this.allEquipmentGQL.fetch().pipe(
       map((result) => result.data.equipmentCollection as EquipmentCollection)
     ).subscribe((collection) => this.equipment = collection));
diff --git a/research-hub-web/src/app/components/events/event-list/event-list.component.spec.ts b/research-hub-web/src/app/components/events/event-list/event-list.component.spec.ts
index d2aee078c..a17b3c723 100644
--- a/research-hub-web/src/app/components/events/event-list/event-list.component.spec.ts
+++ b/research-hub-web/src/app/components/events/event-list/event-list.component.spec.ts
@@ -2,8 +2,10 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ApolloTestingController, ApolloTestingModule } from 'apollo-angular/testing';
 import { EventListComponent } from './event-list.component';
 import { SharedModule } from '@components/shared/app.shared.module';
-import { MockModule } from 'ng-mocks';
+import { MockComponent, MockModule, MockProvider } from 'ng-mocks';
 import { RouterTestingModule } from '@angular/router/testing';
+import { PageTitleService } from '@services/page-title.service';
+import { CollectionListComponent } from '@app/components/shared/collection-list/collection-list.component';
 
 describe('EventListComponent', () => {
   let component: EventListComponent;
@@ -12,11 +14,17 @@ describe('EventListComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ EventListComponent ],
+      declarations: [
+        EventListComponent,
+        MockComponent(CollectionListComponent)
+      ],
       imports: [
         ApolloTestingModule,
         MockModule(SharedModule),
         RouterTestingModule.withRoutes([])
+      ],
+      providers: [
+        MockProvider(PageTitleService),
       ]
     })
     .compileComponents();
diff --git a/research-hub-web/src/app/components/events/event-list/event-list.component.ts b/research-hub-web/src/app/components/events/event-list/event-list.component.ts
index 0e7273b92..fd1820901 100644
--- a/research-hub-web/src/app/components/events/event-list/event-list.component.ts
+++ b/research-hub-web/src/app/components/events/event-list/event-list.component.ts
@@ -1,5 +1,6 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { AllEventsGQL, EventCollection } from '@app/graphql/schema';
+import { PageTitleService } from '@services/page-title.service';
 import { Subscription } from 'rxjs';
 import { map } from 'rxjs/operators';
 
@@ -10,14 +11,17 @@ import { map } from 'rxjs/operators';
 })
 export class EventListComponent implements OnInit, OnDestroy {
   public events: EventCollection;
+  public title: string = 'Event Collection';
 
   private subscription = new Subscription();
 
   constructor(
-    private allEventsGQL: AllEventsGQL
+    private allEventsGQL: AllEventsGQL,
+    public pageTitleService: PageTitleService
   ) { }
 
   ngOnInit(): void {
+    this.pageTitleService.title = this.title;
     this.subscription.add(this.allEventsGQL.fetch().pipe(
       map((result) => result.data.eventCollection as EventCollection)
     ).subscribe((collection) => this.events = collection));
diff --git a/research-hub-web/src/app/components/fundings/funding-list/funding-list.component.spec.ts b/research-hub-web/src/app/components/fundings/funding-list/funding-list.component.spec.ts
index 0011e9907..ea0696621 100644
--- a/research-hub-web/src/app/components/fundings/funding-list/funding-list.component.spec.ts
+++ b/research-hub-web/src/app/components/fundings/funding-list/funding-list.component.spec.ts
@@ -2,8 +2,10 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ApolloTestingController, ApolloTestingModule } from 'apollo-angular/testing';
 import { FundingListComponent } from './funding-list.component';
 import { SharedModule } from '@components/shared/app.shared.module';
-import { MockModule } from 'ng-mocks';
+import { MockComponent, MockModule, MockProvider } from 'ng-mocks';
 import { RouterTestingModule } from '@angular/router/testing';
+import { PageTitleService } from '@services/page-title.service';
+import { CollectionListComponent } from '@app/components/shared/collection-list/collection-list.component';
 
 describe('FundingListComponent', () => {
   let component: FundingListComponent;
@@ -12,11 +14,17 @@ describe('FundingListComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ FundingListComponent ],
+      declarations: [
+        FundingListComponent,
+        MockComponent(CollectionListComponent)
+      ],
       imports: [
         ApolloTestingModule,
         MockModule(SharedModule),
         RouterTestingModule.withRoutes([])
+      ],
+      providers: [
+        MockProvider(PageTitleService),
       ]
     })
     .compileComponents();
diff --git a/research-hub-web/src/app/components/fundings/funding-list/funding-list.component.ts b/research-hub-web/src/app/components/fundings/funding-list/funding-list.component.ts
index e9c82e223..91d326abc 100644
--- a/research-hub-web/src/app/components/fundings/funding-list/funding-list.component.ts
+++ b/research-hub-web/src/app/components/fundings/funding-list/funding-list.component.ts
@@ -1,5 +1,6 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { AllFundingGQL, FundingCollection } from '@app/graphql/schema';
+import { PageTitleService } from '@services/page-title.service';
 import { Subscription } from 'rxjs';
 import { map } from 'rxjs/operators';
 
@@ -10,14 +11,17 @@ import { map } from 'rxjs/operators';
 })
 export class FundingListComponent implements OnInit, OnDestroy {
   public fundings: FundingCollection;
+  public title: string = 'Funding Collection';
 
   private subscription = new Subscription();
 
   constructor(
-    private allFundingGQL: AllFundingGQL
+    private allFundingGQL: AllFundingGQL,
+    public pageTitleService: PageTitleService
   ) { }
 
   ngOnInit(): void {
+    this.pageTitleService.title = this.title;
     this.subscription.add(this.allFundingGQL.fetch().pipe(
       map((result) => result.data.fundingCollection as FundingCollection)
     ).subscribe((collection) => this.fundings = collection));
diff --git a/research-hub-web/src/app/components/services/service-list/service-list.component.spec.ts b/research-hub-web/src/app/components/services/service-list/service-list.component.spec.ts
index 04000966b..ea9836258 100644
--- a/research-hub-web/src/app/components/services/service-list/service-list.component.spec.ts
+++ b/research-hub-web/src/app/components/services/service-list/service-list.component.spec.ts
@@ -2,8 +2,10 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ApolloTestingController, ApolloTestingModule } from 'apollo-angular/testing';
 import { ServiceListComponent } from './service-list.component';
 import { SharedModule } from '@components/shared/app.shared.module';
-import { MockModule } from 'ng-mocks';
+import { MockComponent, MockModule, MockProvider } from 'ng-mocks';
 import { RouterTestingModule } from '@angular/router/testing';
+import { PageTitleService } from '@services/page-title.service';
+import { CollectionListComponent } from '@app/components/shared/collection-list/collection-list.component';
 
 describe('ServiceListComponent', () => {
   let component: ServiceListComponent;
@@ -12,11 +14,17 @@ describe('ServiceListComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ ServiceListComponent ],
+      declarations: [
+        ServiceListComponent,
+        MockComponent(CollectionListComponent)
+      ],
       imports: [
         ApolloTestingModule,
         MockModule(SharedModule),
         RouterTestingModule.withRoutes([])
+      ],
+      providers: [
+        MockProvider(PageTitleService),
       ]
     })
     .compileComponents();
diff --git a/research-hub-web/src/app/components/services/service-list/service-list.component.ts b/research-hub-web/src/app/components/services/service-list/service-list.component.ts
index 5e232e31d..5e624a8fd 100644
--- a/research-hub-web/src/app/components/services/service-list/service-list.component.ts
+++ b/research-hub-web/src/app/components/services/service-list/service-list.component.ts
@@ -1,5 +1,6 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { AllServicesGQL, ServiceCollection } from '@app/graphql/schema';
+import { PageTitleService } from '@services/page-title.service';
 import { Subscription } from 'rxjs';
 import { map } from 'rxjs/operators';
 
@@ -10,14 +11,17 @@ import { map } from 'rxjs/operators';
 })
 export class ServiceListComponent implements OnInit, OnDestroy {
   public services: ServiceCollection;
+  public title: string = 'Service Collection';
 
   private subscription = new Subscription();
 
   constructor(
-    private allServicesGQL: AllServicesGQL
+    private allServicesGQL: AllServicesGQL,
+    public pageTitleService: PageTitleService
   ) { }
 
   ngOnInit(): void {
+    this.pageTitleService.title = this.title;
     this.subscription.add(this.allServicesGQL.fetch().pipe(
       map((result) => result.data.serviceCollection as ServiceCollection)
     ).subscribe((collection) => this.services = collection));
diff --git a/research-hub-web/src/app/components/softwares/software-list/software-list.component.spec.ts b/research-hub-web/src/app/components/softwares/software-list/software-list.component.spec.ts
index 0722e30a1..b09686d4c 100644
--- a/research-hub-web/src/app/components/softwares/software-list/software-list.component.spec.ts
+++ b/research-hub-web/src/app/components/softwares/software-list/software-list.component.spec.ts
@@ -2,8 +2,10 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ApolloTestingController, ApolloTestingModule } from 'apollo-angular/testing';
 import { SoftwareListComponent } from './software-list.component';
 import { SharedModule } from '@components/shared/app.shared.module';
-import { MockModule } from 'ng-mocks';
+import { MockComponent, MockModule, MockProvider } from 'ng-mocks';
 import { RouterTestingModule } from '@angular/router/testing';
+import { PageTitleService } from '@services/page-title.service';
+import { CollectionListComponent } from '@app/components/shared/collection-list/collection-list.component';
 
 describe('SoftwareListComponent', () => {
   let component: SoftwareListComponent;
@@ -12,11 +14,17 @@ describe('SoftwareListComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ SoftwareListComponent ],
+      declarations: [
+        SoftwareListComponent,
+        MockComponent(CollectionListComponent)
+      ],
       imports: [
         ApolloTestingModule,
         MockModule(SharedModule),
         RouterTestingModule.withRoutes([])
+      ],
+      providers: [
+        MockProvider(PageTitleService),
       ]
     })
     .compileComponents();
diff --git a/research-hub-web/src/app/components/softwares/software-list/software-list.component.ts b/research-hub-web/src/app/components/softwares/software-list/software-list.component.ts
index f69a04725..cf86bf953 100644
--- a/research-hub-web/src/app/components/softwares/software-list/software-list.component.ts
+++ b/research-hub-web/src/app/components/softwares/software-list/software-list.component.ts
@@ -1,5 +1,6 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { AllSoftwareGQL, SoftwareCollection } from '@app/graphql/schema';
+import { PageTitleService } from '@services/page-title.service';
 import { Subscription } from 'rxjs';
 import { map } from 'rxjs/operators';
 
@@ -10,14 +11,17 @@ import { map } from 'rxjs/operators';
 })
 export class SoftwareListComponent implements OnInit, OnDestroy {
   public software: SoftwareCollection;
+  public title: string = 'Software Collection';
 
   private subscription = new Subscription();
 
   constructor(
-    private allSoftwareGQL: AllSoftwareGQL
+    private allSoftwareGQL: AllSoftwareGQL,
+    public pageTitleService: PageTitleService
   ) { }
 
   ngOnInit(): void {
+    this.pageTitleService.title = this.title;
     this.subscription.add(this.allSoftwareGQL.fetch().pipe(
       map((result) => result.data.softwareCollection as SoftwareCollection)
     ).subscribe((collection) => this.software = collection));
diff --git a/research-hub-web/src/app/components/subhubs/subhub-list/subhub-list.component.spec.ts b/research-hub-web/src/app/components/subhubs/subhub-list/subhub-list.component.spec.ts
index 10bff6c79..9d9b21a5a 100644
--- a/research-hub-web/src/app/components/subhubs/subhub-list/subhub-list.component.spec.ts
+++ b/research-hub-web/src/app/components/subhubs/subhub-list/subhub-list.component.spec.ts
@@ -2,8 +2,10 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ApolloTestingController, ApolloTestingModule } from 'apollo-angular/testing';
 import { SubhubListComponent } from './subhub-list.component';
 import { SharedModule } from '@components/shared/app.shared.module';
-import { MockModule } from 'ng-mocks';
+import { MockComponent, MockModule, MockProvider } from 'ng-mocks';
 import { RouterTestingModule } from '@angular/router/testing';
+import { PageTitleService } from '@services/page-title.service';
+import { CollectionListComponent } from '@app/components/shared/collection-list/collection-list.component';
 
 describe('SubhubListComponent', () => {
   let component: SubhubListComponent;
@@ -12,11 +14,17 @@ describe('SubhubListComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ SubhubListComponent ],
+      declarations: [
+        SubhubListComponent,
+        MockComponent(CollectionListComponent)
+      ],
       imports: [
         ApolloTestingModule,
         MockModule(SharedModule),
         RouterTestingModule.withRoutes([])
+      ],
+      providers: [
+        MockProvider(PageTitleService),
       ]
     })
     .compileComponents();
diff --git a/research-hub-web/src/app/components/subhubs/subhub-list/subhub-list.component.ts b/research-hub-web/src/app/components/subhubs/subhub-list/subhub-list.component.ts
index 6588ea34d..028074952 100644
--- a/research-hub-web/src/app/components/subhubs/subhub-list/subhub-list.component.ts
+++ b/research-hub-web/src/app/components/subhubs/subhub-list/subhub-list.component.ts
@@ -1,5 +1,6 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { AllSubHubGQL, SubHubCollection } from '@app/graphql/schema';
+import { PageTitleService } from '@services/page-title.service';
 import { Subscription } from 'rxjs';
 import { map } from 'rxjs/operators';
 
@@ -10,14 +11,17 @@ import { map } from 'rxjs/operators';
 })
 export class SubhubListComponent implements OnInit, OnDestroy {
   public subhubs: SubHubCollection;
+  public title: string = 'Sub Hub Collection';
 
   private subscription = new Subscription();
 
   constructor(
-    private allSubhubGQL: AllSubHubGQL
+    private allSubhubGQL: AllSubHubGQL,
+    public pageTitleService: PageTitleService
   ) { }
 
   ngOnInit(): void {
+    this.pageTitleService.title = this.title;
     this.subscription.add(this.allSubhubGQL.fetch().pipe(
       map((result) => result.data.subHubCollection as SubHubCollection)
     ).subscribe((collection) => this.subhubs = collection));

From 8368d7e3ee4a5d4b79594d70fca253aaa8584ea8 Mon Sep 17 00:00:00 2001
From: rosemcc <rosemccoll@hotmail.com>
Date: Mon, 22 Nov 2021 16:01:26 +1300
Subject: [PATCH 32/39] content page unit tests passing and moving collection
 list tests

---
 .../article-list.component.spec.ts            |  33 ++-
 .../article/article.component.spec.ts         |  79 +++---
 .../case-study-list.component.spec.ts         |  23 ++
 .../case-study/case-study.component.spec.ts   |  72 +++---
 .../equipment-list.component.spec.ts          |  23 ++
 .../equipment/equipment.component.spec.ts     |  68 +++--
 .../event-list/event-list.component.spec.ts   |  23 ++
 .../events/event/event.component.spec.ts      |  63 ++---
 .../funding-list.component.spec.ts            |  23 ++
 .../funding/funding.component.spec.ts         |  66 ++---
 .../service-list.component.spec.ts            |  23 ++
 .../service/service.component.spec.ts         |  70 +++---
 .../software-list.component.spec.ts           |  23 ++
 .../software/software.component.spec.ts       |  70 +++---
 .../subhub-list/subhub-list.component.spec.ts | 191 +++++++++++++-
 .../subhubs/subhub/subhub.component.spec.ts   | 235 +++---------------
 16 files changed, 572 insertions(+), 513 deletions(-)

diff --git a/research-hub-web/src/app/components/articles/article-list/article-list.component.spec.ts b/research-hub-web/src/app/components/articles/article-list/article-list.component.spec.ts
index c2f0b2a45..a0ac18fa7 100644
--- a/research-hub-web/src/app/components/articles/article-list/article-list.component.spec.ts
+++ b/research-hub-web/src/app/components/articles/article-list/article-list.component.spec.ts
@@ -6,12 +6,36 @@ import { MockComponent, MockModule, MockProvider } from 'ng-mocks';
 import { RouterTestingModule } from '@angular/router/testing';
 import { PageTitleService } from '@services/page-title.service';
 import { CollectionListComponent } from '@app/components/shared/collection-list/collection-list.component';
+import { ArticleCollection } from '@app/graphql/schema';
+import { Observable, of } from 'rxjs';
 
 describe('ArticleListComponent', () => {
   let component: ArticleListComponent;
   let fixture: ComponentFixture<ArticleListComponent>;
   let controller: ApolloTestingController;
-
+  
+  const mockAllArticles$: Observable<ArticleCollection> = of({
+    'items': [
+      {
+        '__typename': 'Article',
+        'slug': 'first-article',
+        'title': 'First article',
+        'summary': 'A brief description of the first article. I\'m writing some more stuff here just so that this seems a little more realistic. Sam was here. Have a good day.',
+        'ssoProtected': false,
+        'searchable': true
+      },
+      {
+        '__typename': 'Article',
+        'slug': 'top-secret-article',
+        'title': 'Top Secret Article',
+        'summary': 'For testing SSO',
+        'ssoProtected': true,
+        'searchable': true
+      }
+    ],
+    '__typename': 'ArticleCollection'
+  } as ArticleCollection);
+  
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [
@@ -40,4 +64,11 @@ describe('ArticleListComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+  
+  // it('Should get all articles', () => {
+  //   spyOn(component, 'getAllArticles').and.returnValue(mockAllArticles$);
+  //   component.getAllArticles().subscribe(res => {
+  //     expect(res).toBeTruthy();
+  //   });
+  // });
 });
diff --git a/research-hub-web/src/app/components/articles/article/article.component.spec.ts b/research-hub-web/src/app/components/articles/article/article.component.spec.ts
index 5c487fa41..102e23d84 100644
--- a/research-hub-web/src/app/components/articles/article/article.component.spec.ts
+++ b/research-hub-web/src/app/components/articles/article/article.component.spec.ts
@@ -1,10 +1,10 @@
-import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { PageTitleService } from '@services/page-title.service';
 import { ArticleComponent } from './article.component';
 import { ApolloTestingController, ApolloTestingModule } from 'apollo-angular/testing';
 import { ActivatedRoute } from '@angular/router';
 import { Observable, of } from 'rxjs';
-import { ArticleCollection, Article } from '@graphql/schema';
+import { Article } from '@graphql/schema';
 import { CommonModule } from '@angular/common';
 import { MaterialModule } from '@app/app.material.module';
 import { SharedModule } from '@components/shared/app.shared.module';
@@ -12,33 +12,12 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterTestingModule } from '@angular/router/testing';
 import { MockComponent, MockModule, MockProvider } from 'ng-mocks';
 import { BreadcrumbsComponent } from '@app/components/shared/breadcrumbs/breadcrumbs.component';
+import { ArticleListComponent } from '../article-list/article-list.component';
 
 describe('ArticleComponent', () => {
   let component: ArticleComponent;
-  let appComponentService: PageTitleService;
   let fixture: ComponentFixture<ArticleComponent>;
   let controller: ApolloTestingController;
-  const mockAllArticles$: Observable<ArticleCollection> = of({
-    'items': [
-      {
-        '__typename': 'Article',
-        'slug': 'first-article',
-        'title': 'First article',
-        'summary': 'A brief description of the first article. I\'m writing some more stuff here just so that this seems a little more realistic. Sam was here. Have a good day.',
-        'ssoProtected': false,
-        'searchable': true
-      },
-      {
-        '__typename': 'Article',
-        'slug': 'top-secret-article',
-        'title': 'Top Secret Article',
-        'summary': 'For testing SSO',
-        'ssoProtected': true,
-        'searchable': true
-      }
-    ],
-    '__typename': 'ArticleCollection'
-  } as ArticleCollection);
 
   const mockArticle$: Observable<Article> = of({
     'title': 'First article',
@@ -258,7 +237,7 @@ describe('ArticleComponent', () => {
     '__typename': 'Article'
   } as unknown as Article);
 
-  beforeEach(waitForAsync(() => {
+  beforeEach(waitForAsync (() => {
     TestBed.configureTestingModule({
       declarations: [
         ArticleComponent,
@@ -270,7 +249,9 @@ describe('ArticleComponent', () => {
         MockModule(MaterialModule),
         MockModule(SharedModule),
         MockModule(BrowserAnimationsModule),
-        RouterTestingModule.withRoutes([])
+        RouterTestingModule.withRoutes([
+          { path: 'article/list', component: ArticleListComponent }
+        ])
       ], providers: [
         MockProvider(PageTitleService)
       ]
@@ -284,7 +265,6 @@ describe('ArticleComponent', () => {
     fixture.detectChanges();
   });
 
-
   afterEach(() => {
     fixture.destroy();
   });
@@ -293,29 +273,28 @@ describe('ArticleComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  // it('Should get all articles', () => {
-  //   spyOn(component, 'getAllArticles').and.returnValue(mockAllArticles$);
-  //   component.getAllArticles().subscribe(res => {
-  //     expect(res).toBeTruthy();
-  //   });
-  // })
+  describe('When a url slug is present', async () => {
+    const testSlug: string = 'first-article';
 
-  // describe('When a url slug is present', async () => {
-  //   beforeEach(() => {
-  //     controller = TestBed.inject(ApolloTestingController);
-  //     fixture = TestBed.createComponent(ArticleComponent);
-  //     component = fixture.componentInstance;
-  //     TestBed.inject(ActivatedRoute).params = of({
-  //       slug: 'first-article'
-  //     });
-  //     fixture.detectChanges();
-  //   });
+    beforeEach(() => {
+      controller = TestBed.inject(ApolloTestingController);
+      fixture = TestBed.createComponent(ArticleComponent);
+      component = fixture.componentInstance;
+      TestBed.inject(ActivatedRoute).params = of({
+        slug: testSlug
+      });
+      fixture.detectChanges();
+      component.ngOnInit();
+    });
 
-  //   it('Should get a single article data', () => {
-  //     spyOn(component, 'getArticleBySlug').and.returnValue(mockArticle$);
-  //     component.getArticleBySlug(component.slug).subscribe(res => {
-  //       expect(res.slug).toEqual('first-article');
-  //     });
-  //   });
-  // });
+    it('Should get a single article data', () => {
+      spyOn(component, 'getArticleBySlug').and.returnValue(mockArticle$);
+
+      fixture.whenStable().then(() => {
+        component.getArticleBySlug(testSlug).subscribe(res => {
+          expect(res.slug).toEqual(testSlug);
+        });
+      })
+    });
+  });
 });
diff --git a/research-hub-web/src/app/components/casestudys/case-study-list/case-study-list.component.spec.ts b/research-hub-web/src/app/components/casestudys/case-study-list/case-study-list.component.spec.ts
index 113eb65a7..9422af0ec 100644
--- a/research-hub-web/src/app/components/casestudys/case-study-list/case-study-list.component.spec.ts
+++ b/research-hub-web/src/app/components/casestudys/case-study-list/case-study-list.component.spec.ts
@@ -6,12 +6,28 @@ import { MockComponent, MockModule, MockProvider } from 'ng-mocks';
 import { RouterTestingModule } from '@angular/router/testing';
 import { PageTitleService } from '@services/page-title.service';
 import { CollectionListComponent } from '@app/components/shared/collection-list/collection-list.component';
+import { CaseStudyCollection } from '@app/graphql/schema';
+import { Observable, of } from 'rxjs';
 
 describe('CaseStudyListComponent', () => {
   let component: CaseStudyListComponent;
   let fixture: ComponentFixture<CaseStudyListComponent>;
   let controller: ApolloTestingController;
 
+  const mockAllCaseStudy$: Observable<CaseStudyCollection> = of({
+    'items': [
+      {
+        '__typename': 'CaseStudy',
+        'slug': 'death-star',
+        'title': 'Death Star',
+        'summary': 'Mobile space station and galactic superweapon.',
+        'ssoProtected': true,
+        'searchable': false
+      }
+    ],
+    '__typename': 'CaseStudyCollection'
+  } as CaseStudyCollection);
+
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [
@@ -40,4 +56,11 @@ describe('CaseStudyListComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  // it('Should get all case studies', () => {
+  //   spyOn(component, 'getAllCaseStudy').and.returnValue(mockAllCaseStudy$);
+  //   component.getAllCaseStudy().subscribe(res => {
+  //     expect(res).toBeTruthy();
+  //   });
+  // });
 });
diff --git a/research-hub-web/src/app/components/casestudys/case-study/case-study.component.spec.ts b/research-hub-web/src/app/components/casestudys/case-study/case-study.component.spec.ts
index 43c7db5c7..5326d7101 100644
--- a/research-hub-web/src/app/components/casestudys/case-study/case-study.component.spec.ts
+++ b/research-hub-web/src/app/components/casestudys/case-study/case-study.component.spec.ts
@@ -10,29 +10,15 @@ import { ActivatedRoute } from '@angular/router';
 import { Observable, of } from 'rxjs';
 import { CaseStudyComponent } from './case-study.component';
 import { PageTitleService } from '@services/page-title.service';
-import { CaseStudy, CaseStudyCollection } from '@app/graphql/schema';
+import { CaseStudy } from '@app/graphql/schema';
 import { BreadcrumbsComponent } from '@app/components/shared/breadcrumbs/breadcrumbs.component';
+import { CaseStudyListComponent } from '../case-study-list/case-study-list.component';
 
 describe('CaseStudyComponent', () => {
   let component: CaseStudyComponent;
-  let appComponentService: PageTitleService;
   let fixture: ComponentFixture<CaseStudyComponent>;
   let controller: ApolloTestingController;
 
-  const mockAllCaseStudy$: Observable<CaseStudyCollection> = of({
-    'items': [
-      {
-        '__typename': 'CaseStudy',
-        'slug': 'death-star',
-        'title': 'Death Star',
-        'summary': 'Mobile space station and galactic superweapon.',
-        'ssoProtected': true,
-        'searchable': false
-      }
-    ],
-    '__typename': 'CaseStudyCollection'
-  } as CaseStudyCollection);
-
   const mockCaseStudy$: Observable<CaseStudy> = of(
     {
       '__typename': 'CaseStudy',
@@ -42,9 +28,9 @@ describe('CaseStudyComponent', () => {
       'slug': 'death-star',
       'title': 'Death Star',
       'summary': 'Mobile space station and galactic superweapon.',
-      'ssoProtected': true,
+      'ssoProtected': false,
       'searchable': false
-    } as CaseStudy);
+    } as unknown as CaseStudy);
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
@@ -58,7 +44,9 @@ describe('CaseStudyComponent', () => {
         MockModule(MaterialModule),
         MockModule(SharedModule),
         MockModule(BrowserAnimationsModule),
-        RouterTestingModule.withRoutes([])
+        RouterTestingModule.withRoutes([
+          { path: 'casestudy/list', component: CaseStudyListComponent }
+        ])
       ], providers: [
         MockProvider(PageTitleService)
       ]
@@ -81,30 +69,28 @@ describe('CaseStudyComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  // it('Should get all case studies', () => {
-  //   spyOn(component, 'getAllCaseStudy').and.returnValue(mockAllCaseStudy$);
-  //   component.getAllCaseStudy().subscribe(res => {
-  //     expect(res).toBeTruthy();
-  //   });
-  // });
-
-  // describe('When a url slug is present', async () => {
-  //   beforeEach(() => {
-  //     controller = TestBed.inject(ApolloTestingController);
-  //     fixture = TestBed.createComponent(CaseStudyComponent);
-  //     component = fixture.componentInstance;
-  //     TestBed.inject(ActivatedRoute).params = of({
-  //       slug: 'death-star'
-  //     });
-  //     fixture.detectChanges();
-  //   });
+  describe('When a url slug is present', async () => {
+    const testSlug: string = 'death-star';
 
-  //   it('Should get a single case study data', () => {
-  //     spyOn(component, 'getCaseStudyBySlug').and.returnValue(mockCaseStudy$);
-  //     component.getCaseStudyBySlug(component.slug).subscribe(res => {
-  //       expect(res.slug).toEqual('death-star');
-  //     });
-  //   });
-  // });
+    beforeEach(() => {
+      controller = TestBed.inject(ApolloTestingController);
+      fixture = TestBed.createComponent(CaseStudyComponent);
+      component = fixture.componentInstance;
+      TestBed.inject(ActivatedRoute).params = of({
+        slug: testSlug
+      });
+      fixture.detectChanges();
+      component.ngOnInit();
+    });
 
+    it('Should get a single case study data', () => {
+      spyOn(component, 'getCaseStudyBySlug').and.returnValue(mockCaseStudy$);
+      
+      fixture.whenStable().then(() => {        
+        component.getCaseStudyBySlug(testSlug).subscribe(res => {
+          expect(res.slug).toEqual(testSlug);
+        });
+      })
+    });
+  });
 });
diff --git a/research-hub-web/src/app/components/equipments/equipment-list/equipment-list.component.spec.ts b/research-hub-web/src/app/components/equipments/equipment-list/equipment-list.component.spec.ts
index 7bdfe0f7a..aab3a461d 100644
--- a/research-hub-web/src/app/components/equipments/equipment-list/equipment-list.component.spec.ts
+++ b/research-hub-web/src/app/components/equipments/equipment-list/equipment-list.component.spec.ts
@@ -6,12 +6,28 @@ import { MockComponent, MockModule, MockProvider } from 'ng-mocks';
 import { RouterTestingModule } from '@angular/router/testing';
 import { PageTitleService } from '@services/page-title.service';
 import { CollectionListComponent } from '@app/components/shared/collection-list/collection-list.component';
+import { EquipmentCollection } from '@app/graphql/schema';
+import { Observable, of } from 'rxjs';
 
 describe('EquipmentListComponent', () => {
   let component: EquipmentListComponent;
   let fixture: ComponentFixture<EquipmentListComponent>;
   let controller: ApolloTestingController;
 
+  const mockAllEquipment$: Observable<EquipmentCollection> = of({
+    'items': [
+      {
+        '__typename': 'Equipment',
+        'slug': 'death-star',
+        'title': 'Death Star',
+        'summary': 'Mobile space station and galactic superweapon.',
+        'ssoProtected': true,
+        'searchable': false
+      }
+    ],
+    '__typename': 'EquipmentCollection'
+  } as EquipmentCollection);
+  
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [
@@ -40,4 +56,11 @@ describe('EquipmentListComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+  
+  // it('Should get all equipment', () => {
+  //   spyOn(component, 'getAllEquipment').and.returnValue(mockAllEquipment$);
+  //   component.getAllEquipment().subscribe(res => {
+  //     expect(res).toBeTruthy();
+  //   });
+  // })
 });
diff --git a/research-hub-web/src/app/components/equipments/equipment/equipment.component.spec.ts b/research-hub-web/src/app/components/equipments/equipment/equipment.component.spec.ts
index 2491ea10b..c729e97fc 100644
--- a/research-hub-web/src/app/components/equipments/equipment/equipment.component.spec.ts
+++ b/research-hub-web/src/app/components/equipments/equipment/equipment.component.spec.ts
@@ -2,9 +2,9 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { PageTitleService } from '@services/page-title.service';
 import { EquipmentComponent } from './equipment.component';
 import { ApolloTestingController, ApolloTestingModule } from 'apollo-angular/testing';
-import { RouterModule, ActivatedRoute } from '@angular/router';
+import { ActivatedRoute } from '@angular/router';
 import { Observable, of } from 'rxjs';
-import { EquipmentCollection, AllEquipmentGQL, Equipment } from '@graphql/schema';
+import { Equipment } from '@graphql/schema';
 import { CommonModule } from '@angular/common';
 import { MaterialModule } from '@app/app.material.module';
 import { SharedModule } from '@components/shared/app.shared.module';
@@ -12,26 +12,13 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
 import { MockComponent, MockModule, MockProvider } from 'ng-mocks';
 import { RouterTestingModule } from '@angular/router/testing';
 import { BreadcrumbsComponent } from '@app/components/shared/breadcrumbs/breadcrumbs.component';
+import { EquipmentListComponent } from '../equipment-list/equipment-list.component';
 
 describe('EquipmentComponent', () => {
   let component: EquipmentComponent;
   let fixture: ComponentFixture<EquipmentComponent>;
   let controller: ApolloTestingController;
 
-  const mockAllEquipment$: Observable<EquipmentCollection> = of({
-    'items': [
-      {
-        '__typename': 'Equipment',
-        'slug': 'death-star',
-        'title': 'Death Star',
-        'summary': 'Mobile space station and galactic superweapon.',
-        'ssoProtected': true,
-        'searchable': false
-      }
-    ],
-    '__typename': 'EquipmentCollection'
-  } as EquipmentCollection);
-
   const mockEquipment$: Observable<Equipment> = of(
     {
       '__typename': 'Equipment',
@@ -52,7 +39,9 @@ describe('EquipmentComponent', () => {
         MockComponent(BreadcrumbsComponent)
       ],
       imports: [
-        RouterTestingModule,
+        RouterTestingModule.withRoutes([
+          { path: 'equipment/list', component: EquipmentListComponent }
+        ]),
         ApolloTestingModule,
         MockModule(CommonModule),
         MockModule(MaterialModule),
@@ -81,29 +70,28 @@ describe('EquipmentComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  // it('Should get all equipment', () => {
-  //   spyOn(component, 'getAllEquipment').and.returnValue(mockAllEquipment$);
-  //   component.getAllEquipment().subscribe(res => {
-  //     expect(res).toBeTruthy();
-  //   });
-  // })
+  describe('When a url slug is present', async () => {
+    const testSlug: string = 'death-star';
+    
+    beforeEach(() => {
+      controller = TestBed.inject(ApolloTestingController);
+      fixture = TestBed.createComponent(EquipmentComponent);
+      component = fixture.componentInstance;
+      TestBed.inject(ActivatedRoute).params = of({
+        slug: testSlug
+      });
+      fixture.detectChanges();
+      component.ngOnInit();
+    })
 
-  // describe('When a url slug is present', async () => {
-  //   beforeEach(() => {
-  //     controller = TestBed.inject(ApolloTestingController);
-  //     fixture = TestBed.createComponent(EquipmentComponent);
-  //     component = fixture.componentInstance;
-  //     TestBed.inject(ActivatedRoute).params = of({
-  //       slug: 'death-star'
-  //     });
-  //     fixture.detectChanges();
-  //   })
+    it('Should get a single equipment data by Slug', () => {
+      spyOn(component, 'getEquipmentBySlug').and.returnValue(mockEquipment$);
 
-  //   it('Should get a single equipment data by Slug', () => {
-  //     spyOn(component, 'getEquipmentBySlug').and.returnValue(mockEquipment$);
-  //     component.getEquipmentBySlug(component.slug).subscribe(res => {
-  //       expect(res.slug).toEqual('death-star');
-  //     });
-  //   })
-  // });
+      fixture.whenStable().then(() => {
+        component.getEquipmentBySlug(testSlug).subscribe(res => {
+          expect(res.slug).toEqual(testSlug);
+        });
+      })
+    })
+  });
 });
diff --git a/research-hub-web/src/app/components/events/event-list/event-list.component.spec.ts b/research-hub-web/src/app/components/events/event-list/event-list.component.spec.ts
index a17b3c723..32ce9a002 100644
--- a/research-hub-web/src/app/components/events/event-list/event-list.component.spec.ts
+++ b/research-hub-web/src/app/components/events/event-list/event-list.component.spec.ts
@@ -6,12 +6,28 @@ import { MockComponent, MockModule, MockProvider } from 'ng-mocks';
 import { RouterTestingModule } from '@angular/router/testing';
 import { PageTitleService } from '@services/page-title.service';
 import { CollectionListComponent } from '@app/components/shared/collection-list/collection-list.component';
+import { EventCollection } from '@app/graphql/schema';
+import { Observable, of } from 'rxjs';
 
 describe('EventListComponent', () => {
   let component: EventListComponent;
   let fixture: ComponentFixture<EventListComponent>;
   let controller: ApolloTestingController;
 
+  const mockAllEvent$: Observable<EventCollection> = of({
+    'items': [
+      {
+        '__typename': 'Event',
+        'slug': 'death-star',
+        'title': 'Death Star',
+        'summary': 'Mobile space station and galactic superweapon.',
+        'ssoProtected': true,
+        'searchable': false
+      }
+    ],
+    '__typename': 'EventCollection'
+  } as EventCollection);
+
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [
@@ -40,4 +56,11 @@ describe('EventListComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  // it('should get all events', () => {
+  //   spyOn(component, 'getAllEvents').and.returnValue(mockAllEvent$);
+  //   component.getAllEvents().subscribe(res => {
+  //     expect(res).toBeTruthy();
+  //   });
+  // })
 });
diff --git a/research-hub-web/src/app/components/events/event/event.component.spec.ts b/research-hub-web/src/app/components/events/event/event.component.spec.ts
index cfac60b19..5840826fe 100644
--- a/research-hub-web/src/app/components/events/event/event.component.spec.ts
+++ b/research-hub-web/src/app/components/events/event/event.component.spec.ts
@@ -4,7 +4,7 @@ import { EventComponent } from './event.component';
 import { ApolloTestingController, ApolloTestingModule } from 'apollo-angular/testing';
 import { ActivatedRoute } from '@angular/router';
 import { Observable, of } from 'rxjs';
-import { EventCollection, Event } from '@graphql/schema';
+import { Event } from '@graphql/schema';
 import { CommonModule } from '@angular/common';
 import { MaterialModule } from '@app/app.material.module';
 import { SharedModule } from '@components/shared/app.shared.module';
@@ -12,26 +12,13 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterTestingModule } from '@angular/router/testing';
 import { MockComponent, MockModule, MockProvider } from 'ng-mocks';
 import { BreadcrumbsComponent } from '@app/components/shared/breadcrumbs/breadcrumbs.component';
+import { EventListComponent } from '../event-list/event-list.component';
 
 describe('EventsComponent', () => {
   let component: EventComponent;
   let fixture: ComponentFixture<EventComponent>;
   let controller: ApolloTestingController;
 
-  const mockAllEvent$: Observable<EventCollection> = of({
-    'items': [
-      {
-        '__typename': 'Event',
-        'slug': 'death-star',
-        'title': 'Death Star',
-        'summary': 'Mobile space station and galactic superweapon.',
-        'ssoProtected': true,
-        'searchable': false
-      }
-    ],
-    '__typename': 'EventCollection'
-  } as EventCollection);
-
   const mockEvent$: Observable<Event> = of(
     {
       '__typename': 'Event',
@@ -52,7 +39,9 @@ describe('EventsComponent', () => {
         MockComponent(BreadcrumbsComponent)
       ],
       imports: [
-        RouterTestingModule,
+        RouterTestingModule.withRoutes([
+          { path: 'event/list', component: EventListComponent }
+        ]),
         ApolloTestingModule,
         MockModule(CommonModule),
         MockModule(MaterialModule),
@@ -80,29 +69,25 @@ describe('EventsComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  // it('should get all events', () => {
-  //   spyOn(component, 'getAllEvents').and.returnValue(mockAllEvent$);
-  //   component.getAllEvents().subscribe(res => {
-  //     expect(res).toBeTruthy();
-  //   });
-  // })
+  describe('When a url slug is present', async () => {
+    const testSlug: string = 'death-star';
 
-  // describe('When a url slug is present', async () => {
-  //   beforeEach(() => {
-  //     controller = TestBed.inject(ApolloTestingController);
-  //     fixture = TestBed.createComponent(EventComponent);
-  //     component = fixture.componentInstance;
-  //     TestBed.inject(ActivatedRoute).params = of({
-  //       slug: 'death-star'
-  //     });
-  //     fixture.detectChanges();
-  //   })
+    beforeEach(() => {
+      controller = TestBed.inject(ApolloTestingController);
+      fixture = TestBed.createComponent(EventComponent);
+      component = fixture.componentInstance;
+      TestBed.inject(ActivatedRoute).params = of({
+        slug: testSlug
+      });
+      fixture.detectChanges();
+      component.ngOnInit();
+    })
 
-  //   it('Should get a single Event data by Slug', () => {
-  //     spyOn(component, 'getEventBySlug').and.returnValue(mockEvent$);
-  //     component.getEventBySlug(component.slug).subscribe(res => {
-  //       expect(res.slug).toEqual('death-star');
-  //     });
-  //   })
-  // });
+    it('Should get a single Event data by Slug', () => {
+      spyOn(component, 'getEventBySlug').and.returnValue(mockEvent$);
+      component.getEventBySlug(testSlug).subscribe(res => {
+        expect(res.slug).toEqual(testSlug);
+      });
+    })
+  });
 });
diff --git a/research-hub-web/src/app/components/fundings/funding-list/funding-list.component.spec.ts b/research-hub-web/src/app/components/fundings/funding-list/funding-list.component.spec.ts
index ea0696621..ea7ff95b7 100644
--- a/research-hub-web/src/app/components/fundings/funding-list/funding-list.component.spec.ts
+++ b/research-hub-web/src/app/components/fundings/funding-list/funding-list.component.spec.ts
@@ -6,12 +6,28 @@ import { MockComponent, MockModule, MockProvider } from 'ng-mocks';
 import { RouterTestingModule } from '@angular/router/testing';
 import { PageTitleService } from '@services/page-title.service';
 import { CollectionListComponent } from '@app/components/shared/collection-list/collection-list.component';
+import { FundingCollection } from '@app/graphql/schema';
+import { Observable, of } from 'rxjs';
 
 describe('FundingListComponent', () => {
   let component: FundingListComponent;
   let fixture: ComponentFixture<FundingListComponent>;
   let controller: ApolloTestingController;
 
+  const mockAllFunding$: Observable<FundingCollection> = of({
+    'items': [
+      {
+        '__typename': 'Funding',
+        'slug': 'death-star',
+        'title': 'Death Star',
+        'summary': 'Mobile space station and galactic superweapon.',
+        'ssoProtected': true,
+        'searchable': false
+      }
+    ],
+    '__typename': 'FundingCollection'
+  } as FundingCollection);
+
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [
@@ -40,4 +56,11 @@ describe('FundingListComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  // it('should get all fundings', () => {
+  //   spyOn(component, 'getAllFundings').and.returnValue(mockAllFunding$);
+  //   component.getAllFundings().subscribe(res => {
+  //     expect(res).toBeTruthy();
+  //   });
+  // })
 });
diff --git a/research-hub-web/src/app/components/fundings/funding/funding.component.spec.ts b/research-hub-web/src/app/components/fundings/funding/funding.component.spec.ts
index c5f331d62..1cacfeb5e 100644
--- a/research-hub-web/src/app/components/fundings/funding/funding.component.spec.ts
+++ b/research-hub-web/src/app/components/fundings/funding/funding.component.spec.ts
@@ -4,7 +4,7 @@ import { FundingComponent } from './funding.component';
 import { ApolloTestingController, ApolloTestingModule } from 'apollo-angular/testing';
 import { ActivatedRoute } from '@angular/router';
 import { Observable, of } from 'rxjs';
-import { FundingCollection, Funding } from '@graphql/schema';
+import { Funding } from '@graphql/schema';
 import { CommonModule } from '@angular/common';
 import { MaterialModule } from '@app/app.material.module';
 import { SharedModule } from '@components/shared/app.shared.module';
@@ -12,26 +12,13 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterTestingModule } from '@angular/router/testing';
 import { MockComponent, MockModule, MockProvider } from 'ng-mocks';
 import { BreadcrumbsComponent } from '@app/components/shared/breadcrumbs/breadcrumbs.component';
+import { FundingListComponent } from '../funding-list/funding-list.component';
 
 describe('FundingsComponent', () => {
   let component: FundingComponent;
   let fixture: ComponentFixture<FundingComponent>;
   let controller: ApolloTestingController;
 
-  const mockAllFunding$: Observable<FundingCollection> = of({
-    'items': [
-      {
-        '__typename': 'Funding',
-        'slug': 'death-star',
-        'title': 'Death Star',
-        'summary': 'Mobile space station and galactic superweapon.',
-        'ssoProtected': true,
-        'searchable': false
-      }
-    ],
-    '__typename': 'FundingCollection'
-  } as FundingCollection);
-
   const mockFunding$: Observable<Funding> = of(
     {
       '__typename': 'Funding',
@@ -52,7 +39,9 @@ describe('FundingsComponent', () => {
         MockComponent(BreadcrumbsComponent)
       ],
       imports: [
-        RouterTestingModule,
+        RouterTestingModule.withRoutes([
+          { path: 'funding/list', component: FundingListComponent }
+        ]),
         ApolloTestingModule,
         MockModule(CommonModule),
         MockModule(MaterialModule),
@@ -80,29 +69,28 @@ describe('FundingsComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  // it('should get all fundings', () => {
-  //   spyOn(component, 'getAllFundings').and.returnValue(mockAllFunding$);
-  //   component.getAllFundings().subscribe(res => {
-  //     expect(res).toBeTruthy();
-  //   });
-  // })
+  describe('When a url slug is present', async () => {
+    const testSlug: string = 'death-star';
+
+    beforeEach(() => {
+      controller = TestBed.inject(ApolloTestingController);
+      fixture = TestBed.createComponent(FundingComponent);
+      component = fixture.componentInstance;
+      TestBed.inject(ActivatedRoute).params = of({
+        slug: testSlug
+      });
+      fixture.detectChanges();
+      component.ngOnInit();
+    })
 
-  // describe('When a url slug is present', async () => {
-  //   beforeEach(() => {
-  //     controller = TestBed.inject(ApolloTestingController);
-  //     fixture = TestBed.createComponent(FundingComponent);
-  //     component = fixture.componentInstance;
-  //     TestBed.inject(ActivatedRoute).params = of({
-  //       slug: 'death-star'
-  //     });
-  //     fixture.detectChanges();
-  //   })
+    it('Should get a single Funding data by Slug', () => {
+      spyOn(component, 'getFundingBySlug').and.returnValue(mockFunding$);
 
-  //   it('Should get a single Funding data by Slug', () => {
-  //     spyOn(component, 'getFundingBySlug').and.returnValue(mockFunding$);
-  //     component.getFundingBySlug(component.slug).subscribe(res => {
-  //       expect(res.slug).toEqual('death-star');
-  //     });
-  //   })
-  // });
+      fixture.whenStable().then(() => {
+        component.getFundingBySlug(testSlug).subscribe(res => {
+          expect(res.slug).toEqual(testSlug);
+        });
+      })
+    })
+  });
 });
diff --git a/research-hub-web/src/app/components/services/service-list/service-list.component.spec.ts b/research-hub-web/src/app/components/services/service-list/service-list.component.spec.ts
index ea9836258..4466cbce2 100644
--- a/research-hub-web/src/app/components/services/service-list/service-list.component.spec.ts
+++ b/research-hub-web/src/app/components/services/service-list/service-list.component.spec.ts
@@ -6,12 +6,28 @@ import { MockComponent, MockModule, MockProvider } from 'ng-mocks';
 import { RouterTestingModule } from '@angular/router/testing';
 import { PageTitleService } from '@services/page-title.service';
 import { CollectionListComponent } from '@app/components/shared/collection-list/collection-list.component';
+import { ServiceCollection } from '@app/graphql/schema';
+import { Observable, of } from 'rxjs';
 
 describe('ServiceListComponent', () => {
   let component: ServiceListComponent;
   let fixture: ComponentFixture<ServiceListComponent>;
   let controller: ApolloTestingController;
 
+  const mockAllServices$: Observable<ServiceCollection> = of({
+    'items': [
+      {
+        '__typename': 'Service',
+        'slug': 'death-star',
+        'title': 'Death Star',
+        'summary': 'Mobile space station and galactic superweapon.',
+        'ssoProtected': true,
+        'searchable': false
+      }
+    ],
+    '__typename': 'ServiceCollection'
+  } as ServiceCollection);
+
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [
@@ -40,4 +56,11 @@ describe('ServiceListComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  // it('Should get all Service', () => {
+  //   spyOn(component, 'getAllServices').and.returnValue(mockAllServices$);
+  //   component.getAllServices().subscribe(res => {
+  //     expect(res).toBeTruthy();
+  //   });
+  // })
 });
diff --git a/research-hub-web/src/app/components/services/service/service.component.spec.ts b/research-hub-web/src/app/components/services/service/service.component.spec.ts
index 92b83472b..679135583 100644
--- a/research-hub-web/src/app/components/services/service/service.component.spec.ts
+++ b/research-hub-web/src/app/components/services/service/service.component.spec.ts
@@ -2,9 +2,9 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { PageTitleService } from '@services/page-title.service';
 import { ServiceComponent } from './service.component';
 import { ApolloTestingController, ApolloTestingModule } from 'apollo-angular/testing';
-import { RouterModule, ActivatedRoute } from '@angular/router';
+import { ActivatedRoute } from '@angular/router';
 import { Observable, of } from 'rxjs';
-import { ServiceCollection, AllServicesGQL, Service } from '@graphql/schema';
+import { Service } from '@graphql/schema';
 import { CommonModule } from '@angular/common';
 import { MaterialModule } from '@app/app.material.module';
 import { SharedModule } from '@components/shared/app.shared.module';
@@ -12,26 +12,13 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
 import { RouterTestingModule } from '@angular/router/testing';
 import { MockComponent, MockModule, MockProvider } from 'ng-mocks';
 import { BreadcrumbsComponent } from '@app/components/shared/breadcrumbs/breadcrumbs.component';
+import { ServiceListComponent } from '../service-list/service-list.component';
 
-describe('ServicesComponent', () => {
+describe('ServiceComponent', () => {
   let component: ServiceComponent;
   let fixture: ComponentFixture<ServiceComponent>;
   let controller: ApolloTestingController;
 
-  const mockAllServices$: Observable<ServiceCollection> = of({
-    'items': [
-      {
-        '__typename': 'Service',
-        'slug': 'death-star',
-        'title': 'Death Star',
-        'summary': 'Mobile space station and galactic superweapon.',
-        'ssoProtected': true,
-        'searchable': false
-      }
-    ],
-    '__typename': 'ServiceCollection'
-  } as ServiceCollection);
-
   const mockService$: Observable<Service> = of(
     {
       '__typename': 'Service',
@@ -52,7 +39,9 @@ describe('ServicesComponent', () => {
         MockComponent(BreadcrumbsComponent)
       ],
       imports: [
-        RouterTestingModule,
+        RouterTestingModule.withRoutes([
+          { path: 'service/list', component: ServiceListComponent }
+        ]),
         ApolloTestingModule,
         MockModule(CommonModule),
         MockModule(MaterialModule),
@@ -80,29 +69,28 @@ describe('ServicesComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  // it('Should get all Service', () => {
-  //   spyOn(component, 'getAllServices').and.returnValue(mockAllServices$);
-  //   component.getAllServices().subscribe(res => {
-  //     expect(res).toBeTruthy();
-  //   });
-  // })
+  describe('When a url slug is present', async () => {
+    const testSlug: string = 'death-star';
+
+    beforeEach(() => {
+      controller = TestBed.inject(ApolloTestingController);
+      fixture = TestBed.createComponent(ServiceComponent);
+      component = fixture.componentInstance;
+      TestBed.inject(ActivatedRoute).params = of({
+        slug: testSlug
+      });
+      fixture.detectChanges();
+      component.ngOnInit();
+    })
 
-  // describe('When a url slug is present', async () => {
-  //   beforeEach(() => {
-  //     controller = TestBed.inject(ApolloTestingController);
-  //     fixture = TestBed.createComponent(ServiceComponent);
-  //     component = fixture.componentInstance;
-  //     TestBed.inject(ActivatedRoute).params = of({
-  //       slug: 'death-star'
-  //     });
-  //     fixture.detectChanges();
-  //   })
+    it('Should get a single service data by Slug', () => {
+      spyOn(component, 'getServiceBySlug').and.returnValue(mockService$);
 
-  //   it('Should get a single service data by Slug', () => {
-  //     spyOn(component, 'getServiceBySlug').and.returnValue(mockService$);
-  //     component.getServiceBySlug(component.slug).subscribe(res => {
-  //       expect(res.slug).toEqual('death-star');
-  //     });
-  //   })
-  // });
+      fixture.whenStable().then(() => {
+        component.getServiceBySlug(testSlug).subscribe(res => {
+          expect(res.slug).toEqual(testSlug);
+        });
+      })
+    })
+  });
 });
diff --git a/research-hub-web/src/app/components/softwares/software-list/software-list.component.spec.ts b/research-hub-web/src/app/components/softwares/software-list/software-list.component.spec.ts
index b09686d4c..359b689ef 100644
--- a/research-hub-web/src/app/components/softwares/software-list/software-list.component.spec.ts
+++ b/research-hub-web/src/app/components/softwares/software-list/software-list.component.spec.ts
@@ -6,12 +6,28 @@ import { MockComponent, MockModule, MockProvider } from 'ng-mocks';
 import { RouterTestingModule } from '@angular/router/testing';
 import { PageTitleService } from '@services/page-title.service';
 import { CollectionListComponent } from '@app/components/shared/collection-list/collection-list.component';
+import { SoftwareCollection } from '@app/graphql/schema';
+import { Observable, of } from 'rxjs';
 
 describe('SoftwareListComponent', () => {
   let component: SoftwareListComponent;
   let fixture: ComponentFixture<SoftwareListComponent>;
   let controller: ApolloTestingController;
 
+  const mockAllSoftware$: Observable<SoftwareCollection> = of({
+    'items': [
+      {
+        '__typename': 'Software',
+        'slug': 'death-star',
+        'title': 'Death Star',
+        'summary': 'Mobile space station and galactic superweapon.',
+        'ssoProtected': true,
+        'searchable': false
+      }
+    ],
+    '__typename': 'SoftwareCollection'
+  } as SoftwareCollection);
+
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [
@@ -40,4 +56,11 @@ describe('SoftwareListComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  // it('Should get all Software', () => {
+  //   spyOn(component, 'getAllSoftware').and.returnValue(mockAllSoftware$);
+  //   component.getAllSoftware().subscribe(res => {
+  //     expect(res).toBeTruthy();
+  //   });
+  // })
 });
diff --git a/research-hub-web/src/app/components/softwares/software/software.component.spec.ts b/research-hub-web/src/app/components/softwares/software/software.component.spec.ts
index a2adad120..e21c47d96 100644
--- a/research-hub-web/src/app/components/softwares/software/software.component.spec.ts
+++ b/research-hub-web/src/app/components/softwares/software/software.component.spec.ts
@@ -2,9 +2,9 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { PageTitleService } from '@services/page-title.service';
 import { SoftwareComponent } from './software.component';
 import { ApolloTestingController, ApolloTestingModule } from 'apollo-angular/testing';
-import { RouterModule, ActivatedRoute } from '@angular/router';
+import { ActivatedRoute } from '@angular/router';
 import { Observable, of } from 'rxjs';
-import { SoftwareCollection, AllSoftwareGQL, Software } from '@graphql/schema';
+import { Software } from '@graphql/schema';
 import { CommonModule } from '@angular/common';
 import { MaterialModule } from '@app/app.material.module';
 import { SharedModule } from '@components/shared/app.shared.module';
@@ -12,26 +12,13 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
 import { RouterTestingModule } from '@angular/router/testing';
 import { MockComponent, MockModule, MockProvider } from 'ng-mocks';
 import { BreadcrumbsComponent } from '@app/components/shared/breadcrumbs/breadcrumbs.component';
+import { SoftwareListComponent } from '../software-list/software-list.component';
 
-describe('SoftwaresComponent', () => {
+describe('SoftwareComponent', () => {
   let component: SoftwareComponent;
   let fixture: ComponentFixture<SoftwareComponent>;
   let controller: ApolloTestingController;
 
-  const mockAllSoftware$: Observable<SoftwareCollection> = of({
-    'items': [
-      {
-        '__typename': 'Software',
-        'slug': 'death-star',
-        'title': 'Death Star',
-        'summary': 'Mobile space station and galactic superweapon.',
-        'ssoProtected': true,
-        'searchable': false
-      }
-    ],
-    '__typename': 'SoftwareCollection'
-  } as SoftwareCollection);
-
   const mockSoftware$: Observable<Software> = of(
     {
       '__typename': 'Software',
@@ -52,7 +39,9 @@ describe('SoftwaresComponent', () => {
         MockComponent(BreadcrumbsComponent)
       ],
       imports: [
-        RouterTestingModule,
+        RouterTestingModule.withRoutes([
+          { path: 'software/list', component: SoftwareListComponent }
+        ]),
         ApolloTestingModule,
         MockModule(CommonModule),
         MockModule(MaterialModule),
@@ -80,29 +69,28 @@ describe('SoftwaresComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  // it('Should get all Software', () => {
-  //   spyOn(component, 'getAllSoftware').and.returnValue(mockAllSoftware$);
-  //   component.getAllSoftware().subscribe(res => {
-  //     expect(res).toBeTruthy();
-  //   });
-  // })
+  describe('When a url slug is present', async () => {
+    const testSlug: string = 'death-star';
 
-  // describe('When a url slug is present', async () => {
-  //   beforeEach(() => {
-  //     controller = TestBed.inject(ApolloTestingController);
-  //     fixture = TestBed.createComponent(SoftwareComponent);
-  //     component = fixture.componentInstance;
-  //     TestBed.inject(ActivatedRoute).params = of({
-  //       slug: 'death-star'
-  //     });
-  //     fixture.detectChanges();
-  //   })
+    beforeEach(() => {
+      controller = TestBed.inject(ApolloTestingController);
+      fixture = TestBed.createComponent(SoftwareComponent);
+      component = fixture.componentInstance;
+      TestBed.inject(ActivatedRoute).params = of({
+        slug: testSlug
+      });
+      fixture.detectChanges();
+      component.ngOnInit();
+    })
 
-  //   it('Should get a single software data by Slug', () => {
-  //     spyOn(component, 'getSoftwareBySlug').and.returnValue(mockSoftware$);
-  //     component.getSoftwareBySlug(component.slug).subscribe(res => {
-  //       expect(res.slug).toEqual('death-star');
-  //     });
-  //   })
-  // });
+    it('Should get a single software data by Slug', () => {
+      spyOn(component, 'getSoftwareBySlug').and.returnValue(mockSoftware$);
+      
+      fixture.whenStable().then(() => {
+        component.getSoftwareBySlug(testSlug).subscribe(res => {
+          expect(res.slug).toEqual(testSlug);
+        });
+      })
+    })
+  });
 });
diff --git a/research-hub-web/src/app/components/subhubs/subhub-list/subhub-list.component.spec.ts b/research-hub-web/src/app/components/subhubs/subhub-list/subhub-list.component.spec.ts
index 9d9b21a5a..f388adfd0 100644
--- a/research-hub-web/src/app/components/subhubs/subhub-list/subhub-list.component.spec.ts
+++ b/research-hub-web/src/app/components/subhubs/subhub-list/subhub-list.component.spec.ts
@@ -6,12 +6,186 @@ import { MockComponent, MockModule, MockProvider } from 'ng-mocks';
 import { RouterTestingModule } from '@angular/router/testing';
 import { PageTitleService } from '@services/page-title.service';
 import { CollectionListComponent } from '@app/components/shared/collection-list/collection-list.component';
+import { SubHubCollection } from '@app/graphql/schema';
+import { Observable, of } from 'rxjs';
 
 describe('SubhubListComponent', () => {
   let component: SubhubListComponent;
   let fixture: ComponentFixture<SubhubListComponent>;
   let controller: ApolloTestingController;
 
+  const allMockSubHubs$: Observable<SubHubCollection> = of({
+    "items": [
+      {
+        "slug": "a-subhub-to-be-included-as-level-2-of-a-landing-page-subhub",
+        "title": "a subhub to be included as level 2 of a landing page subhub",
+        "summary": "as the title says",
+        "body": {
+          "json": {
+            "data": {
+
+            },
+            "content": [
+              {
+                "data": {
+
+                },
+                "content": [
+                  {
+                    "data": {
+
+                    },
+                    "marks": [
+
+                    ],
+                    "value": "Some more stuff here. This subhub is intended as the second level of a landing page (top level) subhub.",
+                    "nodeType": "text"
+                  }
+                ],
+                "nodeType": "paragraph"
+              }
+            ],
+            "nodeType": "document"
+          },
+          "__typename": "SubHubBody"
+        },
+        "ssoProtected": true,
+        "searchable": true,
+        "subhubPagesCollection": {
+          "items": [
+            {
+              "__typename": "Equipment",
+              "slug": "death-star",
+              "title": "Death Star",
+              "ssoProtected": true,
+              "summary": "Mobile space station and galactic superweapon."
+            },
+            {
+              "__typename": "Article",
+              "slug": "first-article",
+              "title": "First article",
+              "ssoProtected": false,
+              "summary": "A brief description of the first article. I'm writing some more stuff here just so that this seems a little more realistic. Sam was here. Have a good day."
+            }
+          ],
+          "__typename": "SubHubSubhubPagesCollection"
+        },
+        "__typename": "SubHub"
+      },
+      {
+        "slug": "landing-page-for-a-sub-hub",
+        "title": "Landing page for a 'sub-hub'",
+        "summary": "This is the landing page that demos everything a subhub can do..",
+        "body": {
+          "json": {
+            "data": {
+
+            },
+            "content": [
+              {
+                "data": {
+
+                },
+                "content": [
+                  {
+                    "data": {
+
+                    },
+                    "marks": [
+
+                    ],
+                    "value": "Wow. Much excite. I can describe all sorts of useful stuff here. ",
+                    "nodeType": "text"
+                  }
+                ],
+                "nodeType": "paragraph"
+              },
+              {
+                "data": {
+                  "target": {
+                    "sys": {
+                      "id": "21lOuLkozscCcNZHw0BRf",
+                      "type": "Link",
+                      "linkType": "Asset"
+                    }
+                  }
+                },
+                "content": [
+
+                ],
+                "nodeType": "embedded-asset-block"
+              },
+              {
+                "data": {
+
+                },
+                "content": [
+                  {
+                    "data": {
+
+                    },
+                    "marks": [
+
+                    ],
+                    "value": "Heaps and heaps of info about the subhub actually. ",
+                    "nodeType": "text"
+                  }
+                ],
+                "nodeType": "paragraph"
+              }
+            ],
+            "nodeType": "document"
+          },
+          "__typename": "SubHubBody"
+        },
+        "ssoProtected": false,
+        "searchable": true,
+        "subhubPagesCollection": {
+          "items": [
+            {
+              "__typename": "Equipment",
+              "slug": "death-star",
+              "title": "Death Star",
+              "ssoProtected": true,
+              "summary": "Mobile space station and galactic superweapon."
+            },
+            {
+              "__typename": "Service",
+              "slug": "super-dooper-research-service",
+              "title": "Super dooper research service",
+              "ssoProtected": true,
+              "summary": "The best service ever. It saved my life."
+            },
+            {
+              "__typename": "SubHub",
+              "slug": "a-subhub-to-be-included-as-level-2-of-a-landing-page-subhub",
+              "title": "a subhub to be included as level 2 of a landing page subhub",
+              "ssoProtected": true,
+              "summary": "as the title says"
+            },
+            {
+              "__typename": "Article",
+              "slug": "top-secret-article",
+              "title": "Top Secret Article",
+              "ssoProtected": true,
+              "summary": "For testing SSO"
+            },
+            {
+              "__typename": "Article",
+              "slug": "first-article",
+              "title": "First article",
+              "ssoProtected": false,
+              "summary": "A brief description of the first article. I'm writing some more stuff here just so that this seems a little more realistic. Sam was here. Have a good day."
+            }
+          ],
+          "__typename": "SubHubSubhubPagesCollection"
+        },
+        "__typename": "SubHub"
+      }
+    ],
+    "__typename": "SubHubCollection"
+  } as unknown as SubHubCollection);
+
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [
@@ -40,18 +214,11 @@ describe('SubhubListComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
-
+  
   // it('Should get all SubHubs', () => {
-    // spyOn(component, 'allSubhubGQL').and.returnValue(allMockSubHubs$);
-    // component.getAllSubHubs().subscribe(res => {
-    //   expect(res).toBeTruthy();
-    // });
+  //   spyOn(component, 'getAllSubHubs').and.returnValue(allMockSubHubs$);
+  //   component.getAllSubHubs().subscribe(res => {
+  //     expect(res).toBeTruthy();
+  //   });
   // })
-
-    //   it('Should get all SubHubs', async () => {
-  //     spyOn(component, 'getAllSubHubs').and.returnValue(allMockSubHubs$);
-  //     component.getAllSubHubs().subscribe(res => {
-  //       expect(res).toBeTruthy();
-  //     });
-  //   })
 });
diff --git a/research-hub-web/src/app/components/subhubs/subhub/subhub.component.spec.ts b/research-hub-web/src/app/components/subhubs/subhub/subhub.component.spec.ts
index e648b13c0..cc0e0b8d5 100644
--- a/research-hub-web/src/app/components/subhubs/subhub/subhub.component.spec.ts
+++ b/research-hub-web/src/app/components/subhubs/subhub/subhub.component.spec.ts
@@ -18,12 +18,12 @@ import { MockComponent, MockModule, MockProvider } from 'ng-mocks';
 import { RouterTestingModule } from '@angular/router/testing';
 import { SubhubComponent } from './subhub.component';
 import { BreadcrumbsComponent } from '@app/components/shared/breadcrumbs/breadcrumbs.component';
+import { SubhubListComponent } from '../subhub-list/subhub-list.component';
 
 
 describe('SubhubsComponent', () => {
   let component: SubhubComponent;
   let fixture: ComponentFixture<SubhubComponent>;
-  let backend: ApolloTestingController;
   let controller: ApolloTestingController;
   let subHubSpy: any; // returns mock query data
   let allSubHubsSpy: any; // returns mock query data
@@ -326,179 +326,6 @@ describe('SubhubsComponent', () => {
 
   // need to evaluate that its eliminating wrong parents. the all items in the linkedFromResponse (maybe do two, a right and a wrong one.)
 
-  // const allMockSubHubs$:   // the result when no subhub slug is found.
-  const allMockSubHubs$: Observable<SubHubCollection> = of({
-    "items": [
-      {
-        "slug": "a-subhub-to-be-included-as-level-2-of-a-landing-page-subhub",
-        "title": "a subhub to be included as level 2 of a landing page subhub",
-        "summary": "as the title says",
-        "body": {
-          "json": {
-            "data": {
-
-            },
-            "content": [
-              {
-                "data": {
-
-                },
-                "content": [
-                  {
-                    "data": {
-
-                    },
-                    "marks": [
-
-                    ],
-                    "value": "Some more stuff here. This subhub is intended as the second level of a landing page (top level) subhub.",
-                    "nodeType": "text"
-                  }
-                ],
-                "nodeType": "paragraph"
-              }
-            ],
-            "nodeType": "document"
-          },
-          "__typename": "SubHubBody"
-        },
-        "ssoProtected": true,
-        "searchable": true,
-        "subhubPagesCollection": {
-          "items": [
-            {
-              "__typename": "Equipment",
-              "slug": "death-star",
-              "title": "Death Star",
-              "ssoProtected": true,
-              "summary": "Mobile space station and galactic superweapon."
-            },
-            {
-              "__typename": "Article",
-              "slug": "first-article",
-              "title": "First article",
-              "ssoProtected": false,
-              "summary": "A brief description of the first article. I'm writing some more stuff here just so that this seems a little more realistic. Sam was here. Have a good day."
-            }
-          ],
-          "__typename": "SubHubSubhubPagesCollection"
-        },
-        "__typename": "SubHub"
-      },
-      {
-        "slug": "landing-page-for-a-sub-hub",
-        "title": "Landing page for a 'sub-hub'",
-        "summary": "This is the landing page that demos everything a subhub can do..",
-        "body": {
-          "json": {
-            "data": {
-
-            },
-            "content": [
-              {
-                "data": {
-
-                },
-                "content": [
-                  {
-                    "data": {
-
-                    },
-                    "marks": [
-
-                    ],
-                    "value": "Wow. Much excite. I can describe all sorts of useful stuff here. ",
-                    "nodeType": "text"
-                  }
-                ],
-                "nodeType": "paragraph"
-              },
-              {
-                "data": {
-                  "target": {
-                    "sys": {
-                      "id": "21lOuLkozscCcNZHw0BRf",
-                      "type": "Link",
-                      "linkType": "Asset"
-                    }
-                  }
-                },
-                "content": [
-
-                ],
-                "nodeType": "embedded-asset-block"
-              },
-              {
-                "data": {
-
-                },
-                "content": [
-                  {
-                    "data": {
-
-                    },
-                    "marks": [
-
-                    ],
-                    "value": "Heaps and heaps of info about the subhub actually. ",
-                    "nodeType": "text"
-                  }
-                ],
-                "nodeType": "paragraph"
-              }
-            ],
-            "nodeType": "document"
-          },
-          "__typename": "SubHubBody"
-        },
-        "ssoProtected": false,
-        "searchable": true,
-        "subhubPagesCollection": {
-          "items": [
-            {
-              "__typename": "Equipment",
-              "slug": "death-star",
-              "title": "Death Star",
-              "ssoProtected": true,
-              "summary": "Mobile space station and galactic superweapon."
-            },
-            {
-              "__typename": "Service",
-              "slug": "super-dooper-research-service",
-              "title": "Super dooper research service",
-              "ssoProtected": true,
-              "summary": "The best service ever. It saved my life."
-            },
-            {
-              "__typename": "SubHub",
-              "slug": "a-subhub-to-be-included-as-level-2-of-a-landing-page-subhub",
-              "title": "a subhub to be included as level 2 of a landing page subhub",
-              "ssoProtected": true,
-              "summary": "as the title says"
-            },
-            {
-              "__typename": "Article",
-              "slug": "top-secret-article",
-              "title": "Top Secret Article",
-              "ssoProtected": true,
-              "summary": "For testing SSO"
-            },
-            {
-              "__typename": "Article",
-              "slug": "first-article",
-              "title": "First article",
-              "ssoProtected": false,
-              "summary": "A brief description of the first article. I'm writing some more stuff here just so that this seems a little more realistic. Sam was here. Have a good day."
-            }
-          ],
-          "__typename": "SubHubSubhubPagesCollection"
-        },
-        "__typename": "SubHub"
-      }
-    ],
-    "__typename": "SubHubCollection"
-  } as unknown as SubHubCollection);
-
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [
@@ -511,7 +338,9 @@ describe('SubhubsComponent', () => {
         MockModule(MaterialModule),
         MockModule(SharedModule),
         MockModule(BrowserAnimationsModule),
-        RouterTestingModule
+        RouterTestingModule.withRoutes([
+          { path: 'subhub/list', component: SubhubListComponent }
+        ]),
       ], providers: [
         MockProvider(PageTitleService),
         MockProvider(AllContentItemParentSubHubsGQL)
@@ -535,36 +364,28 @@ describe('SubhubsComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  // it('Should get all SubHubs', () => {
-  //   spyOn(component, 'getAllSubHubs').and.returnValue(allMockSubHubs$);
-  //   component.getAllSubHubs().subscribe(res => {
-  //     expect(res).toBeTruthy();
-  //   });
-  // })
-
-  // describe('When a url slug is present', async () => {
-  //   beforeEach(() => {
-  //     controller = TestBed.inject(ApolloTestingController);
-  //     fixture = TestBed.createComponent(SubhubComponent);
-  //     component = fixture.componentInstance;
-  //     TestBed.inject(ActivatedRoute).params = of({
-  //       slug: 'first-subhub'
-  //     });
-  //     fixture.detectChanges();
-  //   })
-
-  //   it('Should get all SubHubs', async () => {
-  //     spyOn(component, 'getAllSubHubs').and.returnValue(allMockSubHubs$);
-  //     component.getAllSubHubs().subscribe(res => {
-  //       expect(res).toBeTruthy();
-  //     });
-  //   })
-
-  //   it('Should get a single SubHub', async () => {
-  //     spyOn(component, 'getSubHubBySlug').and.returnValue(singleSubHub$);
-  //     component.getSubHubBySlug(component.slug).subscribe(res => {
-  //       expect(res).toBeTruthy();
-  //     });
-  //   })
-  // });
+  describe('When a url slug is present', async () => {
+    const testSlug: string = 'landing-page-for-a-sub-hub';
+
+    beforeEach(() => {
+      controller = TestBed.inject(ApolloTestingController);
+      fixture = TestBed.createComponent(SubhubComponent);
+      component = fixture.componentInstance;
+      TestBed.inject(ActivatedRoute).params = of({
+        slug: testSlug
+      });
+      fixture.detectChanges();      
+      component.ngOnInit();
+    })
+
+    it('Should get a single SubHub', async () => {
+      spyOn(component, 'getSubHubBySlug').and.returnValue(singleSubHub$);
+
+      fixture.whenStable().then(() => {
+        component.getSubHubBySlug(testSlug).subscribe(res => {
+          expect(res.slug).toEqual(testSlug);
+        });
+      })
+    })
+  });
 });

From afc94742da1122f35d2cb06d4aa1154f91a5113e Mon Sep 17 00:00:00 2001
From: rosemcc <rosemccoll@hotmail.com>
Date: Mon, 22 Nov 2021 16:05:08 +1300
Subject: [PATCH 33/39] fix event page unit test

---
 .../app/components/events/event/event.component.spec.ts  | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/research-hub-web/src/app/components/events/event/event.component.spec.ts b/research-hub-web/src/app/components/events/event/event.component.spec.ts
index 5840826fe..a583896dd 100644
--- a/research-hub-web/src/app/components/events/event/event.component.spec.ts
+++ b/research-hub-web/src/app/components/events/event/event.component.spec.ts
@@ -85,9 +85,12 @@ describe('EventsComponent', () => {
 
     it('Should get a single Event data by Slug', () => {
       spyOn(component, 'getEventBySlug').and.returnValue(mockEvent$);
-      component.getEventBySlug(testSlug).subscribe(res => {
-        expect(res.slug).toEqual(testSlug);
-      });
+
+      fixture.whenStable().then(() => {
+        component.getEventBySlug(testSlug).subscribe(res => {
+          expect(res.slug).toEqual(testSlug);
+        });
+      })
     })
   });
 });

From d912e60490f0be811bb6fb9e99babc5da1e336c5 Mon Sep 17 00:00:00 2001
From: rosemcc <rosemccoll@hotmail.com>
Date: Mon, 22 Nov 2021 17:19:26 +1300
Subject: [PATCH 34/39] list pages unit tests passing

---
 .../article-list/article-list.component.spec.ts   | 15 +++++++++------
 .../article-list/article-list.component.ts        | 12 +++++++++---
 .../case-study-list.component.spec.ts             | 15 +++++++++------
 .../case-study-list/case-study-list.component.ts  | 12 +++++++++---
 .../equipment-list.component.spec.ts              | 15 +++++++++------
 .../equipment-list/equipment-list.component.ts    | 12 +++++++++---
 .../event-list/event-list.component.spec.ts       | 15 +++++++++------
 .../events/event-list/event-list.component.ts     | 12 +++++++++---
 .../funding-list/funding-list.component.spec.ts   | 15 +++++++++------
 .../funding-list/funding-list.component.ts        | 12 +++++++++---
 .../service-list/service-list.component.spec.ts   | 15 +++++++++------
 .../service-list/service-list.component.ts        | 12 +++++++++---
 .../software-list/software-list.component.spec.ts | 15 +++++++++------
 .../software-list/software-list.component.ts      | 12 +++++++++---
 .../subhub-list/subhub-list.component.spec.ts     | 15 +++++++++------
 .../subhubs/subhub-list/subhub-list.component.ts  | 12 +++++++++---
 16 files changed, 144 insertions(+), 72 deletions(-)

diff --git a/research-hub-web/src/app/components/articles/article-list/article-list.component.spec.ts b/research-hub-web/src/app/components/articles/article-list/article-list.component.spec.ts
index a0ac18fa7..ccb448c70 100644
--- a/research-hub-web/src/app/components/articles/article-list/article-list.component.spec.ts
+++ b/research-hub-web/src/app/components/articles/article-list/article-list.component.spec.ts
@@ -65,10 +65,13 @@ describe('ArticleListComponent', () => {
     expect(component).toBeTruthy();
   });
   
-  // it('Should get all articles', () => {
-  //   spyOn(component, 'getAllArticles').and.returnValue(mockAllArticles$);
-  //   component.getAllArticles().subscribe(res => {
-  //     expect(res).toBeTruthy();
-  //   });
-  // });
+  it('Should get all articles', () => {
+    spyOn(component, 'loadContent').and.returnValue(mockAllArticles$);
+
+    fixture.whenStable().then(() => {
+      component.loadContent().subscribe(res => {
+        expect(res.items.length).toBe(1);
+      });
+    })
+  });
 });
diff --git a/research-hub-web/src/app/components/articles/article-list/article-list.component.ts b/research-hub-web/src/app/components/articles/article-list/article-list.component.ts
index 88b6c044e..5b85ea441 100644
--- a/research-hub-web/src/app/components/articles/article-list/article-list.component.ts
+++ b/research-hub-web/src/app/components/articles/article-list/article-list.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { AllArticlesGQL, ArticleCollection } from '@app/graphql/schema';
-import { Subscription } from 'rxjs';
+import { Observable, Subscription } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { PageTitleService } from '@services/page-title.service';
 
@@ -22,9 +22,15 @@ export class ArticleListComponent implements OnInit, OnDestroy {
 
   ngOnInit(): void {
     this.pageTitleService.title = this.title;
-    this.subscription.add(this.allArticlesGQL.fetch().pipe(
+    this.subscription.add(
+      this.loadContent().subscribe((collection) => this.articles = collection)
+    );
+  }
+
+  public loadContent(): Observable<ArticleCollection> {
+    return this.allArticlesGQL.fetch().pipe(
       map((result) => result.data.articleCollection as ArticleCollection)
-    ).subscribe(collection => this.articles = collection));
+    )
   }
 
   ngOnDestroy(): void {
diff --git a/research-hub-web/src/app/components/casestudys/case-study-list/case-study-list.component.spec.ts b/research-hub-web/src/app/components/casestudys/case-study-list/case-study-list.component.spec.ts
index 9422af0ec..5cce66f7a 100644
--- a/research-hub-web/src/app/components/casestudys/case-study-list/case-study-list.component.spec.ts
+++ b/research-hub-web/src/app/components/casestudys/case-study-list/case-study-list.component.spec.ts
@@ -57,10 +57,13 @@ describe('CaseStudyListComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  // it('Should get all case studies', () => {
-  //   spyOn(component, 'getAllCaseStudy').and.returnValue(mockAllCaseStudy$);
-  //   component.getAllCaseStudy().subscribe(res => {
-  //     expect(res).toBeTruthy();
-  //   });
-  // });
+  it('Should get all case studies', () => {
+    spyOn(component, 'loadContent').and.returnValue(mockAllCaseStudy$);
+
+    fixture.whenStable().then(() => {
+      component.loadContent().subscribe(res => {
+        expect(res.items.length).toBe(1);
+      });
+    })
+  });
 });
diff --git a/research-hub-web/src/app/components/casestudys/case-study-list/case-study-list.component.ts b/research-hub-web/src/app/components/casestudys/case-study-list/case-study-list.component.ts
index 1e4c917ae..ad50a0c97 100644
--- a/research-hub-web/src/app/components/casestudys/case-study-list/case-study-list.component.ts
+++ b/research-hub-web/src/app/components/casestudys/case-study-list/case-study-list.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { AllCaseStudiesGQL, CaseStudyCollection } from '@app/graphql/schema';
-import { Subscription } from 'rxjs';
+import { Observable, Subscription } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { PageTitleService } from '@services/page-title.service';
 
@@ -22,9 +22,15 @@ export class CaseStudyListComponent implements OnInit, OnDestroy {
 
   ngOnInit(): void {
     this.pageTitleService.title = this.title;
-    this.subscription.add(this.allCaseStudiesGQL.fetch().pipe(
+    this.subscription.add(
+      this.loadContent().subscribe((collection) => this.caseStudies = collection)
+    );
+  }
+
+  public loadContent(): Observable<CaseStudyCollection> {
+    return this.allCaseStudiesGQL.fetch().pipe(
       map((result) => result.data.caseStudyCollection as CaseStudyCollection)
-    ).subscribe((collection) => this.caseStudies = collection));
+    )
   }
 
   ngOnDestroy(): void {
diff --git a/research-hub-web/src/app/components/equipments/equipment-list/equipment-list.component.spec.ts b/research-hub-web/src/app/components/equipments/equipment-list/equipment-list.component.spec.ts
index aab3a461d..a1893b0e0 100644
--- a/research-hub-web/src/app/components/equipments/equipment-list/equipment-list.component.spec.ts
+++ b/research-hub-web/src/app/components/equipments/equipment-list/equipment-list.component.spec.ts
@@ -57,10 +57,13 @@ describe('EquipmentListComponent', () => {
     expect(component).toBeTruthy();
   });
   
-  // it('Should get all equipment', () => {
-  //   spyOn(component, 'getAllEquipment').and.returnValue(mockAllEquipment$);
-  //   component.getAllEquipment().subscribe(res => {
-  //     expect(res).toBeTruthy();
-  //   });
-  // })
+  it('Should get all equipment', () => {
+    spyOn(component, 'loadContent').and.returnValue(mockAllEquipment$);
+
+    fixture.whenStable().then(() => {
+      component.loadContent().subscribe(res => {
+        expect(res.items.length).toBe(1);
+      });
+    })
+  })
 });
diff --git a/research-hub-web/src/app/components/equipments/equipment-list/equipment-list.component.ts b/research-hub-web/src/app/components/equipments/equipment-list/equipment-list.component.ts
index 92f5bcad2..d1d06b274 100644
--- a/research-hub-web/src/app/components/equipments/equipment-list/equipment-list.component.ts
+++ b/research-hub-web/src/app/components/equipments/equipment-list/equipment-list.component.ts
@@ -1,7 +1,7 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { AllEquipmentGQL, EquipmentCollection } from '@app/graphql/schema';
 import { PageTitleService } from '@services/page-title.service';
-import { Subscription } from 'rxjs';
+import { Observable, Subscription } from 'rxjs';
 import { map } from 'rxjs/operators';
 
 @Component({
@@ -22,9 +22,15 @@ export class EquipmentListComponent implements OnInit, OnDestroy {
 
   ngOnInit(): void {
     this.pageTitleService.title = this.title;
-    this.subscription.add(this.allEquipmentGQL.fetch().pipe(
+    this.subscription.add(
+      this.loadContent().subscribe((collection) => this.equipment = collection)
+    );
+  }
+
+  public loadContent(): Observable<EquipmentCollection> {
+    return this.allEquipmentGQL.fetch().pipe(
       map((result) => result.data.equipmentCollection as EquipmentCollection)
-    ).subscribe((collection) => this.equipment = collection));
+    )
   }
 
   ngOnDestroy(): void {
diff --git a/research-hub-web/src/app/components/events/event-list/event-list.component.spec.ts b/research-hub-web/src/app/components/events/event-list/event-list.component.spec.ts
index 32ce9a002..07e28a3c7 100644
--- a/research-hub-web/src/app/components/events/event-list/event-list.component.spec.ts
+++ b/research-hub-web/src/app/components/events/event-list/event-list.component.spec.ts
@@ -57,10 +57,13 @@ describe('EventListComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  // it('should get all events', () => {
-  //   spyOn(component, 'getAllEvents').and.returnValue(mockAllEvent$);
-  //   component.getAllEvents().subscribe(res => {
-  //     expect(res).toBeTruthy();
-  //   });
-  // })
+  it('should get all events', () => {
+    spyOn(component, 'loadContent').and.returnValue(mockAllEvent$);
+
+    fixture.whenStable().then(() => {
+      component.loadContent().subscribe(res => {
+        expect(res.items.length).toBe(1);
+      });
+    })
+  })
 });
diff --git a/research-hub-web/src/app/components/events/event-list/event-list.component.ts b/research-hub-web/src/app/components/events/event-list/event-list.component.ts
index fd1820901..4bb78a6bc 100644
--- a/research-hub-web/src/app/components/events/event-list/event-list.component.ts
+++ b/research-hub-web/src/app/components/events/event-list/event-list.component.ts
@@ -1,7 +1,7 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { AllEventsGQL, EventCollection } from '@app/graphql/schema';
 import { PageTitleService } from '@services/page-title.service';
-import { Subscription } from 'rxjs';
+import { Observable, Subscription } from 'rxjs';
 import { map } from 'rxjs/operators';
 
 @Component({
@@ -22,9 +22,15 @@ export class EventListComponent implements OnInit, OnDestroy {
 
   ngOnInit(): void {
     this.pageTitleService.title = this.title;
-    this.subscription.add(this.allEventsGQL.fetch().pipe(
+    this.subscription.add(
+      this.loadContent().subscribe((collection) => this.events = collection)
+    );
+  }
+
+  public loadContent(): Observable<EventCollection> {
+    return this.allEventsGQL.fetch().pipe(
       map((result) => result.data.eventCollection as EventCollection)
-    ).subscribe((collection) => this.events = collection));
+    )
   }
 
   ngOnDestroy(): void {
diff --git a/research-hub-web/src/app/components/fundings/funding-list/funding-list.component.spec.ts b/research-hub-web/src/app/components/fundings/funding-list/funding-list.component.spec.ts
index ea7ff95b7..b294c2117 100644
--- a/research-hub-web/src/app/components/fundings/funding-list/funding-list.component.spec.ts
+++ b/research-hub-web/src/app/components/fundings/funding-list/funding-list.component.spec.ts
@@ -57,10 +57,13 @@ describe('FundingListComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  // it('should get all fundings', () => {
-  //   spyOn(component, 'getAllFundings').and.returnValue(mockAllFunding$);
-  //   component.getAllFundings().subscribe(res => {
-  //     expect(res).toBeTruthy();
-  //   });
-  // })
+  it('should get all fundings', () => {
+    spyOn(component, 'loadContent').and.returnValue(mockAllFunding$);
+
+    fixture.whenStable().then(() => {
+      component.loadContent().subscribe(res => {
+        expect(res.items.length).toBe(1);
+      });
+    })
+  })
 });
diff --git a/research-hub-web/src/app/components/fundings/funding-list/funding-list.component.ts b/research-hub-web/src/app/components/fundings/funding-list/funding-list.component.ts
index 91d326abc..f69714032 100644
--- a/research-hub-web/src/app/components/fundings/funding-list/funding-list.component.ts
+++ b/research-hub-web/src/app/components/fundings/funding-list/funding-list.component.ts
@@ -1,7 +1,7 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { AllFundingGQL, FundingCollection } from '@app/graphql/schema';
 import { PageTitleService } from '@services/page-title.service';
-import { Subscription } from 'rxjs';
+import { Observable, Subscription } from 'rxjs';
 import { map } from 'rxjs/operators';
 
 @Component({
@@ -22,9 +22,15 @@ export class FundingListComponent implements OnInit, OnDestroy {
 
   ngOnInit(): void {
     this.pageTitleService.title = this.title;
-    this.subscription.add(this.allFundingGQL.fetch().pipe(
+    this.subscription.add(
+      this.loadContent().subscribe((collection) => this.fundings = collection)
+    );
+  }
+
+  public loadContent(): Observable<FundingCollection> {
+    return this.allFundingGQL.fetch().pipe(
       map((result) => result.data.fundingCollection as FundingCollection)
-    ).subscribe((collection) => this.fundings = collection));
+    )
   }
 
   ngOnDestroy(): void {
diff --git a/research-hub-web/src/app/components/services/service-list/service-list.component.spec.ts b/research-hub-web/src/app/components/services/service-list/service-list.component.spec.ts
index 4466cbce2..930f813ac 100644
--- a/research-hub-web/src/app/components/services/service-list/service-list.component.spec.ts
+++ b/research-hub-web/src/app/components/services/service-list/service-list.component.spec.ts
@@ -57,10 +57,13 @@ describe('ServiceListComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  // it('Should get all Service', () => {
-  //   spyOn(component, 'getAllServices').and.returnValue(mockAllServices$);
-  //   component.getAllServices().subscribe(res => {
-  //     expect(res).toBeTruthy();
-  //   });
-  // })
+  it('Should get all Service', () => {
+    spyOn(component, 'loadContent').and.returnValue(mockAllServices$);
+
+    fixture.whenStable().then(() => {
+      component.loadContent().subscribe(res => {
+        expect(res.items.length).toBe(1);
+      });
+    })
+  })
 });
diff --git a/research-hub-web/src/app/components/services/service-list/service-list.component.ts b/research-hub-web/src/app/components/services/service-list/service-list.component.ts
index 5e624a8fd..d29129faf 100644
--- a/research-hub-web/src/app/components/services/service-list/service-list.component.ts
+++ b/research-hub-web/src/app/components/services/service-list/service-list.component.ts
@@ -1,7 +1,7 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { AllServicesGQL, ServiceCollection } from '@app/graphql/schema';
 import { PageTitleService } from '@services/page-title.service';
-import { Subscription } from 'rxjs';
+import { Observable, Subscription } from 'rxjs';
 import { map } from 'rxjs/operators';
 
 @Component({
@@ -22,9 +22,15 @@ export class ServiceListComponent implements OnInit, OnDestroy {
 
   ngOnInit(): void {
     this.pageTitleService.title = this.title;
-    this.subscription.add(this.allServicesGQL.fetch().pipe(
+    this.subscription.add(
+      this.loadContent().subscribe((collection) => this.services = collection)
+    );
+  }
+
+  public loadContent(): Observable<ServiceCollection> {
+    return this.allServicesGQL.fetch().pipe(
       map((result) => result.data.serviceCollection as ServiceCollection)
-    ).subscribe((collection) => this.services = collection));
+    )
   }
 
   ngOnDestroy(): void {
diff --git a/research-hub-web/src/app/components/softwares/software-list/software-list.component.spec.ts b/research-hub-web/src/app/components/softwares/software-list/software-list.component.spec.ts
index 359b689ef..8d7e9faa1 100644
--- a/research-hub-web/src/app/components/softwares/software-list/software-list.component.spec.ts
+++ b/research-hub-web/src/app/components/softwares/software-list/software-list.component.spec.ts
@@ -57,10 +57,13 @@ describe('SoftwareListComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  // it('Should get all Software', () => {
-  //   spyOn(component, 'getAllSoftware').and.returnValue(mockAllSoftware$);
-  //   component.getAllSoftware().subscribe(res => {
-  //     expect(res).toBeTruthy();
-  //   });
-  // })
+  it('Should get all Software', () => {
+    spyOn(component, 'loadContent').and.returnValue(mockAllSoftware$);
+
+    fixture.whenStable().then(() => {
+      component.loadContent().subscribe(res => {
+        expect(res.items.length).toBe(1);
+      });
+    })
+  })
 });
diff --git a/research-hub-web/src/app/components/softwares/software-list/software-list.component.ts b/research-hub-web/src/app/components/softwares/software-list/software-list.component.ts
index cf86bf953..ee8f34449 100644
--- a/research-hub-web/src/app/components/softwares/software-list/software-list.component.ts
+++ b/research-hub-web/src/app/components/softwares/software-list/software-list.component.ts
@@ -1,7 +1,7 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { AllSoftwareGQL, SoftwareCollection } from '@app/graphql/schema';
 import { PageTitleService } from '@services/page-title.service';
-import { Subscription } from 'rxjs';
+import { Observable, Subscription } from 'rxjs';
 import { map } from 'rxjs/operators';
 
 @Component({
@@ -22,9 +22,15 @@ export class SoftwareListComponent implements OnInit, OnDestroy {
 
   ngOnInit(): void {
     this.pageTitleService.title = this.title;
-    this.subscription.add(this.allSoftwareGQL.fetch().pipe(
+    this.subscription.add(
+      this.loadContent().subscribe((collection) => this.software = collection)
+    );
+  }
+
+  public loadContent(): Observable<SoftwareCollection> {
+    return this.allSoftwareGQL.fetch().pipe(
       map((result) => result.data.softwareCollection as SoftwareCollection)
-    ).subscribe((collection) => this.software = collection));
+    )
   }
 
   ngOnDestroy(): void {
diff --git a/research-hub-web/src/app/components/subhubs/subhub-list/subhub-list.component.spec.ts b/research-hub-web/src/app/components/subhubs/subhub-list/subhub-list.component.spec.ts
index f388adfd0..3063b3115 100644
--- a/research-hub-web/src/app/components/subhubs/subhub-list/subhub-list.component.spec.ts
+++ b/research-hub-web/src/app/components/subhubs/subhub-list/subhub-list.component.spec.ts
@@ -215,10 +215,13 @@ describe('SubhubListComponent', () => {
     expect(component).toBeTruthy();
   });
   
-  // it('Should get all SubHubs', () => {
-  //   spyOn(component, 'getAllSubHubs').and.returnValue(allMockSubHubs$);
-  //   component.getAllSubHubs().subscribe(res => {
-  //     expect(res).toBeTruthy();
-  //   });
-  // })
+  it('Should get all SubHubs', () => {
+    spyOn(component, 'loadContent').and.returnValue(allMockSubHubs$);
+
+    fixture.whenStable().then(() => {
+      component.loadContent().subscribe(res => {
+        expect(res.items.length).toBe(2);
+      });
+    })
+  })
 });
diff --git a/research-hub-web/src/app/components/subhubs/subhub-list/subhub-list.component.ts b/research-hub-web/src/app/components/subhubs/subhub-list/subhub-list.component.ts
index 028074952..46fa8e25e 100644
--- a/research-hub-web/src/app/components/subhubs/subhub-list/subhub-list.component.ts
+++ b/research-hub-web/src/app/components/subhubs/subhub-list/subhub-list.component.ts
@@ -1,7 +1,7 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { AllSubHubGQL, SubHubCollection } from '@app/graphql/schema';
 import { PageTitleService } from '@services/page-title.service';
-import { Subscription } from 'rxjs';
+import { Observable, Subscription } from 'rxjs';
 import { map } from 'rxjs/operators';
 
 @Component({
@@ -22,9 +22,15 @@ export class SubhubListComponent implements OnInit, OnDestroy {
 
   ngOnInit(): void {
     this.pageTitleService.title = this.title;
-    this.subscription.add(this.allSubhubGQL.fetch().pipe(
+    this.subscription.add(
+      this.loadContent().subscribe((collection) => this.subhubs = collection)
+    );
+  }
+
+  public loadContent(): Observable<SubHubCollection> {
+    return this.allSubhubGQL.fetch().pipe(
       map((result) => result.data.subHubCollection as SubHubCollection)
-    ).subscribe((collection) => this.subhubs = collection));
+    )
   }
 
   ngOnDestroy(): void {

From d37da13b1166ca65d6b7f5fc77537bdd2c1b531d Mon Sep 17 00:00:00 2001
From: rosemcc <rosemccoll@hotmail.com>
Date: Tue, 23 Nov 2021 10:40:26 +1300
Subject: [PATCH 35/39] delete unused queries, add limit to all-items queries

---
 .../queries/all-articles-slugs.query.graphql  |  7 --
 .../queries/all-articles.query.graphql        |  2 +-
 .../queries/all-case-studies.query.graphql    |  2 +-
 .../all-case-study-slugs.query.graphql        |  7 --
 .../queries/all-equipment-slugs.query.graphql |  7 --
 .../queries/all-equipment.query.graphql       |  2 +-
 .../queries/all-events-slugs.query.graphql    |  7 --
 .../graphql/queries/all-events.query.graphql  |  2 +-
 .../queries/all-funding-slugs.query.graphql   |  7 --
 .../graphql/queries/all-funding.query.graphql |  2 +-
 .../all-items-by-category.query.graphql       | 65 -------------------
 .../all-items-by-organisation.query.graphql   | 64 ------------------
 .../queries/all-items-by-stage.query.graphql  | 65 -------------------
 .../graphql/queries/all-pages.query.graphql   | 42 ------------
 .../all-searchable-content.query.graphql      | 34 ----------
 .../queries/all-services-slugs.query.graphql  |  7 --
 .../queries/all-services.query.graphql        |  2 +-
 .../queries/all-software-slugs.query.graphql  |  7 --
 .../queries/all-software.query.graphql        |  2 +-
 .../graphql/queries/all-subhubs.query.graphql |  2 +-
 20 files changed, 8 insertions(+), 327 deletions(-)
 delete mode 100644 research-hub-web/src/app/graphql/queries/all-articles-slugs.query.graphql
 delete mode 100644 research-hub-web/src/app/graphql/queries/all-case-study-slugs.query.graphql
 delete mode 100644 research-hub-web/src/app/graphql/queries/all-equipment-slugs.query.graphql
 delete mode 100644 research-hub-web/src/app/graphql/queries/all-events-slugs.query.graphql
 delete mode 100644 research-hub-web/src/app/graphql/queries/all-funding-slugs.query.graphql
 delete mode 100644 research-hub-web/src/app/graphql/queries/all-items-by-category.query.graphql
 delete mode 100644 research-hub-web/src/app/graphql/queries/all-items-by-organisation.query.graphql
 delete mode 100644 research-hub-web/src/app/graphql/queries/all-items-by-stage.query.graphql
 delete mode 100644 research-hub-web/src/app/graphql/queries/all-pages.query.graphql
 delete mode 100644 research-hub-web/src/app/graphql/queries/all-searchable-content.query.graphql
 delete mode 100644 research-hub-web/src/app/graphql/queries/all-services-slugs.query.graphql
 delete mode 100644 research-hub-web/src/app/graphql/queries/all-software-slugs.query.graphql

diff --git a/research-hub-web/src/app/graphql/queries/all-articles-slugs.query.graphql b/research-hub-web/src/app/graphql/queries/all-articles-slugs.query.graphql
deleted file mode 100644
index 81c7f5e63..000000000
--- a/research-hub-web/src/app/graphql/queries/all-articles-slugs.query.graphql
+++ /dev/null
@@ -1,7 +0,0 @@
-query AllArticlesSlugs {
-    articleCollection(limit: 250) {
-        items {
-            slug
-        }
-    }
-}
diff --git a/research-hub-web/src/app/graphql/queries/all-articles.query.graphql b/research-hub-web/src/app/graphql/queries/all-articles.query.graphql
index 46c719623..7c23726b4 100644
--- a/research-hub-web/src/app/graphql/queries/all-articles.query.graphql
+++ b/research-hub-web/src/app/graphql/queries/all-articles.query.graphql
@@ -1,5 +1,5 @@
 query AllArticles {
-    articleCollection {
+    articleCollection(limit: 250) {
         items {
             ...PublicFields
         }
diff --git a/research-hub-web/src/app/graphql/queries/all-case-studies.query.graphql b/research-hub-web/src/app/graphql/queries/all-case-studies.query.graphql
index 7d4fa2c25..3e5d18190 100644
--- a/research-hub-web/src/app/graphql/queries/all-case-studies.query.graphql
+++ b/research-hub-web/src/app/graphql/queries/all-case-studies.query.graphql
@@ -1,5 +1,5 @@
 query AllCaseStudies {
-    caseStudyCollection {
+    caseStudyCollection(limit: 250) {
         items {
             ...PublicFields
         }
diff --git a/research-hub-web/src/app/graphql/queries/all-case-study-slugs.query.graphql b/research-hub-web/src/app/graphql/queries/all-case-study-slugs.query.graphql
deleted file mode 100644
index 35b7a5404..000000000
--- a/research-hub-web/src/app/graphql/queries/all-case-study-slugs.query.graphql
+++ /dev/null
@@ -1,7 +0,0 @@
-query AllCaseStudySlugs {
-    caseStudyCollection {
-        items {
-            slug
-        }
-    }
-}
\ No newline at end of file
diff --git a/research-hub-web/src/app/graphql/queries/all-equipment-slugs.query.graphql b/research-hub-web/src/app/graphql/queries/all-equipment-slugs.query.graphql
deleted file mode 100644
index 23de16680..000000000
--- a/research-hub-web/src/app/graphql/queries/all-equipment-slugs.query.graphql
+++ /dev/null
@@ -1,7 +0,0 @@
-query AllEquipmentSlugs {
-    equipmentCollection {
-        items {
-            slug
-        }
-    }
-}
\ No newline at end of file
diff --git a/research-hub-web/src/app/graphql/queries/all-equipment.query.graphql b/research-hub-web/src/app/graphql/queries/all-equipment.query.graphql
index 9aedde8d4..7ca2aed0e 100644
--- a/research-hub-web/src/app/graphql/queries/all-equipment.query.graphql
+++ b/research-hub-web/src/app/graphql/queries/all-equipment.query.graphql
@@ -1,5 +1,5 @@
 query AllEquipment {
-    equipmentCollection {
+    equipmentCollection(limit: 250) {
         items {
         ...PublicFields
         }
diff --git a/research-hub-web/src/app/graphql/queries/all-events-slugs.query.graphql b/research-hub-web/src/app/graphql/queries/all-events-slugs.query.graphql
deleted file mode 100644
index 552790487..000000000
--- a/research-hub-web/src/app/graphql/queries/all-events-slugs.query.graphql
+++ /dev/null
@@ -1,7 +0,0 @@
-query AllEventsSlugs {
-    eventCollection {
-        items {
-            slug
-        }
-    }
-}
\ No newline at end of file
diff --git a/research-hub-web/src/app/graphql/queries/all-events.query.graphql b/research-hub-web/src/app/graphql/queries/all-events.query.graphql
index b629eeb87..5c3670026 100644
--- a/research-hub-web/src/app/graphql/queries/all-events.query.graphql
+++ b/research-hub-web/src/app/graphql/queries/all-events.query.graphql
@@ -1,5 +1,5 @@
 query AllEvents {
-    eventCollection {
+    eventCollection(limit: 250) {
         items {
             ...PublicFields
         }
diff --git a/research-hub-web/src/app/graphql/queries/all-funding-slugs.query.graphql b/research-hub-web/src/app/graphql/queries/all-funding-slugs.query.graphql
deleted file mode 100644
index c805cf02a..000000000
--- a/research-hub-web/src/app/graphql/queries/all-funding-slugs.query.graphql
+++ /dev/null
@@ -1,7 +0,0 @@
-query AllFundingSlugs {
-    fundingCollection {
-        items {
-            slug
-        }
-    }
-}
\ No newline at end of file
diff --git a/research-hub-web/src/app/graphql/queries/all-funding.query.graphql b/research-hub-web/src/app/graphql/queries/all-funding.query.graphql
index c54e3c1ef..2bfe3c5ab 100644
--- a/research-hub-web/src/app/graphql/queries/all-funding.query.graphql
+++ b/research-hub-web/src/app/graphql/queries/all-funding.query.graphql
@@ -1,5 +1,5 @@
 query AllFunding {
-    fundingCollection {
+    fundingCollection(limit: 250) {
         items {
             ...PublicFields
         }
diff --git a/research-hub-web/src/app/graphql/queries/all-items-by-category.query.graphql b/research-hub-web/src/app/graphql/queries/all-items-by-category.query.graphql
deleted file mode 100644
index e79337d1d..000000000
--- a/research-hub-web/src/app/graphql/queries/all-items-by-category.query.graphql
+++ /dev/null
@@ -1,65 +0,0 @@
-query AllItemsByCategory($displayOrder: Int){
-  categoryCollection(limit: 1, where: {displayOrder: $displayOrder}) {
-    items {
-      name
-      linkedFrom {
-        articleCollection {
-          items {
-            ssoProtected
-            title
-            slug
-            summary
-          }
-        }
-        equipmentCollection {
-          items {
-            ssoProtected
-            title
-            slug
-            summary
-          }
-        }
-        subHubCollection {
-          items {
-            ssoProtected
-            title
-            slug
-            summary
-          }
-        }
-        eventCollection {
-          items {
-            ssoProtected
-            title
-            slug
-            summary
-          }
-        }
-        serviceCollection {
-          items {
-            ssoProtected
-            title
-            slug
-            summary
-          }
-        }
-        softwareCollection {
-          items {
-            ssoProtected
-            title
-            slug
-            summary
-          }
-        }
-        caseStudyCollection {
-          items {
-            ssoProtected
-            title
-            slug
-            summary
-          }
-        }
-      }
-    }
-  }
-}
\ No newline at end of file
diff --git a/research-hub-web/src/app/graphql/queries/all-items-by-organisation.query.graphql b/research-hub-web/src/app/graphql/queries/all-items-by-organisation.query.graphql
deleted file mode 100644
index 5a8605324..000000000
--- a/research-hub-web/src/app/graphql/queries/all-items-by-organisation.query.graphql
+++ /dev/null
@@ -1,64 +0,0 @@
-query AllItemsByOrganisation($displayOrder: Int) {
-  orgUnitCollection(limit: 1, where: {displayOrder: $displayOrder}) {
-    items {
-      linkedFrom {
-        articleCollection {
-          items {
-            ssoProtected
-            title
-            slug
-            summary
-          }
-        }
-        equipmentCollection {
-          items {
-            ssoProtected
-            title
-            slug
-            summary
-          }
-        }
-        subHubCollection {
-          items {
-            ssoProtected
-            title
-            slug
-            summary
-          }
-        }
-        eventCollection {
-          items {
-            ssoProtected
-            title
-            slug
-            summary
-          }
-        }
-        serviceCollection {
-          items {
-            ssoProtected
-            title
-            slug
-            summary
-          }
-        }
-        softwareCollection {
-          items {
-            ssoProtected
-            title
-            slug
-            summary
-          }
-        }
-        caseStudyCollection {
-          items {
-            ssoProtected
-            title
-            slug
-            summary
-          }
-        }
-      }
-    }
-  }
-}
\ No newline at end of file
diff --git a/research-hub-web/src/app/graphql/queries/all-items-by-stage.query.graphql b/research-hub-web/src/app/graphql/queries/all-items-by-stage.query.graphql
deleted file mode 100644
index 7fdf4f504..000000000
--- a/research-hub-web/src/app/graphql/queries/all-items-by-stage.query.graphql
+++ /dev/null
@@ -1,65 +0,0 @@
-query AllItemsByStage($displayOrder: Int){
-  stageCollection(limit: 1, where: {displayOrder: $displayOrder}) {
-    items {
-      name
-      linkedFrom {
-        articleCollection {
-          items {
-            ssoProtected
-            title
-            slug
-            summary
-          }
-        }
-        equipmentCollection {
-          items {
-            ssoProtected
-            title
-            slug
-            summary
-          }
-        }
-        subHubCollection {
-          items {
-            ssoProtected
-            title
-            slug
-            summary
-          }
-        }
-        eventCollection {
-          items {
-            ssoProtected
-            title
-            slug
-            summary
-          }
-        }
-        serviceCollection {
-          items {
-            ssoProtected
-            title
-            slug
-            summary
-          }
-        }
-        softwareCollection {
-          items {
-            ssoProtected
-            title
-            slug
-            summary
-          }
-        }
-        caseStudyCollection {
-          items {
-            ssoProtected
-            title
-            slug
-            summary
-          }
-        }
-      }
-    }
-  }
-}
\ No newline at end of file
diff --git a/research-hub-web/src/app/graphql/queries/all-pages.query.graphql b/research-hub-web/src/app/graphql/queries/all-pages.query.graphql
deleted file mode 100644
index dac2886f6..000000000
--- a/research-hub-web/src/app/graphql/queries/all-pages.query.graphql
+++ /dev/null
@@ -1,42 +0,0 @@
-query AllPages {
-  articleCollection {
-    items {
-      ...PublicFields
-    }
-  }
-  equipmentCollection {
-    items {
-      ...PublicFields
-    }
-  }
-  subHubCollection {
-    items {
-      ...PublicFields
-    }
-  }
-  eventCollection {
-    items {
-      ...PublicFields
-    }
-  }
-  serviceCollection {
-    items {
-      ...PublicFields
-    }
-  }
-  softwareCollection {
-    items {
-      ...PublicFields
-    }
-  }
-  caseStudyCollection {
-    items {
-      ...PublicFields
-    }
-  }
-  fundingCollection {
-    items {
-      ...PublicFields
-    }
-  }
-}
\ No newline at end of file
diff --git a/research-hub-web/src/app/graphql/queries/all-searchable-content.query.graphql b/research-hub-web/src/app/graphql/queries/all-searchable-content.query.graphql
deleted file mode 100644
index d03333a1a..000000000
--- a/research-hub-web/src/app/graphql/queries/all-searchable-content.query.graphql
+++ /dev/null
@@ -1,34 +0,0 @@
-#import './public-fields.fragment.graphql'
-query AllSearchableContentPublicFields {
-    articleCollection(where: { searchable: true} ) { 
-        items { ...PublicFields}
-    }
-
-    caseStudyCollection(where: { searchable: true }) {
-        items { ...PublicFields }
-    }
-
-    equipmentCollection(where: { searchable: true }) {
-        items { ...PublicFields }
-    }
-
-    eventCollection(where: { searchable: true }) {
-        items { ...PublicFields }
-    }
-    
-    serviceCollection(where: { searchable: true }) {
-        items { ...PublicFields }
-    }
-
-    softwareCollection(where: { searchable: true }) {
-        items { ...PublicFields }
-    }
-    
-    subHubCollection(where: { searchable: true }) {
-        items { ...PublicFields }
-    }
-
-    fundingCollection(where: { searchable: true }) {
-        items { ...PublicFields }
-    }
-}
\ No newline at end of file
diff --git a/research-hub-web/src/app/graphql/queries/all-services-slugs.query.graphql b/research-hub-web/src/app/graphql/queries/all-services-slugs.query.graphql
deleted file mode 100644
index a66f8cba5..000000000
--- a/research-hub-web/src/app/graphql/queries/all-services-slugs.query.graphql
+++ /dev/null
@@ -1,7 +0,0 @@
-query AllServicesSlugs {
-    serviceCollection {
-        items {
-            slug
-        }
-    }
-}
\ No newline at end of file
diff --git a/research-hub-web/src/app/graphql/queries/all-services.query.graphql b/research-hub-web/src/app/graphql/queries/all-services.query.graphql
index 2c086bc2a..1019acd61 100644
--- a/research-hub-web/src/app/graphql/queries/all-services.query.graphql
+++ b/research-hub-web/src/app/graphql/queries/all-services.query.graphql
@@ -1,5 +1,5 @@
 query AllServices {
-    serviceCollection {
+    serviceCollection(limit: 250) {
         items {
             ...PublicFields
         }
diff --git a/research-hub-web/src/app/graphql/queries/all-software-slugs.query.graphql b/research-hub-web/src/app/graphql/queries/all-software-slugs.query.graphql
deleted file mode 100644
index 0864dc94f..000000000
--- a/research-hub-web/src/app/graphql/queries/all-software-slugs.query.graphql
+++ /dev/null
@@ -1,7 +0,0 @@
-query AllSoftwareSlugs {
-    softwareCollection {
-        items {
-            slug
-        }
-    }
-}
\ No newline at end of file
diff --git a/research-hub-web/src/app/graphql/queries/all-software.query.graphql b/research-hub-web/src/app/graphql/queries/all-software.query.graphql
index e8e455df1..f59eab90d 100644
--- a/research-hub-web/src/app/graphql/queries/all-software.query.graphql
+++ b/research-hub-web/src/app/graphql/queries/all-software.query.graphql
@@ -1,5 +1,5 @@
 query AllSoftware {
-    softwareCollection {
+    softwareCollection(limit: 250) {
         items {
             ...PublicFields
         }
diff --git a/research-hub-web/src/app/graphql/queries/all-subhubs.query.graphql b/research-hub-web/src/app/graphql/queries/all-subhubs.query.graphql
index b31c2fd07..d47c70380 100644
--- a/research-hub-web/src/app/graphql/queries/all-subhubs.query.graphql
+++ b/research-hub-web/src/app/graphql/queries/all-subhubs.query.graphql
@@ -1,5 +1,5 @@
 query AllSubHub {
-    subHubCollection {
+    subHubCollection(limit: 250) {
         items {
             ...PublicFields
         }

From 869bb025fb5bfcd06e6ab92a03d9c75df551a067 Mon Sep 17 00:00:00 2001
From: rosemcc <rosemccoll@hotmail.com>
Date: Tue, 23 Nov 2021 11:19:35 +1300
Subject: [PATCH 36/39] minor fix for empty collection

---
 .../components/equipments/equipment/equipment.component.html    | 2 +-
 .../src/app/components/events/event/event.component.html        | 2 +-
 .../src/app/components/fundings/funding/funding.component.html  | 2 +-
 .../src/app/components/services/service/service.component.html  | 2 +-
 .../app/components/softwares/software/software.component.html   | 2 +-
 .../src/app/components/subhubs/subhub/subhub.component.html     | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/research-hub-web/src/app/components/equipments/equipment/equipment.component.html b/research-hub-web/src/app/components/equipments/equipment/equipment.component.html
index e73b0a0c9..10b5fa143 100644
--- a/research-hub-web/src/app/components/equipments/equipment/equipment.component.html
+++ b/research-hub-web/src/app/components/equipments/equipment/equipment.component.html
@@ -96,7 +96,7 @@
       class="section"
       fxLayout="column"
     >
-      <h3>
+      <h3 *ngIf="equipment?.relatedItemsCollection.items.length > 0">
         Explore Related
         <hr />
       </h3>
diff --git a/research-hub-web/src/app/components/events/event/event.component.html b/research-hub-web/src/app/components/events/event/event.component.html
index 470415945..fce47c47a 100644
--- a/research-hub-web/src/app/components/events/event/event.component.html
+++ b/research-hub-web/src/app/components/events/event/event.component.html
@@ -59,7 +59,7 @@
 
     <!-- Related -->
     <div class="event-owners section" fxLayout="column">
-      <h3>
+      <h3 *ngIf="event?.relatedItemsCollection.items.length > 0">
         Explore Related
         <hr />
       </h3>
diff --git a/research-hub-web/src/app/components/fundings/funding/funding.component.html b/research-hub-web/src/app/components/fundings/funding/funding.component.html
index 181f1123d..21e361745 100644
--- a/research-hub-web/src/app/components/fundings/funding/funding.component.html
+++ b/research-hub-web/src/app/components/fundings/funding/funding.component.html
@@ -130,7 +130,7 @@ <h3>
 
     <!-- Related -->
     <div class="funding-owners section" fxLayout="column">
-      <h3>
+      <h3 *ngIf="funding?.relatedItemsCollection.items.length > 0">
         Explore Related
         <hr />
       </h3>
diff --git a/research-hub-web/src/app/components/services/service/service.component.html b/research-hub-web/src/app/components/services/service/service.component.html
index a58d26944..4f2c648cb 100644
--- a/research-hub-web/src/app/components/services/service/service.component.html
+++ b/research-hub-web/src/app/components/services/service/service.component.html
@@ -67,7 +67,7 @@
       "
       fxLayout="column"
     >
-      <h3>
+      <h3 *ngIf="service?.relatedItemsCollection.items.length > 0">
         Explore Related
         <hr />
       </h3>
diff --git a/research-hub-web/src/app/components/softwares/software/software.component.html b/research-hub-web/src/app/components/softwares/software/software.component.html
index 177a4ae8a..41422b353 100644
--- a/research-hub-web/src/app/components/softwares/software/software.component.html
+++ b/research-hub-web/src/app/components/softwares/software/software.component.html
@@ -74,7 +74,7 @@
       class="section"
       fxLayout="column"
     >
-      <h3>
+      <h3 *ngIf="software?.relatedItemsCollection.items.length > 0">
         Explore Related
         <hr />
       </h3>
diff --git a/research-hub-web/src/app/components/subhubs/subhub/subhub.component.html b/research-hub-web/src/app/components/subhubs/subhub/subhub.component.html
index 28e3b6990..7bbe663f4 100644
--- a/research-hub-web/src/app/components/subhubs/subhub/subhub.component.html
+++ b/research-hub-web/src/app/components/subhubs/subhub/subhub.component.html
@@ -103,7 +103,7 @@
       "
       fxLayout="column"
     >
-      <h3>
+      <h3 *ngIf="subHub?.relatedItemsCollection.items.length > 0">
         Explore Related
         <hr />
       </h3>

From fbafbf2926cb3afc39a30ad62caf1ab6df5f1da2 Mon Sep 17 00:00:00 2001
From: rosemcc <rosemccoll@hotmail.com>
Date: Tue, 23 Nov 2021 12:51:05 +1300
Subject: [PATCH 37/39] fix empty doc and org cards for items in draft

---
 .../src/app/components/articles/article/article.component.ts  | 4 ++--
 .../components/casestudys/case-study/case-study.component.ts  | 4 ++--
 .../components/equipments/equipment/equipment.component.ts    | 4 ++--
 .../src/app/components/events/event/event.component.ts        | 4 ++--
 .../src/app/components/fundings/funding/funding.component.ts  | 4 ++--
 .../src/app/components/services/service/service.component.ts  | 4 ++--
 .../app/components/softwares/software/software.component.ts   | 4 ++--
 .../src/app/components/subhubs/subhub/subhub.component.ts     | 4 ++--
 8 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/research-hub-web/src/app/components/articles/article/article.component.ts b/research-hub-web/src/app/components/articles/article/article.component.ts
index 41b6ca459..6b003788b 100644
--- a/research-hub-web/src/app/components/articles/article/article.component.ts
+++ b/research-hub-web/src/app/components/articles/article/article.component.ts
@@ -75,9 +75,9 @@ export class ArticleComponent implements OnInit, OnDestroy {
       map(data => {
         // Strip nulls from related collection data.
         data.relatedContactsCollection.items = data.relatedContactsCollection.items.filter(item => item);
-        data.relatedDocsCollection.items = data.relatedDocsCollection.items.filter(item => item);
+        data.relatedDocsCollection.items = data.relatedDocsCollection.items.filter(item => item && item.title);
         data.relatedItemsCollection.items = data.relatedItemsCollection.items.filter(item => item);
-        data.relatedOrgsCollection.items = data.relatedOrgsCollection.items.filter(item => item);
+        data.relatedOrgsCollection.items = data.relatedOrgsCollection.items.filter(item => item && item.name);
 
         // If Call To Action is an email address
         if (data.callToAction?.match(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/)) {
diff --git a/research-hub-web/src/app/components/casestudys/case-study/case-study.component.ts b/research-hub-web/src/app/components/casestudys/case-study/case-study.component.ts
index 4f8cdd26e..d5fb10ace 100644
--- a/research-hub-web/src/app/components/casestudys/case-study/case-study.component.ts
+++ b/research-hub-web/src/app/components/casestudys/case-study/case-study.component.ts
@@ -76,9 +76,9 @@ export class CaseStudyComponent implements OnInit, OnDestroy {
       map(data => {
         // Strip nulls from related collection data.
         data.relatedContactsCollection.items = data.relatedContactsCollection.items.filter(item => item);
-        data.relatedDocsCollection.items = data.relatedDocsCollection.items.filter(item => item);
+        data.relatedDocsCollection.items = data.relatedDocsCollection.items.filter(item => item && item.title);
         data.relatedItemsCollection.items = data.relatedItemsCollection.items.filter(item => item);
-        data.relatedOrgsCollection.items = data.relatedOrgsCollection.items.filter(item => item);
+        data.relatedOrgsCollection.items = data.relatedOrgsCollection.items.filter(item => item && item.name);
 
         // Set banner image URL for webp format if webp is supported
         if (data.banner?.url) {
diff --git a/research-hub-web/src/app/components/equipments/equipment/equipment.component.ts b/research-hub-web/src/app/components/equipments/equipment/equipment.component.ts
index 86c540709..be9fb8939 100644
--- a/research-hub-web/src/app/components/equipments/equipment/equipment.component.ts
+++ b/research-hub-web/src/app/components/equipments/equipment/equipment.component.ts
@@ -75,9 +75,9 @@ export class EquipmentComponent implements OnInit, OnDestroy {
       map((data) => {
         // Strip nulls from related collection data.
         data.relatedContactsCollection.items = data.relatedContactsCollection.items.filter(item => item);
-        data.relatedDocsCollection.items = data.relatedDocsCollection.items.filter(item => item);
+        data.relatedDocsCollection.items = data.relatedDocsCollection.items.filter(item => item && item.title);
         data.relatedItemsCollection.items = data.relatedItemsCollection.items.filter(item => item);
-        data.relatedOrgsCollection.items = data.relatedOrgsCollection.items.filter(item => item);
+        data.relatedOrgsCollection.items = data.relatedOrgsCollection.items.filter(item => item && item.name);
 
         // If Call To Action is an email address
         if (data.callToAction?.match(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/)) {
diff --git a/research-hub-web/src/app/components/events/event/event.component.ts b/research-hub-web/src/app/components/events/event/event.component.ts
index 5ff24799b..c02f29e95 100644
--- a/research-hub-web/src/app/components/events/event/event.component.ts
+++ b/research-hub-web/src/app/components/events/event/event.component.ts
@@ -79,9 +79,9 @@ export class EventComponent implements OnInit, OnDestroy {
 
         // Strip nulls from related collection data.
         data.relatedContactsCollection.items = data.relatedContactsCollection.items.filter(item => item);
-        data.relatedDocsCollection.items = data.relatedDocsCollection.items.filter(item => item);
+        data.relatedDocsCollection.items = data.relatedDocsCollection.items.filter(item => item && item.title);
         data.relatedItemsCollection.items = data.relatedItemsCollection.items.filter(item => item);
-        data.relatedOrgsCollection.items = data.relatedOrgsCollection.items.filter(item => item);
+        data.relatedOrgsCollection.items = data.relatedOrgsCollection.items.filter(item => item && item.name);
 
         // Set banner image URL for webp format if webp is supported
         if (data.banner?.url) {
diff --git a/research-hub-web/src/app/components/fundings/funding/funding.component.ts b/research-hub-web/src/app/components/fundings/funding/funding.component.ts
index 3a5a0f3bc..541538947 100644
--- a/research-hub-web/src/app/components/fundings/funding/funding.component.ts
+++ b/research-hub-web/src/app/components/fundings/funding/funding.component.ts
@@ -79,9 +79,9 @@ export class FundingComponent implements OnInit, OnDestroy {
 
         // Strip nulls from related collection data.
         data.relatedContactsCollection.items = data.relatedContactsCollection.items.filter(item => item);
-        data.relatedDocsCollection.items = data.relatedDocsCollection.items.filter(item => item);
+        data.relatedDocsCollection.items = data.relatedDocsCollection.items.filter(item => item && item.title);
         data.relatedItemsCollection.items = data.relatedItemsCollection.items.filter(item => item);
-        data.relatedOrgsCollection.items = data.relatedOrgsCollection.items.filter(item => item);
+        data.relatedOrgsCollection.items = data.relatedOrgsCollection.items.filter(item => item && item.name);
         data.applicationDocumentsCollection.items = data.applicationDocumentsCollection.items.filter(item => item);
 
         // Set banner image URL for webp format if webp is supported
diff --git a/research-hub-web/src/app/components/services/service/service.component.ts b/research-hub-web/src/app/components/services/service/service.component.ts
index 555c3cf8b..0e04f2aa4 100644
--- a/research-hub-web/src/app/components/services/service/service.component.ts
+++ b/research-hub-web/src/app/components/services/service/service.component.ts
@@ -79,9 +79,9 @@ export class ServiceComponent implements OnInit, OnDestroy {
 
         // Strip nulls from related collection data.
         data.relatedContactsCollection.items = data.relatedContactsCollection.items.filter(item => item);
-        data.relatedDocsCollection.items = data.relatedDocsCollection.items.filter(item => item);
+        data.relatedDocsCollection.items = data.relatedDocsCollection.items.filter(item => item && item.title);
         data.relatedItemsCollection.items = data.relatedItemsCollection.items.filter(item => item);
-        data.relatedOrgsCollection.items = data.relatedOrgsCollection.items.filter(item => item);
+        data.relatedOrgsCollection.items = data.relatedOrgsCollection.items.filter(item => item && item.name);
 
         // Set banner image URL for webp format if webp is supported
         if (data.banner?.url) {
diff --git a/research-hub-web/src/app/components/softwares/software/software.component.ts b/research-hub-web/src/app/components/softwares/software/software.component.ts
index 1469b1271..9f211cf78 100644
--- a/research-hub-web/src/app/components/softwares/software/software.component.ts
+++ b/research-hub-web/src/app/components/softwares/software/software.component.ts
@@ -74,9 +74,9 @@ export class SoftwareComponent implements OnInit, OnDestroy {
       map(data => {
         // Strip nulls from related collection data.
         data.relatedContactsCollection.items = data.relatedContactsCollection.items.filter(item => item);
-        data.relatedDocsCollection.items = data.relatedDocsCollection.items.filter(item => item);
+        data.relatedDocsCollection.items = data.relatedDocsCollection.items.filter(item => item && item.title);
         data.relatedItemsCollection.items = data.relatedItemsCollection.items.filter(item => item);
-        data.relatedOrgsCollection.items = data.relatedOrgsCollection.items.filter(item => item);
+        data.relatedOrgsCollection.items = data.relatedOrgsCollection.items.filter(item => item && item.name);
 
         // Set banner image URL for webp format if webp is supported
         if (data.banner?.url) {
diff --git a/research-hub-web/src/app/components/subhubs/subhub/subhub.component.ts b/research-hub-web/src/app/components/subhubs/subhub/subhub.component.ts
index 7de4fa441..113af531b 100644
--- a/research-hub-web/src/app/components/subhubs/subhub/subhub.component.ts
+++ b/research-hub-web/src/app/components/subhubs/subhub/subhub.component.ts
@@ -78,8 +78,8 @@ export class SubhubComponent implements OnInit, OnDestroy {
         data.externalPagesCollection.items = data.externalPagesCollection.items.filter(item => item);
         data.relatedItemsCollection.items = data.relatedItemsCollection.items.filter(item => item);
         data.relatedContactsCollection.items = data.relatedContactsCollection.items.filter(item => item);
-        data.relatedOrgsCollection.items = data.relatedOrgsCollection.items.filter(item => item);
-        data.relatedDocsCollection.items = data.relatedDocsCollection.items.filter(item => item);
+        data.relatedOrgsCollection.items = data.relatedOrgsCollection.items.filter(item => item && item.name);
+        data.relatedDocsCollection.items = data.relatedDocsCollection.items.filter(item => item && item.title);
 
         // For each rich text field add the links to the link maps in the body media service to enable rich text rendering
         this.bodyMediaService.buildLinkMaps(data.bodyText?.links);

From fb10bc11662a4d2744fee67d9d5bafccade20b68 Mon Sep 17 00:00:00 2001
From: rosemcc <rosemccoll@hotmail.com>
Date: Tue, 23 Nov 2021 14:15:32 +1300
Subject: [PATCH 38/39] added breadcrumbs unit tests

---
 .../breadcrumbs/breadcrumbs.component.html    |  2 +-
 .../breadcrumbs/breadcrumbs.component.spec.ts | 43 +++++++++++++++++--
 2 files changed, 41 insertions(+), 4 deletions(-)

diff --git a/research-hub-web/src/app/components/shared/breadcrumbs/breadcrumbs.component.html b/research-hub-web/src/app/components/shared/breadcrumbs/breadcrumbs.component.html
index 3db62b82b..667f9961f 100644
--- a/research-hub-web/src/app/components/shared/breadcrumbs/breadcrumbs.component.html
+++ b/research-hub-web/src/app/components/shared/breadcrumbs/breadcrumbs.component.html
@@ -1,5 +1,5 @@
 <div id="breadcrumbs" ngClass.lt-md="breadcrumbs-mobile">
-    <span class="breadcrumb-subhub">
+    <span id="home" class="breadcrumb-subhub">
         <a [routerLink]="'/'">Home</a>
     </span>
     <span class="breadcrumb-subhub" *ngFor="let subHub of parentSubHubs?.slice().reverse()">
diff --git a/research-hub-web/src/app/components/shared/breadcrumbs/breadcrumbs.component.spec.ts b/research-hub-web/src/app/components/shared/breadcrumbs/breadcrumbs.component.spec.ts
index 2966f2505..97c457a88 100644
--- a/research-hub-web/src/app/components/shared/breadcrumbs/breadcrumbs.component.spec.ts
+++ b/research-hub-web/src/app/components/shared/breadcrumbs/breadcrumbs.component.spec.ts
@@ -1,13 +1,13 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
-import { CerGraphqlService } from '@services/cer-graphql.service';
+import { CerGraphqlService, SubHubTitleAndSlug } from '@services/cer-graphql.service';
 import { MockProvider } from 'ng-mocks';
 import { BreadcrumbsComponent } from './breadcrumbs.component';
 
 describe('BreadcrumbsComponent', () => {
   let component: BreadcrumbsComponent;
   let fixture: ComponentFixture<BreadcrumbsComponent>;
-  let breadCrumbs = [
+  let breadCrumbs: SubHubTitleAndSlug[] = [
         {
           'title': 'Engagement',
           'slug': 'engagement'
@@ -27,7 +27,9 @@ describe('BreadcrumbsComponent', () => {
       declarations: [ BreadcrumbsComponent ],
       imports: [RouterTestingModule],
       providers: [
-        MockProvider(CerGraphqlService),
+        MockProvider(CerGraphqlService, {
+          getParentSubHubs: async () => breadCrumbs
+        }),
       ]
     })
     .compileComponents();
@@ -42,4 +44,39 @@ describe('BreadcrumbsComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should request breadcrumbs array from cer-graphql service', async () => {
+    component.ngOnInit();
+    fixture.whenStable().then(() => {
+      expect(component.parentSubHubs).toBe(breadCrumbs);
+    })
+  });
+
+  it('should display home as the first breadcrumb', async () => {
+    component.ngOnInit();
+    fixture.whenStable().then(() => {
+      const homeBreadcrumb = fixture.nativeElement.querySelector('#home');
+      expect(homeBreadcrumb.textContent).toContain('Home');
+    })
+  });
+
+  it('should display the subhub parents breadcrumbs', async () => {
+    component.ngOnInit();
+    fixture.whenStable().then(() => {
+      fixture.detectChanges();
+      const spans = fixture.nativeElement.querySelectorAll('span');
+      expect(spans.length).toBe(5);
+      expect(spans[1].textContent).toContain('Centre for eResearch');
+    })
+  });
+
+  it('should display the page title breadcrumb', async () => {
+    component.title = 'Test'
+    component.ngOnInit();
+    fixture.whenStable().then(() => {
+      fixture.detectChanges();
+      const currentPageBreadcrumb = fixture.nativeElement.querySelector('#breadcrumb-current-page');
+      expect(currentPageBreadcrumb.textContent).toContain('Test');
+    })
+  });
 });

From ef9deb0d654deec3c8fb521f50d40ffe2f845ef8 Mon Sep 17 00:00:00 2001
From: rosemcc <rosemccoll@hotmail.com>
Date: Tue, 23 Nov 2021 14:32:30 +1300
Subject: [PATCH 39/39] fix breadcrumbs bug

---
 .../shared/breadcrumbs/breadcrumbs.component.ts           | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/research-hub-web/src/app/components/shared/breadcrumbs/breadcrumbs.component.ts b/research-hub-web/src/app/components/shared/breadcrumbs/breadcrumbs.component.ts
index 9ba8e1369..b83dddfab 100644
--- a/research-hub-web/src/app/components/shared/breadcrumbs/breadcrumbs.component.ts
+++ b/research-hub-web/src/app/components/shared/breadcrumbs/breadcrumbs.component.ts
@@ -19,9 +19,11 @@ export class BreadcrumbsComponent implements OnInit {
   ) { }
 
   ngOnInit(): void {
-    this.route.paramMap.pipe(
-      map((paramMap) => paramMap.get('slug')),
+    this.route.params.pipe(
+      map((params) => {
+        return (params.slug || this.route.snapshot.data.slug) as string;
+      }),
       mergeMap((slug: string) => from(this.cerGraphQLService.getParentSubHubs(slug)))
-    ).subscribe((result) => this.parentSubHubs = result);
+    ).subscribe((result) => this.parentSubHubs = result);    
   }
 }