feat(header): avoid need to match certain format for urls (#163)

instead normalise urls within the component to avoid '/' break functionality

packages/header-component/src/components/dc-header/header.tsx

@@ -14,6 +14,7 @@ import {
 } from "@stencil/core";
 import { syncCurrentUser } from "../../services/session";
 import { getGuestActions } from "../../utils/config";
+import { addSlash } from "../../utils/normalise";
 
 type User = {
   id: number;
@@ -109,8 +110,13 @@ export class Header {
 
   // A return promise here will force to wait before first render
   componentWillLoad() {
+    // Make sure to get the logo from prop or use default
     this._logo = this.logo || this._defaultLogo;
     this._logoSmall = this.logosmall || this._defaultLogoSmall;
+    // normalise the links to make sure they match the expected format
+    this.homepage = addSlash(this.homepage);
+    this.community = addSlash(this.community);
+    // Allow to fetch users session
     this.syncCurrentUser();
   }
 

packages/header-component/src/services/session.ts

@@ -1,4 +1,4 @@
-import { sanitiseSSOUrl } from "../utils/sanitise";
+import { trimSlash } from "../utils/normalise";
 
 // https://stackoverflow.com/a/33829607/1422380
 const getCSRFToken = async (discourseEndpoint) => {
@@ -42,7 +42,7 @@ const getCurrentUser = async (discourseEndpoint, { csrfToken }) => {
 
 export const syncCurrentUser = async (community) => {
   let currentUser;
-  let discourseEndpoint = sanitiseSSOUrl(community);
+  let discourseEndpoint = trimSlash(community);
 
   try {
     const csrfToken = await getCSRFToken(discourseEndpoint);
@@ -55,7 +55,7 @@ export const syncCurrentUser = async (community) => {
 };
 
 export const logout = async (community, username) => {
-  let discourseEndpoint = sanitiseSSOUrl(community);
+  let discourseEndpoint = trimSlash(community);
   const url = `${discourseEndpoint}/session/${username}`;
   const csrfToken = await getCSRFToken(discourseEndpoint);
 

packages/header-component/src/utils/community.ts

@@ -1,12 +1,12 @@
-import { sanitiseSSOUrl } from "./sanitise";
+import { trimSlash } from "./normalise";
 
 /**
  * preffix a given string with the base community URL.
  *
  * @param str typically a url that needs to be preffixed with community base url
  */
 export const preffixCommunityURL = (community, str) =>
-  `${sanitiseSSOUrl(community)}/${str}`;
+  `${trimSlash(community)}/${str}`;
 
 /**
  * Takes an object with avatar_template (typically user) and return a full

packages/header-component/src/utils/normalise.ts

@@ -0,0 +1,19 @@
+export const trimSlash = (url: string) => {
+  if (url === "/") {
+    return window.location.origin;
+  }
+
+  if (url.charAt(url.length - 1) === "/") {
+    return url.slice(0, -1);
+  }
+
+  return url;
+};
+
+export const addSlash = (url: string) => {
+  if (url.charAt(url.length - 1) !== "/") {
+    return `${url}/`;
+  }
+
+  return url;
+};