Replace deprecated angular-instantsearch integration

package.json

@@ -48,14 +48,14 @@
     "@sentry/browser": "^7.92.0",
     "@sentry/cli": "^2.24.1",
     "@tinymce/tinymce-angular": "^7.0.0",
-    "algoliasearch": "^4.23.3",
-    "angular-instantsearch": "^4.4.0",
+    "algoliasearch": "^5.52.1",
     "aws-sdk": "^2.1279.0",
     "chart.js": "^4.1.1",
     "cordova-plugin-file": "^7.0.0",
     "cordova-plugin-nativestorage": "^2.3.2",
     "date-fns": "^2.29.3",
     "file-saver": "^2.0.5",
+    "instantsearch.js": "^4.97.0",
     "ion2-calendar": "^3.5.0",
     "ionicons": "^6.0.3",
     "mixpanel-browser": "^2.45.0",

src/app/compat/instantsearch/base-widget.ts

@@ -0,0 +1,79 @@
+import { Directive, Input } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+import { noop } from './utils';
+
+function bem(widgetName: string) {
+  return function cx(element?: string, subElement?: string): string {
+    let cssClass = `ais-${widgetName}`;
+
+    if (element) {
+      cssClass += `-${element}`;
+    }
+
+    if (subElement) {
+      cssClass += `--${subElement}`;
+    }
+
+    return cssClass;
+  };
+}
+
+@Directive()
+export class BaseWidget {
+  @Input() autoHideContainer: boolean;
+
+  public state: any = {};
+  public widget: any;
+  public updateState: (state: any, isFirstRendering?: boolean) => any;
+  public cx: (element?: string, subElement?: string) => string;
+  public parentIndex: any;
+  public instantSearchInstance: any;
+
+  constructor(widgetName: string) {
+    this.cx = bem(widgetName);
+    this.updateState = (state, isFirstRendering) => {
+      if (isFirstRendering) {
+        return Promise.resolve().then(() => {
+          this.state = state;
+        });
+      }
+
+      this.state = state;
+    };
+  }
+
+  get parent() {
+    return this.parentIndex || this.instantSearchInstance;
+  }
+
+  createWidget(connector: any, options: any = {}, additionalWidgetProperties: any = {}) {
+    this.widget = {
+      ...connector(this.updateState, noop)(options),
+      ...additionalWidgetProperties,
+    };
+  }
+
+  ngOnInit() {
+    this.parent.addWidgets([this.widget]);
+  }
+
+  ngOnDestroy() {
+    if (isPlatformBrowser(this.instantSearchInstance.platformId)) {
+      this.parent.removeWidgets([this.widget]);
+    }
+  }
+
+  getItemClass(item: any): string {
+    const className = this.cx('item');
+    return item.isRefined ? `${className} ${this.cx('item', 'selected')}` : className;
+  }
+}
+
+@Directive()
+export class TypedBaseWidget<TWidgetDescription = any, TConnectorParams = any> extends BaseWidget {
+  declare public state: TWidgetDescription extends { renderState: infer TState } ? TState : any;
+
+  createWidget(connector: any, options: TConnectorParams, additionalWidgetProperties: any = {}) {
+    super.createWidget(connector, options, additionalWidgetProperties);
+  }
+}

src/app/compat/instantsearch/highlight.component.ts

@@ -0,0 +1,39 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { highlight } from 'instantsearch.js/es/helpers';
+
+function getPropertyByPath(object: any, path: string) {
+  return path
+    .replace(/\[(\d+)]/g, '.$1')
+    .split('.')
+    .reduce((current, key) => (current ? current[key] : undefined), object);
+}
+
+@Component({
+  selector: 'app-instantsearch-highlight',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<span class="ais-Highlight" [innerHtml]="content"></span>',
+})
+export class InstantSearchHighlightComponent {
+  @Input() attribute: string;
+  @Input() hit: any;
+  @Input() tagName = 'mark';
+
+  get content() {
+    if (!this.hit || !this.attribute) {
+      return '';
+    }
+
+    const highlightAttributeResult = getPropertyByPath(this.hit._highlightResult, this.attribute);
+    const fallback = getPropertyByPath(this.hit, this.attribute);
+
+    if (!highlightAttributeResult) {
+      return fallback || '';
+    }
+
+    return highlight({
+      attribute: this.attribute,
+      highlightedTagName: this.tagName,
+      hit: this.hit,
+    });
+  }
+}

