Refactor user selection state handling using hook

This commit introduces `useUserSelectionState` compositional hook. it
centralizes and allows reusing the logic for tracking and mutation user
selection state across the application.

The change aims to increase code reusability, simplify the code, improve
testability, and adhere to the single responsibility principle. It makes
the code more reliable against race conditions and removes the need for
tracking deep changes.

Other supporting changes:

- Introduce `CardStateIndicator` component for displaying the card state
  indicator icon, improving the testability and separation of concerns.
- Refactor `SelectionTypeHandler` to use functional code with more clear
  interfaces to simplify the code. It reduces complexity, increases
  maintainability and increase readability by explicitly separating
  mutating functions.
- Add new unit tests and extend improving ones to cover the new logic
  introduced in this commit. Remove the need to mount a wrapper
  component to simplify and optimize some tests, using parameter
  injection to inject dependencies intead.

src/presentation/components/Scripts/Menu/Selector/SelectionTypeHandler.ts

@@ -2,7 +2,8 @@ import { IScript } from '@/domain/IScript';
 import { SelectedScript } from '@/application/Context/State/Selection/SelectedScript';
 import { RecommendationLevel } from '@/domain/RecommendationLevel';
 import { scrambledEqual } from '@/application/Common/Array';
-import { ICategoryCollectionState, IReadOnlyCategoryCollectionState } from '@/application/Context/State/ICategoryCollectionState';
+import { IReadOnlyUserSelection, IUserSelection } from '@/application/Context/State/Selection/IUserSelection';
+import { ICategoryCollection } from '@/domain/ICategoryCollection';
 
 export enum SelectionType {
   Standard,
@@ -12,66 +13,79 @@ export enum SelectionType {
   Custom,
 }
 
-export class SelectionTypeHandler {
-  constructor(private readonly state: ICategoryCollectionState) {
-    if (!state) { throw new Error('missing state'); }
-  }
-
-  public selectType(type: SelectionType) {
-    if (type === SelectionType.Custom) {
-      throw new Error('cannot select custom type');
-    }
-    const selector = selectors.get(type);
-    selector.select(this.state);
-  }
-
-  public getCurrentSelectionType(): SelectionType {
-    for (const [type, selector] of selectors.entries()) {
-      if (selector.isSelected(this.state)) {
-        return type;
-      }
-    }
-    return SelectionType.Custom;
+export function setCurrentSelectionType(type: SelectionType, context: SelectionMutationContext) {
+  if (type === SelectionType.Custom) {
+    throw new Error('cannot select custom type');
   }
+  const selector = selectors.get(type);
+  selector.select(context);
 }
 
-interface ISingleTypeHandler {
-  isSelected: (state: IReadOnlyCategoryCollectionState) => boolean;
-  select: (state: ICategoryCollectionState) => void;
+export function getCurrentSelectionType(context: SelectionCheckContext): SelectionType {
+  for (const [type, selector] of selectors.entries()) {
+    if (selector.isSelected(context)) {
+      return type;
+    }
+  }
+  return SelectionType.Custom;
 }
 
-const selectors = new Map<SelectionType, ISingleTypeHandler>([
+export interface SelectionCheckContext {
+  readonly selection: IReadOnlyUserSelection;
+  readonly collection: ICategoryCollection;
+}
+
+export interface SelectionMutationContext {
+  readonly selection: IUserSelection,
+  readonly collection: ICategoryCollection,
+}
+
+interface SelectionTypeHandler {
+  isSelected: (context: SelectionCheckContext) => boolean;
+  select: (context: SelectionMutationContext) => void;
+}
+
+const selectors = new Map<SelectionType, SelectionTypeHandler>([
   [SelectionType.None, {
-    select: (state) => state.selection.deselectAll(),
-    isSelected: (state) => state.selection.selectedScripts.length === 0,
+    select: ({ selection }) => selection.deselectAll(),
+    isSelected: ({ selection }) => selection.selectedScripts.length === 0,
   }],
   [SelectionType.Standard, getRecommendationLevelSelector(RecommendationLevel.Standard)],
   [SelectionType.Strict, getRecommendationLevelSelector(RecommendationLevel.Strict)],
   [SelectionType.All, {
-    select: (state) => state.selection.selectAll(),
-    isSelected: (state) => state.selection.selectedScripts.length === state.collection.totalScripts,
+    select: ({ selection }) => selection.selectAll(),
+    isSelected: (
+      { selection, collection },
+    ) => selection.selectedScripts.length === collection.totalScripts,
   }],
 ]);
 
-function getRecommendationLevelSelector(level: RecommendationLevel): ISingleTypeHandler {
+function getRecommendationLevelSelector(
+  level: RecommendationLevel,
+): SelectionTypeHandler {
   return {
-    select: (state) => selectOnly(level, state),
-    isSelected: (state) => hasAllSelectedLevelOf(level, state),
+    select: (context) => selectOnly(level, context),
+    isSelected: (context) => hasAllSelectedLevelOf(level, context),
   };
 }
 
 function hasAllSelectedLevelOf(
   level: RecommendationLevel,
-  state: IReadOnlyCategoryCollectionState,
-) {
-  const scripts = state.collection.getScriptsByLevel(level);
-  const { selectedScripts } = state.selection;
+  context: SelectionCheckContext,
+): boolean {
+  const { collection, selection } = context;
+  const scripts = collection.getScriptsByLevel(level);
+  const { selectedScripts } = selection;
   return areAllSelected(scripts, selectedScripts);
 }
 
-function selectOnly(level: RecommendationLevel, state: ICategoryCollectionState) {
-  const scripts = state.collection.getScriptsByLevel(level);
-  state.selection.selectOnly(scripts);
+function selectOnly(
+  level: RecommendationLevel,
+  context: SelectionMutationContext,
+): void {
+  const { collection, selection } = context;
+  const scripts = collection.getScriptsByLevel(level);
+  selection.selectOnly(scripts);
 }
 
 function areAllSelected(

src/presentation/components/Scripts/Menu/Selector/TheSelector.vue

@@ -65,14 +65,15 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from 'vue';
+import {
+  defineComponent, computed,
+} from 'vue';
 import { injectKey } from '@/presentation/injectionSymbols';
 import TooltipWrapper from '@/presentation/components/Shared/TooltipWrapper.vue';
-import { ICategoryCollectionState } from '@/application/Context/State/ICategoryCollectionState';
-import { IEventSubscription } from '@/infrastructure/Events/IEventSource';
+import { ICategoryCollection } from '@/domain/ICategoryCollection';
 import MenuOptionList from '../MenuOptionList.vue';
 import MenuOptionListItem from '../MenuOptionListItem.vue';
-import { SelectionType, SelectionTypeHandler } from './SelectionTypeHandler';
+import { SelectionType, setCurrentSelectionType, getCurrentSelectionType } from './SelectionTypeHandler';
 
 export default defineComponent({
   components: {
@@ -81,43 +82,38 @@ export default defineComponent({
     TooltipWrapper,
   },
   setup() {
-    const { modifyCurrentState, onStateChange } = injectKey((keys) => keys.useCollectionState);
-    const { events } = injectKey((keys) => keys.useAutoUnsubscribedEvents);
+    const {
+      currentSelection, modifyCurrentSelection,
+    } = injectKey((keys) => keys.useUserSelectionState);
+    const { currentState } = injectKey((keys) => keys.useCollectionState);
 
-    const currentSelection = ref(SelectionType.None);
+    const currentCollection = computed<ICategoryCollection>(() => currentState.value.collection);
 
-    let selectionTypeHandler: SelectionTypeHandler;
-
-    onStateChange(() => {
-      modifyCurrentState((state) => {
-        selectionTypeHandler = new SelectionTypeHandler(state);
-        updateSelections();
-        events.unsubscribeAllAndRegister([
-          subscribeAndUpdateSelections(state),
-        ]);
-      });
-    }, { immediate: true });
-
-    function subscribeAndUpdateSelections(
-      state: ICategoryCollectionState,
-    ): IEventSubscription {
-      return state.selection.changed.on(() => updateSelections());
-    }
+    const currentSelectionType = computed<SelectionType>({
+      get: () => getCurrentSelectionType({
+        selection: currentSelection.value,
+        collection: currentCollection.value,
+      }),
+      set: (type: SelectionType) => {
+        selectType(type);
+      },
+    });
 
     function selectType(type: SelectionType) {
-      if (currentSelection.value === type) {
+      if (currentSelectionType.value === type) {
         return;
       }
-      selectionTypeHandler.selectType(type);
-    }
-
-    function updateSelections() {
-      currentSelection.value = selectionTypeHandler.getCurrentSelectionType();
+      modifyCurrentSelection((mutableSelection) => {
+        setCurrentSelectionType(type, {
+          selection: mutableSelection,
+          collection: currentCollection.value,
+        });
+      });
     }
 
     return {
       SelectionType,
-      currentSelection,
+      currentSelection: currentSelectionType,
       selectType,
     };
   },