move state/side-effects

Author: shakyShane

special-pages/package.json

@@ -10,7 +10,7 @@
     "build": "node index.mjs",
     "build.dev": "npm run build -- --env development",
     "lint-fix": "cd ../ && npm run lint-fix",
-    "test-unit": "node --test unit-test/translations.mjs unit-test/color.spec.mjs pages/duckplayer/unit-tests/embed-settings.mjs pages/new-tab/app/freemium-pir-banner/unit-tests/utils.spec.mjs",
+    "test-unit": "node --test 'unit-test/*' 'pages/history/unit-tests/*' 'pages/duckplayer/unit-tests/*' pages/new-tab/app/freemium-pir-banner/unit-tests/utils.spec.mjs",
     "test-int": "npm run test-unit && npm run build.dev && playwright test --grep-invert '@screenshots'",
     "test-int-x": "npm run test-int",
     "test.screenshots": "npm run test-unit && npm run build.dev && playwright test --grep '@screenshots'",

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

@@ -4,17 +4,31 @@ import { Item } from './Item.js';
 import styles from './VirtualizedList.module.css';
 import { VisibleItems } from './VirtualizedList.js';
 import { Empty } from './Empty.js';
-import { useSelected } from '../global/Providers/SelectionProvider.js';
+import { useSelected, useSelectionState } from '../global/Providers/SelectionProvider.js';
 import { useHistoryServiceDispatch, useResultsData } from '../global/Providers/HistoryServiceProvider.js';