src/app/compat/instantsearch/index-widget.component.ts

@@ -0,0 +1,55 @@
+import { Component, Inject, Input, OnDestroy, OnInit, Optional, SkipSelf, forwardRef } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+import indexWidget from 'instantsearch.js/es/widgets/index/index';
+import { NgAisInstantSearch } from './instantsearch.component';
+
+@Component({
+  selector: 'app-instantsearch-index',
+  template: '<ng-content></ng-content>',
+})
+export class NgAisIndex implements OnInit, OnDestroy {
+  @Input() indexName: string;
+  @Input() indexId: string;
+
+  public widget: any;
+
+  constructor(
+    @SkipSelf()
+    @Inject(forwardRef(() => NgAisIndex))
+    @Optional()
+    public parentIndex: NgAisIndex,
+    @Inject(forwardRef(() => NgAisInstantSearch))
+    public instantSearchInstance: NgAisInstantSearch
+  ) {}
+
+  get parent() {
+    return this.parentIndex || this.instantSearchInstance;
+  }
+
+  ngOnInit() {
+    this.widget = {
+      ...indexWidget({
+        indexName: this.indexName,
+        indexId: this.indexId,
+      }),
+      $$widgetType: 'ais.index',
+    };
+
+    this.parent.addWidgets([this.widget]);
+  }
+
+  ngOnDestroy() {
+    if (isPlatformBrowser(this.instantSearchInstance.platformId)) {
+      this.parent.removeWidgets([this.widget]);
+    }
+  }
+
+  addWidgets(widgets: any[]) {
+    this.widget.addWidgets(widgets);
+  }
+
+  removeWidgets(widgets: any[]) {
+    this.widget.removeWidgets(widgets);
+  }
+}
+

src/app/compat/instantsearch/index.ts

@@ -0,0 +1,6 @@
+export * from './base-widget';
+export * from './index-widget.component';
+export * from './instantsearch.component';
+export * from './instantsearch.module';
+export * from './utils';
+

src/app/compat/instantsearch/infinite-hits.component.ts

@@ -0,0 +1,101 @@
+import { Component, ContentChild, Inject, Input, OnInit, Optional, TemplateRef, forwardRef } from '@angular/core';
+import { connectInfiniteHitsWithInsights } from 'instantsearch.js/es/connectors';
+import { TypedBaseWidget } from './base-widget';
+import { noop } from './utils';
+import { NgAisIndex } from './index-widget.component';
+import { NgAisInstantSearch } from './instantsearch.component';
+
+@Component({
+  selector: 'app-infinite-hits',
+  template: `
+    <div [class]="cx()">
+      <ng-container *ngTemplateOutlet="template; context: state"></ng-container>
+
+      <button
+        [ngClass]="[cx('loadPrevious'), state.isFirstPage ? cx('loadPrevious', 'disabled') : '']"
+        (click)="showPreviousHandler($event)"
+        [disabled]="state.isFirstPage"
+        *ngIf="showPrevious && !template"
+      >
+        {{ showPreviousLabel }}
+      </button>
+
+      <div *ngIf="!template">
+        <ul [class]="cx('list')">
+          <li [class]="cx('item')" *ngFor="let hit of state.hits">
+            <app-instantsearch-highlight attribute="name" [hit]="hit"></app-instantsearch-highlight>
+          </li>
+        </ul>
+      </div>
+
+      <button
+        [ngClass]="[cx('loadMore'), state.isLastPage ? cx('loadMore', 'disabled') : '']"
+        (click)="showMoreHandler($event)"
+        [disabled]="state.isLastPage"
+        *ngIf="!template"
+      >
+        {{ showMoreLabel }}
+      </button>
+    </div>
+  `,
+})
+export class InstantSearchInfiniteHitsComponent extends TypedBaseWidget implements OnInit {
+  @ContentChild(TemplateRef, { static: false }) template: TemplateRef<any>;
+  @Input() escapeHTML: boolean;
+  @Input() showPrevious = false;
+  @Input() showPreviousLabel = 'Show previous results';
+  @Input() showMoreLabel = 'Show more results';
+  @Input() transformItems: any;
+
+  public override state: any = {
+    hits: [],
+    results: undefined,
+    currentPageHits: [],
+    isFirstPage: false,
+    isLastPage: false,
+    showMore: noop,
+    showPrevious: noop,
+    sendEvent: noop,
+    bindEvent: () => '',
+  };
+
+  constructor(
+    @Inject(forwardRef(() => NgAisIndex))
+    @Optional()
+    public override parentIndex: NgAisIndex,
+    @Inject(forwardRef(() => NgAisInstantSearch))
+    public override instantSearchInstance: NgAisInstantSearch
+  ) {
+    super('InfiniteHits');
+
+    this.updateState = (state, isFirstRendering) => {
+      if (isFirstRendering) {
+        return;
+      }
+
+      this.state = state;
+    };
+  }
+
+  ngOnInit() {
+    this.createWidget(connectInfiniteHitsWithInsights, {
+      escapeHTML: this.escapeHTML,
+      transformItems: this.transformItems,
+    }, {
+      $$widgetType: 'ais.infiniteHits',
+    });
+
+    super.ngOnInit();
+  }
+
+  showMoreHandler(event: Event) {
+    event.preventDefault();
+    this.state.showMore();
+  }
+
+  showPreviousHandler(event: Event) {
+    event.preventDefault();
+    this.state.showPrevious();
+  }
+}
+

