Create basic app structure. Add deploy-dev pipeline

.github/workflows/deploy-dev.yml

@@ -15,10 +15,16 @@ jobs:
         with:
           node-version: 18
 
+      - name: Configure git profile
+        run: |
+          git config --global user.email "amsterget@gmail.com"
+          git config --global user.name "amsterget"
+          git remote set-url origin https://${{ secrets.GIT_HUB_PERSONAL_TOKEN }}@github.com/${{ github.repository }}
+
       - name: Install of node dependencies
         run: sh install-modules.sh
         env:
-          GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.GIT_HUB_PERSONAL_TOKEN }}
 
       - name: Deploy
         run: npm run deploy

install-modules.sh

@@ -1,6 +1,6 @@
 source ./.env
 
-npm config set //npm.pkg.github.com/:_authToken=${GITHUB_TOKEN} 
+npm config set //npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}
 npm config set @aikray:registry=https://npm.pkg.github.com/
 
 npm install

package.json

@@ -26,11 +26,13 @@
   },
   "dependencies": {
     "@aikray/menu-bot-common": "^0.0.8",
+    "@ant-design/icons": "^5.0.1",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
     "@fontsource/roboto": "^4.5.8",
     "@mui/icons-material": "^5.11.9",
     "@mui/material": "^5.11.9",
+    "antd": "^5.2.2",
     "classnames": "^2.3.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/App.css

@@ -1,38 +1,4 @@
 .App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+  height: 100%;
+  width: 100%;
 }

src/App.tsx

@@ -1,42 +1,30 @@
 import './App.css';
 
 import { fetchQuery } from 'core/fetchQuery';
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 
-import logo from './logo.svg';
+import { InitialDataProvider } from './providers/initial-data-provider';
+import { Router } from './routes/Router';
 
 export const App = () => {
-  const [appStatus, setAppStatus] = useState('');
-
   useEffect(() => {
     const getAppStatus = async () => {
       const response = await fetchQuery<{ status: string }>({
         path: `/app/health-check`,
       });
 
-      setAppStatus(response.status);
+      // eslint-disable-next-line no-console
+      console.log(response.status);
     };
 
     getAppStatus();
   }, []);
 
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <h1>App Status: {appStatus}</h1>
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <InitialDataProvider>
+        <Router />
+      </InitialDataProvider>
     </div>
   );
 };

src/core/styles/variables.css

@@ -0,0 +1,4 @@
+:root {
+  --color-primary: #1677ff;
+  --color-default: #555;
+}

src/index.css

