feat(header): remove authLinks while exposing user object

now the header will sync and trigger a 'userSynced' event that host app can use in order to take decisions based on user returned value
debtcollective · Sep 26, 2020 · fa7e5dc · fa7e5dc
1 parent de9749b
commit fa7e5dc
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 11 deletions.
diff --git a/packages/header-component/src/components.d.ts b/packages/header-component/src/components.d.ts
@@ -197,6 +197,10 @@ declare namespace LocalJSX {
           * URL to the member hub page
          */
         "memberhuburl"?: string;
+        /**
+          * Emit event to exposed fetched user on host application TODO: Cannot find name User on EventEmitter<User>
+         */
+        "onUserSynced"?: (event: CustomEvent<any>) => void;
     }
     interface DcMenu {
         /**

diff --git a/packages/header-component/src/components/dc-header/dc-header.tsx b/packages/header-component/src/components/dc-header/dc-header.tsx
@@ -6,7 +6,9 @@ import {
   Watch,
   getAssetPath,
   Host,
-  Listen
+  Listen,
+  Event,
+  EventEmitter
 } from "@stencil/core";
 import { syncCurrentUser } from "../../services/session";
 import "./dc-menu";
@@ -78,6 +80,17 @@ export class Header {
    */
   @State() isMenuOpen: boolean;
 
+  /**
+   * Emit event to exposed fetched user on host application
+   * TODO: Cannot find name User on EventEmitter<User>
+   */
+  @Event({
+    eventName: 'userSynced',
+    composed: true,
+    cancelable: true,
+    bubbles: true,
+  }) userSynced: EventEmitter;
+
   /**
    * Logo image
    */
@@ -112,6 +125,7 @@ export class Header {
     const user = await syncCurrentUser(this.community);
 
     this.user = user;
+    this.userSynced.emit(user)
   }
 
   componentWillLoad() {
@@ -120,14 +134,7 @@ export class Header {
   }
 
   render() {
-    const user = this.user;
-    const authLinks = [
-      {
-        text: 'Member hub',
-        href: this.memberhuburl
-      }
-    ];
-    const linksToRender = this.user?.id ? [...authLinks, ...this._links] : this._links;
+    const linksToRender = this._links
 
     return (
       <Host>
@@ -162,8 +169,8 @@ export class Header {
             </slot>
           </nav>
           <div class="session-items">
-            {user ? (
-              <dc-user-items user={user} community={this.community} />
+            {this.user ? (
+              <dc-user-items user={this.user} community={this.community} />
             ) : (
               <div class="session-links">
                 <a href={loginURL({ community: this.community, host: this.host })} class="btn btn-outline">

diff --git a/packages/header-component/src/index.html b/packages/header-component/src/index.html
@@ -23,11 +23,22 @@
     style="background: linear-gradient(180deg, #dbf8ff 0%, #fcfbf7 88.74%); height: 100%;"
   >
     <dc-header
+      id="dc-header"
       host="http://lvh.me:3333"
       community="http://lvh.me:3000"
       links='[{"href":"http://debtcollective.org/","text":"About us"}, {"href":"https://community.debtcollective.org/","text":"Community"}, {"href":"https://teespring.com/stores/debt-collective","text":"Store"}]'
     ></dc-header>
 
+    <p style="margin-top: 20rem;">
+      <i>Check console to see output of props functions</i>
+    </p>
+
     <!-- You can choose to render custom navigation, check the README.md file and restart the stencil server after change index.html -->
+    <script>
+      const header = document.querySelector('#dc-header')
+      header.addEventListener('userSynced', (event) => {
+        console.log('userSynced', event.detail);
+      })
+    </script>
   </body>
 </html>