@scrabble-solver/scrabble-solver 2.11.6 → 2.11.8

package/src/components/Board/hooks/useGrid.ts

@@ -17,7 +17,7 @@ import { useDispatch } from 'react-redux';
 
 import { useLatest } from 'hooks';
 import { LOCALE_FEATURES } from 'i18n';
-import { createGridOf, createKeyboardNavigation, extractCharacters, extractInputValue } from 'lib';
+import { createGridOf, createKeyboardNavigation, extractCharacters, extractInputValue, isCtrl } from 'lib';
 import { boardSlice, selectConfig, selectLocale, useTypedSelector } from 'state';
 import { Direction, Point } from 'types';
 
@@ -290,6 +290,22 @@ const useGrid = (rows: Cell[][]): [State, Actions] => {
 
         const { x, y } = position;
         const character = event.key.toLowerCase();
+        const isTogglingBlank = isCtrl(event) && character === 'b';
+        const twoCharacterTile = config.getTwoCharacterTileByPrefix(character);
+
+        if (isTogglingBlank) {
+          event.preventDefault();
+          dispatch(boardSlice.actions.toggleCellIsBlank(position));
+          return;
+        }
+
+        if (isCtrl(event) && twoCharacterTile) {
+          event.preventDefault();
+          dispatch(boardSlice.actions.changeCellValue({ x, y, value: twoCharacterTile }));
+          moveFocus(1);
+          return;
+        }
+
         const cell = rows[y][x];
         const twoCharacterCandidate = cell.tile.character + character;
 

package/src/components/Board/lib/getBonusColor.ts

@@ -0,0 +1,18 @@
+import { BONUS_WORD } from '@scrabble-solver/constants';
+import { Bonus } from '@scrabble-solver/types';
+
+import { COLOR_BONUS_CHARACTER, COLOR_BONUS_CHARACTER_MULTIPLIER, COLOR_BONUS_WORD } from 'parameters';
+
+const getBonusColor = (bonus: Bonus): string => {
+  if (bonus.type === BONUS_WORD) {
+    return COLOR_BONUS_WORD[bonus.multiplier];
+  }
+
+  if (bonus.score) {
+    return COLOR_BONUS_CHARACTER[bonus.score];
+  }
+
+  return COLOR_BONUS_CHARACTER_MULTIPLIER[bonus.multiplier];
+};
+
+export default getBonusColor;

package/src/components/Board/lib/index.ts

@@ -1 +1,2 @@
+export { default as getBonusColor } from './getBonusColor';
 export { default as getPositionInGrid } from './getPositionInGrid';

package/src/components/DictionaryInput/DictionaryInput.tsx

@@ -1,9 +1,9 @@
-import { COMMA_ARABIC, COMMA_LATIN } from '@scrabble-solver/constants';
 import classNames from 'classnames';
 import { ChangeEvent, FormEvent, FunctionComponent } from 'react';
 import { useDispatch } from 'react-redux';
 
-import { dictionarySlice, selectDictionary, useTranslate, useTypedSelector } from 'state';
+import { LOCALE_FEATURES } from 'i18n';
+import { dictionarySlice, selectDictionary, selectLocale, useTranslate, useTypedSelector } from 'state';
 
 import styles from './DictionaryInput.module.scss';
 
@@ -14,7 +14,9 @@ interface Props {
 const DictionaryInput: FunctionComponent<Props> = ({ className }) => {
   const dispatch = useDispatch();
   const translate = useTranslate();
+  const locale = useTypedSelector(selectLocale);
   const { input } = useTypedSelector(selectDictionary);
+  const { comma } = LOCALE_FEATURES[locale];
 
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     dispatch(dictionarySlice.actions.changeInput(event.target.value));
@@ -29,7 +31,7 @@ const DictionaryInput: FunctionComponent<Props> = ({ className }) => {
     <form className={classNames(styles.dictionaryInput, className)} onSubmit={handleSubmit}>
       <input
         className={styles.input}
-        pattern={`.*[^\\s${COMMA_ARABIC}${COMMA_LATIN}].*`}
+        pattern={`.*[^\\s${comma}].*`}
         placeholder={translate('dictionary.input.placeholder')}
         required
         title={translate('dictionary.input.title')}

package/src/components/Key/Key.module.scss

@@ -1,19 +1,15 @@
-$key-size: 36px;
-$icon-size: 15px;
-
 .key {
   position: relative;
-  top: calc(0px - 2 * var(--border--width));
   display: inline-block;
-  min-width: $key-size;
-  height: $key-size;
+  min-width: var(--key--height);
+  height: var(--key--height);
   padding: var(--spacing--s) var(--spacing--m);
   background-color: var(--color--white);
   border: var(--border);
   border-radius: var(--border--radius);
   box-shadow: var(--box-shadow);
   font-family: var(--font--family--monospace);
-  line-height: calc(#{$key-size} - 2 * (var(--spacing--s) + var(--border--width)));
+  line-height: calc(var(--key--height) - 2 * (var(--spacing--s) + var(--border--width)));
   vertical-align: middle;
   text-align: center;
   white-space: nowrap;
@@ -24,9 +20,9 @@ $icon-size: 15px;
 
   :global(svg) {
     position: absolute;
-    top: calc(#{($key-size - $icon-size) / 2} - var(--border--width));
-    left: calc(#{($key-size - $icon-size) / 2} - var(--border--width));
-    width: $icon-size;
-    height: $icon-size;
+    top: calc((var(--key--height) - var(--key--icon--size)) / 2 - var(--border--width));
+    left: calc((var(--key--height) - var(--key--icon--size)) / 2 - var(--border--width));
+    width: var(--key--icon--size);
+    height: var(--key--icon--size);
   }
 }

package/src/components/Rack/Rack.tsx

@@ -9,6 +9,7 @@ import {
   extractCharacters,
   extractInputValue,
   getTileSizes,
+  isCtrl,
   zipCharactersAndTiles,
 } from 'lib';
 import { rackSlice, selectConfig, selectLocale, selectRack, selectResultCandidateTiles, useTypedSelector } from 'state';
@@ -100,7 +101,9 @@ const Rack: FunctionComponent<Props> = ({ className, tileSize }) => {
         changeActiveIndex(1);
       },
       onKeyDown: (event) => {
-        if (event.currentTarget.value === event.key) {
+        if (isCtrl(event) && config.isTwoCharacterTilePrefix(event.key)) {
+          changeActiveIndex(1);
+        } else if (event.currentTarget.value === event.key) {
           // change event did not fire because the same character was typed over the current one
           // but we still want to move the caret
           event.preventDefault();

package/src/components/Rack/RackTile.tsx

@@ -13,7 +13,7 @@ import {
 } from 'react';
 import { useDispatch } from 'react-redux';
 
-import { createKeyboardNavigation, extractCharacters, extractInputValue } from 'lib';
+import { createKeyboardNavigation, extractCharacters, extractInputValue, isCtrl } from 'lib';
 import {
   rackSlice,
   selectCharacterIsValid,
@@ -80,7 +80,17 @@ const RackTile: FunctionComponent<Props> = ({
         event.preventDefault();
         dispatch(rackSlice.actions.changeCharacter({ character: null, index }));
       },
-      onKeyDown,
+      onKeyDown: (event) => {
+        if (isCtrl(event) && config.isTwoCharacterTilePrefix(event.key)) {
+          event.preventDefault();
+          event.stopPropagation();
+          const twoTilesCharacter = config.getTwoCharacterTileByPrefix(event.key);
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+          dispatch(rackSlice.actions.changeCharacter({ character: twoTilesCharacter!, index }));
+        }
+
+        onKeyDown(event);
+      },
     });
   }, [index, onKeyDown]);
 

package/src/components/Results/Cell.tsx

@@ -22,9 +22,9 @@ const Cell: FunctionComponent<Props> = ({ className, translationKey, tooltip, va
   const triggerProps = useTooltip(`${translate(translationKey)}: ${tooltip || formattedValue}`);
 
   return (
-    <span className={classNames(styles.cell, className)} {...triggerProps}>
+    <div className={classNames(styles.cell, className)} {...triggerProps}>
       {formattedValue}
-    </span>
+    </div>
   );
 };
 

package/src/components/Results/Result.tsx

@@ -30,10 +30,10 @@ const Result = ({ data, index, style }: Props): ReactElement => {
   const ref = useRef<HTMLButtonElement>(null);
   const columns = useColumns();
   const locale = useTypedSelector(selectLocale);
-  const { consonants, vowels } = LOCALE_FEATURES[locale];
+  const { consonants, direction, separator, vowels } = LOCALE_FEATURES[locale];
   const result = results[index];
   const isMatching = useTypedSelector((state) => selectIsResultMatching(state, index));
-  const otherWords = result.words.slice(1).join(' / ').toLocaleUpperCase();
+  const words = direction === 'rtl' ? [...result.words].reverse() : result.words;
   const enabledColumns = Object.fromEntries(columns.map((column) => [column.id, true]));
 
   const handleClick: MouseEventHandler = (event) => onClick(result, event);
@@ -60,11 +60,7 @@ const Result = ({ data, index, style }: Props): ReactElement => {
     >
       <span className={styles.resultContent}>
         {enabledColumns[ResultColumn.Word] && (
-          <Cell
-            className={styles.word}
-            translationKey="common.word"
-            value={`${result.word.toLocaleUpperCase()}${otherWords.length > 0 ? ` (${otherWords})` : ''}`}
-          />
+          <Cell className={styles.word} translationKey="common.word" value={result.word} />
         )}
 
         {enabledColumns[ResultColumn.TilesCount] && (
@@ -87,7 +83,7 @@ const Result = ({ data, index, style }: Props): ReactElement => {
           <Cell
             className={styles.stat}
             translationKey="common.words"
-            tooltip={`${result.wordsCount} (${result.words.join(' / ').toLocaleUpperCase()})`}
+            tooltip={`${result.wordsCount.toLocaleString(locale)} (${words.join(separator)})`}
             value={result.wordsCount}
           />
         )}

package/src/components/Results/Results.module.scss

@@ -60,7 +60,6 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
   cursor: pointer;
   text-transform: uppercase;
   transition: var(--transition);
-  padding: var(--spacing--s) 0;
 
   &:focus,
   &:hover {
@@ -135,6 +134,7 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
   display: flex;
   align-items: center;
   justify-content: space-between;
+  height: 100%;
 
   .word {
     @include ellipsis;
@@ -145,8 +145,10 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
   display: flex;
   align-items: center;
   justify-content: center;
+  height: 100%;
   padding: 0 var(--spacing--s);
   gap: var(--spacing--s);
+  line-height: var(--results--item--height);
 
   .result &:first-child,
   .headerButton:first-child & {
@@ -180,12 +182,12 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
 }
 
 .word {
-  flex: 1 0 180px;
+  flex: 1 0;
   text-transform: uppercase;
 }
 
 .stat {
-  $width: 50px;
+  $width: 55px;
 
   flex: 0 0 $width;
   max-width: $width;

package/src/components/Solver/Solver.tsx

@@ -34,7 +34,7 @@ const Solver: FunctionComponent<Props> = ({ className, onShowResults }) => {
   const dispatch = useDispatch();
   const translate = useTranslate();
   const isTouchDevice = useIsTouchDevice();
-  const { cellSize, maxControlsWidth, showCompactControls, showFloatingSolveButton, tileSize } = useAppLayout();
+  const { maxControlsWidth, showCompactControls, showFloatingSolveButton, tileSize } = useAppLayout();
   const error = useTypedSelector(selectSolveError);
   const isOutdated = useTypedSelector(selectAreResultsOutdated);
   const resultCandidate = useTypedSelector(selectResultCandidate);
@@ -93,7 +93,7 @@ const Solver: FunctionComponent<Props> = ({ className, onShowResults }) => {
       <div className={styles.container}>
         <div className={styles.content}>
           <form className={styles.boardContainer} onSubmit={handleSubmit}>
-            <Board cellSize={cellSize} className={styles.board} />
+            <Board className={styles.board} />
             <input className={styles.submitInput} tabIndex={-1} type="submit" />
           </form>
 

package/src/components/Tile/Tile.module.scss

@@ -17,6 +17,10 @@
   transition-property: background-color, color, box-shadow;
   user-select: none;
 
+  @include media('<xs') {
+    --border--radius: 3px;
+  }
+
   &.points1 {
     --background-color: var(--color--yellow);
   }

package/src/components/Tooltip/Tooltip.module.scss

@@ -1,10 +1,12 @@
 .tooltip {
+  max-width: var(--tooltip--max-width);
   padding: var(--spacing--s) var(--spacing--m);
   box-shadow: var(--box-shadow);
   border-radius: var(--border--radius);
   background-color: var(--color--tooltip--background);
   color: var(--color--tooltip--foreground);
   z-index: var(--z-index--tooltip);
+  text-align: center;
 }
 
 .arrow {

package/src/hooks/useAppLayout.ts

@@ -60,6 +60,7 @@ const useAppLayout = () => {
   return {
     actionsWidth: 2 * BUTTON_HEIGHT - BORDER_WIDTH,
     animateTile: !isLessThanXs,
+    boardSize,
     cellSize,
     dictionaryHeight,
     isModalFullWidth: isLessThanS,

package/src/i18n/constants.ts

@@ -1,3 +1,4 @@
+import { COMMA_ARABIC, COMMA_LATIN } from '@scrabble-solver/constants';
 import { Locale } from '@scrabble-solver/types';
 import { FunctionComponent, SVGAttributes } from 'react';
 
@@ -6,45 +7,61 @@ import { FlagDe, FlagEs, FlagFa, FlagFr, FlagGb, FlagPl, FlagUs } from 'icons';
 import styles from './i18n.module.scss';
 
 interface LocaleFeatures {
-  direction: 'ltr' | 'rtl';
+  comma: string;
   consonants: boolean;
+  direction: 'ltr' | 'rtl';
+  separator: string;
   vowels: boolean;
 }
 
 export const LOCALE_FEATURES: Record<Locale, LocaleFeatures> = {
   [Locale.DE_DE]: {
-    direction: 'ltr',
+    comma: COMMA_LATIN,
     consonants: true,
+    direction: 'ltr',
+    separator: `${COMMA_LATIN} `,
     vowels: true,
   },
   [Locale.EN_GB]: {
-    direction: 'ltr',
+    comma: COMMA_LATIN,
     consonants: true,
+    direction: 'ltr',
+    separator: `${COMMA_LATIN} `,
     vowels: true,
   },
   [Locale.EN_US]: {
-    direction: 'ltr',
+    comma: COMMA_LATIN,
     consonants: true,
+    direction: 'ltr',
+    separator: `${COMMA_LATIN} `,
     vowels: true,
   },
   [Locale.ES_ES]: {
-    direction: 'ltr',
+    comma: COMMA_LATIN,
     consonants: true,
+    direction: 'ltr',
+    separator: `${COMMA_LATIN} `,
     vowels: true,
   },
   [Locale.FA_IR]: {
-    direction: 'rtl',
+    comma: COMMA_ARABIC,
     consonants: false,
+    direction: 'rtl',
+    separator: `${COMMA_ARABIC} `,
     vowels: false,
   },
   [Locale.FR_FR]: {
-    direction: 'ltr',
+    comma: COMMA_LATIN,
     consonants: true,
+    direction: 'ltr',
+    separator: `${COMMA_LATIN} `,
     vowels: true,
   },
   [Locale.PL_PL]: {
-    direction: 'ltr',
+    comma: COMMA_LATIN,
     consonants: true,
+    direction: 'ltr',
+    separator: `${COMMA_LATIN} `,
     vowels: true,
   },
 };

package/src/i18n/de.json

@@ -1,9 +1,9 @@
 {
-  "cell.filter-cell": "Zielort - klicken zum Wechseln",
+  "cell.filter-cell": "Zielort",
   "cell.set-blank": "Als Blanko markieren",
   "cell.set-not-blank": "Nicht als Blanko markieren",
   "cell.tile.location": "Brett: Stein ({{x}}, {{y}})",
-  "cell.toggle-direction": "Schreibrichtung - klicken zum Wechseln",
+  "cell.toggle-direction": "Schreibrichtung",
   "common.blanks": "Blankos",
   "common.clear": "Löschen",
   "common.close": "Schließen",

package/src/i18n/en.json

@@ -1,9 +1,9 @@
 {
-  "cell.filter-cell": "Target destination - click to toggle",
+  "cell.filter-cell": "Target destination",
   "cell.set-blank": "Mark it a blank",
   "cell.set-not-blank": "Mark it not a blank",
   "cell.tile.location": "Board: tile ({{x}}, {{y}})",
-  "cell.toggle-direction": "Typing direction - click to toggle",
+  "cell.toggle-direction": "Typing direction",
   "common.blanks": "Blanks",
   "common.clear": "Clear",
   "common.close": "Close",

package/src/i18n/es.json

@@ -1,9 +1,9 @@
 {
-  "cell.filter-cell": "Destino objetivo: haga clic para alternar",
+  "cell.filter-cell": "Destino objetivo",
   "cell.set-blank": "Marcar como en blanco",
   "cell.set-not-blank": "Marcar como no en blanco",
   "cell.tile.location": "Tablero: espacio ({{x}}, {{y}})",
-  "cell.toggle-direction": "Dirección de escritura: haga clic para alternar",
+  "cell.toggle-direction": "Dirección de escritura",
   "common.blanks": "Blancos",
   "common.clear": "Borrar",
   "common.close": "Cerrar",

package/src/i18n/fa.json

@@ -1,9 +1,9 @@
 {
-  "cell.filter-cell": "مقصد - کلیک برای تغییر",
+  "cell.filter-cell": "مقصد",
   "cell.set-blank": "علامت گذاری به عنوان خالی",
   "cell.set-not-blank": "علامت گذاری به عنوان غیر خالی",
-  "cell.toggle-direction": "جهت تایپ - کلیک برای تغییر",
   "cell.tile.location": "({{x}}، {{y}}) کاشی: صفحه",
+  "cell.toggle-direction": "جهت تایپ",
   "common.blanks": "خالی",
   "common.clear": "پاک کردن",
   "common.close": "بستن",

package/src/i18n/fr.json

@@ -1,9 +1,9 @@
 {
-  "cell.filter-cell": "Destination cible - cliquer pour changer",
+  "cell.filter-cell": "Destination cible",
   "cell.set-blank": "Marquer comme vide",
   "cell.set-not-blank": "Marquer comme non vide",
   "cell.tile.location": "Plateau: la case ({{x}}, {{y}})",
-  "cell.toggle-direction": "Direction d'écriture - cliquer pour changer",
+  "cell.toggle-direction": "Direction d'écriture",
   "common.blanks": "Cases vides",
   "common.clear": "Effacer",
   "common.close": "Fermer",

package/src/i18n/pl.json

@@ -1,9 +1,9 @@
 {
-  "cell.filter-cell": "Miejsce docelowe - kliknij aby zmienić",
+  "cell.filter-cell": "Miejsce docelowe",
   "cell.set-blank": "Oznacz jako blank",
   "cell.set-not-blank": "Oznacz jako nie blank",
   "cell.tile.location": "Plansza: płytka ({{x}}, {{y}})",
-  "cell.toggle-direction": "Kierunek wpisywania - kliknij aby zmienić",
+  "cell.toggle-direction": "Kierunek wpisywania",
   "common.blanks": "Blanki",
   "common.clear": "Wyczyść",
   "common.close": "Zamknij",

package/src/lib/dataUrlToBlob.ts

@@ -0,0 +1,20 @@
+const dataUrlToBlob = (dataUrl: string): Blob => {
+  const [mime = '', data] = dataUrl.split(',');
+  const [, type] = mime.match(/:(.*?);/) || [];
+
+  if (typeof type !== 'string') {
+    throw new Error('Unsupported data URL');
+  }
+
+  const byteString = globalThis.atob(data);
+  const u8arr = new Uint8Array(byteString.length);
+  let index = byteString.length;
+
+  while (index--) {
+    u8arr[index] = byteString.charCodeAt(index);
+  }
+
+  return new Blob([u8arr], { type });
+};
+
+export default dataUrlToBlob;

package/src/lib/index.ts

@@ -8,6 +8,7 @@ export { default as createKeyComparator } from './createKeyComparator';
 export { default as createNullMovingComparator } from './createNullMovingComparator';
 export { default as createRegExp } from './createRegExp';
 export { default as createStringComparator } from './createStringComparator';
+export { default as dataUrlToBlob } from './dataUrlToBlob';
 export { default as detectLocale } from './detectLocale';
 export { default as extractCharacters } from './extractCharacters';
 export { default as extractInputValue } from './extractInputValue';
@@ -21,6 +22,7 @@ export { default as getTotalRemainingTilesCount } from './getTotalRemainingTiles
 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';

package/src/lib/isCtrl.ts

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

package/src/modals/KeyMapModal/KeyMapModal.tsx

@@ -1,10 +1,10 @@
 import { FunctionComponent, memo } from 'react';
 
-import { Modal } from 'components';
-import { useTranslate } from 'state';
+import { Key, Modal } from 'components';
+import { selectConfig, useTranslate, useTypedSelector } from 'state';
 
 import { Mapping } from './components';
-import { ARROWS, BACKSPACE, DEL, ENTER, SPACE } from './keys';
+import { ARROWS, BACKSPACE, CTRL, DEL, ENTER, SPACE } from './keys';
 
 interface Props {
   className?: string;
@@ -14,6 +14,7 @@ interface Props {
 
 const KeyMapModal: FunctionComponent<Props> = ({ className, isOpen, onClose }) => {
   const translate = useTranslate();
+  const config = useTypedSelector(selectConfig);
 
   return (
     <Modal className={className} isOpen={isOpen} title={translate('keyMap')} onClose={onClose}>
@@ -21,10 +22,25 @@ const KeyMapModal: FunctionComponent<Props> = ({ className, isOpen, onClose }) =
         <Mapping description={translate('keyMap.board-and-rack.navigate')} mapping={[ARROWS]} />
         <Mapping description={translate('keyMap.board-and-rack.remove-tile')} mapping={[DEL, BACKSPACE]} />
         <Mapping description={translate('keyMap.board-and-rack.submit')} mapping={[ENTER]} />
+        {config.twoCharacterTiles.length > 0 && (
+          <Mapping
+            description={translate('keyMap.board-and-rack.insert-two-letter-tile')}
+            mapping={[
+              [
+                CTRL,
+                <>
+                  {config.twoCharacterTiles.map(([firstLetter]) => (
+                    <Key key={firstLetter}>{firstLetter.toUpperCase()}</Key>
+                  ))}
+                </>,
+              ],
+            ]}
+          />
+        )}
       </Modal.Section>
 
       <Modal.Section title={translate('keyMap.board')}>
-        <Mapping description={translate('keyMap.board.toggle-blank')} mapping={[SPACE]} />
+        <Mapping description={translate('keyMap.board.toggle-blank')} mapping={[SPACE, [CTRL, <Key key="b">B</Key>]]} />
         <Mapping description={translate('keyMap.board.toggle-direction')} mapping={[ARROWS]} />
       </Modal.Section>
 

package/src/modals/KeyMapModal/components/Mapping/Mapping.module.scss

@@ -18,13 +18,19 @@
   flex-wrap: wrap;
 }
 
-.group,
-.plus {
+.group {
   margin: 0 var(--spacing--s);
 }
 
-.slash {
-  margin: 0 var(--spacing--m);
+.slash,
+.plus {
+  min-width: var(--key--height);
+  height: var(--key--height);
+  padding: var(--spacing--s) var(--spacing--m);
+  font-family: var(--font--family--monospace);
+  line-height: calc(var(--key--height) - 2 * (var(--spacing--s) + var(--border--width)));
+  vertical-align: middle;
+  text-align: center;
 }
 
 .group {

package/src/pages/_app.tsx

@@ -4,7 +4,7 @@ import { FunctionComponent } from 'react';
 import { Provider } from 'react-redux';
 
 import { SeoMessage } from 'components';
-import { createAppStore } from 'state';
+import { store } from 'state';
 
 import 'styles/global.scss';
 
@@ -40,8 +40,6 @@ const KEYWORDS = [
   'Kamil Mielnik',
 ].join(',');
 
-const store = createAppStore();
-
 const App: FunctionComponent<AppProps> = ({ Component, pageProps }) => (
   <>
     <Head>