@triptease/tt-navbar 0.0.40 → 0.0.42

package/dist/web/urlMappings.js

@@ -1,5 +1,5 @@
 /**
-* @triptease/tt-navbar v0.0.40
+* @triptease/tt-navbar v0.0.42
 */
 
 // src/urlMappings.ts

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent tt-navbar following open-wc recommendations",
   "license": "MIT",
   "author": "tt-navbar",
-  "version": "0.0.40",
+  "version": "0.0.42",
   "type": "module",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
@@ -28,6 +28,7 @@
   },
   "dependencies": {
     "@clerk/clerk-js": "^5.102.1",
+    "@clerk/types": "^4.95.1",
     "@triptease/icons": "^1.1.1",
     "@triptease/tt-combobox": "^5.3.0",
     "lit": "^3.1.4"

package/src/NavbarController.ts

@@ -1,10 +1,15 @@
 import { ReactiveController, ReactiveControllerHost } from 'lit';
+import { UnsubscribeCallback } from '@clerk/types';
 
 export class NavbarController implements ReactiveController {
   host: ReactiveControllerHost;
 
   private _isOpen = true;
 
+  private _hasInitialized = false;
+
+  private _removeClerkListener?: UnsubscribeCallback;
+
   constructor(host: ReactiveControllerHost) {
     (this.host = host).addController(this);
   }
@@ -13,21 +18,33 @@ export class NavbarController implements ReactiveController {
     return this._isOpen;
   }
 
-  hostConnected() {
-    if (window.Clerk) {
-      const userSetting =
-        window.Clerk.user?.unsafeMetadata?.preferences?.ui?.navigationOpen;
+  hostUpdate() {
+    if (!this._hasInitialized && window.Clerk) {
+      this._removeClerkListener = window.Clerk.addListener(resources => {
+        const { user } = resources;
+        if (user && !this._hasInitialized) {
+          const navigationOpen =
+            user.unsafeMetadata?.preferences?.ui?.navigationOpen;
+
+          if (navigationOpen !== undefined) {
+            this._isOpen = navigationOpen;
+            this.host.requestUpdate();
+          }
+
+          this._hasInitialized = true;
+        }
+      });
+    }
+  }
 
-      if (userSetting !== undefined) {
-        this._isOpen = userSetting;
-        this.host.requestUpdate();
-      }
+  hostDisconnected() {
+    if (this._removeClerkListener) {
+      this._removeClerkListener();
     }
   }
 
   async toggle() {
-    const newState = !this._isOpen;
-    this._isOpen = newState;
+    this._isOpen = !this._isOpen;
 
     if (window.Clerk) {
       await window.Clerk.user?.update({
@@ -37,7 +54,7 @@ export class NavbarController implements ReactiveController {
             ...window.Clerk.user?.unsafeMetadata?.preferences,
             ui: {
               ...window.Clerk.user?.unsafeMetadata?.preferences?.ui,
-              navigationOpen: newState,
+              navigationOpen: this.isOpen,
             },
           },
         },

package/src/TtNavbar.ts

@@ -12,7 +12,7 @@ import {
   logout,
   sidebarCollapsed,
   user,
-  wallet
+  wallet,
 } from '@triptease/icons';
 import '@triptease/tt-combobox';
 import { styles } from './styles.js';
@@ -121,10 +121,11 @@ export class TtNavbar extends LitElement {
       const parsedPath = currentPath.replace(this.clientKey, '$CLIENT_KEY');
       const mappedUrl = urlMappings[parsedPath];
       if (mappedUrl) {
-        const clientSpecificUrl = mappedUrl.includes('$CLIENT_KEY') ? mappedUrl.replace('$CLIENT_KEY', this.clientKey) : mappedUrl;
+        const clientSpecificUrl = mappedUrl.includes('$CLIENT_KEY')
+          ? mappedUrl.replace('$CLIENT_KEY', this.clientKey)
+          : mappedUrl;
         const links = Object.values(this.allNavLinks);
         bestMatch = links.find(link => link.href.includes(clientSpecificUrl));
-        console.log({ mappedUrl, clientSpecificUrl, bestMatch });
       }
     }
 
@@ -392,26 +393,26 @@ export class TtNavbar extends LitElement {
               ${
                 this.clients.length > 1
                   ? html`
-                    <tt-combobox
-                      .openUpward=${true}
-                      .value=${this.clientKey ? [this.clientKey] : []}
-                      @change=${this.handleClientChange}
-                    >
-                      ${this.clients.map(
-                        client => html`
-                          <option slot="option" value=${client.clientKey}>
-                            ${client.displayName}
-                          </option>
-                        `
-                      )}
-                    </tt-combobox>
-                  `
+                      <tt-combobox
+                        .openUpward=${true}
+                        .value=${this.clientKey ? [this.clientKey] : []}
+                        @change=${this.handleClientChange}
+                      >
+                        ${this.clients.map(
+                          client => html`
+                            <option slot="option" value=${client.clientKey}>
+                              ${client.displayName}
+                            </option>
+                          `,
+                        )}
+                      </tt-combobox>
+                    `
                   : html`
-                    <div class="single-client-name">
-                      ${this.clients.find(m => m.clientKey === this.clientKey)
-                        ?.displayName}
-                    </div>
-                  `
+                      <div class="single-client-name">
+                        ${this.clients.find(m => m.clientKey === this.clientKey)
+                          ?.displayName}
+                      </div>
+                    `
               }
             </div>
             <a

package/test/tt-navbar.test.ts

@@ -7,6 +7,7 @@ import {
   nextFrame,
   waitUntil,
 } from '@open-wc/testing';
+import { Resources } from '@clerk/types';
 import { TtNavbar } from '../src/index.js';
 import { Routes } from '../src/Routes.js';
 
@@ -412,10 +413,17 @@ describe('TtNavbar', () => {
   });
 
   it('should default to state stored in Clerk when set', async () => {
+    const mockUser = {
+      unsafeMetadata: { preferences: { ui: { navigationOpen: false } } },
+    };
+
+    const mockAddListener = (func: (resources: Resources) => void) => {
+      func({ user: mockUser } as unknown as Resources);
+    };
+
     window.Clerk = {
-      user: {
-        unsafeMetadata: { preferences: { ui: { navigationOpen: false } } },
-      },
+      addListener: mockAddListener,
+      user: mockUser,
     } as Clerk;
 
     const navbar = await fixture<TtNavbar>(
@@ -439,17 +447,24 @@ describe('TtNavbar', () => {
       calledWith = args;
     };
 
-    window.Clerk = {
-      user: {
-        update: mockUpdate,
-        unsafeMetadata: {
-          foo: 'foo',
-          preferences: {
-            bar: 'bar',
-            ui: { duck: 'duck', navigationOpen: false },
-          },
+    const mockUser = {
+      update: mockUpdate,
+      unsafeMetadata: {
+        foo: 'foo',
+        preferences: {
+          bar: 'bar',
+          ui: { duck: 'duck', navigationOpen: false },
         },
       },
+    };
+
+    const mockAddListener = (func: (resources: Resources) => void) => {
+      func({ user: mockUser } as unknown as Resources);
+    };
+
+    window.Clerk = {
+      addListener: mockAddListener,
+      user: mockUser,
     } as unknown as Clerk;
 
     const navbar = await fixture<TtNavbar>(
@@ -461,6 +476,7 @@ describe('TtNavbar', () => {
     ) as HTMLButtonElement;
 
     navbarToggleBtn.click();
+    await elementUpdated(navbar);
 
     await expect(timesCalled).to.equal(1);
     expect(calledWith).to.deep.equal({