From 9ab31e6c355194452449ab7788da1eec9e4e6851 Mon Sep 17 00:00:00 2001
From: Sergey Krylov <ksv741@mail.ru>
Date: Mon, 25 Jul 2022 19:42:19 +0500
Subject: [PATCH] add pages alias

---
 config-overrides.js               |  1 +
 src/components/AppRoutes.tsx      |  4 +--
 src/pages/MatchMenu/MatchMenu.tsx | 56 +++++++++++++++++++++++++++++++
 tsconfig.json                     |  1 +
 4 files changed, 60 insertions(+), 2 deletions(-)

diff --git a/config-overrides.js b/config-overrides.js
index 656573e..f19f2a1 100644
--- a/config-overrides.js
+++ b/config-overrides.js
@@ -7,6 +7,7 @@ module.exports = function override(config) {
     alias: {
       ...config.alias,
       'components': path.resolve(__dirname, 'src/components'),
+      'pages': path.resolve(__dirname, 'src/pages'),
       'context': path.resolve(__dirname, 'src/context'),
       'src': path.resolve(__dirname, 'src')
     },
diff --git a/src/components/AppRoutes.tsx b/src/components/AppRoutes.tsx
index c956ddb..fbcca55 100644
--- a/src/components/AppRoutes.tsx
+++ b/src/components/AppRoutes.tsx
@@ -1,7 +1,7 @@
-import MatchGame from 'components/../pages/MatchGame/MatchGame';
-import MatchMenu from 'components/../pages/MatchMenu/MatchMenu';
 import { useMatchGame } from 'context/MatchGameContext';
+import MatchMenu from 'pages/MatchMenu/MatchMenu';
 import React from 'react';
+import MatchGame from 'pages/MatchGame/MatchGame';
 import Options from 'src/pages/Options/Options';
 
 const AppRoutes = () => {
diff --git a/src/pages/MatchMenu/MatchMenu.tsx b/src/pages/MatchMenu/MatchMenu.tsx
index e69de29..920171b 100644
--- a/src/pages/MatchMenu/MatchMenu.tsx
+++ b/src/pages/MatchMenu/MatchMenu.tsx
@@ -0,0 +1,56 @@
+import Button from 'components/UI/Button/Button';
+import { MenuItem, useMatchGame } from 'context/MatchGameContext';
+import React from 'react';
+
+import cls from './MatchMenu.module.scss'
+
+type GameMenuProps = {
+
+}
+type MenuItemType = {
+  itemName: MenuItem;
+  itemPlaceholder: string;
+  condition?: () => boolean;
+}
+
+const MatchMenu: React.FC<GameMenuProps> = () => {
+  const {setCurrentMenuItem} = useMatchGame();
+
+  const menuItems: MenuItemType[] = [
+    {itemName: 'continue-game', itemPlaceholder: 'Continue', condition: canContinueGame},
+    {itemName: 'new-game', itemPlaceholder: 'New game'},
+    {itemName: 'options', itemPlaceholder: 'Options'},
+    {itemName: 'exit', itemPlaceholder: 'Exit'},
+  ]
+
+  function clickItemHandler(item: MenuItem) {
+    setCurrentMenuItem?.(item);
+  }
+
+  function canContinueGame() {
+    return !!localStorage.getItem('match-game:cards');
+  }
+
+  function renderItem(itemName: MenuItem, itemText: string) {
+    return <Button className={cls.button} onClick={() => clickItemHandler(itemName)}>{itemText}</Button>
+  }
+
+  function renderMenuItems() {
+    return menuItems.map(item => {
+        return item?.condition
+          ? item?.condition() && <li key={item.itemName}>{renderItem(item.itemName, item.itemPlaceholder)}</li>
+          : <li key={item.itemName}>{renderItem(item.itemName, item.itemPlaceholder)}</li>;
+    });
+  }
+
+  return (
+    <div className={cls.MatchMenu}>
+      <h2>Match game menu</h2>
+      <ul>
+        {renderMenuItems()}
+      </ul>
+    </div>
+  );
+};
+
+export default MatchMenu;
diff --git a/tsconfig.json b/tsconfig.json
index 15cb2a4..69a7f9f 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -22,6 +22,7 @@
     "jsx": "react-jsx",
     "paths": {
       "components/*": ["src/components/*"],
+      "pages/*": ["src/pages/*"],
       "context/*": ["src/context/*"],
       "src/*": ["src/*"],
     }