Merge branch 'master' into fixCardLink

fe-aug23-team4 · Dec 19, 2023 · 05cab23 · 05cab23
2 parents 3a41335 + 5002fcc
commit 05cab23
Show file tree

Hide file tree

Showing 40 changed files with 1,893 additions and 1,494 deletions.
diff --git a/src/App.scss b/src/App.scss
@@ -1,15 +1,15 @@
-// Utils
-@import './styles/utils/reset';
-@import './styles/utils/normalize';
-@import './styles/utils/typography';
-
-// Blocks
-@import './styles/blocks/page';
-@import './styles/blocks/grid';
-@import './styles/blocks/container';
-
-:root {
-  font-family: 'Mont', sans-serif;
-  scroll-behavior: smooth;
-}
-
+// Utils
+@import './styles/utils/reset';
+@import './styles/utils/normalize';
+@import './styles/utils/typography';
+
+// Blocks
+@import './styles/blocks/page';
+@import './styles/blocks/grid';
+@import './styles/blocks/container';
+
+:root {
+  font-family: 'Mont', sans-serif;
+  scroll-behavior: smooth;
+}
+
diff --git a/src/Root.tsx b/src/Root.tsx
@@ -1,70 +1,116 @@
+import { useEffect, useState } from 'react';
 import {
   Navigate,
   Route,
   HashRouter as Router,
   Routes,
 } from 'react-router-dom';
 import { App } from './App';
-import { HomePage } from './modules/HomePage';
+import { HomePage } from './modules/HomePage/HomePage';
 import { ProductsPage } from './modules/PhonesPage';
 import { ProductDetailsPage } from './modules/ProductDetailsPage';
 import { CartPage } from './modules/CartPage';
 import { NotFoundPage } from './modules/NotFoundPage';
 import { PageInProgress } from './modules/PageInProgress';
 import { FavoritesPage } from './modules/FavoritesPage';
 import {
-  getProductsWithSearchParams as loadPhones,
-  getProductAmount as loadPhonesAmount,
+  getProductDetail,
+  getProductAmount,
+  getProductsWithSearchParams,
 } from './api/service';
+import { Categories, EndPoints, ProductsAmount } from './types/Enums';
 
 const MOBILE_TITLE = 'Mobile phones';
-// const TABLETS_TITLE = 'Tablet';
-// const ACCESSOTIES_TITLE = 'Accessories';
+const TABLETS_TITLE = 'Tablet';
+const ACCESSORIES_TITLE = 'Accessories';
 
