query stuff

Author: shakyShane

special-pages/pages/history/app/global-state/HistoryServiceProvider.js

@@ -135,7 +135,7 @@ export function useRangeChange(service) {
     const dispatch = useHistoryServiceDispatch();
     useSignalEffect(() => {
         function handler(/** @type {CustomEvent<{start: number, end: number}>} */ event) {
-            if (!service.query) throw new Error('unreachable');
+            if (!service.data) throw new Error('unreachable');
             const { end } = event.detail;
             dispatch({ kind: 'request-more', end });
         }

special-pages/pages/history/app/history.service.js

@@ -14,14 +14,30 @@ import { HistoryRangeService } from './history.range.service.js';
 
 export class HistoryService {
     static CHUNK_SIZE = 150;
+    static QUERY_EVENT = 'query';
+    static QUERY_MORE_EVENT = 'query-more';
+    /**
+     * @return {QueryData}
+     */
+    static defaultData() {
+        return {
+            lastQueryParams: null,
+            info: {
+                query: { term: '' },
+                finished: true,
+            },
+            results: [],
+        };
+    }
+
+    /**
+     * @type {QueryData}
+     */
+    data = HistoryService.defaultData();
 
     internal = new EventTarget();
     dataReadinessSignal = new EventTarget();
 
-    /**
-     * @type {QueryData|null}
-     */
-    query = null;
     /** @type {HistoryQuery|null} */
     ongoing = null;
     index = 0;
@@ -32,56 +48,100 @@ export class HistoryService {
     constructor(history) {
         this.history = history;
         this.range = new HistoryRangeService(this.history);
-        this.internal.addEventListener('query', (/** @type {CustomEvent<HistoryQuery>} */ evt) => {
+
+        /**
+         * Conduct a query
+         */
+        this.internal.addEventListener(HistoryService.QUERY_EVENT, (/** @type {CustomEvent<HistoryQuery>} */ evt) => {
             const { detail } = evt;
-            const index = this.index + 1;
             this.index++;
+
+            // store a local index, we can check it when the promise resolves
+            const index = this.index;
+
+            // reject duplicates
             if (eq(detail, this.ongoing)) return console.log('ignoring duplicate query');
-            this.queryFetcher(detail).then((next) => {
-                if (this.index !== index) return console.log('ignoring stale call...');
-                const old = this.query;
-                if (old === null) throw new Error('unreachable - this.query must always be there?');
-                let publish;
-                /**
-                 * concatenate results if this was a 'fetch more' request
-                 */
-                if (eq(old.info.query, next.info.query) && next.lastQueryParams?.offset > 0) {
-                    const results = old.results.concat(next.results);
-                    publish = { info: next.info, results, lastQueryParams: next.lastQueryParams };
-                } else {
-                    publish = next;
-                }
-                this.accept(publish);
-            });
+            this.ongoing = JSON.parse(JSON.stringify(detail));
+
+            this.queryFetcher(detail)
+                .then((next) => {
+                    const old = this.data;
+                    if (old === null) throw new Error('unreachable - typescript this.query must always be there?');
+
+                    /**
+                     * First, reject overlapping promises
+                     */
+                    const resolvedPromiseIsStale = this.index !== index;
+                    if (resolvedPromiseIsStale) return console.log('❌ rejected stale result');
+
+                    /**
+                     * concatenate results if this was a 'fetch more' request, or overwrite
+                     */
+                    let valueToPublish;
+                    if (eq(old.info.query, next.info.query) && next.lastQueryParams?.offset > 0) {
+                        const results = old.results.concat(next.results);
+                        valueToPublish = { info: next.info, results, lastQueryParams: next.lastQueryParams };
+                    } else {
+                        valueToPublish = next;
+                    }
+
+                    this.accept(valueToPublish);
+                })
+                .catch((e) => {
+                    console.error(e, detail);
+                });
         });
-        this.internal.addEventListener('query-more', (/** @type {CustomEvent<{end: number}>} */ evt) => {
+
+        /**
+         * Allow consumers to request 'more' - we'll ignore when the list is 'finished',
+         * but otherwise will just increment the offset by the current length.
+         */
+        this.internal.addEventListener(HistoryService.QUERY_MORE_EVENT, (/** @type {CustomEvent<{end: number}>} */ evt) => {
             // console.log('🦻 [query-more]', evt.detail, this.query?.info);
-            if (!this.query) return;
-            if (this.query.info.finished) return;
+            if (!this.data) return;
+            /**
+             * 'end' is the index of the last seen element. We use that + the result set & OVERSCAN_AMOUNT
+             * whether to decide to fetch more data.
+             *
+             * Example:
+             *  - if !finished (meaning the backend has more data)
+             *  - and 'end' was 146 (meaning the 146th element was scrolled into view)
+             *  - and memory.length was 150 (meaning we've got 150 items in memory)
+             *  - and OVERSCAN_AMOUNT = 5
+             *  - that means we WOULD fetch more, because memory.length - end = 4, which is less than OVERSCAN_AMOUNT
+             *  - but if 'end' was 140, we would NOT fetch. because memory.length - end = 10 which is not less than OVERSCAN_AMOUNT
+             *
+             */
+            if (this.data.info.finished) return;
             const { end } = evt.detail;
-            const memory = this.query.results;
+
+            const memory = this.data.results;
             if (memory.length - end < OVERSCAN_AMOUNT) {
-                const lastquery = this.query.info.query;
+                const lastquery = this.data.info.query;
                 /** @type {HistoryQuery} */
                 const query = {
                     query: lastquery,
                     limit: HistoryService.CHUNK_SIZE,
-                    offset: this.query.results.length,
+                    offset: this.data.results.length,
                 };
-                this.internal.dispatchEvent(new CustomEvent('query', { detail: query }));
+                this.internal.dispatchEvent(new CustomEvent(HistoryService.QUERY_EVENT, { detail: query }));
             }
         });
     }
 
     /**
-     * @param {QueryData} d
+     * To 'accept' data is to store a local reference to it and treat it as 'latest'
+     * We also want to broadcast the fact that new data can be read.
+     * @param {QueryData} data
      */
-    accept(d) {
-        this.query = d;
+    accept(data) {
+        this.data = data;
+        this.ongoing = null;
         this.dataReadinessSignal.dispatchEvent(new Event('data'));
     }
 
     /**
+     * The single place for the query to be made
      * @param {HistoryQuery} query
      */
     queryFetcher(query) {
@@ -105,15 +165,16 @@ export class HistoryService {
     }
 
     /**
+     * Allow consumers to be notified when data has changed
      * @param {(data: QueryData) => void} cb
      */
     onResults(cb) {
         const controller = new AbortController();
         this.dataReadinessSignal.addEventListener(
             'data',
             () => {
-                if (this.query === null) throw new Error('unreachable');
-                cb(this.query);
+                if (this.data === null) throw new Error('unreachable');
+                cb(this.data);
             },
             { signal: controller.signal },
         );
@@ -131,15 +192,14 @@ export class HistoryService {
      * @param {HistoryQuery} query
      */
     trigger(query) {
-        this.internal.dispatchEvent(new CustomEvent('query', { detail: query }));
+        this.internal.dispatchEvent(new CustomEvent(HistoryService.QUERY_EVENT, { detail: query }));
     }
 
     /**
-     * @param {number} end
+     * @param {number} end - the index of the last seen element
      */
     requestMore(end) {
-        if (!this.dataReadinessSignal || !this.query) return console.warn('unreachable?');
-        this.internal.dispatchEvent(new CustomEvent('query-more', { detail: { end } }));
+        this.internal.dispatchEvent(new CustomEvent(HistoryService.QUERY_MORE_EVENT, { detail: { end } }));
     }
 
     /**
@@ -166,7 +226,7 @@ export class HistoryService {
             return { kind: 'none' };
         }
         if (response.action === 'domain-search' && ids.length === 1 && indexes.length === 1) {
-            const target = this.query?.results[indexes[0]];
+            const target = this.data?.results[indexes[0]];
             if (target?.domain) {
                 return { kind: 'domain-search', value: target.domain };
             } else {
@@ -196,7 +256,7 @@ export class HistoryService {
     _collectIds(indexes) {
         const ids = [];
         for (let i = 0; i < indexes.length; i++) {
-            const current = this.query?.results[indexes[i]];
+            const current = this.data?.results[indexes[i]];
             if (!current) throw new Error('unreachable');
             ids.push(current.id);
         }
@@ -207,8 +267,8 @@ export class HistoryService {
      * @param {(d: QueryData) => QueryData} updater
      */
     update(updater) {
-        if (this.query === null) throw new Error('unreachable');
-        this.accept(updater(this.query));
+        if (this.data === null) throw new Error('unreachable');
+        this.accept(updater(this.data));
     }
 
     /**