ufal/fe-fix-static-page-redirect (#421)

* Fixed static page redirects. * Refactored processing links.
dataquest-dev · Jun 19, 2024 · eb5db6f · eb5db6f
1 parent 96f58c4
commit eb5db6f
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 19 deletions.
diff --git a/src/app/static-page/static-page-routing-paths.ts b/src/app/static-page/static-page-routing-paths.ts
@@ -3,4 +3,5 @@
  */
 export const STATIC_PAGE_PATH = 'static';
 export const STATIC_FILES_PROJECT_PATH = 'static-files';
+export const HTML_SUFFIX = '.html';
 export const STATIC_FILES_DEFAULT_ERROR_PAGE_PATH = STATIC_FILES_PROJECT_PATH + '/' + 'error.html';
diff --git a/src/app/static-page/static-page.component.ts b/src/app/static-page/static-page.component.ts
@@ -4,7 +4,11 @@ import { BehaviorSubject, firstValueFrom } from 'rxjs';
 import { Router } from '@angular/router';
 import { isEmpty, isNotEmpty } from '../shared/empty.util';
 import { LocaleService } from '../core/locale/locale.service';
-import { STATIC_FILES_DEFAULT_ERROR_PAGE_PATH, STATIC_FILES_PROJECT_PATH } from './static-page-routing-paths';
+import {
+  HTML_SUFFIX,
+  STATIC_FILES_DEFAULT_ERROR_PAGE_PATH,
+  STATIC_FILES_PROJECT_PATH, STATIC_PAGE_PATH
+} from './static-page-routing-paths';
 import { APP_CONFIG, AppConfig } from '../../config/app-config.interface';
 
 /**
@@ -39,6 +43,8 @@ export class StaticPageComponent implements OnInit {
     // Compose url
     url = STATIC_FILES_PROJECT_PATH;
     url += isEmpty(language) ? '/' + this.htmlFileName : '/' + language + '/' + this.htmlFileName;
+    // Add `.html` suffix to get the current html file
+    url = url.endsWith(HTML_SUFFIX) ? url : url + HTML_SUFFIX;
     let potentialContent = await firstValueFrom(this.htmlContentService.fetchHtmlContent(url));
     if (isNotEmpty(potentialContent)) {
       this.htmlContent.next(potentialContent);
@@ -57,25 +63,70 @@ export class StaticPageComponent implements OnInit {
     await this.loadErrorPage();
   }
 
-  processLinks(e) {
-    const element: HTMLElement = e.target;
-    if (element.nodeName === 'A') {
-      e.preventDefault();
-      const href = element.getAttribute('href')?.replace('/', '');
-      let redirectUrl = window.location.origin + this.appConfig.ui.nameSpace + '/static/';
-      // Start with `#` - redirect to the fragment
-      if (href.startsWith('#')) {
-        redirectUrl += this.htmlFileName + href;
-      } else if (href.startsWith('.')) {
-        // Redirect using namespace e.g. `./test.html` -> `<UI_PATH>/namespace/static/test.html`
-        redirectUrl +=  href.replace('.', '') + '.html';
-      } else {
-        // Redirect without using namespace e.g. `/test.html` -> `<UI_PATH>/test.html`
-        redirectUrl = redirectUrl.replace(this.appConfig.ui.nameSpace, '') + href;
-      }
-      // Call redirect
-      window.location.href = redirectUrl;
+  /**
+   * Handle click on links in the static page.
+   * @param event
+   */
+  processLinks(event: Event): void {
+    const targetElement = event.target as HTMLElement;
+
+    if (targetElement.nodeName !== 'A') {
+      return;
     }
+
+    event.preventDefault();
+
+    const href = targetElement.getAttribute('href');
+    const { nameSpace } = this.appConfig.ui;
+    const namespacePrefix = nameSpace === '/' ? '' : nameSpace;
+
+    const redirectUrl = this.composeRedirectUrl(href, namespacePrefix);
+
+    if (this.isFragmentLink(href)) {
+      this.redirectToFragment(redirectUrl, href);
+    } else if (this.isRelativeLink(href)) {
+      this.redirectToRelativeLink(redirectUrl, href);
+    } else if (this.isExternalLink(href)) {
+      this.redirectToExternalLink(href);
+    } else {
+      this.redirectToAbsoluteLink(redirectUrl, href, namespacePrefix);
+    }
+  }
+
+  private composeRedirectUrl(href: string | null, namespacePrefix: string): string {
+    const staticPagePath = STATIC_PAGE_PATH;
+    const baseUrl = new URL(window.location.origin);
+    baseUrl.pathname = `${namespacePrefix}/${staticPagePath}/`;
+    return baseUrl.href;
+  }
+
+  private isFragmentLink(href: string | null): boolean {
+    return href?.startsWith('#') ?? false;
+  }
+
+  private redirectToFragment(redirectUrl: string, href: string | null): void {
+    window.location.href = `${redirectUrl}${this.htmlFileName}${href}`;
+  }
+
+  private isRelativeLink(href: string | null): boolean {
+    return href?.startsWith('.') ?? false;
+  }
+
+  private redirectToRelativeLink(redirectUrl: string, href: string | null): void {
+    window.location.href = new URL(href, redirectUrl).href;
+  }
+
+  private isExternalLink(href: string | null): boolean {
+    return (href?.startsWith('http') || href?.startsWith('www')) ?? false;
+  }
+
+  private redirectToExternalLink(href: string | null): void {
+    window.location.replace(href);
+  }
+
+  private redirectToAbsoluteLink(redirectUrl: string, href: string | null, namespacePrefix: string): void {
+    const absoluteUrl = new URL(href, redirectUrl.replace(namespacePrefix, ''));
+    window.location.href = absoluteUrl.href;
   }
 
   /**