Skip to content

Commit 242102b

Browse files
shakyShaneshakyShane
committed
adding some events
1 parent b84fbb9 commit 242102b

File tree

5 files changed

+56
-53
lines changed

5 files changed

+56
-53
lines changed

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

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -65,14 +65,16 @@ export function Sidebar({ ranges }) {
6565
function onClick(e) {
6666
if (!(e.target instanceof HTMLElement)) return;
6767
const anchor = /** @type {HTMLAnchorElement|null} */ (e.target.closest('a[data-filter]'));
68-
if (anchor) {
69-
e.preventDefault();
70-
const range = toRange(anchor.dataset.filter);
71-
if (range === 'all') {
72-
dispatch({ kind: 'reset' });
73-
} else if (range) {
74-
dispatch({ kind: 'search-by-range', value: range });
75-
}
68+
if (!anchor) return;
69+
e.preventDefault();
70+
71+
const range = toRange(anchor.dataset.filter);
72+
if (range === 'all') {
73+
dispatch({ kind: 'reset' });
74+
} else if (range) {
75+
dispatch({ kind: 'search-by-range', value: range });
76+
} else {
77+
console.warn('could not determine valid range');
7678
}
7779
}
7880

@@ -81,7 +83,7 @@ export function Sidebar({ ranges }) {
8183
<h1 class={styles.pageTitle}>{t('page_title')}</h1>
8284
<nav class={styles.nav} onClick={onClick}>
8385
{ranges.value.map((range) => {
84-
return <Item range={range} key={range} current={current} title={titleMap[range](t)} count={count} />;
86+
return <SidebarItem range={range} key={range} current={current} title={titleMap[range](t)} count={count} />;
8587
})}
8688
</nav>
8789
</div>
@@ -97,7 +99,7 @@ export function Sidebar({ ranges }) {
9799
* @param {import("@preact/signals").Signal<Range|null>} props.current The current state object used to determine active item styling.
98100
* @param {import("@preact/signals").Signal<number>} props.count
99101
*/
100-
function Item({ range, title, current, count }) {
102+
function SidebarItem({ range, title, current, count }) {
101103
const { t } = useTypedTranslationWith(/** @type {json} */ ({}));
102104
const ariaDisabled = useComputed(() => {
103105
return range === 'all' && count.value === 0 ? 'true' : 'false';

‎special-pages/pages/history/app/constants.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,4 +11,3 @@ export const KNOWN_ACTIONS = /** @type {const} */ ([
1111
BTN_ACTION_DELETE_ALL,
1212
]);
1313
export const EVENT_RANGE_CHANGE = 'range-change';
14-
export const EVENT_SEARCH_COMMIT = 'search-commit';

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

Lines changed: 34 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import { createContext, h } from 'preact';
22
import { useSignalEffect } from '@preact/signals';
33
import { paramsToQuery, toRange } from '../history.service.js';
4-
import { EVENT_RANGE_CHANGE, EVENT_SEARCH_COMMIT, KNOWN_ACTIONS, OVERSCAN_AMOUNT } from '../constants.js';
4+
import { EVENT_RANGE_CHANGE, KNOWN_ACTIONS, OVERSCAN_AMOUNT } from '../constants.js';
55
import { usePlatformName } from '../types.js';
66
import { eventToTarget } from '../../../../shared/handlers.js';
7-
import { useContext } from 'preact/hooks';
7+
import { useCallback, useContext } from 'preact/hooks';
88
import { useSelected } from './SelectionProvider.js';
99
import { useGlobalState } from './GlobalStateProvider.js';
1010
import { useQueryDispatch } from './QueryProvider.js';
@@ -15,6 +15,13 @@ const HistoryServiceContext = createContext({
1515
service: /** @type {import("../history.service.js").HistoryService} */ ({}),
1616
});
1717

18+
/**
19+
* @typedef {{kind: 'search-commit', params: URLSearchParams}} Action
20+
*/
21+
22+
// Create the context
23+
const HistoryServiceDispatchContext = createContext(/** @type {(action: Action)=>void} */ ((action) => {}));
24+
1825
/**
1926
* Provides a context for the history service, allowing dependent components to access it.
2027
* Everything that interacts with the service should be registered here
@@ -24,13 +31,36 @@ const HistoryServiceContext = createContext({
2431
* @param {import("preact").ComponentChild} props.children
2532
*/
2633
export function HistoryServiceProvider({ service, children }) {
27-
return <HistoryServiceContext.Provider value={{ service }}>{children}</HistoryServiceContext.Provider>;
34+
/** @type {(a: Action) => void} */
35+
const dispatch = useCallback(
36+
/**
37+
* @param {Action} action
38+
*/
39+
function dispatch(action) {
40+
switch (action.kind) {
41+
case 'search-commit': {
42+
const asQuery = paramsToQuery(action.params);
43+
service.trigger(asQuery);
44+
break;
45+
}
46+
}
47+
},
48+
[service],
49+
);
50+
return (
51+
<HistoryServiceContext.Provider value={{ service }}>
52+
<HistoryServiceDispatchContext.Provider value={dispatch}>{children}</HistoryServiceDispatchContext.Provider>
53+
</HistoryServiceContext.Provider>
54+
);
55+
}
56+
57+
export function useHistoryServiceDispatch() {
58+
return useContext(HistoryServiceDispatchContext);
2859
}
2960

3061
export function useGlobalHandlers() {
3162
const { service } = useContext(HistoryServiceContext);
3263
const platformName = usePlatformName();
33-
useSearchCommit(service);
3464
useRangeChange(service);
3565
useLinkClickHandler(service, platformName);
3666
useButtonClickHandler(service);
@@ -82,36 +112,6 @@ function useDeleteItems(service) {
82112
});
83113
}
84114

85-
/**
86-
* A hook that listens to the "search-commit" custom event and triggers the history service
87-
* with the parsed query parameter values from the event's detail object.
88-
*
89-
* This hook is used to bind the EVENT_SEARCH_COMMIT event with the associated service
90-
* logic for handling search parameters.
91-
*
92-
* @param {import('../history.service.js').HistoryService} service
93-
*/
94-
function useSearchCommit(service) {
95-
useSignalEffect(() => {
96-
function handler(/** @type {CustomEvent<{params: URLSearchParams}>} */ event) {
97-
const detail = event.detail;
98-
if (detail && detail.params instanceof URLSearchParams) {
99-
const asQuery = paramsToQuery(detail.params);
100-
service.trigger(asQuery);
101-
} else {
102-
console.error('missing detail.params from search-commit event');
103-
}
104-
}
105-
106-
window.addEventListener(EVENT_SEARCH_COMMIT, handler);
107-
108-
// Cleanup the event listener on unmount
109-
return () => {
110-
window.removeEventListener(EVENT_SEARCH_COMMIT, handler);
111-
};
112-
});
113-
}
114-
115115
/**
116116
* @param {import('../history.service.js').HistoryService} service
117117
*/

‎special-pages/pages/history/app/global-state/QueryProvider.js

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { createContext, h } from 'preact';
22
import { useCallback, useContext } from 'preact/hooks';
33
import { signal, useComputed, useSignal, useSignalEffect } from '@preact/signals';
44
import { usePlatformName, useSettings } from '../types.js';
5-
import { EVENT_SEARCH_COMMIT } from '../constants.js';
5+
import { useHistoryServiceDispatch } from './HistoryServiceProvider.js';
66

77
/**
88
* @typedef {import('../../types/history.js').Range} Range
@@ -118,6 +118,7 @@ export function useQueryDispatch() {
118118
* @param {import('@preact/signals').ReadonlySignal<null | Range>} derivedRange - A readonly signal representing the range value.
119119
*/
120120
function useSearchCommitForRange(derivedRange) {
121+
const dispatch = useHistoryServiceDispatch();
121122
useSignalEffect(() => {
122123
let timer;
123124
let counter = 0;
@@ -134,7 +135,7 @@ function useSearchCommitForRange(derivedRange) {
134135
if (nextRange !== null) {
135136
url.searchParams.set('range', nextRange);
136137
window.history.replaceState(null, '', url.toString());
137-
window.dispatchEvent(new CustomEvent(EVENT_SEARCH_COMMIT, { detail: { params: new URLSearchParams(url.searchParams) } }));
138+
dispatch({ kind: 'search-commit', params: new URLSearchParams(url.searchParams) });
138139
}
139140
});
140141

@@ -212,6 +213,7 @@ function useURLReflection(queryState, settings) {
212213
* @param {import('../Settings.js').Settings} settings - The settings for debounce behavior and other configurations.
213214
*/
214215
function useSearchCommit(queryState, settings) {
216+
const dispatch = useHistoryServiceDispatch();
215217
useSignalEffect(() => {
216218
let timer;
217219
let count = 0;
@@ -223,13 +225,13 @@ function useSearchCommit(queryState, settings) {
223225
timer = setTimeout(() => {
224226
const params = new URLSearchParams();
225227
params.set('q', term);
226-
window.dispatchEvent(new CustomEvent(EVENT_SEARCH_COMMIT, { detail: { params } }));
228+
dispatch({ kind: 'search-commit', params });
227229
}, settings.typingDebounce);
228230
}
229231
if (next.domain !== null) {
230232
const params = new URLSearchParams();
231233
params.set('domain', next.domain);
232-
window.dispatchEvent(new CustomEvent(EVENT_SEARCH_COMMIT, { detail: { params } }));
234+
dispatch({ kind: 'search-commit', params });
233235
}
234236
return null;
235237
});

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -76,15 +76,15 @@ export async function init(root, messaging, baseEnvironment) {
7676
<TranslationProvider translationObject={strings} fallback={enStrings} textLength={environment.textLength}>
7777
<MessagingContext.Provider value={messaging}>
7878
<SettingsContext.Provider value={settings}>
79-
<QueryProvider query={query.query}>
80-
<HistoryServiceProvider service={service}>
79+
<HistoryServiceProvider service={service}>
80+
<QueryProvider query={query.query}>
8181
<GlobalStateProvider service={service} initial={initial}>
8282
<SelectionProvider>
8383
<App />
8484
</SelectionProvider>
8585
</GlobalStateProvider>
86-
</HistoryServiceProvider>
87-
</QueryProvider>
86+
</QueryProvider>
87+
</HistoryServiceProvider>
8888
</SettingsContext.Provider>
8989
</MessagingContext.Provider>
9090
</TranslationProvider>

0 commit comments

Comments
 (0)