Добавил меню. Немного исправил стили для адаптива.

Studio-Yandex-Practicum · May 6, 2024 · aa09b13 · aa09b13
1 parent d515e1e
commit aa09b13
Show file tree

Hide file tree

Showing 7 changed files with 143 additions and 32 deletions.
diff --git a/src/app/router/AppRouter/ui/AppRouter.tsx b/src/app/router/AppRouter/ui/AppRouter.tsx
@@ -8,7 +8,7 @@ import ComparePage from '@/pages/ComparePage/ComparePage'
 import ContactsPage from '@/pages/ContactsPage/ContactsPage'
 import DeliveryPage from '@/pages/DeliveryPage/DeliveryPage'
 import ErrorPage from '@/pages/ErrorPage/ErrorPage'
-import FavoritesPage from '@/pages/FavoritesPage/FavoritesPage'
+import { FavoritesPage } from '@/pages/FavoritesPage/FavoritesPage'
 import { FeedbackPage } from '@/pages/FeedbackPage/FeedbackPage'
 import FormReturnPage from '@/pages/FormReturnPage/FormReturnPage'
 import HelpPage from '@/pages/HelpPage/HelpPage'

diff --git a/src/entities/Favorite/model/functions/functions.ts b/src/entities/Favorite/model/functions/functions.ts
@@ -1,7 +1,7 @@
 import { FAVORITE_PRODUCTS_LIMIT } from '@/shared/constants/constants'
 import { SESSION_STORAGE } from '@/shared/constants/sessionStorage'
 
-import { TProduct } from '../types/types'
+import type { TProduct } from '../types/types'
 
 /**
  * Ф-я проверяет наличие продукта в массив избранных продуктов в session storage

diff --git a/src/pages/FavoritesPage/FavoritesPage.module.scss b/src/pages/FavoritesPage/FavoritesPage.module.scss
@@ -1,11 +1,26 @@
+@use '../../shared/styles/utils/mixins' as media;
+
 .pageDescriptor {
   width: 100%;
   display: flex;
   flex-direction: column;
   gap: 10px;
 }
 
-.favoritePage_list {
+.favoritePage__container {
+  width: 100%;
+  display: flex;
+  justify-content: start;
+  align-items: start;
+  gap: 10px;
+
+  @include media.respond-to('large') {
+    flex-direction: column;
+    gap: 10px;
+  }
+}
+
+.favoritePage__list {
   max-width: calc(292px * 3 + 60px);
   display: flex;
   flex-wrap: wrap;

diff --git a/src/pages/FavoritesPage/FavoritesPage.tsx b/src/pages/FavoritesPage/FavoritesPage.tsx
@@ -1,43 +1,97 @@
+import { FC, KeyboardEvent, Suspense, useState } from 'react'
+
 import WrapperForMainContent from '@/components/WrapperForMainContent/WrapperForMainContent'
 import { useFavorite } from '@/entities/Favorite/model/hooks/useFavorite'
+import SideBarButton from '@/entities/SideBarButton'
+import SideBarMenuModal from '@/features/SideBarMenuModal'
+import { Routes } from '@/shared/config/routerConfig/routes'
+import { useResize } from '@/shared/libs/hooks/useResize'
 import { ECardView } from '@/shared/model/types/common'
 import Breadcrumbs from '@/shared/ui/Breadcrumbs/Breadcrumbs'
 import Heading from '@/shared/ui/Heading/Heading'
+import Modal from '@/shared/ui/Modal/Modal'
+import Spinner from '@/shared/ui/Spinner/Spinner'
 import { ProductsList } from '@/widgets/ProductsList/ProductsList'
+import SideBarMenu from '@/widgets/SideBarMenu'
 
 import styles from './FavoritesPage.module.scss'
 
+const links = [
+  { heading: 'Главная', href: '/' },
+  { heading: 'Личный Кабинет', href: Routes.LOGIN },
+  { heading: 'Избранные товары', href: '' }
+]
+
 /**
  * Страница с избранными товарами
  */