-export const Root = () => (
-  <Router>
-    <Routes>
-      <Route>
-        <Route path="/" element={<App />}>
-          <Route index element={<HomePage />} />
-          <Route path="home" element={<Navigate to="/" replace />} />
-          <Route path="phones">
-            <Route
-              index
-              element={(
-                <ProductsPage
-                  title={MOBILE_TITLE}
-                  loadData={loadPhones}
-                  loadAmount={loadPhonesAmount}
-                />
-              )}
-            />
-            <Route path=":phoneId?" element={<ProductDetailsPage />} />
-          </Route>
-          {/* <Route
-                path="tablets"
-                element={
+export const Root = () => {
+  const [amounts, setAmounts] = useState<ProductsAmount>();
+
+  useEffect(() => {
+    getProductAmount(Categories.All).then(setAmounts);
+  }, []);
+
+  return (
+    <Router>
+      <Routes>
+        <Route>
+          <Route path="/" element={<App />}>
+            <Route index element={<HomePage />} />
+            <Route path="home" element={<Navigate to="/" replace />} />
+            <Route path={Categories.Phones}>
+              <Route
+                index
+                element={(
+                  <ProductsPage
+                    title={MOBILE_TITLE}
+                    loadData={getProductsWithSearchParams}
+                    productAmount={amounts?.phones}
+                    endpoint={EndPoints.Phones}
+                  />
+                )}
+              />
+              <Route
+                path=":itemId?"
+                element={(
+                  <ProductDetailsPage
+                    loadData={getProductDetail}
+                    endPoint={EndPoints.Phones}
+                  />
+                )}
+              />
+            </Route>
+            <Route path={Categories.Tablets}>
+              <Route
+                index
+                element={(
                   <ProductsPage
                     title={TABLETS_TITLE}
-                    loadData={loadPhones}
-                    loadAmount={loadPhonesAmount}
-                  />}
-              /> */}
-          {/* <Route
-                path="accessories"
-                element={
+                    loadData={getProductsWithSearchParams}
+                    productAmount={amounts?.tablets}
+                    endpoint={EndPoints.Tablets}
+                  />
+                )}
+              />
+              <Route
+                path=":itemId?"
+                element={(
+                  <ProductDetailsPage
+                    loadData={getProductDetail}
+                    endPoint={EndPoints.Tablets}
+                  />
+                )}
+              />
+            </Route>
+            <Route path={Categories.Accessories}>
+              <Route
+                index
+                element={(
                   <ProductsPage
-                    title={ACCESSOTIES_TITLE}
-                    loadData={loadPhones}
-                    loadAmount={loadPhonesAmount}
-                  />}
-              /> */}
-          <Route path="favorites" element={<FavoritesPage />} />
-          <Route path="cart" element={<CartPage />} />
-          <Route path="pageInProgress" element={<PageInProgress />} />
-          <Route path="*" element={<NotFoundPage />} />
+                    title={ACCESSORIES_TITLE}
+                    loadData={getProductsWithSearchParams}
+                    productAmount={amounts?.accessories}
+                    endpoint={EndPoints.Accessories}
+                  />
+                )}
+              />
+              <Route
+                path=":itemId?"
+                element={(
+                  <ProductDetailsPage
+                    loadData={getProductDetail}
+                    endPoint={EndPoints.Accessories}
+                  />
+                )}
+              />
+            </Route>
+            <Route path="favorites" element={<FavoritesPage />} />
+            <Route path="cart" element={<CartPage />} />
+            <Route path="pageInProgress" element={<PageInProgress />} />
+            <Route path="*" element={<NotFoundPage />} />
+          </Route>
         </Route>
-      </Route>
-    </Routes>
-  </Router>
-);
+      </Routes>
+    </Router>
+  );
+};
diff --git a/src/api/service.ts b/src/api/service.ts
@@ -1,7 +1,7 @@
 import { axiosClient } from '../utils/axiosClient';
 
 import { Categories, EndPoints, ProductsAmount } from '../types/Enums';
