Merge pull request #393 from Studio-Yandex-Practicum/enhancement_381_…

…favorite_page Enhancement 381 favorite page
Studio-Yandex-Practicum · May 21, 2024 · 7c27885 · 7c27885
2 parents 403a902 + f5fbbd2
commit 7c27885
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 61 deletions.
diff --git a/src/pages/FavoritesPage/FavoritesPage.module.scss b/src/pages/FavoritesPage/FavoritesPage.module.scss
@@ -1,28 +1,39 @@
 @use '../../shared/styles/utils/mixins' as media;
+@use '../../shared/styles/utils/variables' as color;
 
-.pageDescriptor {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.favoritePage__container {
-  width: 100%;
-  display: flex;
-  justify-content: start;
-  align-items: start;
-  gap: 10px;
-
-  @include media.respond-to('middle') {
+.favoritePage {
+  &__pageDescriptor {
+    width: 100%;
+    display: flex;
     flex-direction: column;
     gap: 10px;
   }
-}
 
-.favoritePage__list {
-  max-width: calc(292px * 3 + 60px);
-  display: flex;
-  flex-wrap: wrap;
-  gap: 30px;
+  &__container {
+    width: 100%;
+    display: flex;
+    justify-content: start;
+    align-items: start;
+    gap: 10px;
+
+    @include media.respond-to('middle') {
+      flex-direction: column;
+      gap: 10px;
+    }
+  }
+
+  &__list {
+    max-width: calc(292px * 3 + 60px);
+    display: flex;
+    flex-wrap: wrap;
+    gap: 30px;
+  }
+
+  &__span {
+    font-size: 15px;
+    line-height: 1.5;
+    font-weight: 400;
+    color: color.$black;
+    margin-left: 20px;
+  }
 }
diff --git a/src/pages/FavoritesPage/FavoritesPage.tsx b/src/pages/FavoritesPage/FavoritesPage.tsx
@@ -52,46 +52,52 @@ export const FavoritesPage: FC = () => {
   }
 
   return (
-    <WrapperForMainContent>
-      <div className={styles.pageDescriptor}>
-        <Heading>Избранные товары</Heading>
-        <Breadcrumbs links={links} />
-      </div>
-      <div className={styles.favoritePage__container}>
-        {isScreenMd ? (
-          <SideBarMenu user={user} handleLogOut={handleLogOut} />
-        ) : (
-          <SideBarButton onClick={handleClick} />
+    <div className={styles.favoritePage}>
+      <WrapperForMainContent>
+        <div className={styles.favoritePage__pageDescriptor}>
+          <Heading>Избранные товары</Heading>
+          <Breadcrumbs links={links} />
+        </div>
+        <div className={styles.favoritePage__container}>
+          {isScreenMd ? (
+            <SideBarMenu user={user} handleLogOut={handleLogOut} />
+          ) : (
+            <SideBarButton onClick={handleClick} />
+          )}
+          {favoriteProducts.length > 0 ? (
+            <section className={styles.favoritePage__list}>
+              <ProductsList
+                items={{
+                  category_name: '',
+                  count: favoriteProducts.length,
+                  next: '',
+                  previous: '',
+                  results: favoriteProducts
+                }}
+                cardView={ECardView.GRID}
+              />
+            </section>
+          ) : (
+            <span className={styles.favoritePage__span}>Ваши закладки пусты</span>
+          )}
+        </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>
         )}
-        <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>
+      </WrapperForMainContent>
+    </div>
   )
 }