@internetarchive/collection-browser 0.3.2-alpha.5 → 0.3.3-alpha.1

package/package.json

@@ -3,7 +3,7 @@
   "description": "The Internet Archive Collection Browser.",
   "license": "AGPL-3.0-only",
   "author": "Internet Archive",
-  "version": "0.3.2-alpha.5",
+  "version": "0.3.3-alpha.1",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "scripts": {

package/src/collection-browser.ts

@@ -619,6 +619,14 @@ export class CollectionBrowser
   }
 
   updated(changed: PropertyValues) {
+    if (changed.has('baseQuery') || changed.has('searchType'))
+      console.log(
+        'updated',
+        changed,
+        changed.get('baseQuery'),
+        changed.get('searchType'),
+        this.baseImageUrl
+      );
     if (
       changed.has('displayMode') ||
       changed.has('baseNavigationUrl') ||
@@ -760,6 +768,7 @@ export class CollectionBrowser
   private previousQueryKey?: string;
 
   private async handleQueryChange() {
+    console.log('handleQueryChange', this.baseQuery);
     // only reset if the query has actually changed
     if (!this.searchService || this.pageFetchQueryKey === this.previousQueryKey)
       return;
@@ -775,6 +784,7 @@ export class CollectionBrowser
     this.initialQueryChangeHappened = true;
     // if the query changed as part of a window.history pop event, we don't want to
     // persist the state because it overwrites the forward history
+
     if (!this.historyPopOccurred) {
       this.persistState();
       this.historyPopOccurred = false;
@@ -809,7 +819,14 @@ export class CollectionBrowser
 
   private restoreState() {
     const restorationState = this.restorationStateHandler.getRestorationState();
+    console.log(
+      'restoring state',
+      restorationState.baseQuery,
+      restorationState.searchType
+    );
     this.displayMode = restorationState.displayMode;
+    if (restorationState.searchType != null)
+      this.searchType = restorationState.searchType;
     this.selectedSort = restorationState.selectedSort ?? SortField.relevance;
     this.sortDirection = restorationState.sortDirection ?? null;
     this.selectedTitleFilter = restorationState.selectedTitleFilter ?? null;
@@ -831,6 +848,7 @@ export class CollectionBrowser
   private persistState() {
     const restorationState: RestorationState = {
       displayMode: this.displayMode,
+      searchType: this.searchType,
       sortParam: this.sortParam ?? undefined,
       selectedSort: this.selectedSort,
       sortDirection: this.sortDirection ?? undefined,
@@ -845,6 +863,11 @@ export class CollectionBrowser
       selectedTitleFilter: this.selectedTitleFilter ?? undefined,
       selectedCreatorFilter: this.selectedCreatorFilter ?? undefined,
     };
+    console.log(
+      'persisting state',
+      restorationState.baseQuery,
+      restorationState.searchType
+    );
     this.restorationStateHandler.persistState(restorationState);
   }
 
@@ -1070,6 +1093,7 @@ export class CollectionBrowser
   private pageFetchesInProgress: Record<string, Set<number>> = {};
 
   async fetchPage(pageNumber: number) {
+    console.log('fetchPage', this.baseQuery);
     if (!this.fullQuery) return;
 
     // if we already have data, don't fetch again

package/src/restoration-state-handler.ts

@@ -1,4 +1,8 @@
-import type { SortDirection, SortParam } from '@internetarchive/search-service';
+import {
+  SearchType,
+  SortDirection,
+  SortParam,
+} from '@internetarchive/search-service';
 import { getCookie, setCookie } from 'typescript-cookie';
 import {
   MetadataFieldToSortField,
@@ -14,6 +18,7 @@ import {
 
 export interface RestorationState {
   displayMode?: CollectionDisplayMode;
+  searchType?: SearchType;
   sortParam?: SortParam;
   selectedSort?: SortField;
   sortDirection?: SortDirection;
@@ -87,12 +92,20 @@ export class RestorationStateHandler
   private persistQueryStateToUrl(state: RestorationState) {
     const url = new URL(window.location.href);
     const { searchParams } = url;
+    searchParams.delete('sin');
     searchParams.delete('sort');
     searchParams.delete('query');
     searchParams.delete('page');
     searchParams.delete('and[]');
     searchParams.delete('not[]');
 
+    if (state.searchType) {
+      searchParams.set(
+        'sin',
+        state.searchType === SearchType.FULLTEXT ? 'TXT' : ''
+      );
+    }
+
     if (state.sortParam) {
       const prefix = state.sortParam.direction === 'desc' ? '-' : '';
       searchParams.set('sort', `${prefix}${state.sortParam.field}`);
@@ -155,6 +168,7 @@ export class RestorationStateHandler
 
   private loadQueryStateFromUrl(): RestorationState {
     const url = new URL(window.location.href);
+    const searchInside = url.searchParams.get('sin');
     const pageNumber = url.searchParams.get('page');
     const searchQuery = url.searchParams.get('query');
     const sortQuery = url.searchParams.get('sort');
@@ -173,6 +187,10 @@ export class RestorationStateHandler
       },
     };
 
+    if (searchInside) {
+      restorationState.searchType =
+        searchInside === 'TXT' ? SearchType.FULLTEXT : undefined; // No explicit metadata sin
+    }
     if (pageNumber) {
       const parsed = parseInt(pageNumber, 10);
       restorationState.currentPage = parsed;

package/src/tiles/image-block.ts

@@ -22,9 +22,8 @@ export class ImageBlock extends LitElement {
   @property({ type: String }) viewSize: string = 'desktop';
 
   render() {
-    if (!this.model?.identifier) {
-      return nothing;
-    }
+    if (!this.model?.identifier) return nothing;
+
     return html`
       <div class=${classMap(this.baseClass)}>
         <item-image
@@ -52,9 +51,9 @@ export class ImageBlock extends LitElement {
   private get iconOverlayTemplate() {
     if (!this.isListTile) return nothing;
 
-    if (!this.model?.loginRequired && !this.model?.contentWarning) {
+    if (!this.model?.loginRequired && !this.model?.contentWarning)
       return nothing;
-    }
+
     return html`
       <icon-overlay
         .loggedIn=${this.loggedIn}
@@ -65,13 +64,11 @@ export class ImageBlock extends LitElement {
   }
 
   private get textOverlayTemplate() {
-    if (this.isListTile) {
-      return nothing;
-    }
+    if (this.isListTile) return nothing;
 
-    if (!this.model?.loginRequired && !this.model?.contentWarning) {
+    if (!this.model?.loginRequired && !this.model?.contentWarning)
       return nothing;
-    }
+
     return html`
       <text-overlay
         .loggedIn=${this.loggedIn}

package/src/tiles/list/tile-list-compact.ts

@@ -38,6 +38,7 @@ export class TileListCompact extends LitElement {
           .isCompactTile=${true}
           .isListTile=${true}
           .viewSize=${this.classSize}
+          .loggedIn=${this.loggedIn}
         >
         </image-block>
         <div id="title">${DOMPurify.sanitize(this.model?.title ?? '')}</div>

package/src/tiles/list/tile-list.ts

@@ -125,6 +125,7 @@ export class TileList extends LitElement {
         .isCompactTile=${false}
         .isListTile=${true}
         .viewSize=${this.classSize}
+        .loggedIn=${this.loggedIn}
       >
       </image-block>
     `;

package/src/tiles/overlay/icon-overlay.ts

@@ -11,10 +11,9 @@ export class IconOverlay extends LitElement {
   @property({ type: Boolean }) loginRequired = false;
 
   render() {
-    if (this.loginRequired && !this.loggedIn) {
-      return html`${loginRequiredIcon} `;
-    }
-    return html`${restrictedIcon}`;
+    return this.loginRequired && !this.loggedIn
+      ? html`${loginRequiredIcon}`
+      : html`${restrictedIcon}`;
   }
 
   static get styles(): CSSResultGroup {

package/test/collection-browser.test.ts

@@ -18,6 +18,21 @@ import { MockAnalyticsHandler } from './mocks/mock-analytics-handler';
 import { analyticsCategories } from '../src/utils/analytics-events';
 
 describe('Collection Browser', () => {
+  beforeEach(async () => {
+    // Apparently query params set by one test can bleed into other tests.
+    // Since collection browser restores its state from certain query params, we need
+    // to clear these before each test to ensure they run in isolation from one another.
+    const url = new URL(window.location.href);
+    const { searchParams } = url;
+    searchParams.delete('sin');
+    searchParams.delete('sort');
+    searchParams.delete('query');
+    searchParams.delete('page');
+    searchParams.delete('and[]');
+    searchParams.delete('not[]');
+    window.history.replaceState({}, '', url);
+  });
+
   it('clear existing filter for facets & sort-bar', async () => {
     const el = await fixture<CollectionBrowser>(
       html`<collection-browser></collection-browser>`
@@ -370,8 +385,11 @@ describe('Collection Browser', () => {
   });
 
   it('sets sort properties when user changes sort', async () => {
+    const searchService = new MockSearchService();
     const el = await fixture<CollectionBrowser>(
-      html`<collection-browser></collection-browser>`
+      html`<collection-browser
+        .searchService=${searchService}
+      ></collection-browser>`
     );
 
     expect(el.selectedSort).to.equal(SortField.relevance);
@@ -397,10 +415,17 @@ describe('Collection Browser', () => {
   });
 
   it('scrolls to page', async () => {
+    const searchService = new MockSearchService();
     const el = await fixture<CollectionBrowser>(
-      html`<collection-browser></collection-browser>`
+      html`<collection-browser
+        .searchService=${searchService}
+      ></collection-browser>`
     );
 
+    // Infinite scroller won't exist unless there's a base query
+    el.baseQuery = 'collection:foo';
+    await el.updateComplete;
+
     const infiniteScroller = el.shadowRoot?.querySelector(
       'infinite-scroller'
     ) as InfiniteScroller;
@@ -435,6 +460,10 @@ describe('Collection Browser', () => {
     );
     const infiniteScrollerRefreshSpy = sinon.spy();
 
+    // Infinite scroller won't exist unless there's a base query
+    el.baseQuery = 'collection:foo';
+    await el.updateComplete;
+
     const infiniteScroller = el.shadowRoot?.querySelector('infinite-scroller');
     (infiniteScroller as InfiniteScroller).reload = infiniteScrollerRefreshSpy;
     expect(infiniteScrollerRefreshSpy.called).to.be.false;

package/test/image-block.test.ts

@@ -0,0 +1,86 @@
+/* eslint-disable import/no-duplicates */
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit';
+import type { ImageBlock } from '../src/tiles/image-block';
+
+import '../src/tiles/image-block';
+
+describe('Image block component', () => {
+  it('should render component grid display mode', async () => {
+    const el = await fixture<ImageBlock>(html`
+      <image-block
+        .model=${{
+          loggedInRequired: true,
+          contentWarning: true,
+          identifier: 'goody',
+        }}
+        .baseImageUrl=${'https://archive.org'}
+        .isCompactTile=${false}
+        .isListTile=${false}
+        .viewSize=${'grid'}
+        .loggedIn=${false}
+      >
+      </image-block>
+    `);
+
+    const viewSize = el.shadowRoot?.querySelector('.grid');
+    const itemImage = el.shadowRoot?.querySelector('item-image');
+    const textOverlay = el.shadowRoot?.querySelector('text-overlay');
+
+    expect(viewSize).to.exist;
+    expect(itemImage).to.exist;
+    expect(textOverlay).to.exist;
+  });
+
+  it('should render component list display mode', async () => {
+    const el = await fixture<ImageBlock>(html`
+      <image-block
+        .model=${{
+          loggedInRequired: true,
+          contentWarning: true,
+          identifier: 'goody',
+        }}
+        .baseImageUrl=${'https://archive.org'}
+        .isCompactTile=${false}
+        .isListTile=${true}
+        .viewSize=${'desktop'}
+        .loggedIn=${false}
+      >
+      </image-block>
+    `);
+
+    const viewSize = el.shadowRoot?.querySelector('.list.desktop');
+    const itemImage = el.shadowRoot?.querySelector('item-image');
+    const iconOverlay = el.shadowRoot?.querySelector('icon-overlay');
+
+    expect(viewSize).to.exist;
+    expect(itemImage).to.exist;
+    expect(iconOverlay).to.exist;
+  });
+
+  it('should render component compact display mode', async () => {
+    const el = await fixture<ImageBlock>(html`
+      <image-block
+        .model=${{
+          loggedInRequired: true,
+          contentWarning: true,
+          identifier: 'goody',
+        }}
+        .baseImageUrl=${'https://archive.org'}
+        .isCompactTile=${true}
+        .isListTile=${true}
+        .viewSize=${'desktop'}
+        .loggedIn=${false}
+      >
+      </image-block>
+    `);
+
+    const viewSize = el.shadowRoot?.querySelector('.list-compact.desktop');
+    const itemImage = el.shadowRoot?.querySelector('item-image');
+    const iconOverlay = el.shadowRoot?.querySelector('icon-overlay');
+
+    expect(viewSize).to.exist;
+    expect(itemImage).to.exist;
+    expect(iconOverlay).to.exist;
+  });
+});

package/test/tiles/list/tile-list-compact.test.ts

@@ -0,0 +1,38 @@
+/* eslint-disable import/no-duplicates */
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit';
+import type { TileListCompact } from '../../../src/tiles/list/tile-list-compact';
+
+import '../../../src/tiles/list/tile-list-compact';
+
+describe('List Tile Compact', () => {
+  it('should render initial component', async () => {
+    const el = await fixture<TileListCompact>(
+      html`<tile-list-compact></tile-list-compact>`
+    );
+
+    const listContainer = el.shadowRoot?.querySelector('#list-line');
+    const itemTitle = el.shadowRoot?.querySelector('#title');
+    const imageBlock = el.shadowRoot?.querySelector('image-block');
+    const itemIcon = el.shadowRoot?.querySelector('#icon');
+    const itemViews = el.shadowRoot?.querySelector('#views');
+
+    expect(listContainer).to.exist;
+    expect(itemTitle).to.exist;
+    expect(imageBlock).to.exist;
+    expect(itemIcon).to.exist;
+    expect(itemViews).to.exist;
+  });
+
+  it('should render with creator element with title', async () => {
+    const el = await fixture<TileListCompact>(html`
+      <tile-list-compact
+        .model=${{ creators: ['someone'] }}
+      ></tile-list-compact>
+    `);
+
+    const creator = el.shadowRoot?.querySelector('#creator');
+
+    expect(creator).to.exist;
+  });
+});