-import { useCallback } from 'preact/hooks';
+import { useCallback, useEffect } from 'preact/hooks';
 
 /**
  * Access global state and render the results
  */
 export function ResultsContainer() {
     const results = useResultsData();
     const selected = useSelected();
+    const selectionState = useSelectionState();
     const dispatch = useHistoryServiceDispatch();
+
+    /**
+     * When the selection state changed in a way that might cause an element to be off-screen, re-focus it
+     */
+    useEffect(() => {
+        return selectionState.subscribe(({ lastAction, focusedIndex }) => {
+            if (lastAction === 'move-selection' || lastAction === 'inc-or-dec-selected') {
+                const match = document.querySelector(`[aria-selected][data-index="${focusedIndex}"]`);
+                match?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+            }
+        });
+    }, [selectionState]);
+
     /**
      * Let the history service know when it might want to load more
      */

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

@@ -1,30 +1,21 @@
 import { createContext, h } from 'preact';
 import { useCallback, useContext } from 'preact/hooks';
-import { signal, useComputed, useSignal } from '@preact/signals';
+import { signal, useComputed } from '@preact/signals';
 import { usePlatformName } from '../../types.js';
-import { eventToIntention, invariant } from '../../utils.js';
+import { eventToIntention } from '../../utils.js';
 import { useHistoryServiceDispatch, useResultsData } from './HistoryServiceProvider.js';
+import { useSelectionStateApi } from '../hooks/useSelectionState.js';
 
 /**
  * @typedef {(s: (d: Set<number>) => Set<number>, reason: string) => void} UpdateSelected
  * @typedef {import("../../utils.js").Intention} Intention
- * @typedef {{ focusedIndex: number|null; anchorIndex: number|null; lastShiftRange: { end:number|null; start:number|null }}} SelectionState
+ * @typedef {import('../hooks/useSelectionState.js').Action} Action
+ * @typedef {import('../hooks/useSelectionState.js').SelectionState} SelectionState
  * @import { ReadonlySignal } from '@preact/signals'
  */
 
-/**
- * @typedef {{kind: 'select-index', index: number, reason?: string}
- *   | {kind: 'toggle-index'; index: number; reason?: string}
- *   | {kind: 'expand-selected-to-index'; index: number; reason?: string}
- *   | {kind: 'inc-or-dec-selected'; nextIndex: number; reason?: string}
- *   | {kind: 'move-selection'; direction: 'up' | 'down'; total: number; reason?: string}
- *   | {kind: 'increment-selection'; direction: 'up' | 'down'; total: number; reason?: string}
- *   | {kind: 'reset'; reason?: string}
- * } Action
- */
 const SelectionDispatchContext = createContext(/** @type {(a: Action) => void} */ ((a) => {}));
-const SelectionContext = createContext(/** @type {ReadonlySignal<Set<number>>} */ (signal(new Set([]))));
-const FocussedContext = createContext(/** @type {ReadonlySignal<number|null>} */ (signal(null)));
+const SelectionStateContext = createContext(/** @type {ReadonlySignal<SelectionState>} */ (signal({})));
 
 /**
  * Provides a context for the selections + state for managing updates (like keyboard+clicks)
@@ -33,196 +24,33 @@ const FocussedContext = createContext(/** @type {ReadonlySignal<number|null>} */
  * @param {import("preact").ComponentChild} props.children - The child components that will consume the history service context.
  */
 export function SelectionProvider({ children }) {
-    const state = useSignal(defaultState);
-    const selected = useComputed(() => state.value.selected);
-    const focussed = useComputed(() => state.value.focusedIndex);
-    /**
-     * @param {Action} evt
-     */
-    function dispatch(evt) {
-        console.log(evt);
-        const next = reducer(state.value, evt);
-        state.value = next;
-
-        // after-effects?
-        if (evt.kind === 'move-selection' || evt.kind === 'increment-selection') {
-            const match = document.querySelector(`[aria-selected][data-index="${state.value.focusedIndex}"]`);
-            match?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
-        }
-    }
-    const dispatcher = useCallback(dispatch, [state, selected]);
+    const { dispatch, state } = useSelectionStateApi();
 
     return (
-        <SelectionContext.Provider value={selected}>
-            <FocussedContext.Provider value={focussed}>
-                <SelectionDispatchContext.Provider value={dispatcher}>{children}</SelectionDispatchContext.Provider>
-            </FocussedContext.Provider>
-        </SelectionContext.Provider>
+        <SelectionStateContext.Provider value={state}>
+            <SelectionDispatchContext.Provider value={dispatch}>{children}</SelectionDispatchContext.Provider>
+        </SelectionStateContext.Provider>
     );
 }
 
-// Hook for consuming the context
+export function useSelectionState() {
+    return useContext(SelectionStateContext);
+}
+
 export function useSelected() {
-    return useContext(SelectionContext);
+    const state = useContext(SelectionStateContext);
+    return useComputed(() => state.value.selected);
 }
 
-function useFocussedIndex() {
-    return useContext(FocussedContext);
+export function useFocussedIndex() {
+    const state = useContext(SelectionStateContext);
+    return useComputed(() => state.value.focusedIndex);
 }
 
 export function useSelectionDispatch() {
     return useContext(SelectionDispatchContext);
 }
 
-const defaultState = {
-    anchorIndex: /** @type {null|number} */ (null),
-    /** @type {{start: null|number; end: null|number}} */
-    lastShiftRange: {
-        start: null,
-        end: null,
-    },
-    focusedIndex: /** @type {null|number} */ (null),
-    selected: new Set(/** @type {number[]} */ ([])),
-};
-
-/**
- * @param {typeof defaultState} prev
- * @param {Action} evt
- * @return {typeof defaultState}
- */
-function reducer(prev, evt) {
-    switch (evt.kind) {
-        case 'reset': {
-            return { ...defaultState };
-        }
-        case 'move-selection': {
-            const { focusedIndex } = prev;
-            invariant(focusedIndex !== null);
-            const delta = evt.direction === 'up' ? -1 : 1;
-            // either the last item, or current + 1
-            const max = Math.min(evt.total - 1, focusedIndex + delta);
-            const newIndex = Math.max(0, max);
-            const newSelected = new Set([newIndex]);
-            return {
-                anchorIndex: newIndex,
-                focusedIndex: newIndex,
-                lastShiftRange: { start: null, end: null },
-                selected: newSelected,
-            };
-        }
-        case 'select-index': {
-            const newSelected = new Set([evt.index]);
-            return {
-                anchorIndex: evt.index,
-                focusedIndex: evt.index,
-                lastShiftRange: { start: null, end: null },
-                selected: newSelected,
-            };
-        }
-        case 'toggle-index': {
-            const newSelected = new Set(prev.selected);
-            if (newSelected.has(evt.index)) {
-                newSelected.delete(evt.index);
-            } else {
-                newSelected.add(evt.index);
-            }
-            return {
-                anchorIndex: evt.index,
-                lastShiftRange: { start: null, end: null },
-                focusedIndex: evt.index,
-                selected: newSelected,
-            };
-        }
-        case 'expand-selected-to-index': {
-            const { anchorIndex, lastShiftRange } = prev;
-            const newSelected = new Set(prev.selected);
-
-            // If there was a previous shift selection, remove it first
-            if (lastShiftRange.start !== null && lastShiftRange.end !== null) {
-                for (let i = lastShiftRange.start; i <= lastShiftRange.end; i++) {
-                    newSelected.delete(i);
-                }
-            }
-
-            // Calculate new range bounds from the anchor point
-            const start = Math.min(anchorIndex ?? 0, evt.index);
-            const end = Math.max(anchorIndex ?? 0, evt.index);
-
-            // Add all items in new range to selection
-            for (let i = start; i <= end; i++) {
-                newSelected.add(i);
-            }
-
-            return {
-                ...prev,
-                lastShiftRange: { start, end },
-                focusedIndex: evt.index,
-                selected: newSelected,
-            };
-        }
-        case 'inc-or-dec-selected': {
-            const { anchorIndex, lastShiftRange } = prev;
-            // Handle shift+arrow selection
-            const newSelected = new Set(prev.selected);
-
-            // Remove previous shift range
-            if (lastShiftRange.start !== null && lastShiftRange.end !== null) {
-                for (let i = lastShiftRange.start; i <= lastShiftRange.end; i++) {
-                    newSelected.delete(i);
-                }
-            }
-
-            // Calculate new range
-            const start = Math.min(anchorIndex ?? evt.nextIndex, evt.nextIndex);
-            const end = Math.max(anchorIndex ?? evt.nextIndex, evt.nextIndex);
-
-            // Add new range
-            for (let i = start; i <= end; i++) {
-                newSelected.add(i);
-            }
-            return {
-                focusedIndex: evt.nextIndex,
-                lastShiftRange: { start, end },
-                anchorIndex: anchorIndex === null ? evt.nextIndex : anchorIndex,
-                selected: newSelected,
-            };
-        }
-        case 'increment-selection': {
-            const { focusedIndex, anchorIndex, lastShiftRange } = prev;
-            invariant(focusedIndex !== null);
-            const delta = evt.direction === 'up' ? -1 : 1;
-            const newIndex = Math.max(0, Math.min(evt.total - 1, focusedIndex + delta));
-
-            // Handle shift+arrow selection
-            const newSelected = new Set(prev.selected);
-
-            // Remove previous shift range
-            if (lastShiftRange.start !== null && lastShiftRange.end !== null) {
-                for (let i = lastShiftRange.start; i <= lastShiftRange.end; i++) {
-                    newSelected.delete(i);
-                }
-            }
-
-            // Calculate new range
-            const start = Math.min(anchorIndex ?? newIndex, newIndex);
-            const end = Math.max(anchorIndex ?? newIndex, newIndex);
-
-            // Add new range
-            for (let i = start; i <= end; i++) {
-                newSelected.add(i);
-            }
-            return {
-                focusedIndex: newIndex,
-                lastShiftRange: { start, end },
-                anchorIndex: anchorIndex === null ? newIndex : anchorIndex,
-                selected: newSelected,
-            };
-        }
-        default:
-            return prev;
-    }
-}
-
 /**
  * Handle onClick + keydown events to support most interactions with the list.
  * @param {import('preact/hooks').MutableRef<HTMLElement|null>} mainRef