@scrabble-solver/scrabble-solver 2.15.8 → 2.15.10

package/src/lib/getTileSizes.ts

@@ -6,10 +6,8 @@ interface TileSizes {
   tileSize: number;
 }
 
-const getTileSizes = (tileSize: number): TileSizes => ({
+export const getTileSizes = (tileSize: number): TileSizes => ({
   pointsFontSize: Math.max(Math.round(tileSize * 0.25), BOARD_TILE_FONT_SIZE_POINTS_MIN),
   tileFontSize: Math.max(Math.round(tileSize * 0.6), BOARD_TILE_FONT_SIZE_MIN),
   tileSize,
 });
-
-export default getTileSizes;

package/src/lib/getTotalRemainingTilesCount.ts

@@ -1,7 +1,5 @@
 import { RemainingTile } from 'types';
 
-const getTotalRemainingTilesCount = (remainingTiles: RemainingTile[]): number => {
+export const getTotalRemainingTilesCount = (remainingTiles: RemainingTile[]): number => {
   return remainingTiles.reduce((sum, { count }) => sum + count, 0);
 };
-
-export default getTotalRemainingTilesCount;

package/src/lib/groupResults.ts

@@ -2,10 +2,10 @@ import { Result } from '@scrabble-solver/types';
 
 import { CellFilterEntry, GroupedResults } from 'types';
 
-import createRegExp from './createRegExp';
-import resultMatchesCellFilter from './resultMatchesCellFilter';
+import { createRegExp } from './createRegExp';
+import { resultMatchesCellFilter } from './resultMatchesCellFilter';
 
-const groupResults = (
+export const groupResults = (
   results: Result[] | undefined,
   query: string,
   cellFilter: CellFilterEntry[],
@@ -33,5 +33,3 @@ const groupResults = (
 
   return { matching, other };
 };
-
-export default groupResults;

package/src/lib/guessLocale.ts

@@ -1,12 +1,12 @@
 import { Locale } from '@scrabble-solver/types';
 
-const guessLocale = (): Locale => {
+export const guessLocale = (): Locale => {
   if (!globalThis.navigator) {
     return Locale.EN_US;
   }
 
   const locales = Object.values(Locale);
-  const exactMatch = locales.find((locale) => globalThis.navigator.language === locale);
+  const exactMatch = locales.find((locale) => globalThis.navigator.language === String(locale));
 
   if (exactMatch) {
     return exactMatch;
@@ -18,5 +18,3 @@ const guessLocale = (): Locale => {
 
   return partialMatch || Locale.EN_US;
 };
-
-export default guessLocale;

package/src/lib/index.ts

@@ -1,39 +1,39 @@
-export { default as arrayEquals } from './arrayEquals';
-export { default as createArray } from './createArray';
-export { default as createComparator } from './createComparator';
-export { default as createGridOf } from './createGridOf';
-export { default as createKeyComparator } from './createKeyComparator';
-export { default as createKeyboardNavigation } from './createKeyboardNavigation';
-export { default as createNullMovingComparator } from './createNullMovingComparator';
-export { default as createRegExp } from './createRegExp';
-export { default as createStringComparator } from './createStringComparator';
-export { default as detectLocale } from './detectLocale';
-export { default as extractCharacters } from './extractCharacters';
-export { default as extractCharactersByCase } from './extractCharactersByCase';
-export { default as extractInputValue } from './extractInputValue';
-export { default as findCell } from './findCell';
-export { default as getCellSize } from './getCellSize';
-export { default as getCoordinate } from './getCoordinate';
-export { default as getCoordinates } from './getCoordinates';
-export { default as getRemainingTiles } from './getRemainingTiles';
-export { default as getRemainingTilesCount } from './getRemainingTilesCount';
-export { default as getRemainingTilesGroups } from './getRemainingTilesGroups';
-export { default as getTileSizes } from './getTileSizes';
-export { default as getTotalRemainingTilesCount } from './getTotalRemainingTilesCount';
-export { default as groupResults } from './groupResults';
-export { default as guessLocale } from './guessLocale';
-export { default as inverseDirection } from './inverseDirection';
-export { default as isCtrl } from './isCtrl';
-export { default as isMac } from './isMac';
-export { default as isRegExp } from './isRegExp';
-export { default as isStringArray } from './isStringArray';
-export { default as isUpperCase } from './isUpperCase';
-export { default as memoize } from './memoize';
-export { default as noop } from './noop';
-export { default as numberComparator } from './numberComparator';
-export { default as resultMatchesCellFilter } from './resultMatchesCellFilter';
-export { default as reverseComparator } from './reverseComparator';
-export { default as sortGroupedResults } from './sortGroupedResults';
-export { default as sortResults } from './sortResults';
-export { default as unorderedArraysEqual } from './unorderedArraysEqual';
-export { default as zipCharactersAndTiles } from './zipCharactersAndTiles';
+export { arrayEquals } from './arrayEquals';
+export { createArray } from './createArray';
+export { createComparator } from './createComparator';
+export { createGridOf } from './createGridOf';
+export { createKeyComparator } from './createKeyComparator';
+export { createKeyboardNavigation } from './createKeyboardNavigation';
+export { createNullMovingComparator } from './createNullMovingComparator';
+export { createRegExp } from './createRegExp';
+export { createStringComparator } from './createStringComparator';
+export { detectLocale } from './detectLocale';
+export { extractCharacters } from './extractCharacters';
+export { extractCharactersByCase } from './extractCharactersByCase';
+export { extractInputValue } from './extractInputValue';
+export { findCell } from './findCell';
+export { getCellSize } from './getCellSize';
+export { getCoordinate } from './getCoordinate';
+export { getCoordinates } from './getCoordinates';
+export { getRemainingTiles } from './getRemainingTiles';
+export { getRemainingTilesCount } from './getRemainingTilesCount';
+export { getRemainingTilesGroups } from './getRemainingTilesGroups';
+export { getTileSizes } from './getTileSizes';
+export { getTotalRemainingTilesCount } from './getTotalRemainingTilesCount';
+export { groupResults } from './groupResults';
+export { guessLocale } from './guessLocale';
+export { inverseDirection } from './inverseDirection';
+export { isCtrl } from './isCtrl';
+export { isMac } from './isMac';
+export { isRegExp } from './isRegExp';
+export { isStringArray } from './isStringArray';
+export { isUpperCase } from './isUpperCase';
+export { memoize } from './memoize';
+export { noop } from './noop';
+export { numberComparator } from './numberComparator';
+export { resultMatchesCellFilter } from './resultMatchesCellFilter';
+export { reverseComparator } from './reverseComparator';
+export { sortGroupedResults } from './sortGroupedResults';
+export { sortResults } from './sortResults';
+export { unorderedArraysEqual } from './unorderedArraysEqual';
+export { zipCharactersAndTiles } from './zipCharactersAndTiles';

package/src/lib/inverseDirection.ts

@@ -1,5 +1,3 @@
-const inverseDirection = (direction: 'left' | 'right'): 'left' | 'right' => {
+export const inverseDirection = (direction: 'left' | 'right'): 'left' | 'right' => {
   return direction === 'left' ? 'right' : 'left';
 };
-
-export default inverseDirection;

package/src/lib/isCtrl.ts

@@ -1,7 +1,5 @@
 import { KeyboardEvent } from 'react';
 
-const isCtrl = <T>(event: KeyboardEvent<T> | globalThis.KeyboardEvent): boolean => {
+export const isCtrl = <T>(event: KeyboardEvent<T> | globalThis.KeyboardEvent): boolean => {
   return event.ctrlKey || event.metaKey;
 };
-
-export default isCtrl;

package/src/lib/isMac.ts

@@ -1,9 +1,8 @@
-const isMac = (): boolean => {
+export const isMac = (): boolean => {
   if (!globalThis.navigator) {
     return false;
   }
 
-  return globalThis.navigator.platform.toLowerCase().includes('mac');
+  // eslint-disable-next-line @typescript-eslint/no-deprecated
+  return globalThis.navigator.platform.startsWith('Mac') || globalThis.navigator.platform === 'iPhone';
 };
-
-export default isMac;

package/src/lib/isRegExp.ts

@@ -1,4 +1,4 @@
-const isRegExp = (value: string): boolean => {
+export const isRegExp = (value: string): boolean => {
   try {
     // eslint-disable-next-line no-new
     new RegExp(value);
@@ -7,5 +7,3 @@ const isRegExp = (value: string): boolean => {
     return false;
   }
 };
-
-export default isRegExp;

package/src/lib/isStringArray.ts

@@ -1,5 +1,3 @@
-const isStringArray = (value: unknown): value is string[] => {
+export const isStringArray = (value: unknown): value is string[] => {
   return Array.isArray(value) && value.every((item) => typeof item === 'string');
 };
-
-export default isStringArray;

package/src/lib/isUpperCase.ts

@@ -1,7 +1,5 @@
 import { Locale } from '@scrabble-solver/types';
 
-const isUpperCase = (locale: Locale, value: string): boolean => {
+export const isUpperCase = (locale: Locale, value: string): boolean => {
   return value === value.toLocaleUpperCase(locale);
 };
-
-export default isUpperCase;

package/src/lib/memoize.ts

@@ -1,26 +1,26 @@
-interface AnyFunction {
-  (...parameters: any[]): any | Promise<any>; // eslint-disable-line @typescript-eslint/no-explicit-any
+interface AnyFunction<Args extends unknown[], Result> {
+  (...parameters: Args): Result;
 }
 
-interface AnyCachedFunction<T extends AnyFunction> extends AnyFunction {
-  hasCache: (...parameters: Parameters<T>) => boolean;
+interface Entry<Args extends unknown[], Result> {
+  parameters: Args;
+  result: Result;
 }
 
-interface Entry<T extends AnyFunction> {
-  parameters: Parameters<T>;
-  result: ReturnType<T>;
-}
-
-const memoize = <T extends AnyFunction>(fn: T): AnyCachedFunction<T> => {
-  const cache: Entry<T>[] = [];
+export const memoize = <Args extends unknown[], Result>(
+  fn: AnyFunction<Args, Result>,
+): AnyFunction<Args, Result> & {
+  hasCache: (...parameters: Args) => boolean;
+} => {
+  const cache: Entry<Args, Result>[] = [];
 
-  const hasCache = (...parameters: Parameters<T>): boolean => Boolean(readCache(parameters));
+  const hasCache = (...parameters: Args): boolean => Boolean(readCache(parameters));
 
-  const readCache = (parameters: Parameters<T>): ReturnType<T> | undefined => {
+  const readCache = (parameters: Args): Result | undefined => {
     return cache.find((entry) => parametersEqual(entry.parameters, parameters))?.result;
   };
 
-  const removeCache = (parameters: Parameters<T>): void => {
+  const removeCache = (parameters: Args): void => {
     const index = cache.findIndex((entry) => parametersEqual(entry.parameters, parameters));
 
     if (index >= 0) {
@@ -28,11 +28,11 @@ const memoize = <T extends AnyFunction>(fn: T): AnyCachedFunction<T> => {
     }
   };
 
-  const writeCache = (parameters: Parameters<T>, result: ReturnType<T>): void => {
+  const writeCache = (parameters: Args, result: Result): void => {
     cache.push({ parameters, result });
   };
 
-  const memoized = (...parameters: Parameters<T>): ReturnType<T> => {
+  const memoized = (...parameters: Args): Result => {
     const cached = readCache(parameters);
 
     if (cached) {
@@ -55,12 +55,10 @@ const memoize = <T extends AnyFunction>(fn: T): AnyCachedFunction<T> => {
   return Object.assign(memoized, { hasCache });
 };
 
-const parametersEqual = <T extends AnyFunction>(a: Parameters<T>, b: Parameters<T>): boolean => {
+const parametersEqual = <Args extends unknown[]>(a: Args, b: Args): boolean => {
   if (a.length !== b.length) {
     return false;
   }
 
-  return a.every((parameter: Parameters<T>[typeof index], index: number) => parameter === b[index]);
+  return a.every((parameter: Args[typeof index], index: number) => parameter === b[index]);
 };
-
-export default memoize;

package/src/lib/noop.ts

@@ -1,3 +1 @@
-const noop = (): void => undefined;
-
-export default noop;
+export const noop = (): void => undefined;

package/src/lib/numberComparator.ts

@@ -1,5 +1,3 @@
 import { Comparator } from 'types';
 
-const numberComparator: Comparator<number> = (a, b) => a - b;
-
-export default numberComparator;
+export const numberComparator: Comparator<number> = (a, b) => a - b;

package/src/lib/resultMatchesCellFilter.ts

@@ -2,7 +2,7 @@ import { Result } from '@scrabble-solver/types';
 
 import { CellFilterEntry } from 'types';
 
-const resultMatchesCellFilter = (result: Result, cellFilter: CellFilterEntry[]) => {
+export const resultMatchesCellFilter = (result: Result, cellFilter: CellFilterEntry[]) => {
   const excludeFilters = cellFilter.filter((filter) => filter.type === 'exclude');
   const matchesExcludeFilters = excludeFilters.every(({ x, y }) => {
     return result.cells.every((cell) => cell.x !== x || cell.y !== y);
@@ -19,5 +19,3 @@ const resultMatchesCellFilter = (result: Result, cellFilter: CellFilterEntry[])
 
   return matchesExcludeFilters && matchesIncludeFilters;
 };
-
-export default resultMatchesCellFilter;

package/src/lib/reverseComparator.ts

@@ -1,7 +1,5 @@
 import { Comparator } from 'types';
 
-const reverseComparator = <T>(comparator: Comparator<T>): Comparator<T> => {
+export const reverseComparator = <T>(comparator: Comparator<T>): Comparator<T> => {
   return (a: T, b: T): number => -comparator(a, b);
 };
-
-export default reverseComparator;

package/src/lib/sortGroupedResults.ts

@@ -2,9 +2,9 @@ import { Locale, ShowCoordinates } from '@scrabble-solver/types';
 
 import { GroupedResults, Sort } from 'types';
 
-import sortResults from './sortResults';
+import { sortResults } from './sortResults';
 
-const sortGroupedResults = (
+export const sortGroupedResults = (
   results: GroupedResults | undefined,
   sort: Sort,
   locale: Locale,
@@ -19,5 +19,3 @@ const sortGroupedResults = (
     other: sortResults(results.other, sort, locale, showCoordinates) ?? [],
   };
 };
-
-export default sortGroupedResults;

package/src/lib/sortResults.ts

@@ -2,10 +2,10 @@ import { Result, ShowCoordinates } from '@scrabble-solver/types';
 
 import { Comparator, ResultColumnId, Sort, SortDirection } from 'types';
 
-import createKeyComparator from './createKeyComparator';
-import createStringComparator from './createStringComparator';
-import getCoordinates from './getCoordinates';
-import reverseComparator from './reverseComparator';
+import { createKeyComparator } from './createKeyComparator';
+import { createStringComparator } from './createStringComparator';
+import { getCoordinates } from './getCoordinates';
+import { reverseComparator } from './reverseComparator';
 
 const comparators: Record<ResultColumnId, (locale: string, showCoordinates: ShowCoordinates) => Comparator<Result>> = {
   [ResultColumnId.BlanksCount]: (locale: string) => createKeyComparator('blanksCount', locale),
@@ -23,7 +23,7 @@ const comparators: Record<ResultColumnId, (locale: string, showCoordinates: Show
   [ResultColumnId.WordsCount]: (locale: string) => createKeyComparator('wordsCount', locale),
 };
 
-const sortResults = (
+export const sortResults = (
   results: Result[] | undefined,
   sort: Sort,
   locale: string,
@@ -39,5 +39,3 @@ const sortResults = (
   const sortedResults = [...results].sort(finalComparator);
   return sortedResults;
 };
-
-export default sortResults;

package/src/lib/unorderedArraysEqual.ts

@@ -1,6 +1,6 @@
-import createComparator from './createComparator';
+import { createComparator } from './createComparator';
 
-const unorderedArraysEqual = <T>(a: T[], b: T[], locale: string): boolean => {
+export const unorderedArraysEqual = <T>(a: T[], b: T[], locale: string): boolean => {
   if (a.length !== b.length) {
     return false;
   }
@@ -10,5 +10,3 @@ const unorderedArraysEqual = <T>(a: T[], b: T[], locale: string): boolean => {
   const bSorted = [...b].sort(comparator);
   return aSorted.every((character, index) => character === bSorted[index]);
 };
-
-export default unorderedArraysEqual;

package/src/lib/zipCharactersAndTiles.ts

@@ -8,7 +8,7 @@ interface CharacterTilePair {
   tile: Tile | null;
 }
 
-const zipCharactersAndTiles = (characters: Rack, tiles: Tile[]): CharacterTilePair[] => {
+export const zipCharactersAndTiles = (characters: Rack, tiles: Tile[]): CharacterTilePair[] => {
   let remainingTiles = [...tiles];
 
   return characters.map((character) => {
@@ -26,5 +26,3 @@ const zipCharactersAndTiles = (characters: Rack, tiles: Tile[]): CharacterTilePa
     return { character, tile: null };
   });
 };
-
-export default zipCharactersAndTiles;

package/src/modals/DictionaryModal/DictionaryModal.tsx

@@ -11,7 +11,7 @@ interface Props {
   onClose: () => void;
 }
 
-const DictionaryModal: FunctionComponent<Props> = ({ className, isOpen, onClose }) => {
+const DictionaryModalBase: FunctionComponent<Props> = ({ className, isOpen, onClose }) => {
   const translate = useTranslate();
 
   return (
@@ -24,4 +24,4 @@ const DictionaryModal: FunctionComponent<Props> = ({ className, isOpen, onClose
   );
 };
 
-export default memo(DictionaryModal);
+export const DictionaryModal = memo(DictionaryModalBase);

package/src/modals/DictionaryModal/index.ts

@@ -1 +1 @@
-export { default } from './DictionaryModal';
+export { DictionaryModal } from './DictionaryModal';

package/src/modals/KeyMapModal/KeyMapModal.tsx

@@ -11,7 +11,7 @@ interface Props {
   onClose: () => void;
 }
 
-const KeyMapModal: FunctionComponent<Props> = ({ className, isOpen, onClose }) => {
+const KeyMapModalBase: FunctionComponent<Props> = ({ className, isOpen, onClose }) => {
   const translate = useTranslate();
   const config = useTypedSelector(selectConfig);
 
@@ -60,4 +60,4 @@ const KeyMapModal: FunctionComponent<Props> = ({ className, isOpen, onClose }) =
   );
 };
 
-export default memo(KeyMapModal);
+export const KeyMapModal = memo(KeyMapModalBase);

package/src/modals/KeyMapModal/components/Mapping/Mapping.tsx

@@ -9,7 +9,7 @@ interface Props {
   mapping: (ReactNode | ReactNode[])[];
 }
 
-const Mapping: FunctionComponent<Props> = ({ className, description, mapping }) => (
+export const Mapping: FunctionComponent<Props> = ({ className, description, mapping }) => (
   <div className={classNames(styles.mapping, className)}>
     <h3 className={styles.description}>{description}</h3>
 
@@ -34,5 +34,3 @@ const Mapping: FunctionComponent<Props> = ({ className, description, mapping })
     </div>
   </div>
 );
-
-export default Mapping;

package/src/modals/KeyMapModal/components/Mapping/index.ts

@@ -1 +1 @@
-export { default } from './Mapping';
+export { Mapping } from './Mapping';

package/src/modals/KeyMapModal/components/index.ts

@@ -1 +1 @@
-export { default as Mapping } from './Mapping';
+export { Mapping } from './Mapping';

package/src/modals/KeyMapModal/index.ts

@@ -1 +1 @@
-export { default } from './KeyMapModal';
+export { KeyMapModal } from './KeyMapModal';

package/src/modals/MenuModal/MenuModal.tsx

@@ -18,7 +18,7 @@ interface Props {
   onShowWords: () => void;
 }
 
-const MenuModal: FunctionComponent<Props> = ({
+const MenuModalBase: FunctionComponent<Props> = ({
   className,
   isOpen,
   onClose,
@@ -79,4 +79,4 @@ const MenuModal: FunctionComponent<Props> = ({
   );
 };
 
-export default memo(MenuModal);
+export const MenuModal = memo(MenuModalBase);

package/src/modals/MenuModal/index.ts

@@ -1 +1 @@
-export { default } from './MenuModal';
+export { MenuModal } from './MenuModal';

package/src/modals/RemainingTilesModal/RemainingTilesModal.tsx

@@ -15,7 +15,7 @@ interface Props {
   onClose: () => void;
 }
 
-const RemainingTilesModal: FunctionComponent<Props> = ({ className, isOpen, onClose }) => {
+const RemainingTilesModalBase: FunctionComponent<Props> = ({ className, isOpen, onClose }) => {
   const translate = useTranslate();
   const locale = useTypedSelector(selectLocale);
   const groups = useTypedSelector(selectRemainingTilesGroups);
@@ -57,4 +57,4 @@ const RemainingTilesModal: FunctionComponent<Props> = ({ className, isOpen, onCl
   );
 };
 
-export default memo(RemainingTilesModal);
+export const RemainingTilesModal = memo(RemainingTilesModalBase);

package/src/modals/RemainingTilesModal/components/Character/Character.tsx

@@ -14,7 +14,7 @@ interface Props {
   tile: RemainingTile;
 }
 
-const Character: FunctionComponent<Props> = ({ tile }) => {
+export const Character: FunctionComponent<Props> = ({ tile }) => {
   const locale = useTypedSelector(selectLocale);
   const { direction } = LOCALE_FEATURES[locale];
   const { character, count, usedCount } = tile;
@@ -57,5 +57,3 @@ const Character: FunctionComponent<Props> = ({ tile }) => {
     </div>
   );
 };
-
-export default Character;

package/src/modals/RemainingTilesModal/components/Character/index.ts

@@ -1 +1 @@
-export { default } from './Character';
+export { Character } from './Character';

package/src/modals/RemainingTilesModal/components/index.ts

@@ -1 +1 @@
-export { default as Character } from './Character';
+export { Character } from './Character';

package/src/modals/RemainingTilesModal/index.ts

@@ -1 +1 @@
-export { default } from './RemainingTilesModal';
+export { RemainingTilesModal } from './RemainingTilesModal';

package/src/modals/ResultsModal/ResultsModal.tsx

@@ -15,7 +15,7 @@ interface Props {
   onClose: () => void;
 }
 
-const ResultsModal: FunctionComponent<Props> = ({ className, isOpen, onClose }) => {
+const ResultsModalBase: FunctionComponent<Props> = ({ className, isOpen, onClose }) => {
   const dispatch = useDispatch();
   const translate = useTranslate();
   const { showResultsInModal } = useAppLayout();
@@ -96,4 +96,4 @@ const ResultsModal: FunctionComponent<Props> = ({ className, isOpen, onClose })
   );
 };
 
-export default memo(ResultsModal);
+export const ResultsModal = memo(ResultsModalBase);

package/src/modals/ResultsModal/index.ts

@@ -1 +1 @@
-export { default } from './ResultsModal';
+export { ResultsModal } from './ResultsModal';

package/src/modals/SettingsModal/SettingsModal.tsx

@@ -18,7 +18,7 @@ interface Props {
   onClose: () => void;
 }
 
-const SettingsModal: FunctionComponent<Props> = ({ className, isOpen, onClose }) => {
+const SettingsModalBase: FunctionComponent<Props> = ({ className, isOpen, onClose }) => {
   const translate = useTranslate();
   const isTouchDevice = useIsTouchDevice();
 
@@ -49,4 +49,4 @@ const SettingsModal: FunctionComponent<Props> = ({ className, isOpen, onClose })
   );
 };
 
-export default memo(SettingsModal);
+export const SettingsModal = memo(SettingsModalBase);

package/src/modals/SettingsModal/components/AutoGroupTilesSetting/AutoGroupTilesSetting.tsx

@@ -13,7 +13,7 @@ interface Props {
   disabled?: boolean;
 }
 
-const AutoGroupTilesSetting: FunctionComponent<Props> = ({ className, disabled }) => {
+export const AutoGroupTilesSetting: FunctionComponent<Props> = ({ className, disabled }) => {
   const dispatch = useDispatch();
   const translate = useTranslate();
   const value = useTypedSelector(selectAutoGroupTiles);
@@ -56,5 +56,3 @@ const AutoGroupTilesSetting: FunctionComponent<Props> = ({ className, disabled }
     </div>
   );
 };
-
-export default AutoGroupTilesSetting;

package/src/modals/SettingsModal/components/AutoGroupTilesSetting/index.ts

@@ -1 +1 @@
-export { default } from './AutoGroupTilesSetting';
+export { AutoGroupTilesSetting } from './AutoGroupTilesSetting';

package/src/modals/SettingsModal/components/ConfigSetting/ConfigSetting.tsx

@@ -1,27 +1,23 @@
-import { games, hasConfig } from '@scrabble-solver/configs';
 import { isGame } from '@scrabble-solver/types';
-import { ChangeEvent, FunctionComponent } from 'react';
+import { ChangeEvent, FunctionComponent, useMemo } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { Radio } from 'components';
 import { selectGame, selectLocale, settingsSlice, useTypedSelector } from 'state';
 
 import styles from './ConfigSetting.module.scss';
+import { getOptions } from './lib';
 
 interface Props {
   className?: string;
   disabled?: boolean;
 }
 
-const ConfigSetting: FunctionComponent<Props> = ({ className, disabled }) => {
+export const ConfigSetting: FunctionComponent<Props> = ({ className, disabled }) => {
   const dispatch = useDispatch();
   const game = useTypedSelector(selectGame);
   const locale = useTypedSelector(selectLocale);
-  const options = Object.values(games).map((gameConfig) => ({
-    disabled: !hasConfig(gameConfig.game, locale),
-    label: gameConfig.name,
-    value: gameConfig.game,
-  }));
+  const options = useMemo(() => getOptions(locale), [locale]);
 
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     if (isGame(event.target.value)) {
@@ -47,5 +43,3 @@ const ConfigSetting: FunctionComponent<Props> = ({ className, disabled }) => {
     </div>
   );
 };
-
-export default ConfigSetting;

package/src/modals/SettingsModal/components/ConfigSetting/index.ts

@@ -1 +1 @@
-export { default } from './ConfigSetting';
+export { ConfigSetting } from './ConfigSetting';