@@ -1,4 +1,18 @@
+@import "./core/styles/variables.css";
+
+html {
+  height: 100%;
+  width: 100%;
+}
+
+#root {
+   height: 100%;
+   width: 100%;
+}
+
 body {
+  height: 100%;
+  width: 100%;
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',

src/pages/common/footer/Footer.module.css

@@ -0,0 +1,22 @@
+.footer {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  padding: 20px 0;
+  border-top: 1px solid var(--color-primary);
+}
+
+.navigation {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 20px;
+}
+
+.nav-icon {
+  font-size: 40px;
+  color: var(--color-default);
+}
+.nav-icon.active {
+  color: var(--color-primary);
+}

src/pages/common/footer/Footer.tsx

@@ -0,0 +1,37 @@
+import { ShopOutlined, UserOutlined } from '@ant-design/icons';
+import classNames from 'classnames/bind';
+import { NavLink } from 'react-router-dom';
+
+import { PROFILE_PAGE, RESTAURANTS_PAGE } from '../../../routes/pages';
+import styles from './Footer.module.css';
+
+const cx = classNames.bind(styles);
+
+interface FooterProps {}
+
+const navItems = [
+  {
+    id: 'restaurants',
+    to: RESTAURANTS_PAGE,
+    icon: ShopOutlined,
+  },
+  {
+    id: 'profile',
+    to: PROFILE_PAGE,
+    icon: UserOutlined,
+  },
+];
+
+export const Footer = (_: FooterProps) => (
+  <footer className={cx('footer')}>
+    <nav className={cx('navigation')}>
+      {navItems.map(({ id, to, icon: Icon }) => (
+        <NavLink key={id} to={to}>
+          {({ isActive }) => (
+            <Icon className={cx('nav-icon', isActive ? 'active' : '')} />
+          )}
+        </NavLink>
+      ))}
+    </nav>
+  </footer>
+);

src/pages/common/footer/index.ts

@@ -0,0 +1 @@
+export * from './Footer';

src/pages/profile-page/ProfilePage.module.css

@@ -0,0 +1,6 @@
+.profile-page {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}

src/pages/profile-page/ProfilePage.tsx

@@ -0,0 +1,12 @@
+import classNames from 'classnames/bind';
+
+import { Footer } from '../common/footer';
+import styles from './ProfilePage.module.css';
+
+const cx = classNames.bind(styles);
+
+export const ProfilePage = () => (
+  <div className={cx('profile-page')}>
+    <Footer />
+  </div>
+);

src/pages/profile-page/index.ts

@@ -0,0 +1 @@
+export * from './ProfilePage';

src/pages/restaurants-page/RestaurantsPage.module.css

@@ -0,0 +1,16 @@
+.restaurants-page {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+
+.current-city {
+  display: flex;
+  justify-content: center;
+  padding: 10px 5px;
+}
+
+.current-city a {
+  text-decoration: none;
+}

src/pages/restaurants-page/RestaurantsPage.tsx

@@ -0,0 +1,44 @@
+import { SearchOutlined } from '@ant-design/icons';
+import Button from 'antd/lib/button';
+import classNames from 'classnames/bind';
+import { useContext } from 'react';
+import { Link } from 'react-router-dom';
+
+import { StoreContext } from '../../providers/store-provider';
+import { SEARCH_PAGE } from '../../routes/pages';
+import { Footer } from '../common/footer';
+import {
+  SEARCH_TYPE_CITIES,
+  SEARCH_TYPE_RESTAURANTS,
+} from '../search-page/constants';
+import { NoCityBlock } from './no-city-block';
+import styles from './RestaurantsPage.module.css';
+
+const cx = classNames.bind(styles);
+
+export const RestaurantsPage = () => {
+  const { selectedCity } = useContext(StoreContext);
+
+  return (
+    <div className={cx('restaurants-page')}>
+      {selectedCity ? (
+        <>
+          <span className={cx('current-city')}>
+            <Link to={SEARCH_PAGE} state={{ type: SEARCH_TYPE_CITIES }}>
+              {selectedCity}
+            </Link>
+          </span>
+          <Link to={SEARCH_PAGE} state={{ type: SEARCH_TYPE_RESTAURANTS }}>
+            <Button icon={<SearchOutlined />} size="large">
+              Restaurants
+            </Button>
+          </Link>
+          {/* TODO: Restaurants list will be here */}
+        </>
+      ) : (
+        <NoCityBlock />
+      )}
+      <Footer />
+    </div>
+  );
+};

src/pages/restaurants-page/index.ts

@@ -0,0 +1 @@
+export * from './RestaurantsPage';

src/pages/restaurants-page/no-city-block/NoCityBlock.module.css

@@ -0,0 +1,7 @@
+.no-city-block {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: calc(100% - 80px);
+}

src/pages/restaurants-page/no-city-block/NoCityBlock.tsx

@@ -0,0 +1,20 @@
+import { SearchOutlined } from '@ant-design/icons';
+import Button from 'antd/lib/button';
+import classNames from 'classnames/bind';
+import { Link } from 'react-router-dom';
+
+import { SEARCH_PAGE } from '../../../routes/pages';
+import { SEARCH_TYPE_CITIES } from '../../search-page/constants';
+import styles from './NoCityBlock.module.css';
+
+const cx = classNames.bind(styles);
+
+export const NoCityBlock = () => (
+  <div className={cx('no-city-block')}>
+    <Link to={SEARCH_PAGE} state={{ type: SEARCH_TYPE_CITIES }}>
+      <Button icon={<SearchOutlined />} size="large">
+        Choose City
+      </Button>
+    </Link>
+  </div>
+);

src/pages/restaurants-page/no-city-block/index.ts

@@ -0,0 +1 @@
+export * from './NoCityBlock';

src/pages/search-page/SearchPage.tsx

@@ -0,0 +1,26 @@
+import { useLocation } from 'react-router-dom';
+
+import { SEARCH_TYPE_CITIES, SEARCH_TYPE_RESTAURANTS } from './constants';
+import { CitiesSearch, RestaurantsSearch } from './supported-searches';
+
+// TODO: change to some fallback
+const EmptyComponent = () => <div />;
+
+export const SearchPage = () => {
+  const { state: locationState } = useLocation();
+
+  let SearchComponent = EmptyComponent;
+
+  switch (locationState.type) {
+    case SEARCH_TYPE_CITIES:
+      SearchComponent = CitiesSearch;
+      break;
+    case SEARCH_TYPE_RESTAURANTS:
+      SearchComponent = RestaurantsSearch;
+      break;
+    default:
+      break;
+  }
+
+  return <SearchComponent />;
+};

src/pages/search-page/constants.ts

@@ -0,0 +1,2 @@
+export const SEARCH_TYPE_CITIES = 'cities';
+export const SEARCH_TYPE_RESTAURANTS = 'restaurants';

src/pages/search-page/data.ts

@@ -0,0 +1,13 @@
+const MINSK = 'Minsk';
+const TBILISI = 'Tbilisi';
+const MOSCOW = 'Moscow';
+const TASHKENT = 'Tashkent';
+
+export const supportedCities = [MINSK, TBILISI, MOSCOW, TASHKENT];
+
+export const restaurantsByCities: { [name: string]: string[] } = {
+  [MINSK]: ['Vasilki', 'The View'],
+  [TBILISI]: ['Tiflis', 'Mimino'],
+  [MOSCOW]: ['Russkiy', 'Stolovaya'],
+  [TASHKENT]: ['Chaikhana', 'Plov!'],
+};

src/pages/search-page/index.ts

@@ -0,0 +1 @@
+export * from './SearchPage';

src/pages/search-page/search-with-list/SearchWithList.module.css

@@ -0,0 +1,9 @@
+.search-with-list {
+  padding: 10px;
+}
+
+.entity-item {
+  display: block;
+  padding: 10px;
+  text-decoration: none;
+}