feat: auto-reload address book after login

contacts/src/components/address-book-page/address-book-page.spec.tsx

@@ -1,3 +1,7 @@
+jest.mock('../../events/usePodOS');
+jest.mock('../../utils/debounceTime');
+
+import { PodOS, SessionInfo } from '@pod-os/core';
 import { ContactsModule } from '@solid-data-modules/contacts-rdflib';
 
 // noinspection ES6UnusedImports
@@ -6,9 +10,29 @@ import { h } from '@stencil/core';
 import { newSpecPage } from '@stencil/core/testing';
 
 import { fireEvent, getByRole } from '@testing-library/dom';
+import { when } from 'jest-when';
+import { BehaviorSubject, tap } from 'rxjs';
+import { usePodOS } from '../../events/usePodOS';
 import { AddressBookPage } from './address-book-page';
 
+// noinspection ES6PreferShortImport
+import { debounceTime } from '../../utils/debounceTime';
+
 describe('address-book-page', () => {
+  let sessionInfo$;
+
+  beforeEach(() => {
+    when(debounceTime).mockReturnValue(tap()); // disable the debounce time for testing
+    sessionInfo$ = new BehaviorSubject<SessionInfo>({
+      sessionId: 'test-session',
+      isLoggedIn: false,
+      webId: '',
+    });
+    when(usePodOS).mockResolvedValue({
+      observeSession: () => sessionInfo$,
+    } as unknown as PodOS);
+  });
+
   it('shows loading indicator while there is no address book', async () => {
     const module = {
       readAddressBook: jest.fn(),
@@ -87,10 +111,32 @@ describe('address-book-page', () => {
               retry
             </button>
           </p>
-          <pos-resource uri='https://pod.test/contacts#it'></pos-resource>
         </main>
       `);
     });
+
+    it('retries to fetch the address book after login', async () => {
+      const readAddressBook = jest.fn().mockRejectedValueOnce({ error: 'fake error for testing' }).mockResolvedValueOnce({});
+      const module = {
+        readAddressBook: readAddressBook,
+      } as unknown as ContactsModule;
+      const page = await newSpecPage({
+        components: [AddressBookPage],
+        template: () => <pos-contacts-address-book-page uri="https://pod.test/contacts#it" contactsModule={module}></pos-contacts-address-book-page>,
+        supportsShadowDom: false,
+      });
+      await page.waitForChanges();
+      sessionInfo$.next({
+        sessionId: 'test-session',
+        isLoggedIn: true,
+        webId: 'any',
+      });
+      await page.waitForChanges();
+      const main = getByRole(page.root, 'main');
+      expect(main.firstChild).toEqualHtml(`
+        <pos-contacts-contact-list></pos-contacts-contact-list>
+      `);
+    });
   });
 
   describe('event handling', () => {

contacts/src/components/address-book-page/address-book-page.tsx

@@ -1,12 +1,18 @@
 import { AddressBook, Contact, ContactsModule, Group } from '@solid-data-modules/contacts-rdflib';
-import { Component, h, Host, Listen, Prop, State, Watch } from '@stencil/core';
+import { Component, Element, h, Host, Listen, Prop, State, Watch } from '@stencil/core';
+import { Subject, takeUntil, tap } from 'rxjs';
+import { usePodOS } from '../../events/usePodOS';
+// noinspection ES6PreferShortImport needs to be mocked
+import { debounceTime } from '../../utils/debounceTime';
 
 @Component({
   tag: 'pos-contacts-address-book-page',
   styleUrl: './address-book-page.css',
   shadow: true,
 })
 export class AddressBookPage {
+  @Element() el: HTMLElement;
+
   @Prop()
   uri!: string;
 
@@ -28,8 +34,19 @@ export class AddressBookPage {
   @State()
   private menuOpen = false;
 
-  componentWillLoad() {
-    this.loadAddressBook();
+  private readonly disconnected$ = new Subject<void>();
+
+  async componentWillLoad() {
+    const os = await usePodOS(this.el);
+    os.observeSession()
+      .pipe(
+        takeUntil(this.disconnected$),
+        debounceTime(300), // make sure the session state has "settled" after redirect
+        tap(() => {
+          this.loadAddressBook();
+        }),
+      )
+      .subscribe();
   }
 
   @Listen('pod-os-contacts:contact-selected')
@@ -53,6 +70,7 @@ export class AddressBookPage {
   @Watch('uri')
   async loadAddressBook() {
     try {
+      this.addressBook = null;
       this.error = null;
       this.addressBook = await this.contactsModule.readAddressBook(this.uri);
     } catch (e) {
@@ -74,8 +92,6 @@ export class AddressBookPage {
               retry
             </button>
           </p>
-
-          <pos-resource uri={this.uri}></pos-resource>
         </main>
       );
     }

contacts/src/utils/debounceTime.ts

@@ -0,0 +1 @@
+export { debounceTime } from 'rxjs';