src/app/compat/instantsearch/instantsearch.component.ts

@@ -0,0 +1,80 @@
+import { AfterViewInit, Component, EventEmitter, Inject, Input, OnDestroy, OnInit, Output, PLATFORM_ID } from '@angular/core';
+import { VERSION as ANGULAR_VERSION } from '@angular/core';
+import InstantSearch from 'instantsearch.js/es/lib/InstantSearch';
+
+@Component({
+  selector: 'app-instantsearch',
+  template: '<ng-content></ng-content>',
+})
+export class NgAisInstantSearch implements OnInit, AfterViewInit, OnDestroy {
+  @Input() config: any;
+  @Input() instanceName = 'default';
+  @Input('index-name') indexName: string;
+  @Output() change: EventEmitter<any> = new EventEmitter();
+  @Output() onRender: EventEmitter<any> = new EventEmitter();
+
+  public instantSearchInstance: any;
+
+  constructor(@Inject(PLATFORM_ID) public platformId: Object) {}
+
+  ngOnInit() {
+    if (!this.config || !this.config.searchClient) {
+      console.warn('InstantSearch config with searchClient is required.');
+      return;
+    }
+
+    if (typeof this.config.searchClient.addAlgoliaAgent === 'function') {
+      this.config.searchClient.addAlgoliaAgent(`angular (${ANGULAR_VERSION.full})`);
+      this.config.searchClient.addAlgoliaAgent('studenthub-staff-instantsearch');
+    }
+
+    const config = {
+      ...this.config,
+      indexName: this.indexName || this.config.indexName,
+    };
+
+    this.instantSearchInstance = new InstantSearch(config);
+    this.instantSearchInstance.on('render', this.emitRenderState);
+  }
+
+  ngAfterViewInit() {
+    if (this.instantSearchInstance) {
+      this.instantSearchInstance.start();
+    }
+  }
+
+  ngOnDestroy() {
+    if (this.instantSearchInstance) {
+      this.instantSearchInstance.removeListener('render', this.emitRenderState);
+      this.instantSearchInstance.dispose();
+    }
+  }
+
+  addWidgets(widgets: any[]) {
+    if (this.instantSearchInstance) {
+      this.instantSearchInstance.addWidgets(widgets);
+    }
+  }
+
+  removeWidgets(widgets: any[]) {
+    if (this.instantSearchInstance) {
+      this.instantSearchInstance.removeWidgets(widgets);
+    }
+  }
+
+  refresh() {
+    if (this.instantSearchInstance) {
+      this.instantSearchInstance.refresh();
+    }
+  }
+
+  private emitRenderState = () => {
+    const payload = {
+      results: this.instantSearchInstance.helper.lastResults,
+      state: this.instantSearchInstance.helper.state,
+    };
+
+    this.change.emit(payload);
+    this.onRender.emit(payload);
+  };
+}