update signal state through normal dispatch

Author: shakyShane

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

@@ -9,6 +9,7 @@ import { useQueryContext, useQueryDispatch } from '../global-state/QueryProvider
 import { BTN_ACTION_DELETE_RANGE } from '../constants.js';
 import { useGlobalState } from '../global-state/GlobalStateProvider.js';
 import { toRange } from '../history.service.js';
+import { memo } from 'preact/compat';
 
 /**
  * @import json from "../strings.json"
@@ -77,7 +78,6 @@ export function Sidebar({ ranges }) {
             console.warn('could not determine valid range');
         }
     }
-
     return (
         <div class={styles.stack}>
             <h1 class={styles.pageTitle}>{t('page_title')}</h1>
@@ -89,7 +89,7 @@ export function Sidebar({ ranges }) {
         </div>
     );
 }
-
+const SidebarItem = memo(SidebarItem_);
 /**
  * Renders an item component with additional properties and functionality.
  *
@@ -99,7 +99,7 @@ export function Sidebar({ ranges }) {
  * @param {import("@preact/signals").Signal<Range|null>} props.current The current state object used to determine active item styling.
  * @param {import("@preact/signals").Signal<number>} props.count
  */
-function SidebarItem({ range, title, current, count }) {
+function SidebarItem_({ range, title, current, count }) {
     const { t } = useTypedTranslationWith(/** @type {json} */ ({}));
     const ariaDisabled = useComputed(() => {
         return range === 'all' && count.value === 0 ? 'true' : 'false';
@@ -125,15 +125,14 @@ function SidebarItem({ range, title, current, count }) {
                 return [t('show_history_older'), t('delete_history_older')];
         }
     })();
+
+    const classNames = useComputed(() => {
+        return cn(styles.link, current.value === range && styles.active);
+    });
+
     return (
         <div class={styles.item}>
-            <a
-                href="#"
-                aria-label={linkLabel}
-                data-filter={range}
-                class={cn(styles.link, current.value === range && styles.active)}
-                tabindex={0}
-            >
+            <a href="#" aria-label={linkLabel} data-filter={range} class={classNames} tabindex={0}>
                 <span class={styles.icon}>
                     <img src={iconMap[range]} />
                 </span>

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

@@ -64,6 +64,7 @@ export function QueryProvider({ children, query = { term: '' } }) {
          * @param {Action} action
          */
         function dispatch(action) {
+            // console.log('queryState.dispatch', action);
             queryState.value = (() => {
                 switch (action.kind) {
                     case 'reset': {

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

@@ -1,5 +1,5 @@
 import { createContext, h } from 'preact';
-import { useContext } from 'preact/hooks';
+import { useCallback, useContext } from 'preact/hooks';
 import { signal, useComputed, useSignal, useSignalEffect } from '@preact/signals';
 import { useQueryContext } from './QueryProvider.js';
 import { usePlatformName } from '../types.js';
@@ -11,6 +11,10 @@ import { eventToIntention } from '../utils.js';
  * @typedef {import("../utils.js").Intention} Intention
  */
 
+/**
+ * @typedef {{kind: 'set-selections', value: Set<number>, reason: string}} Action
+ */
+const SelectionDispatchContext = createContext(/** @type {(a: Action) => void} */ ((a) => {}));
 const SelectionContext = createContext({
     selected: signal(/** @type {Set<number>} */ (new Set([]))),
 });
@@ -23,7 +27,29 @@ const SelectionContext = createContext({
  */
 export function SelectionProvider({ children }) {
     const selected = useSignal(new Set(/** @type {number[]} */ ([])));
-    return <SelectionContext.Provider value={{ selected }}>{children}</SelectionContext.Provider>;
+    /** @type {(a: Action) => void} */
+    const dispatch = useCallback(
+        /**
+         * @param {Action} action
+         */
+        function dispatch(action) {
+            selected.value = (() => {
+                switch (action.kind) {
+                    case 'set-selections': {
+                        return action.value;
+                    }
+                    default:
+                        return selected.value;
+                }
+            })();
+        },
+        [selected],
+    );
+    return (
+        <SelectionContext.Provider value={{ selected }}>
+            <SelectionDispatchContext.Provider value={dispatch}>{children}</SelectionDispatchContext.Provider>
+        </SelectionContext.Provider>
+    );
 }
 
 // Hook for consuming the context
@@ -37,20 +63,18 @@ export function useSelected() {
 
 export function useSelectionEvents(containerRef) {
     const { selected } = useContext(SelectionContext);
-    /** @type {UpdateSelected} */
-    const update = (fn, reason) => {
-        // console.log('[❌] clearing selections because', reason);
-        selected.value = fn(selected.value);
-    };
+    useResetOnQueryChange();
+    useRowInteractions(selected, containerRef);
+}
 
-    useResetOnQueryChange(update);
-    useRowInteractions(update, selected, containerRef);
+function useSelectionDispatch() {
+    return useContext(SelectionDispatchContext);
 }
 
 /**
- * @param {UpdateSelected} update
  */
-function useResetOnQueryChange(update) {
+function useResetOnQueryChange() {
+    const dispatch = useSelectionDispatch();
     const query = useQueryContext();
     const { results } = useGlobalState();
     const length = useComputed(() => results.value.items.length);
@@ -61,12 +85,16 @@ function useResetOnQueryChange(update) {
             // when anything about the query changes, reset selections
             // todo: this should not fire on the first value too
             query.subscribe((old) => {
-                update((prev) => new Set([]), 'query changed');
+                dispatch({ kind: 'set-selections', value: new Set([]), reason: 'query changed' });
             }),
             // todo: this should not fire on the first value too
             length.subscribe((newLength) => {
                 if (newLength < prevLength) {
-                    update((prev) => new Set([]), `items length shrank from ${prevLength} to ${newLength}`);
+                    dispatch({
+                        kind: 'set-selections',
+                        value: new Set([]),
+                        reason: `items length shrank from ${prevLength} to ${newLength}`,
+                    });
                 }
                 prevLength = newLength;
             }),
@@ -81,12 +109,11 @@ function useResetOnQueryChange(update) {
 }
 
 /**
- * @param {UpdateSelected} update
- * @param {import("@preact/signals").Signal<Set<number>>} selected
+ * @param {import("@preact/signals").ReadonlySignal<Set<number>>} selected
  */
-function useRowInteractions(update, selected, containerRef) {
+function useRowInteractions(selected, containerRef) {
     const platformName = usePlatformName();
-
+    const dispatch = useSelectionDispatch();
     const anchorIndex = useSignal(/** @type {null|number} */ (null));
     const lastShiftRange = useSignal({ start: /** @type {null|number} */ (null), end: /** @type {null|number} */ (null) });
     const focusedIndex = useSignal(/** @type {null|number} */ (null));
@@ -101,7 +128,7 @@ function useRowInteractions(update, selected, containerRef) {
             const { index } = selection;
             switch (intention) {
                 case 'click': {
-                    selected.value = new Set([index]);
+                    dispatch({ kind: 'set-selections', value: new Set([index]), reason: 'row clicked' });
                     anchorIndex.value = index;
                     lastShiftRange.value = { start: null, end: null };
                     focusedIndex.value = index;
@@ -114,7 +141,7 @@ function useRowInteractions(update, selected, containerRef) {
                     } else {
                         newSelected.add(index);
                     }
-                    selected.value = newSelected;
+                    dispatch({ kind: 'set-selections', value: newSelected, reason: 'row ctrl+clicked' });
                     anchorIndex.value = index;
                     lastShiftRange.value = { start: null, end: null };
                     focusedIndex.value = index;
@@ -140,7 +167,7 @@ function useRowInteractions(update, selected, containerRef) {
                     }
 
                     lastShiftRange.value = { start, end };
-                    selected.value = newSelected;
+                    dispatch({ kind: 'set-selections', value: newSelected, reason: 'row shift+clicked' });
                     focusedIndex.value = index;
                     break;
                 }
@@ -182,7 +209,7 @@ function useRowInteractions(update, selected, containerRef) {
                     }
 
                     lastShiftRange.value = { start, end };
-                    selected.value = newSelected;
+                    dispatch({ kind: 'set-selections', value: newSelected, reason: 'shift+up or shift+down pressed' });
 
                     if (anchorIndex.value === null) {
                         anchorIndex.value = newIndex;
@@ -191,7 +218,7 @@ function useRowInteractions(update, selected, containerRef) {
                 }
                 case 'up':
                 case 'down': {
-                    selected.value = new Set([newIndex]);
+                    dispatch({ kind: 'set-selections', value: new Set([newIndex]), reason: 'up or down pressed without modifier' });
                     anchorIndex.value = newIndex;
                     lastShiftRange.value = { start: null, end: null };
                     break;
@@ -218,7 +245,11 @@ function useRowInteractions(update, selected, containerRef) {
             if (event.target !== document.body) return;
             switch (intention) {
                 case 'escape': {
-                    update((prev) => (prev.size > 0 ? new Set([]) : prev), 'escape key pressed');
+                    dispatch({
+                        kind: 'set-selections',
+                        value: selected.value.size > 0 ? new Set([]) : selected.value,
+                        reason: 'escape key pressed',
+                    });
                     return true;
                 }
             }