Merge pull request #391 from Studio-Yandex-Practicum/bag_386_header

Заменил моковыве данные в корзине в шапке на реальные данные из слайс…
Studio-Yandex-Practicum · May 21, 2024 · 403a902 · 403a902
2 parents 18adcf3 + 5c70b92
commit 403a902
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 15 deletions.
diff --git a/src/entities/HeaderAccount/HeaderAccount.stories.tsx b/src/entities/HeaderAccount/HeaderAccount.stories.tsx
@@ -16,7 +16,7 @@ type Story = StoryObj<typeof meta>
 
 export const Default: Story = () => {
   const counter = 50
-  const total = '2568 p'
+  const total = 2568
 
   return (
     <div style={{ width: '500px' }}>
@@ -27,5 +27,5 @@ export const Default: Story = () => {
 
 Default.args = {
   counter: 50,
-  total: '2568 p'
+  total: 2568
 }
diff --git a/src/entities/HeaderAccount/HeaderAccount.tsx b/src/entities/HeaderAccount/HeaderAccount.tsx
@@ -29,7 +29,7 @@ export type HeaderAccountProps = {
   changeSearchModalState?: () => void
   handleClose?: () => void
   counter: number
-  total: string
+  total: number
 }
 
 const LazyLoginForm = lazy(() => import('@/features/login/index'))
@@ -40,7 +40,7 @@ const LazyLoginForm = lazy(() => import('@/features/login/index'))
  * @param {boolean} changeSearchModalState - состояние открытия модального окна поиска;
  * @param {function} handleClose - функция закрытия модального окна;
  * @param {string} counter - счетчик количества товаров в корзине;
- * @param {string} total - полная стоимость;
+ * @param {number} total - полная стоимость;
  */
 const HeaderAccount: FC<HeaderAccountProps> = ({
   isMenuModalOpen,
@@ -197,7 +197,7 @@ const HeaderAccount: FC<HeaderAccountProps> = ({
                         ? `${styles.headerAccount__cartTotal} ${styles.headerAccount__cartTotal_dark}`
                         : `${styles.headerAccount__cartTotal}`
                     }>
-                    {total}
+                    {total.toFixed(0)} ₽
                   </Paragraph>
                 </div>
               </>

diff --git a/src/features/HeaderMenuModal/ui/HeaderMenuModal.stories.tsx b/src/features/HeaderMenuModal/ui/HeaderMenuModal.stories.tsx
@@ -39,16 +39,21 @@ export const Default: Story = () => {
     }
   ]
 
+  const counter = 5
+  const total = 500
+
   return (
     <div style={{ width: '500px' }}>
       <HeaderMenuModal
         categories={categories}
         phoneNumber={phoneNumber}
         isMenuModalOpen={true}
         handleClose={() => {}}
+        counter={counter}
+        total={total}
       />
     </div>
   )
 }
 
-Default.args = {}
+Default.args = { counter: 5, total: 500 }
diff --git a/src/features/HeaderMenuModal/ui/HeaderMenuModal.tsx b/src/features/HeaderMenuModal/ui/HeaderMenuModal.tsx
@@ -7,15 +7,14 @@ import ContactCard from '@/entities/ContactCard/ContactCard'
 import HeaderAccount from '@/entities/HeaderAccount/HeaderAccount'
 import ModalHeading from '@/entities/ModalHeading'
 import { headerMenuData } from '@/mockData/headerMenuData'
-import { headerAccountData } from '@/shared/mockData/headerAccountData'
 import { messengerArray } from '@/shared/model/types/messengerArray'
 import Link from '@/shared/ui/Link/Link'
 import Paragraph from '@/shared/ui/Paragraph/Paragraph'
 
 import HeaderMenuModalCatalog from '../HeaderMenuModalCatalog/HeaderMenuModalCatalog'
 import HeaderMenuModalLink from '../HeaderMenuModalLink/HeaderMenuModalLink'
 import HeaderMenuModalSublinks from '../HeaderMenuModalSublinks/HeaderMenuModalSublinks'
-import { ICategory } from '../model/types/types'
+import type { ICategory } from '../model/types/types'
 
 import styles from './HeaderMenuModal.module.scss'
 
@@ -24,6 +23,8 @@ interface IHeaderMenuModal {
   phoneNumber?: string
   isMenuModalOpen?: boolean
   handleClose?: () => void
+  counter: number
+  total: number
 }
 
 /**
@@ -34,7 +35,14 @@ interface IHeaderMenuModal {
  * @param {function} handleClose - функция закрытия модального окна;
  */
 
-const HeaderMenuModal: FC<IHeaderMenuModal> = ({ categories, phoneNumber, isMenuModalOpen, handleClose }) => {
+const HeaderMenuModal: FC<IHeaderMenuModal> = ({
+  categories,
+  phoneNumber,
+  isMenuModalOpen,
+  handleClose,
+  counter,
+  total
+}) => {
   const [isActive, setIsActive] = useState(false)
   const [isCatalog, setIsCatalog] = useState(false)
   const [choice, setChoice] = useState(0)
@@ -63,7 +71,8 @@ const HeaderMenuModal: FC<IHeaderMenuModal> = ({ categories, phoneNumber, isMenu
             <HeaderAccount
               handleClose={handleClose}
               isMenuModalOpen={isMenuModalOpen}
-              {...headerAccountData}
+              counter={counter}
+              total={total}
             />
           </div>
         </>

diff --git a/src/widgets/Header/Header.tsx b/src/widgets/Header/Header.tsx
@@ -1,9 +1,9 @@
 import classNames from 'classnames'
 import { FC, lazy, Suspense, useEffect, useMemo, useState } from 'react'
-import { useDispatch, useSelector } from 'react-redux'
+import { useSelector } from 'react-redux'
 
-import { AppDispatch } from '@/app/providers/StoreProvider/config/store'
 import MenuIcon from '@/assets/icons/iconMenu.svg'
+import { useCartSelector } from '@/entities/CartEntity/model/hooks/sliceHooks'
 import {
   getLoading,
   selectCategories,
@@ -17,9 +17,9 @@ import SearchProduct from '@/features/SearchProduct'
 import { Routes } from '@/shared/config/routerConfig/routes'
 import ArrowIcon from '@/shared/icons/arrow.svg'
 import IconCategories from '@/shared/icons/IconCategories.svg'
+import { useAppDispatch } from '@/shared/libs/hooks/store'
 import { useResize } from '@/shared/libs/hooks/useResize'
 import { linkItems } from '@/shared/mockData/catalogListData'
-import { headerAccountData } from '@/shared/mockData/headerAccountData'
 import { Button } from '@/shared/ui/Button/Button'
 import CatalogLink from '@/shared/ui/CatalogLink/CatalogLink'
 import CatalogLinkSkeleton from '@/shared/ui/CatalogLink/ui/skeleton/CatalogLinkSkeleton'
@@ -47,7 +47,8 @@ const HeaderMenuModal = lazy(() => import('@/features/HeaderMenuModal'))
  */
 
 const Header: FC = () => {
-  const dispatch = useDispatch<AppDispatch>()
+  const dispatch = useAppDispatch()
+  const cart = useCartSelector()
   const categories = useSelector(selectCategories)
   const coreBaseData = useSelector(getCoreBaseHeaderSelector)
   const displayedCategories = useSelector(selectDisplayedCategories)
@@ -165,6 +166,8 @@ const Header: FC = () => {
               phoneNumber={phoneNumber}
               isMenuModalOpen={isMenuModalOpen}
               handleClose={closeModal}
+              counter={cart && cart.cart && cart.cart.products?.length}
+              total={cart && cart.cart?.cart_full_price}
             />
           </Suspense>
         </Modal>
@@ -230,7 +233,11 @@ const Header: FC = () => {
 
           {isScreenLg && <SearchProduct />}
 
-          <HeaderAccount changeSearchModalState={changeSearchModalState} {...headerAccountData} />
+          <HeaderAccount
+            changeSearchModalState={changeSearchModalState}
+            counter={cart && cart.cart && cart.cart.products?.length}
+            total={cart && cart.cart?.cart_full_price}
+          />
 
           {isScreenLg && (
             <ContextMenuElement content={catalogNode} className={styles.header__catalog}>