-import { Product, ProductDetail, QueryParams } from '../types/Product';
+import { Product, Detail, QueryParams } from '../types/Product';
 
 export const getProductAmount = (category?: Categories) => {
   return axiosClient.get<ProductsAmount>(
@@ -14,7 +14,7 @@ export const getProductsWithSearchParams = (
   params?: QueryParams,
 ) => {
   const {
-    page = 1, perPage = 8, sort = 'discount', order = 'asc',
+    page = 1, perPage = 16, sort = 'discount', order = 'asc',
   } = params || {};
 
   return axiosClient.get<Product[]>(
@@ -31,12 +31,12 @@ export const getProductsWithDiscount = () => {
 };
 
 export const getProductDetail = (endPoint: EndPoints, itemId: string) => {
-  return axiosClient.get<ProductDetail>(`/${endPoint}/${itemId}`);
+  return axiosClient.get<Detail>(`/${endPoint}/${itemId}`);
 };
 
 export const getRecommendedProducts = (
   endPoint: EndPoints,
-  phoneId: string,
+  itemId: string,
 ) => {
-  return axiosClient.get<Product[]>(`/${endPoint}/${phoneId}/recommended`);
+  return axiosClient.get<Product[]>(`/${endPoint}/${itemId}/recommended`);
 };
diff --git a/src/modules/CartPage/CartPage.tsx b/src/modules/CartPage/CartPage.tsx
@@ -5,11 +5,13 @@ import styles from './CartPage.module.scss';
 import { useAppSelector } from '../../store/hooks';
 import { BackButton } from '../shared/BackButton';
 import { Modal } from './components/Modal';
+import { EmptyCart } from '../shared/EmptyCart';
 
 export const CartPage: React.FC = () => {
   const { isDarkTheme } = useAppSelector((state) => state.theme);
   const { cart } = useAppSelector(state => state.cart);
   const [isModalOpen, setModalOpen] = useState(false);
+  const isEmptyCart = cart.length === 0;
 
   const openModal = () => {
     setModalOpen(true);
@@ -27,74 +29,76 @@ export const CartPage: React.FC = () => {
     return cart.reduce((acc, phone) => acc + phone.amount, 0);
   }, [cart]);
 
-  return (
-
-    <section
-      className={cn(styles.cart, {
-        [styles.cart__DARK]: isDarkTheme,
-      })}
-    >
-      <BackButton />
-      <h2
-        className={cn(styles.title, {
-          [styles.contentDark]: isDarkTheme,
+  return (isEmptyCart
+    ? <EmptyCart />
+    : (
+      <section
+        className={cn(styles.cart, {
+          [styles.cart__DARK]: isDarkTheme,
         })}
       >
-        Cart
-      </h2>
-
-      <div className={styles.gridContainer}>
-        <div className={styles.cardsContainer}>
-          {cart.map((phone) => (
-            <CartItem
-              key={phone.id}
-              phone={phone}
-            />
-          ))}
-        </div>
-
-        <div
-          className={cn(styles.amountContainer, {
-            [styles.amountContainer__DARK]: isDarkTheme,
+        <BackButton />
+        <h2
+          className={cn(styles.title, {
+            [styles.contentDark]: isDarkTheme,
           })}
         >
-          <p
-            className={cn(styles.totalAmount, {
-              [styles.contentDark]: isDarkTheme,
-            })}
-          >
-            {`$ ${totalPrice}`}
-          </p>
+          Cart
+        </h2>
 
-          <p
-            className={cn(styles.amountContent, {
-              [styles.amountContent__DARK]: isDarkTheme,
+        <div className={styles.gridContainer}>
+          <div className={styles.cardsContainer}>
+            {cart.map((phone) => (
+              <CartItem
+                key={phone.id}
+                phone={phone}
+              />
+            ))}
+          </div>
+
+          <div
+            className={cn(styles.amountContainer, {
+              [styles.amountContainer__DARK]: isDarkTheme,
             })}
           >
-            {`Total for ${totalItems} items`}
-          </p>
+            <p
+              className={cn(styles.totalAmount, {
+                [styles.contentDark]: isDarkTheme,
+              })}
+            >
+              {`$ ${totalPrice}`}
+            </p>
 
-          <p
-            className={cn(styles.line, {
-              [styles.line__DARK]: isDarkTheme,
-            })}
-          />
+            <p
+              className={cn(styles.amountContent, {
+                [styles.amountContent__DARK]: isDarkTheme,
+              })}
+            >
+              {`Total for ${totalItems} items`}
+            </p>
 
-          <button
-            type="button"
-            className={cn(styles.button, {
-              [styles.button__DARK]: isDarkTheme,
-            })}
-            onClick={openModal}
-          >
-            Checkout
-          </button>
-          <Modal
-            isOpen={isModalOpen}
-            onClose={closeModal}
-          />
+            <p
+              className={cn(styles.line, {
+                [styles.line__DARK]: isDarkTheme,
+              })}
+            />
+
+            <button
+              type="button"
+              className={cn(styles.button, {
+                [styles.button__DARK]: isDarkTheme,
+              })}
+              onClick={openModal}
+            >
+              Checkout
+            </button>
+            <Modal
+              isOpen={isModalOpen}
+              onClose={closeModal}
+            />
+          </div>
         </div>
-      </div>
-    </section>
+      </section>
+    )
   );
 };