1 less provider

special-pages/pages/history/app/components/App.jsx

@@ -6,7 +6,6 @@ import { Header } from './Header.js';
 import { ResultsContainer } from './Results.js';
 import { useEffect, useRef } from 'preact/hooks';
 import { Sidebar } from './Sidebar.js';
-import { useRangesData } from '../global/Providers/DataProvider.js';
 import { useRowInteractions } from '../global/Providers/SelectionProvider.js';
 import { useQueryContext } from '../global/Providers/QueryProvider.js';
 import { useContextMenuForEntries } from '../global/hooks/useContextMenuForEntries.js';
@@ -17,6 +16,7 @@ import { useResetSelectionsOnQueryChange } from '../global/hooks/useResetSelecti
 import { useSearchCommitForRange } from '../global/hooks/useSearchCommitForRange.js';
 import { useURLReflection } from '../global/hooks/useURLReflection.js';
 import { useSearchCommit } from '../global/hooks/useSearchCommit.js';
+import { useRangesData } from '../global/Providers/HistoryServiceProvider.js';
 
 export function App() {
     const mainRef = useRef(/** @type {HTMLElement|null} */ (null));

special-pages/pages/history/app/components/Header.js

@@ -5,9 +5,8 @@ import { SearchForm } from './SearchForm.js';
 import { Trash } from '../icons/Trash.js';
 import { useTypedTranslation } from '../types.js';
 import { useQueryContext } from '../global/Providers/QueryProvider.js';
-import { useResultsData } from '../global/Providers/DataProvider.js';
 import { useSelected } from '../global/Providers/SelectionProvider.js';
-import { useHistoryServiceDispatch } from '../global/Providers/HistoryServiceProvider.js';
+import { useHistoryServiceDispatch, useResultsData } from '../global/Providers/HistoryServiceProvider.js';
 
 /**
  */

special-pages/pages/history/app/components/Results.js

@@ -4,9 +4,8 @@ import { Item } from './Item.js';
 import styles from './VirtualizedList.module.css';
 import { VisibleItems } from './VirtualizedList.js';
 import { Empty } from './Empty.js';
-import { useResultsData } from '../global/Providers/DataProvider.js';
 import { useSelected } from '../global/Providers/SelectionProvider.js';
-import { useHistoryServiceDispatch } from '../global/Providers/HistoryServiceProvider.js';
+import { useHistoryServiceDispatch, useResultsData } from '../global/Providers/HistoryServiceProvider.js';
 import { useCallback } from 'preact/hooks';
 
 /**
@@ -26,7 +25,7 @@ export function ResultsContainer() {
 
 /**
  * @param {object} props
- * @param {import("@preact/signals").Signal<import("../global/Providers/DataProvider.js").Results>} props.results
+ * @param {import("@preact/signals").Signal<import("../global/Providers/HistoryServiceProvider.js").Results>} props.results
  * @param {import("@preact/signals").Signal<Set<number>>} props.selected
  * @param {(end: number) => void} props.onChange
  */

special-pages/pages/history/app/components/Sidebar.js

@@ -6,8 +6,7 @@ import { useTypedTranslation } from '../types.js';
 import { Trash } from '../icons/Trash.js';
 import { useTypedTranslationWith } from '../../../new-tab/app/types.js';
 import { useQueryContext, useQueryDispatch } from '../global/Providers/QueryProvider.js';
-import { useResultsData } from '../global/Providers/DataProvider.js';
-import { useHistoryServiceDispatch } from '../global/Providers/HistoryServiceProvider.js';
+import { useHistoryServiceDispatch, useResultsData } from '../global/Providers/HistoryServiceProvider.js';
 
 /**
  * @import json from "../strings.json"

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

@@ -2,6 +2,8 @@ import { createContext, h } from 'preact';
 import { paramsToQuery, toRange } from '../../history.service.js';
 import { useCallback, useContext } from 'preact/hooks';
 import { useQueryDispatch } from './QueryProvider.js';
+import { signal, useSignal, useSignalEffect } from '@preact/signals';
+import { generateHeights } from '../../utils.js';
 
 /**
  * @typedef {{kind: 'search-commit', params: URLSearchParams}
@@ -23,16 +25,54 @@ function defaultDispatch(action) {
 }
 const HistoryServiceDispatchContext = createContext(defaultDispatch);
 
+/**
+ * @typedef {object} Results
+ * @property {import('../../../types/history.ts').HistoryItem[]} items
+ * @property {number[]} heights
+ */
+/**
+ * @typedef {import('../../../types/history.ts').Range} Range
+ * @import { ReadonlySignal } from '@preact/signals'
+ */
+
+const ResultsContext = createContext(/** @type {ReadonlySignal<Results>} */ (signal({ items: [], heights: [] })));
+const RangesContext = createContext(/** @type {ReadonlySignal<Range[]>} */ (signal([])));
+
 /**
  * Provides a context for the history service, allowing dependent components to access it.
  * Everything that interacts with the service should be registered here
  *
  * @param {Object} props
  * @param {import("../../history.service.js").HistoryService} props.service
+ * @param {import('../../history.service.js').InitialServiceData} props.initial - The initial state data for the history service.
  * @param {import("preact").ComponentChild} props.children
  */
-export function HistoryServiceProvider({ service, children }) {
+export function HistoryServiceProvider({ service, children, initial }) {
     const queryDispatch = useQueryDispatch();
+    const ranges = useSignal(initial.ranges.ranges);
+    const results = useSignal({
+        items: initial.query.results,
+        heights: generateHeights(initial.query.results),
+    });
+
+    useSignalEffect(() => {
+        const unsub = service.onResults((data) => {
+            results.value = {
+                items: data.results,
+                heights: generateHeights(data.results),
+            };
+        });
+
+        // Subscribe to changes in the 'ranges' data and reflect the updates into the UI
+        const unsubRanges = service.onRanges((data) => {
+            ranges.value = data.ranges;
+        });
+        return () => {
+            unsub();
+            unsubRanges();
+        };
+    });
+
     /**
      * @param {Action} action
      */
@@ -100,9 +140,25 @@ export function HistoryServiceProvider({ service, children }) {
 
     const dispatcher = useCallback(dispatch, [service]);
 
-    return <HistoryServiceDispatchContext.Provider value={dispatcher}>{children}</HistoryServiceDispatchContext.Provider>;
+    return (
+        <HistoryServiceDispatchContext.Provider value={dispatcher}>
+            <RangesContext.Provider value={ranges}>
+                <ResultsContext.Provider value={results}>{children}</ResultsContext.Provider>
+            </RangesContext.Provider>
+        </HistoryServiceDispatchContext.Provider>
+    );
 }
 
 export function useHistoryServiceDispatch() {
     return useContext(HistoryServiceDispatchContext);
 }
+
+// Hook for consuming the context
+export function useResultsData() {
+    return useContext(ResultsContext);
+}
+
+// Hook for consuming the context
+export function useRangesData() {
+    return useContext(RangesContext);
+}

special-pages/pages/history/app/global/Providers/SelectionProvider.js

@@ -2,9 +2,8 @@ import { createContext, h } from 'preact';
 import { useCallback, useContext } from 'preact/hooks';
 import { signal, useSignal } from '@preact/signals';
 import { usePlatformName } from '../../types.js';
-import { useResultsData } from './DataProvider.js';
 import { eventToIntention } from '../../utils.js';
-import { useHistoryServiceDispatch } from './HistoryServiceProvider.js';
+import { useHistoryServiceDispatch, useResultsData } from './HistoryServiceProvider.js';
 
 /**
  * @typedef {(s: (d: Set<number>) => Set<number>, reason: string) => void} UpdateSelected

special-pages/pages/history/app/global/hooks/useContextMenuForEntries.js

@@ -1,7 +1,6 @@
 import { useEffect } from 'preact/hooks';
 import { useSelected } from '../Providers/SelectionProvider.js';
-import { useResultsData } from '../Providers/DataProvider.js';
-import { useHistoryServiceDispatch } from '../Providers/HistoryServiceProvider.js';
+import { useHistoryServiceDispatch, useResultsData } from '../Providers/HistoryServiceProvider.js';
 
 /**
  * Support for context menu on entries. This needs to be aware of

special-pages/pages/history/app/global/hooks/useResetSelectionsOnQueryChange.js

@@ -1,6 +1,6 @@
 import { useComputed, useSignalEffect } from '@preact/signals';
 import { useQueryContext } from '../Providers/QueryProvider.js';
-import { useResultsData } from '../Providers/DataProvider.js';
+import { useResultsData } from '../Providers/HistoryServiceProvider.js';
 import { useSelectionDispatch } from '../Providers/SelectionProvider.js';
 
 /**

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

@@ -14,7 +14,6 @@ import { HistoryServiceProvider } from './global/Providers/HistoryServiceProvide
 import { Settings } from './Settings.js';
 import { SelectionProvider } from './global/Providers/SelectionProvider.js';
 import { QueryProvider } from './global/Providers/QueryProvider.js';
-import { DataProvider } from './global/Providers/DataProvider.js'; // global styles
 
 /**
  * @param {Element} root
@@ -77,12 +76,10 @@ export async function init(root, messaging, baseEnvironment) {
                     <MessagingContext.Provider value={messaging}>
                         <SettingsContext.Provider value={settings}>
                             <QueryProvider query={query.query}>
-                                <HistoryServiceProvider service={service}>
-                                    <DataProvider service={service} initial={initial}>
-                                        <SelectionProvider>
-                                            <App />
-                                        </SelectionProvider>
-                                    </DataProvider>
+                                <HistoryServiceProvider service={service} initial={initial}>
+                                    <SelectionProvider>
+                                        <App />
+                                    </SelectionProvider>
                                 </HistoryServiceProvider>
                             </QueryProvider>
                         </SettingsContext.Provider>