🧭 Router: Added - WiP

.eslintrc.cjs

@@ -9,6 +9,7 @@ module.exports = {
     'airbnb/hooks',
     'plugin:@typescript-eslint/recommended',
     'plugin:react-hooks/recommended',
+    'prettier/react',
   ],
   ignorePatterns: ['dist', '.eslintrc.cjs'],
   parser: '@typescript-eslint/parser',
@@ -19,10 +20,7 @@ module.exports = {
   rules: {
     'import/prefer-default-export': 'off',
     'arrow-body-style': 'off',
-    'arrow-parens': ['error', 'as-needed', {
-      requireForBlockBody: true,
-    }],
-    'react/jsx-indent': ['error', 4],
+    'react/jsx-indent': ['error', 2],
     'react/jsx-no-undef': [ "error", { "allowGlobals": true } ],
     'react/require-default-props': 0,
     'react/function-component-definition': 0,
@@ -31,7 +29,7 @@ module.exports = {
       { allowConstantExport: true },
     ],
     'max-len': ['warn', {
-      'code': 140,
+      'code': 110,
       'ignoreUrls': true,
       'ignorePattern': '(^import|d="([\\s\\S]*?)|\\srequire\\()',
       'ignoreTrailingComments': true,
@@ -49,19 +47,6 @@ module.exports = {
         packageDir: '.',
     }],
   },
-  settings: {
-    'import/resolver': {
-      'alias-array': {
-        alias: true,
-        map: [
-          ['@api', resolve(__dirname, './src/api/')],
-          ['@components', resolve(__dirname, './src/components/')],
-          ['@store', resolve(__dirname, './src/store/')],
-          ['@utils', resolve(__dirname, './src/utils/')],
-        ],
-      }
-    }
-  },
   overrides: [
       {
           files: ['*.ts', '*.tsx'],

.prettierrc

@@ -0,0 +1,9 @@
+{
+  "endOfLine": "auto",
+  "singleQuote": true,
+  "tabWidth": 2,
+  "semi": true,
+  "bracketSpacing": true,
+  "trailingComma": "all",
+  "printWidth": 110
+}

package.json

@@ -47,7 +47,8 @@
     "i18next-intervalplural-postprocessor": "^3.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-i18next": "^13.2.0"
+    "react-i18next": "^13.2.0",
+    "wouter": "^3.6.0"
   },
   "devDependencies": {
     "@babel/plugin-syntax-jsx": "^7.22.5",

src/App.tsx

@@ -1,30 +1,22 @@
 import { useEffect } from 'react';
 
-import { Pane as PaneType } from '@common-types';
-
 import { LOCAL_STORAGE } from '@const';
 
 import { useSelector, useDispatch } from '@store';
 import { loadGame } from '@store/gameSlice';
 
 import useAppUpdateIfNeeded from '@hooks/useAppUpdateIfNeeded';
-import useLangugeChangeIfNeeded from '@hooks/useLangugeChangeIfNeeded';
+import useLangugeChangeIfNeeded from '@features/routes/hooks/useLangugeChangeIfNeeded';
 import useAddTrackersScriptsIfNeeded from '@hooks/useAddTrackersScriptsIfNeeded';
-import usePanes from '@hooks/usePanes';
 import useTrackGlobal from '@hooks/useTrackGlobal';
 import useUnlockEasterDaysIfPossible from '@hooks/useUnlockEasterDaysIfPossible';
 import useUpdateIfSpecialWord from '@features/specialWords/hooks/useUpdateIfSpecialWord';
 
 import Header from '@components/Header';
 
-import CookiesPopup from '@components/Cookies/CookiesPopup';
+import Routes from '@features/routes/components/Routes/Routes';
 
-import Game from '@components/Panes/Game/Game';
-import Help from '@components/Panes/Help/Help';
-import Settings from '@components/Panes/Settings/Settings';
-import Statistics from '@components/Panes/Statistics/Statistics';
-import YearSummary from '@components/Panes/YearSummary/YearSummary';
-import AboutLanguage from '@components/Panes/AboutLanguage/AboutLanguage';
+import CookiesPopup from '@components/Cookies/CookiesPopup';
 
 import Toast from '@components/Toast/Toast';
 
@@ -38,8 +30,6 @@ function App() {
   const todayStamp = useSelector(state => state.game.today);
   const isErrorLoading = useSelector(state => state.game.isErrorLoading);
 
-  const { pane } = usePanes();
-
   useEffect(() => {
     dispatch(loadGame());
   }, [dispatch, gameLanguage, gameMode, wordToGuess, todayStamp, isErrorLoading]);
@@ -77,12 +67,7 @@ function App() {
           <Header />
           <main>
               <Toast />
-              {pane === PaneType.Help && <Help />}
-              {pane === PaneType.Game && <Game />}
-              {pane === PaneType.Settings && <Settings />}
-              {pane === PaneType.Statistics && <Statistics />}
-              {pane === PaneType.YearSummary && <YearSummary />}
-              {pane === PaneType.AboutLanguage && <AboutLanguage />}
+              <Routes />
           </main>
           <CookiesPopup />
       </div>

src/api/getDoesWordExist.ts

@@ -1,20 +1,21 @@
+import { ROOT_PATH } from '@const';
 import { getNormalizedKey } from './helpers';
 
 type FetchedWordsListByKeys = {
-  [key: string]: string[]
+  [key: string]: string[];
 };
 
 export const DoesWordExistErrorTypes = {
   TooShort: 'too_short',
   Fetch: 'fetch',
 } as const;
 
-type DoesWordExistErrorType = typeof DoesWordExistErrorTypes[keyof typeof DoesWordExistErrorTypes];
+type DoesWordExistErrorType = (typeof DoesWordExistErrorTypes)[keyof typeof DoesWordExistErrorTypes];
 
 type GetDoesWordExistReport = {
-  doesWordExist: boolean,
-  isError: boolean,
-  errorType?: DoesWordExistErrorType
+  doesWordExist: boolean;
+  isError: boolean;
+  errorType?: DoesWordExistErrorType;
 };
 
 const cachedKeys: FetchedWordsListByKeys = {};
@@ -36,7 +37,7 @@ export const getDoesWordExist = async (word: string, lang: string): Promise<GetD
 
   if (!cachedKeys[cacheKey]) {
     try {
-      const response = await fetch(`./dictionary/${lang}/spelling/chunk-${key}.json`).catch((error) => {
+      const response = await fetch(`${ROOT_PATH}dictionary/${lang}/spelling/chunk-${key}.json`).catch((error) => {
         throw error;
       });
 
@@ -70,11 +71,14 @@ export const getDoesWordExist = async (word: string, lang: string): Promise<GetD
 };
 
 type KeyWithIndex = {
-  key: string,
-  index: number,
+  key: string;
+  index: number;
 };
 
-export const getWordsFromKeysWithIndexes = async (keysWithIndexes: KeyWithIndex[], lang: string): Promise<string[]> => {
+export const getWordsFromKeysWithIndexes = async (
+  keysWithIndexes: KeyWithIndex[],
+  lang: string,
+): Promise<string[]> => {
   const words = [];
 
   // eslint-disable-next-line no-restricted-syntax
@@ -85,7 +89,7 @@ export const getWordsFromKeysWithIndexes = async (keysWithIndexes: KeyWithIndex[
 
     try {
       // eslint-disable-next-line no-await-in-loop
-      const response = await fetch(`./dictionary/${lang}/spelling/chunk-${key}.json`).catch((error) => {
+      const response = await fetch(`${ROOT_PATH}dictionary/${lang}/spelling/chunk-${key}.json`).catch((error) => {
         throw error;
       });
 
@@ -112,18 +116,16 @@ export const getWordsFromKeysWithIndexes = async (keysWithIndexes: KeyWithIndex[
 };
 
 export const getWordsIndexesChunks = (words: string[], lang: string) => {
-  const keysWithWords = words.map(word => ({ word, key: getNormalizedKey(word, lang) }));
-  const hasAllWordsFetched = keysWithWords.every(
-    ({ word, key }) => {
-      if (!key) {
-        return false;
-      }
+  const keysWithWords = words.map((word) => ({ word, key: getNormalizedKey(word, lang) }));
+  const hasAllWordsFetched = keysWithWords.every(({ word, key }) => {
+    if (!key) {
+      return false;
+    }
 
-      const cacheKey = getCacheKey(lang, key);
+    const cacheKey = getCacheKey(lang, key);
 
-      return Array.isArray(cachedKeys[cacheKey]) && cachedKeys[cacheKey].includes(word);
-    },
-  );
+    return Array.isArray(cachedKeys[cacheKey]) && cachedKeys[cacheKey].includes(word);
+  });
 
   if (!hasAllWordsFetched) {
     return [];
@@ -135,7 +137,10 @@ export const getWordsIndexesChunks = (words: string[], lang: string) => {
     return {
       word,
       key,
-      index: cachedKeys && cachedKeys[cacheKey] ? cachedKeys[cacheKey].findIndex(keyWords => word === keyWords) : -1,
+      index:
+        cachedKeys && cachedKeys[cacheKey]
+          ? cachedKeys[cacheKey].findIndex((keyWords) => word === keyWords)
+          : -1,
     };
   });
 };

src/api/getWordToGuess.ts

@@ -1,4 +1,5 @@
 import { GameMode, Catalog } from '@common-types';
+import { ROOT_PATH } from '@const';
 
 import { getNow } from '@utils/date';
 
@@ -38,7 +39,7 @@ export const getCatalogInfo = async (gameLanguage: string) => {
     return cachedCatalogs[gameLanguage];
   }
 
-  const catalogResponse = await fetch(`./dictionary/${gameLanguage}/catalog.json`);
+  const catalogResponse = await fetch(`${ROOT_PATH}dictionary/${gameLanguage}/catalog.json`);
   const {
     words = 0,
     items = [],
@@ -82,7 +83,7 @@ export const getWordToGuess = async (
 
   const { key, endIndex } = keyItem;
 
-  const winingKeyResponse = await fetch(`./dictionary/${gameLanguage}/winning/chunk-${key}.json`);
+  const winingKeyResponse = await fetch(`${ROOT_PATH}dictionary/${gameLanguage}/winning/chunk-${key}.json`);
 
   const winingKeyResult = await winingKeyResponse.json();
 

src/api/helpers.ts

@@ -204,8 +204,6 @@ export const mergeFlatAffixes = (flatAffixesA: FlatAffixes, flatAffixesB: FlatAf
   );
   flatAffixesResult.notCorrectOrders = [...flatAffixesResult.notCorrectOrders, ...notCorrectOrdersBThatAreNew];
 
-  console.log(JSON.stringify(flatAffixesB));
-
   const needsALetterBetweenBThatAreNew = flatAffixesB.needsALetterBetween.filter(
     (newPair) => {
       const hasPairAlready = flatAffixesResult.needsALetterBetween.some(

src/components/Button/Button.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback } from 'react';
 import clsx from 'clsx';
+import { Link } from 'wouter';
 
 import useVibrate from '@hooks/useVibrate';
 
@@ -8,7 +9,7 @@ import IconLoader from '@components/Icons/IconLoader';
 import './Button.scss';
 
 type Props = {
-  tagName?: ('button' | 'a')
+  tagName?: 'button' | 'a' | 'link'
   className?: string,
   children: React.ReactNode,
   onClick?: (e: React.MouseEvent<HTMLElement>) => void,
@@ -40,7 +41,10 @@ const Button = ({
   hasBorder = true,
   dataTestId,
 }: Props) => {
-  const Tag = tagName || 'button';
+  let Tag: string | typeof Link = 'button';
+  if (tagName) {
+    Tag = tagName === 'link' ? Link : 'a';
+  }
 
   const { vibrate } = useVibrate();
 
@@ -66,6 +70,7 @@ const Button = ({
         href={href}
         rel={rel}
         target={target}
+        // @ts-expect-error wouter Link doesn't support it
         disabled={isDisabled}
         data-testid={dataTestId}
       >

src/components/Button/ButtonTile.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback } from 'react';
 import clsx from 'clsx';
+import { Link } from 'wouter';
 
 import useVibrate from '@hooks/useVibrate';
 
@@ -8,7 +9,7 @@ import IconLoader from '@components/Icons/IconLoader';
 import './ButtonTile.scss';
 
 type Props = {
-  tagName?: 'button' | 'a',
+  tagName?: 'button' | 'a' | 'link',
   variant?: 'small' | '',
   className?: string,
   children: React.ReactNode,
@@ -40,7 +41,10 @@ const ButtonTile = ({
   isInverted = false,
   dataTestId,
 }: Props) => {
-  const Tag = tagName || 'button';
+  let Tag: string | typeof Link = 'button';
+  if (tagName) {
+    Tag = tagName === 'link' ? Link : 'a';
+  }
 
   const { vibrate } = useVibrate();
 
@@ -65,7 +69,8 @@ const ButtonTile = ({
         title={title}
         rel={rel}
         target={target}
-        disabled={isDisabled}
+        // @ts-expect-error wouter Link doesn't support it
+        disabled={tagName !== 'link' ? isDisabled : undefined}
         data-testid={dataTestId}
       >
           {children}

src/components/Header.scss

@@ -33,8 +33,10 @@
         position: absolute;
         top: 50%;
         transform: translateY(-50%);
+        height: 22px;
+        line-height: 1;
 
-        button {
+        a {
             width: 22px;
         }
     }
@@ -119,13 +121,16 @@
         }
     }
 
+    a,
     button {
         position: relative;
         display: inline-flex;
         padding: 0;
         align-items: center;
         background: none;
         border: none;
+        color: inherit;
+        text-decoration: none;
 
         svg {
             fill: var(--text-weaker);