handle sideeffects

Author: shakyShane

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

@@ -17,7 +17,7 @@ import { useHistoryServiceDispatch, useResultsData } from './HistoryServiceProvi
  *   | {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: 'select-next-or-prev'; index: 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
@@ -40,11 +40,18 @@ export function SelectionProvider({ children }) {
      * @param {Action} evt
      */
     function dispatch(evt) {
-        console.log(JSON.stringify(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]);
+
     return (
         <SelectionContext.Provider value={selected}>
             <FocussedContext.Provider value={focussed}>
@@ -59,7 +66,7 @@ export function useSelected() {
     return useContext(SelectionContext);
 }
 
-export function useFocussedIndex() {
+function useFocussedIndex() {
     return useContext(FocussedContext);
 }
 
@@ -88,7 +95,21 @@ function reducer(prev, evt) {
         case 'reset': {
             return { ...defaultState };
         }
-        case 'select-next-or-prev':
+        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 {
@@ -167,11 +188,11 @@ function reducer(prev, evt) {
             };
         }
         case 'increment-selection': {
-            const { focusedIndex } = prev;
+            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));
-            const { anchorIndex, lastShiftRange } = prev;
+
             // Handle shift+arrow selection
             const newSelected = new Set(prev.selected);
 
@@ -263,54 +284,39 @@ export function useRowInteractions(mainRef) {
      * @return {boolean} true if we handled this event
      */
     function handleKeyIntention(intention) {
-        // prettier-ignore
-        const direction = intention === 'shift+up' || intention === 'up'
-            ? -1
-            : 1;
-
+        const total = results.value.items.length;
         if (focusedIndex.value === null) return false;
-        const newIndex = Math.max(0, Math.min(results.value.items.length - 1, focusedIndex.value + direction));
 
         switch (intention) {
             case 'shift+down': {
                 dispatch({
                     kind: 'increment-selection',
                     direction: 'down',
-                    total: results.value.items.length,
+                    total,
                 });
-                break;
+                return true;
             }
             case 'shift+up': {
                 dispatch({
                     kind: 'increment-selection',
                     direction: 'up',
-                    total: results.value.items.length,
+                    total,
                 });
-                break;
+                return true;
             }
             case 'up':
+                dispatch({ kind: 'move-selection', direction: 'up', total });
+                return true;
             case 'down': {
-                dispatch({ kind: 'select-next-or-prev', index: newIndex });
-                break;
+                dispatch({ kind: 'move-selection', direction: 'down', total });
+                return true;
             }
             case 'delete': {
                 if (selected.value.size === 0) break;
                 historyDispatch({ kind: 'delete-entries-by-index', value: [...selected.value] });
                 break;
             }
         }
-
-        switch (intention) {
-            case 'shift+down':
-            case 'shift+up':
-            case 'up':
-            case 'down': {
-                const match = document.querySelector(`[aria-selected][data-index="${newIndex}"]`);
-                match?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
-                return true;
-            }
-        }
-
         return false;
     }
     /**