Refactor: Multiple GUI updates

src/app/app.routes.ts

@@ -1,6 +1,11 @@
 import { Routes } from '@angular/router';
 import { HomeComponent } from 'pages/home/home.component';
 
+/**
+ * Formats the title on the web browser's tab/window.
+ * @param pageTitle - Title of the page
+ * @returns Formatted page title.
+ */
 function makeTitle(pageTitle: string): string {
   return `${pageTitle} | CSSS`;
 }
@@ -50,5 +55,24 @@ export const routes: Routes = [
     title: makeTitle('Elections')
   },
   { path: '', component: HomeComponent, title: 'Computing Science Student Society' },
+  // 404 will go down there
   { path: '**', component: HomeComponent }
-];
+] as const;
+
+const BASE_ROUTES = routes.reduce((acc, route) => {
+  if (!route.path || route.path === '**') {
+    return acc;
+  }
+  acc.push(route.path);
+  return acc;
+}, [] as string[]);
+
+/**
+ * Gets the base route as a string.
+ *
+ * @param route - Route to get
+ * @returns The route if it exists or 404
+ */
+export function getBaseRoute(route: string): string {
+  return BASE_ROUTES.find(r => r === route) ?? '404';
+}

src/app/components/nav-bar/nav-entries.ts

@@ -6,6 +6,7 @@ import {
   faRoadBarrier,
   faUpRightFromSquare
 } from '@fortawesome/free-solid-svg-icons';
+import { EXTERNAL_LINKS } from 'components/url/links.data';
 
 export interface NavItem extends CodeListItem<NavItem> {
   route?: string; // Internal route
@@ -129,7 +130,7 @@ export const NAVBAR_ENTRIES: NavItem[] = [
         key: 'documentation.constitution',
         label: 'Constitution',
         icon: faUpRightFromSquare,
-        href: 'https://github.com/CSSS/public-docs/tree/master/constitutions'
+        href: EXTERNAL_LINKS['constitution']
       },
       {
         key: 'documentation.policies',
@@ -141,7 +142,7 @@ export const NAVBAR_ENTRIES: NavItem[] = [
         key: 'documentation.sfss-minutes',
         label: 'SFSS Minutes',
         icon: faUpRightFromSquare,
-        href: 'https://sfss.ca/about/meeting-times-minutes/council/'
+        href: 'https://sfss.ca/about/meeting-times-minutes/council'
       }
     ]
   }

src/app/components/url/base-link.component.ts