-const FavoritesPage = () => {
+export const FavoritesPage: FC = () => {
   const favoriteProducts = useFavorite()
+  const { isScreenMd } = useResize()
+  const [isModalOpen, setIsModalOpen] = useState<boolean>(false)
+  const [isModalClosing, setIsModalClosing] = useState<boolean>(false)
+  const [user, setUser] = useState<string>('Elon Musk') // TODO получать пользователя из редакса
+
+  const handleClick = () => {
+    setIsModalOpen(true)
+  }
+
+  const changeModalState = () => {
+    setIsModalOpen(!isModalOpen)
+  }
 
-  const links = [
-    { heading: 'Главная', href: '/' },
-    { heading: 'Избранные товары', href: '' }
-  ]
+  const handleLogOut = () => {
+    setUser('')
+  }
+
+  const handleKeyUp = (e: KeyboardEvent<HTMLDivElement>) => {
+    if (e.code === 'Enter' || e.code === 'Space') {
+      e.preventDefault()
+      handleLogOut()
+    }
+  }
 
   return (
     <WrapperForMainContent>
       <div className={styles.pageDescriptor}>
         <Heading>Избранные товары</Heading>
         <Breadcrumbs links={links} />
       </div>
-      <section className={styles.favoritePage_list}>
-        <ProductsList
-          items={{
-            category_name: '',
-            count: favoriteProducts.length,
-            next: '',
-            previous: '',
-            results: favoriteProducts
-          }}
-          cardView={ECardView.GRID}
-        />
-      </section>
+      <div className={styles.favoritePage__container}>
+        {isScreenMd ? (
+          <SideBarMenu user={user} handleLogOut={handleLogOut} />
+        ) : (
+          <SideBarButton onClick={handleClick} />
+        )}
+        <section className={styles.favoritePage__list}>
+          <ProductsList
+            items={{
+              category_name: '',
+              count: favoriteProducts.length,
+              next: '',
+              previous: '',
+              results: favoriteProducts
+            }}
+            cardView={ECardView.GRID}
+          />
+        </section>
+      </div>
+      {isModalOpen && (
+        <Modal
+          isModalOpen={isModalOpen}
+          onClose={changeModalState}
+          isModalClosing={isModalClosing}
+          setIsModalClosing={setIsModalClosing}>
+          <Suspense fallback={<Spinner />}>
+            <SideBarMenuModal
+              handleClose={changeModalState}
+              onKeyUp={handleKeyUp}
+              handleLogOut={handleLogOut}
+              user={user}
+            />
+          </Suspense>
+        </Modal>
+      )}
     </WrapperForMainContent>
   )
 }
-
-export default FavoritesPage
diff --git a/src/widgets/ProductItem/CardPreview/CardPreview.tsx b/src/widgets/ProductItem/CardPreview/CardPreview.tsx
@@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom'
 
 import IconCart from '@/assets/icons/IconCart.svg'
 import { useProductInCart } from '@/entities/CartEntity/model/hooks/cartHooks'
+import { useWithFavorite } from '@/entities/Favorite/model/hooks/useWithFavorie'
 import { CardPreviewFooter } from '@/features/CardPreviewFooter/CardPreviewFooter'
 import { CardPreviewHeader } from '@/features/CardPreviewHeader/CardPreviewHeader'
 import { ProductAvailability } from '@/features/ProductAvailability/ProductAvailability'
@@ -20,33 +21,69 @@ import styles from './CardPreview.module.scss'
 const LazyQuickPurchaseForm = lazy(() => import('@/features/QuickPurchase/index'))
 
 type Props = {
-  code: number
+  name: string
   price: number
   brand: string
   slug: string
+  description: string
+  code: number
   images: TImgList
+  label_hit: boolean
+  label_popular: boolean
   quantity: number
   id: number
 }
 
 /**
  * Компонент с контентом поп-апа предварительного просмотра товара.
- * @param {number} code - артикул товара;
+ * @param {string} name - название товара;
  * @param {number} price - цена;
  * @param {string} brand - производитель;
  * @param {string} slug - URL для страницы товара;
+ * @param {string} description - описание;
+ * @param {number} code - артикул;
  * @param {TImgList} images - массив с изображениями;
+ * @param {boolean} label_popular - лейбл Популярный на товаре;
+ * @param {boolean} label_hit - лейбл Хит на товаре;
  * @param {number} quantity - количество на склаладе (если  > 0, то товар считается в наличии);
- * @param {number} id - id товара в Backend;
+ * @param {number} id - id товара в backend;
  */
-export const CardPreview: FC<Props> = ({ code, images, slug, brand, quantity, price, id }) => {
+export const CardPreview: FC<Props> = ({
+  name,
+  price,
+  brand,
+  slug,
+  description,
+  code,
+  images,
+  label_popular,
+  label_hit,
+  quantity,
+  id
+}) => {
   const navigate = useNavigate()
   const { isInCart, handleAddToCart } = useProductInCart(slug, id)
-  const [isLiked, setIsLiked] = useState<boolean>(false)
   const [isInCompared, setIsInCompared] = useState<boolean>(false)
   const [isModalOpen, setIsModalOpen] = useState(false)
   const [isModalClosing, setIsModalClosing] = useState(false)
   const [showPopup, setShowPopup] = useState<boolean>(false)
+  const { isLiked, handleLike } = useWithFavorite({
+    id,
+    category: '',
+    wb_urls: '',
+    is_deleted: false,
+    wholesale: 0,
+    name,
+    brand,
+    slug,
+    description,
+    price,
+    code,
+    images,
+    label_popular,
+    label_hit,
+    quantity
+  })
 
   const handleQuickPurchase = () => {
     setIsModalOpen(true)
@@ -56,10 +93,6 @@ export const CardPreview: FC<Props> = ({ code, images, slug, brand, quantity, pr
     navigate(`${Routes.PRODUCT}/${slug}`)
   }
 
-  const handleLike = () => {
-    setIsLiked(!isLiked)
-  }
-
   const handleAddToCompared = () => {
     setIsInCompared(!isInCompared)
   }

diff --git a/src/widgets/ProductItem/CardPreview/CardPrewiew.stories.tsx b/src/widgets/ProductItem/CardPreview/CardPrewiew.stories.tsx
@@ -20,6 +20,11 @@ export const Default: Story = {
     quantity: 999,
     brand: 'MaxBoom',
     price: 999,
-    id: 12345
+    id: 12345,
+    name: '3W Clinic Vitamin C Foam Cleansing Пенка для умывания с витамином С',
+    description:
+      'Пенка для умывания с витамином С мягко осветляет и улучшает общий тон кожи, устраняет красноту, отбеливает нежелательную пигментацию и пост-акне, увлажняет и тонизирует.\n\nПенка деликатно очищает кожу от всех видов загрязнений, остатков макияжа, излишков кожного сала и пыли.\n\nВитамин С - обладает выраженным антиоксидантным действием, эффективно защищая кожу от повреждений ультрафиолетовым излучением, инициируют выработку собственного коллагена, способствуют повышению эластичности, упругости и увлажненности кожи.',
+    label_hit: false,
+    label_popular: false
   }
 }
diff --git a/src/widgets/ProductItem/ProductItem.tsx b/src/widgets/ProductItem/ProductItem.tsx
@@ -111,6 +111,10 @@ export const ProductItem: FC<TProductCard> = ({
             slug={slug}
             images={images}
             quantity={quantity}
+            name={name}
+            description={description}
+            label_popular={label_popular}
+            label_hit={label_hit}
           />
         </Modal>
       )}