@scrabble-solver/scrabble-solver 2.15.11 → 2.15.13

package/src/components/NavButtons/NavButtons.tsx

@@ -1,14 +1,15 @@
 import classNames from 'classnames';
-import { FunctionComponent, memo } from 'react';
+import { type FunctionComponent, memo } from 'react';
 
 import { useAppLayout } from 'hooks';
 import { CardChecklist, Cog, Eraser, Github, KeyboardFill, List, Sack } from 'icons';
 import { GITHUB_PROJECT_URL } from 'parameters';
-import { selectConfig, selectHasInvalidWords, selectHasOverusedTiles, useTranslate, useTypedSelector } from 'state';
+import { selectConfig, useTranslate, useTypedSelector } from 'state';
 
 import { IconButton } from '../IconButton';
 
 import styles from './NavButtons.module.scss';
+import { selectHasInvalidWords, selectHasOverusedTiles } from './selectors';
 
 interface Props {
   onClear: () => void;
@@ -29,8 +30,8 @@ const NavButtonsBase: FunctionComponent<Props> = ({
 }) => {
   const translate = useTranslate();
   const config = useTypedSelector(selectConfig);
-  const hasOverusedTiles = useTypedSelector(selectHasOverusedTiles);
   const hasInvalidWords = useTypedSelector(selectHasInvalidWords);
+  const hasOverusedTiles = useTypedSelector(selectHasOverusedTiles);
   const { showKeyMap, showShortNav } = useAppLayout();
 
   if (showShortNav) {

package/src/components/NavButtons/selectors.ts

@@ -0,0 +1,11 @@
+import { createSelector } from '@reduxjs/toolkit';
+
+import { selectInvalidWords, selectRemainingTiles } from 'state';
+
+export const selectHasInvalidWords = createSelector([selectInvalidWords], (invalidWords) => {
+  return invalidWords.length > 0;
+});
+
+export const selectHasOverusedTiles = createSelector([selectRemainingTiles], (remainingTiles) => {
+  return remainingTiles.some(({ count = 0, usedCount }) => usedCount > count);
+});

package/src/components/NotFound/NotFound.tsx

@@ -1,4 +1,4 @@
-import { FunctionComponent } from 'react';
+import { type FunctionComponent } from 'react';
 
 import { DashCircleFill } from 'icons';
 

package/src/components/PlainTiles/PlainTiles.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { CSSProperties, FunctionComponent, useMemo } from 'react';
+import { type CSSProperties, type FunctionComponent, useMemo } from 'react';
 
 import { createPlainTiles, getViewbox } from './lib';
 import styles from './PlainTiles.module.scss';

package/src/components/PlainTiles/Tile.tsx

@@ -1,4 +1,4 @@
-import { FunctionComponent } from 'react';
+import { type FunctionComponent } from 'react';
 
 interface Props {
   character: string;

package/src/components/PlainTiles/lib.ts

@@ -0,0 +1,90 @@
+import { getConfig } from '@scrabble-solver/configs';
+import { Game, Locale } from '@scrabble-solver/types';
+
+import {
+  PLAIN_TILES_COLOR_DEFAULT,
+  PLAIN_TILES_PADDING_HORIZONTAL,
+  PLAIN_TILES_PADDING_VERTICAL,
+  PLAIN_TILES_POINTS_COLORS,
+  PLAIN_TILES_TILE_MARGIN,
+  PLAIN_TILES_TILE_MAX_ROTATE,
+  PLAIN_TILES_TILE_MAX_SCATTER,
+  PLAIN_TILES_TILE_SIZE,
+} from 'parameters';
+
+import type { CreatePlainTileOptions, CreatePlainTilesOptions, PlainTile } from './types';
+
+export const createPlainTiles = ({ color, content, showPoints }: CreatePlainTilesOptions): PlainTile[] => {
+  const rows = content.map((words, rowIndex) => {
+    return words.map((word, wordIndex) => {
+      const cellOffset = words.slice(0, wordIndex).reduce((result, { length }) => result + length + ' '.length, 0);
+      const characters = word.split('');
+
+      return characters.map((character, cellIndex) => {
+        return createPlainTile({
+          cellIndex: cellOffset + cellIndex,
+          character,
+          color,
+          rowIndex,
+          showPoints,
+        });
+      });
+    });
+  });
+
+  const tiles = rows.flat(2);
+  return tiles;
+};
+
+export const createPlainTile = ({
+  cellIndex,
+  character,
+  color,
+  rowIndex,
+  showPoints,
+}: CreatePlainTileOptions): PlainTile => {
+  const configPoints = getConfig(Game.Literaki, Locale.EN_US).getCharacterPoints(character.toLowerCase());
+  const points = showPoints ? configPoints : undefined;
+  const defaultColor =
+    typeof configPoints === 'number' ? PLAIN_TILES_POINTS_COLORS[configPoints] : PLAIN_TILES_COLOR_DEFAULT;
+  const x = getX(cellIndex) + PLAIN_TILES_TILE_SIZE / 2;
+  const y = getY(0) + PLAIN_TILES_TILE_SIZE / 2;
+
+  return {
+    character,
+    color: color || defaultColor,
+    points,
+    size: PLAIN_TILES_TILE_SIZE,
+    transform: `rotate(${randomize(0, PLAIN_TILES_TILE_MAX_ROTATE)}, ${x}, ${y})`,
+    x: randomize(getX(cellIndex), PLAIN_TILES_TILE_MAX_SCATTER),
+    y: randomize(getY(rowIndex), PLAIN_TILES_TILE_MAX_SCATTER),
+  };
+};
+
+export const getViewbox = (content: string[][]): string => {
+  const longestRowLength = content.reduce((result, words) => {
+    const wordsLength = words.reduce((sum, word) => sum + word.length, 0);
+    const rowLength = wordsLength + Math.max(words.length - 1, 0);
+    return Math.max(result, rowLength);
+  }, 0);
+  const width =
+    longestRowLength * (PLAIN_TILES_TILE_SIZE + PLAIN_TILES_TILE_MARGIN) -
+    (longestRowLength === 0 ? 0 : PLAIN_TILES_TILE_MARGIN);
+  const height =
+    content.length * (PLAIN_TILES_TILE_SIZE + PLAIN_TILES_TILE_MARGIN) -
+    (content.length === 0 ? 0 : PLAIN_TILES_TILE_MARGIN);
+
+  return `0 0 ${width} ${height}`;
+};
+
+export const getX = (index: number): number => {
+  return PLAIN_TILES_PADDING_HORIZONTAL + index * (PLAIN_TILES_TILE_SIZE + PLAIN_TILES_TILE_MARGIN);
+};
+
+export const getY = (index: number): number => {
+  return PLAIN_TILES_PADDING_VERTICAL + index * (PLAIN_TILES_TILE_SIZE + PLAIN_TILES_TILE_MARGIN);
+};
+
+export const randomize = (value: number, maxChange: number): number => {
+  return value + maxChange * 2 * (0.5 - Math.random());
+};

package/src/components/Progress/Progress.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { FunctionComponent, HTMLProps } from 'react';
+import { type FunctionComponent, type HTMLProps } from 'react';
 
 import { PROGRESS_COLOR_BACKGROUND, PROGRESS_COLOR_VALUE } from 'parameters';
 import { selectLocale, useTypedSelector } from 'state';

package/src/components/Rack/Rack.tsx

@@ -3,10 +3,10 @@
 import { FloatingPortal, autoUpdate, useFloating } from '@floating-ui/react';
 import classNames from 'classnames';
 import {
-  ChangeEvent,
-  ClipboardEvent,
-  FunctionComponent,
-  RefObject,
+  type ChangeEvent,
+  type ClipboardEvent,
+  type FunctionComponent,
+  type RefObject,
   createRef,
   useCallback,
   useMemo,
@@ -18,27 +18,12 @@ import { useDispatch } from 'react-redux';
 
 import { useAppLayout } from 'hooks';
 import { LOCALE_FEATURES } from 'i18n';
-import {
-  createArray,
-  createKeyboardNavigation,
-  extractCharacters,
-  extractInputValue,
-  getTileSizes,
-  isCtrl,
-  zipCharactersAndTiles,
-} from 'lib';
-import {
-  rackSlice,
-  selectConfig,
-  selectInputMode,
-  selectLocale,
-  selectRack,
-  selectResultCandidateTiles,
-  useTypedSelector,
-} from 'state';
+import { createKeyboardNavigation, extractCharacters, extractInputValue, getTileSizes, isCtrl } from 'lib';
+import { rackSlice, selectConfig, selectInputMode, selectLocale, selectRack, useTypedSelector } from 'state';
 
 import { InputPrompt, RackTile } from './components';
 import styles from './Rack.module.scss';
+import { selectRemainingTilesGroups } from './selectors';
 
 interface Props {
   className?: string;
@@ -47,16 +32,15 @@ interface Props {
 
 export const Rack: FunctionComponent<Props> = ({ className, tileSize }) => {
   const dispatch = useDispatch();
+  const { rackHeight } = useAppLayout();
   const config = useTypedSelector(selectConfig);
   const locale = useTypedSelector(selectLocale);
   const rack = useTypedSelector(selectRack);
   const inputMode = useTypedSelector(selectInputMode);
-  const { rackHeight } = useAppLayout();
-  const resultCandidateTiles = useTypedSelector(selectResultCandidateTiles);
-  const tiles = useMemo(() => zipCharactersAndTiles(rack, resultCandidateTiles), [rack, resultCandidateTiles]);
+  const tiles = useTypedSelector(selectRemainingTilesGroups);
   const tilesCount = tiles.length;
   const tilesRefs = useMemo(
-    () => createArray(tilesCount).map(() => createRef<HTMLInputElement | null>()),
+    () => Array.from({ length: tilesCount }).map(() => createRef<HTMLInputElement | null>()),
     [tilesCount],
   );
   const activeIndexRef = useRef<number | undefined>(undefined);

package/src/components/Rack/components/InputPrompt/InputPrompt.tsx

@@ -1,8 +1,8 @@
 import classNames from 'classnames';
 import {
-  CSSProperties,
-  ChangeEventHandler,
-  FormEventHandler,
+  type CSSProperties,
+  type ChangeEventHandler,
+  type FormEventHandler,
   forwardRef,
   useCallback,
   useEffect,
@@ -11,10 +11,10 @@ import {
 import { useDispatch } from 'react-redux';
 
 import { useAppLayout } from 'hooks';
-import { extractCharactersByCase } from 'lib';
 import { rackSlice, selectConfig, useTranslate, useTypedSelector } from 'state';
 
 import styles from './InputPrompt.module.scss';
+import { extractRack } from './lib';
 
 interface Props {
   className?: string;
@@ -36,10 +36,7 @@ const InputPromptBase = forwardRef<HTMLFormElement, Props>(
     const handleSubmit: FormEventHandler<HTMLFormElement> = useCallback(
       (event) => {
         event.preventDefault();
-        const charactersByCase = extractCharactersByCase(config, value);
-        const characters = Array.from({ length: config.rackSize }, (_, index) => {
-          return typeof charactersByCase[index] === 'string' ? charactersByCase[index] : null;
-        });
+        const characters = extractRack(config, value);
         dispatch(rackSlice.actions.changeCharacters({ characters, index: 0 }));
         onSubmit(event);
       },

package/src/components/Rack/components/InputPrompt/lib.test.ts

@@ -0,0 +1,27 @@
+import { getConfig } from '@scrabble-solver/configs';
+import { BLANK } from '@scrabble-solver/constants';
+import { Game, Locale } from '@scrabble-solver/types';
+
+import { extractRack } from './lib';
+
+describe('extractRack', () => {
+  const locale = Locale.ES_ES;
+  const config = getConfig(Game.Scrabble, locale);
+
+  it.each([
+    { input: 'ab ', expected: ['a', 'b', BLANK, null, null, null, null] },
+    { input: 'śćźa', expected: ['s', 'c', 'z', 'a', null, null, null] },
+    { input: 'bueno', expected: ['b', 'u', 'e', 'n', 'o', null, null] },
+    { input: 'bellas', expected: ['b', 'e', 'l', 'l', 'a', 's', null] },
+    { input: 'churro', expected: ['c', 'h', 'u', 'r', 'r', 'o', null] },
+    { input: 'challulla', expected: ['c', 'h', 'a', 'l', 'l', 'u', 'l'] },
+    { input: 'beLlas', expected: ['b', 'e', 'l', 'l', 'a', 's', null] },
+    { input: 'belLas', expected: ['b', 'e', 'l', 'l', 'a', 's', null] },
+    { input: 'beLLas', expected: ['b', 'e', 'll', 'a', 's', null, null] },
+    { input: 'chuRRo', expected: ['c', 'h', 'u', 'rr', 'o', null, null] },
+    { input: 'CHuRRo', expected: ['ch', 'u', 'rr', 'o', null, null, null] },
+    { input: 'CHaLLuLLa', expected: ['ch', 'a', 'll', 'u', 'll', 'a', null] },
+  ])(`[${locale}] "$input"`, ({ input, expected }) => {
+    expect(extractRack(config, input)).toEqual(expected);
+  });
+});

package/src/components/Rack/components/InputPrompt/lib.ts

@@ -0,0 +1,19 @@
+import { type Config } from '@scrabble-solver/types';
+
+// eslint-disable-next-line no-warning-comments
+// TODO: https://github.com/kamilmielnik/scrabble-solver/issues/393
+import { extractCharacters } from '../../../../lib/extractCharacters';
+
+export const extractRack = (config: Config, value: string): (string | null)[] => {
+  const charactersByCase = extractCharacters(config, value, {
+    /**
+     * This is to allow inserting digraphs on the rack in touchscreen input mode.
+     * This is not necessary on the board.
+     */
+    upperCaseDigraphsOnly: true,
+  });
+  const characters = Array.from({ length: config.rackSize }, (_, index) => {
+    return typeof charactersByCase[index] === 'string' ? charactersByCase[index] : null;
+  });
+  return characters;
+};

package/src/components/Rack/components/RackTile/RackTile.tsx

@@ -1,15 +1,15 @@
 import { BLANK } from '@scrabble-solver/constants';
-import { Tile as TileModel } from '@scrabble-solver/types';
+import { type Tile as TileModel } from '@scrabble-solver/types';
 import classNames from 'classnames';
 import {
-  ChangeEvent,
-  ChangeEventHandler,
-  FocusEventHandler,
-  FunctionComponent,
-  KeyboardEventHandler,
-  MouseEventHandler,
-  RefObject,
-  TouchEventHandler,
+  type ChangeEvent,
+  type ChangeEventHandler,
+  type FocusEventHandler,
+  type FunctionComponent,
+  type KeyboardEventHandler,
+  type MouseEventHandler,
+  type RefObject,
+  type TouchEventHandler,
   useCallback,
   useMemo,
 } from 'react';

package/src/components/Rack/selectors.ts

@@ -0,0 +1,9 @@
+import { createSelector } from '@reduxjs/toolkit';
+
+import { zipCharactersAndTiles } from 'lib';
+import { selectRack, selectResultCandidateTiles } from 'state';
+
+export const selectRemainingTilesGroups = createSelector(
+  [selectRack, selectResultCandidateTiles],
+  zipCharactersAndTiles,
+);

package/src/components/Radio/Radio.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { ChangeEventHandler, FunctionComponent, ReactNode } from 'react';
+import { type ChangeEventHandler, type FunctionComponent, type ReactNode } from 'react';
 
 import styles from './Radio.module.scss';
 

package/src/components/Results/Cell.tsx

@@ -1,8 +1,8 @@
 import classNames from 'classnames';
-import { CSSProperties, FunctionComponent, ReactNode } from 'react';
+import { type CSSProperties, type FunctionComponent, type ReactNode } from 'react';
 
 import { selectLocale, useTranslate, useTypedSelector } from 'state';
-import { TranslationKey } from 'types';
+import { type TranslationKey } from 'types';
 
 import { Tooltip } from '../Tooltip';
 

package/src/components/Results/Header.tsx

@@ -1,4 +1,4 @@
-import { FunctionComponent } from 'react';
+import { type FunctionComponent } from 'react';
 
 import { useAppLayout, useColumns } from 'hooks';
 import { GeoAlt, OneTwoThree, Square, SquareA, SquareB, Squares, Words } from 'icons';

package/src/components/Results/HeaderButton.tsx

@@ -1,10 +1,10 @@
 import classNames from 'classnames';
-import { CSSProperties, FunctionComponent, ReactElement, SVGAttributes, useCallback } from 'react';
+import { type CSSProperties, type FunctionComponent, type ReactElement, type SVGAttributes, useCallback } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { SortDown, SortUp } from 'icons';
 import { resultsSlice, selectResultsSort, useTranslate, useTypedSelector } from 'state';
-import { ResultColumnId, SortDirection, TranslationKey } from 'types';
+import { type ResultColumnId, SortDirection, type TranslationKey } from 'types';
 
 import { Tooltip } from '../Tooltip';
 

package/src/components/Results/Result.tsx

@@ -1,22 +1,22 @@
 import classNames from 'classnames';
-import { CSSProperties, FocusEventHandler, MouseEventHandler, ReactElement, useMemo, useRef } from 'react';
+import { type CSSProperties, type FocusEventHandler, type MouseEventHandler, type ReactElement, useRef } from 'react';
 import Highlighter from 'react-highlight-words';
 
 import { useAppLayout, useColumns } from 'hooks';
 import { LOCALE_FEATURES } from 'i18n';
-import { getCoordinates, noop } from 'lib';
+import { noop } from 'lib';
 import {
   selectIsResultMatching,
   selectLocale,
+  selectResultCoordinates,
   selectResultsQuery,
-  selectShowCoordinates,
   useTypedSelector,
 } from 'state';
 import { ResultColumnId } from 'types';
 
 import { Cell } from './Cell';
 import styles from './Results.module.scss';
-import { ResultData } from './types';
+import { type ResultData } from './types';
 
 interface Props {
   data: ResultData;
@@ -38,13 +38,12 @@ export const Result = ({ data, index, style }: Props): ReactElement => {
   const ref = useRef<HTMLButtonElement>(null);
   const columns = useColumns();
   const locale = useTypedSelector(selectLocale);
-  const showCoordinates = useTypedSelector(selectShowCoordinates);
   const query = useTypedSelector(selectResultsQuery);
   const { direction, separator } = LOCALE_FEATURES[locale];
   const result = results[index];
   const isMatching = useTypedSelector((state) => selectIsResultMatching(state, index));
   const words = direction === 'rtl' ? [...result.words].reverse() : result.words;
-  const coordinates = useMemo(() => getCoordinates(result, showCoordinates), [result, showCoordinates]);
+  const coordinates = useTypedSelector((state) => selectResultCoordinates(state, index));
 
   const handleClick: MouseEventHandler = (event) => onClick(result, event);
   const handleMouseEnter: MouseEventHandler = (event) => onMouseEnter(result, event);

package/src/components/Results/Results.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { FunctionComponent, useEffect, useMemo, useState } from 'react';
+import { type FunctionComponent, useEffect, useMemo, useState } from 'react';
 import { FixedSizeList } from 'react-window';
 import { useDebounce } from 'use-debounce';
 
@@ -8,9 +8,9 @@ import { LOCALE_FEATURES } from 'i18n';
 import { BORDER_WIDTH, RESULTS_HEADER_HEIGHT, RESULTS_ITEM_HEIGHT, TEXT_INPUT_HEIGHT } from 'parameters';
 import {
   selectAreResultsOutdated,
-  selectIsLoading,
+  selectSolveIsLoading,
   selectLocale,
-  selectResults,
+  selectProcessedResults,
   selectSolveError,
   useTranslate,
   useTypedSelector,
@@ -24,7 +24,7 @@ import { Header } from './Header';
 import { Result } from './Result';
 import styles from './Results.module.scss';
 import { SolveButton } from './SolveButton';
-import { ResultCallbacks, ResultData } from './types';
+import { type ResultCallbacks, type ResultData } from './types';
 
 interface Props {
   callbacks: ResultCallbacks;
@@ -39,8 +39,8 @@ export const Results: FunctionComponent<Props> = ({ callbacks, className, highli
   const { resultsHeight, resultsWidth } = useAppLayout();
   const locale = useTypedSelector(selectLocale);
   const { direction } = LOCALE_FEATURES[locale];
-  const results = useTypedSelector(selectResults);
-  const isLoading = useTypedSelector(selectIsLoading);
+  const results = useTypedSelector(selectProcessedResults);
+  const isLoading = useTypedSelector(selectSolveIsLoading);
   const [isLoadingDebounced] = useDebounce(isLoading, IS_LOADING_DEBOUNCE);
   const isOutdated = useTypedSelector(selectAreResultsOutdated);
   const error = useTypedSelector(selectSolveError);

package/src/components/Results/SolveButton.tsx

@@ -1,10 +1,10 @@
-import { FunctionComponent } from 'react';
+import { type FunctionComponent } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { Search } from 'icons';
 import {
   selectAreResultsOutdated,
-  selectIsLoading,
+  selectSolveIsLoading,
   selectRack,
   solveSlice,
   useTranslate,
@@ -20,7 +20,7 @@ interface Props {
 export const SolveButton: FunctionComponent<Props> = ({ className }) => {
   const dispatch = useDispatch();
   const translate = useTranslate();
-  const isLoading = useTypedSelector(selectIsLoading);
+  const isLoading = useTypedSelector(selectSolveIsLoading);
   const rack = useTypedSelector(selectRack);
   const isOutdated = useTypedSelector(selectAreResultsOutdated);
   const hasTiles = rack.some((tile) => tile !== null);

package/src/components/Results/types.ts

@@ -1,5 +1,5 @@
-import { Result } from '@scrabble-solver/types';
-import { FocusEvent, MouseEvent } from 'react';
+import { type Result } from '@scrabble-solver/types';
+import { type FocusEvent, type MouseEvent } from 'react';
 
 export interface ResultCallbacks {
   onBlur?: (result: Result, event: FocusEvent) => void;

package/src/components/ResultsInput/ResultsInput.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { ChangeEvent, FormEventHandler, FunctionComponent, useState } from 'react';
+import { type ChangeEvent, type FormEventHandler, type FunctionComponent, useState } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { isRegExp } from 'lib';

package/src/components/SeoMessage/SeoMessage.tsx

@@ -1,4 +1,4 @@
-import { CSSProperties, FunctionComponent } from 'react';
+import { type CSSProperties, type FunctionComponent } from 'react';
 
 const INVISIBLE_STYLE: CSSProperties = {
   color: 'transparent',

package/src/components/Solver/Solver.tsx

@@ -1,14 +1,14 @@
-import { Result } from '@scrabble-solver/types';
+import { type Result } from '@scrabble-solver/types';
 import classNames from 'classnames';
-import { FunctionComponent, memo, SyntheticEvent, useEffect, useMemo } from 'react';
+import { type FunctionComponent, memo, type SyntheticEvent, useEffect, useMemo } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { useAppLayout, useIsTouchDevice } from 'hooks';
 import {
   resultsSlice,
   selectAreResultsOutdated,
+  selectProcessedResults,
   selectResultCandidate,
-  selectResults,
   selectSolveError,
   solveSlice,
   useTranslate,
@@ -38,7 +38,7 @@ const SolverBase: FunctionComponent<Props> = ({ className, onShowResults }) => {
   const error = useTypedSelector(selectSolveError);
   const isOutdated = useTypedSelector(selectAreResultsOutdated);
   const resultCandidate = useTypedSelector(selectResultCandidate);
-  const results = useTypedSelector(selectResults);
+  const results = useTypedSelector(selectProcessedResults);
   const [bestResult] = results || [];
   const touchCallbacks = useMemo(
     () => ({

package/src/components/Solver/components/InsertButton/InsertButton.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { FunctionComponent } from 'react';
+import { type FunctionComponent } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { Check } from 'icons';

package/src/components/Solver/components/ResultCandidatePicker/ResultCandidatePicker.tsx

@@ -1,15 +1,15 @@
 import classNames from 'classnames';
-import { FunctionComponent, HTMLProps, MouseEventHandler } from 'react';
+import { type FunctionComponent, type HTMLProps, type MouseEventHandler } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { ChevronDown, ChevronLeft, ChevronRight } from 'icons';
 import {
   resultsSlice,
   selectAreResultsOutdated,
-  selectIsLoading,
+  selectSolveIsLoading,
   selectLocale,
+  selectProcessedResults,
   selectResultCandidate,
-  selectResults,
   useTranslate,
   useTypedSelector,
 } from 'state';
@@ -28,9 +28,9 @@ export const ResultCandidatePicker: FunctionComponent<Props> = ({ className, onR
   const dispatch = useDispatch();
   const translate = useTranslate();
   const locale = useTypedSelector(selectLocale);
-  const isLoading = useTypedSelector(selectIsLoading);
+  const isLoading = useTypedSelector(selectSolveIsLoading);
   const isOutdated = useTypedSelector(selectAreResultsOutdated);
-  const results = useTypedSelector(selectResults);
+  const results = useTypedSelector(selectProcessedResults);
   const resultCandidate = useTypedSelector(selectResultCandidate);
   const index = resultCandidate && results ? results.findIndex((result) => result.id === resultCandidate.id) : -1;
   const disabled = isOutdated || !resultCandidate;

package/src/components/Spinner/Spinner.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { FunctionComponent } from 'react';
+import { type FunctionComponent } from 'react';
 
 import { useTranslate } from 'state';
 

package/src/components/Tile/Tile.tsx

@@ -1,13 +1,13 @@
 import { useMergeRefs } from '@floating-ui/react';
 import { EMPTY_CELL } from '@scrabble-solver/constants';
 import {
-  ChangeEventHandler,
-  FocusEventHandler,
-  FunctionComponent,
-  KeyboardEventHandler,
-  MouseEventHandler,
-  Ref,
-  TouchEventHandler,
+  type ChangeEventHandler,
+  type FocusEventHandler,
+  type FunctionComponent,
+  type KeyboardEventHandler,
+  type MouseEventHandler,
+  type Ref,
+  type TouchEventHandler,
   useCallback,
   useMemo,
   useRef,

package/src/components/Tile/TilePure.tsx

@@ -1,14 +1,14 @@
 import classNames from 'classnames';
 import {
-  ChangeEventHandler,
-  CSSProperties,
-  FocusEventHandler,
-  FunctionComponent,
-  KeyboardEventHandler,
+  type ChangeEventHandler,
+  type CSSProperties,
+  type FocusEventHandler,
+  type FunctionComponent,
+  type KeyboardEventHandler,
   memo,
-  MouseEventHandler,
-  Ref,
-  TouchEventHandler,
+  type MouseEventHandler,
+  type Ref,
+  type TouchEventHandler,
 } from 'react';
 
 import { ExclamationSquareFill } from 'icons';

package/src/components/Tooltip/Tooltip.tsx

@@ -1,5 +1,5 @@
 import type { Placement } from '@floating-ui/react';
-import { FunctionComponent, ReactNode } from 'react';
+import { type FunctionComponent, type ReactNode } from 'react';
 
 import { TooltipContext } from './context';
 import { TooltipContent } from './TooltipContent';