@@ -0,0 +1,35 @@
+import { ChangeDetectionStrategy, Component, computed, input, Signal } from '@angular/core';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { faUpRightFromSquare } from '@fortawesome/free-solid-svg-icons';
+import { capitalize } from 'utils/string-utils';
+import { CsssLink } from './links.data';
+
+@Component({
+  selector: 'cs-external-link',
+  imports: [FontAwesomeModule],
+  template: '',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export abstract class BaseLinkComponent<T extends CsssLink> {
+  /**
+   * The link that should be used from `links.ts`
+   */
+  key = input.required<T>();
+
+  /**
+   * Overrides the label that is displayed.
+   */
+  label = input<string>();
+
+  /**
+   * Label that is displayed in the element.
+   */
+  protected _label = computed(() => this.label() ?? capitalize(this.key()));
+
+  /**
+   * The href used to move the user to the external link/route.
+   */
+  protected abstract _href: Signal<string>;
+
+  protected externalLinkIcon = faUpRightFromSquare;
+}

src/app/components/url/email-link/email-link.component.html

@@ -0,0 +1,3 @@
+<a class="csss-link" [href]="_href()" target="_blank">
+  {{ _label() }}
+</a>

src/app/components/url/email-link/email-link.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EmailLinkComponent } from './email-link.component';
+
+describe('EmailLinkComponent', () => {
+  let component: EmailLinkComponent;
+  let fixture: ComponentFixture<EmailLinkComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [EmailLinkComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(EmailLinkComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/url/email-link/email-link.component.ts

@@ -0,0 +1,16 @@
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { BaseLinkComponent } from '../base-link.component';
+import { EmailLink, EMAILS } from '../links.data';
+
+@Component({
+  selector: 'cs-email-link',
+  imports: [],
+  templateUrl: './email-link.component.html',
+  styleUrl: './email-link.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class EmailLinkComponent extends BaseLinkComponent<EmailLink> {
+  override key = input.required<EmailLink>();
+  protected override _href = computed(() => `mailto:${EMAILS[this.key()]}`);
+  protected override _label = computed(() => this.label() ?? EMAILS[this.key()]);
+}

src/app/components/url/external-link/external-link.component.html

@@ -0,0 +1,3 @@
+<a class="csss-link" [href]="_href()" target="_blank">
+  {{ _label() }} <fa-icon [icon]="externalLinkIcon"></fa-icon>
+</a>

src/app/components/external-link/link.component.spec.ts → src/app/components/url/external-link/external-link.component.spec.ts

@@ -1,17 +1,17 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { LinkComponent } from './link.component';
+import { ExternalLinkComponent } from './external-link.component';
 
 describe('ExternalLinkComponent', () => {
-  let component: LinkComponent;
-  let fixture: ComponentFixture<LinkComponent>;
+  let component: ExternalLinkComponent;
+  let fixture: ComponentFixture<ExternalLinkComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [LinkComponent]
+      imports: [ExternalLinkComponent]
     }).compileComponents();
 
-    fixture = TestBed.createComponent(LinkComponent);
+    fixture = TestBed.createComponent(ExternalLinkComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/components/url/external-link/external-link.component.ts

@@ -0,0 +1,16 @@
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { BaseLinkComponent } from '../base-link.component';
+import { EXTERNAL_LINKS, ExternalLink } from '../links.data';
+
+@Component({
+  selector: 'cs-external-link',
+  imports: [FontAwesomeModule],
+  templateUrl: './external-link.component.html',
+  styleUrl: './external-link.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ExternalLinkComponent extends BaseLinkComponent<ExternalLink> {
+  override key = input.required<ExternalLink>();
+  protected override _href = computed<string>(() => EXTERNAL_LINKS[this.key()]);
+}

src/app/components/url/links.data.ts

@@ -0,0 +1,40 @@
+/**
+ * Links to external sites.
+ * Please try and keep the keys in alphabetical order.
+ **/
+export const EXTERNAL_LINKS = {
+  boardgameRoomMap: 'https://roomfinder.sfu.ca/apps/sfuroomfinder_web/?q=TASC1%209204',
+  commonRoomMap: 'https://roomfinder.sfu.ca/apps/sfuroomfinder_web/?q=ASB%209971',
+  constitution:
+    'https://github.com/CSSS/public-docs/blob/master/constitutions/Constitution_July_2024.pdf',
+  discord: 'https://discord.sfucsss.org'
+} as const;
+
+export type ExternalLink = keyof typeof EXTERNAL_LINKS;
+
+export const EMAILS = {
+  computingScienceOffice: 'cspc1@sfu.ca',
+  // CSSS
+  csssGeneral: 'csss@sfu.ca',
+  csssCurrentExec: 'csss-exec-current@sfu.ca',
+  csssPastExec: 'csss-exec@sfu.ca',
+  csssPresident: 'csss-president-current@sfu.ca',
+  csssVp: 'csss-vp-current@sfu.ca',
+  csssTreasurer: 'csss-treasurer-current@sfu.ca',
+  csssDoR: 'csss-dor-current@sfu.ca',
+  csssDoE: 'csss-doe-current@sfu.ca',
+  csssDoEE: 'csss-doee-current@sfu.ca',
+  csssADoE: 'csss-adoe-current@sfu.ca',
+  csssDoC: 'csss-doc-current@sfu.ca',
+  csssDoMM: 'csss-domm-current@sfu.ca',
+  csssDoA: 'csss-doa-current@sfu.ca',
+  csssCouncilRep: 'csss-councilrep-current@sfu.ca',
+  csssSysAdmin: 'csss-sysadmin@sfu.ca',
+  csssWebmaster: 'csss-webmaster@sfu.ca',
+  csssFroshChair: 'csss-froshchair@sfu.ca',
+  csssTechFairChair: 'csss-techfair@sfu.ca'
+} as const;
+
+export type EmailLink = keyof typeof EMAILS;
+
+export type CsssLink = EmailLink | ExternalLink;

src/app/components/url/route-link/route-link.component.html

@@ -0,0 +1,3 @@
+<a class="csss-link" [routerLink]="route()">
+  {{ label() }}
+</a>

src/app/components/url/route-link/route-link.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RouteLinkComponent } from './route-link.component';
+
+describe('RouteLinkComponent', () => {
+  let component: RouteLinkComponent;
+  let fixture: ComponentFixture<RouteLinkComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [RouteLinkComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(RouteLinkComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/url/route-link/route-link.component.ts

@@ -0,0 +1,18 @@
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { getBaseRoute } from 'app/app.routes';
+
+@Component({
+  selector: 'cs-route-link',
+  imports: [RouterModule],
+  templateUrl: './route-link.component.html',
+  styleUrl: './route-link.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class RouteLinkComponent {
+  key = input.required<string>();
+  route = computed(() => {
+    return '/' + getBaseRoute(this.key());
+  });
+  label = input<string>();
+}