global handlers

Author: shakyShane

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

@@ -7,13 +7,16 @@ import { useRef } from 'preact/hooks';
 import { Sidebar } from './Sidebar.js';
 import { useGlobalState } from '../global-state/GlobalStateProvider.js';
 import { useSelected } from '../global-state/SelectionProvider.js';
+import { useGlobalHandlers } from '../global-state/HistoryServiceProvider.js';
 
 export function App() {
     const { isDarkMode } = useEnv();
     const containerRef = useRef(/** @type {HTMLElement|null} */ (null));
     const { ranges, term, results } = useGlobalState();
     const selected = useSelected();
 
+    useGlobalHandlers();
+
     return (
         <div class={styles.layout} data-theme={isDarkMode ? 'dark' : 'light'}>
             <header class={styles.header}>

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

@@ -4,30 +4,34 @@ import { paramsToQuery, toRange } from '../history.service.js';
 import { EVENT_RANGE_CHANGE, EVENT_SEARCH_COMMIT, KNOWN_ACTIONS, OVERSCAN_AMOUNT } from '../constants.js';
 import { usePlatformName } from '../types.js';
 import { eventToTarget } from '../../../../shared/handlers.js';
+import { useContext } from 'preact/hooks';
 
 // Create the context
-const HistoryServiceContext = createContext({});
+const HistoryServiceContext = createContext({
+    service: /** @type {import("../history.service.js").HistoryService} */ ({}),
+});
 
 /**
  * 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").ServiceData} props.initial
  * @param {import("preact").ComponentChild} props.children
  */
-export function HistoryServiceProvider({ service, initial, children }) {
-    const platformName = usePlatformName();
+export function HistoryServiceProvider({ service, children }) {
+    return <HistoryServiceContext.Provider value={{ service }}>{children}</HistoryServiceContext.Provider>;
+}
 
+export function useGlobalHandlers() {
+    const { service } = useContext(HistoryServiceContext);
+    const platformName = usePlatformName();
     useSearchCommit(service);
     useRangeChange(service);
     useLinkClickHandler(service, platformName);
     useButtonClickHandler(service);
     useAuxClickHandler(service, platformName);
     useContextMenu(service);
-
-    return <HistoryServiceContext.Provider value={{ service, initial }}>{children}</HistoryServiceContext.Provider>;
 }
 
 /**

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

@@ -76,7 +76,7 @@ export async function init(root, messaging, baseEnvironment) {
                     <MessagingContext.Provider value={messaging}>
                         <SettingsContext.Provider value={settings}>
                             <QueryProvider query={query.query}>
-                                <HistoryServiceProvider service={service} initial={initial}>
+                                <HistoryServiceProvider service={service}>
                                     <GlobalStateProvider service={service} initial={initial}>
                                         <SelectionProvider>
                                             <App />