fix: PR comments part 2

src/components/PaperCard/paper-card/__image/paper-card__image.css

@@ -20,4 +20,3 @@
     height: 252px;
   }
 }
-

src/components/PaperCard/paper-card/__text/paper-card__text.css

@@ -6,7 +6,6 @@
   font-size: 24px;
   line-height: 29px;
   font-weight: 500;
-  font-family:  var(--font-family-title);
+  font-family: var(--font-family-title);
   color: var(--color-text-base);
 }
-

src/components/PapersContent/PapersContent.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import PapersGrid from '../PapersGrid/PapersGrid';
+
+const PapersContent = ({ papersList, isLoading, isError }) => {
+  if (isLoading && papersList.length === 0) {
+    return <p>Загрузка статей...</p>;
+  }
+
+  if (isError || papersList.length === 0) {
+    return <p>Упс, произошла ошибка при загрузке статей. Пожалуйста, попробуйте обновить страницу или повторите попытку позже</p>;
+  }
+
+  return <PapersGrid papersList={papersList} />;
+};
+
+export default PapersContent;

src/components/PapersGrid/PapersGrid.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import PaperCard from '../PaperCard/PaperCard';
+import './PapersGrid.scss';
+
+const PapersGrid = ({ papersList }) => {
+  return (
+    <ul className='papers-grid'>
+      {papersList.map((card) => {
+        return (
+          <li className='papers-grid__element' key={card.id}>
+            <PaperCard id={card.id} photo={card.profile_image} title={card.header} />
+          </li>
+        );
+      })}
+    </ul>
+  );
+};
+
+export default PapersGrid;

src/components/PapersGrid/PapersGrid.scss

@@ -0,0 +1,2 @@
+@import url('./styles/papers-grid.scss');
+@import url('./styles/__element/papers-grid__element.scss');

src/pages/PapersPage/styles/__grid-element/papers__grid-element.css → src/components/PapersGrid/styles/__element/papers-grid__element.scss

@@ -1,4 +1,4 @@
-.papers__grid-element {
+.papers-grid__element {
   min-width: 288px;
   min-height: 192px;
   margin: 0;
@@ -8,22 +8,21 @@
 }
 
 @media (min-width: 768px) {
-  .papers__grid-element {
+  .papers-grid__element {
     min-width: 205px;
     min-height: 263px;
   }
 }
 
 @media (min-width: 1440px) {
-  .papers__grid-element {
+  .papers-grid__element {
     min-width: 400px;
     min-height: 416px;
     padding: 8px 8px 24px;
-    border: 2px solid rgba(0,0,0,0);
+    border: 2px solid rgba(0, 0, 0, 0);
   }
 }
 
-.papers__grid-element:hover {
+.papers-grid__element:hover {
   border-color: var(--color-accent-base);
 }
-

src/pages/PapersPage/styles/__grid/papers__grid.css → src/components/PapersGrid/styles/papers-grid.scss

@@ -1,4 +1,4 @@
-.papers__grid {
+.papers-grid {
   display: grid;
   width: 100%;
   margin: 0 auto 32px;
@@ -9,17 +9,16 @@
 }
 
 @media (min-width: 768px) {
-  .papers__grid {
-    margin: 0 auto 40px;
+  .papers-grid {
+    margin-bottom: 40px;
     gap: 20px 27.5px;
     grid-template-columns: repeat(3, 1fr);
   }
 }
 
 @media (min-width: 1440px) {
-  .papers__grid {
-    margin: 0 auto 60px;
+  .papers-grid {
+    margin-bottom: 60px;
     gap: 36px 24px;
   }
 }
-

src/pages/PapersPage/PapersPage.jsx

@@ -1,16 +1,18 @@
-import React, { useState, useEffect, useMemo } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useMediaQuery } from 'react-responsive';
 import './PapersPage.scss';
 import MainContainer from '../../components/MainContainer/MainContainer';
-import PaperCard from '../../components/PaperCard/PaperCard';
 import Button from '../../ui/Button/Button';
 import papersApi from './api';
-
-const PapersAmountByBreakpoint = { mobile: 2, tablet: 4, desktop: 8 };
+import PapersContent from '../../components/PapersContent/PapersContent';
 
 const PapersPage = () => {
   const [papersList, setPapersList] = useState([]); // список отображаемых карточек со статьями
   const [hasMorePapers, setHasMorePapers] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isError, setIsError] = useState(false);
+
+  const papersAmountByBreakpoint = { mobile: 2, tablet: 4, desktop: 8 };
 
   const isMobile = useMediaQuery({
     maxWidth: 767,
@@ -21,22 +23,24 @@ const PapersPage = () => {
     minWidth: 768,
   });
 
-  const isDesktop = useMediaQuery({
-    minWidth: 1440,
-  });
-
-  const papersAmount = useMemo(() => {
-    switch (true) {
-    case isMobile:
-      return PapersAmountByBreakpoint.mobile;
-    case isTablet:
-      return PapersAmountByBreakpoint.tablet;
-    default:
-      return PapersAmountByBreakpoint.desktop;
+  const getPapersAmount = () => {
+    if (isMobile) {
+      return papersAmountByBreakpoint.mobile;
+    }
+    if (isTablet) {
+      return papersAmountByBreakpoint.tablet;
     }
-  }, [isMobile, isTablet, isDesktop]);
+    return papersAmountByBreakpoint.desktop;
+  };
+
+  const papersAmount = getPapersAmount();
 
   const fetchPapers = () => {
+    if (isLoading) return;
+
+    setIsLoading(true);
+    setIsError(false);
+
     papersApi
       .getPapers(papersAmount, papersList.length)
       .then((res) => {
@@ -45,6 +49,9 @@ const PapersPage = () => {
       })
       .catch((err) => {
         throw new Error(err);
+      })
+      .finally(() => {
+        setIsLoading(false);
       });
   };
 
@@ -61,32 +68,13 @@ const PapersPage = () => {
       <main className='main papers'>
         <div className='papers__head-block'>
           <h1 className='papers__title standart-font_type_h2'>Полезные статьи</h1>
-          <Button className='margin-left_auto papers__offer-button' to='/shelters' link>
+          <Button className='papers__offer-button' to='/shelters' link>
             Хочу помогать
           </Button>
         </div>
-        <ul className='papers__grid'>
-          {papersList && papersList.length !== 0 ? (
-            papersList.map((card) => {
-              return (
-                <li className='papers__grid-element' key={card.id}>
-                  <PaperCard
-                    id={card.id}
-                    photo={card.profile_image}
-                    title={card.header}
-                  />
-                </li>
-              );
-            })
-          ) : (
-            <p>Не удалось загрузить статьи</p>
-          )}
-        </ul>
+        <PapersContent isLoading={isLoading} isError={isError} papersList={papersList} />
         {hasMorePapers && (
-          <Button
-            className='papers__load-more-button'
-            onClick={handleClick}
-          >
+          <Button className='papers__load-more-button' onClick={handleClick}>
             Больше статей
           </Button>
         )}

src/pages/PapersPage/PapersPage.scss

@@ -1,7 +1,5 @@
 @import url('./styles/papers.css');
 @import url('./styles/__head-block/papers__head-block.css');
 @import url('./styles/__title/papers__title.css');
-@import url('./styles/__grid/papers__grid.css');
-@import url('./styles/__grid-element/papers__grid-element.css');
 @import url('./styles/__offer-button/papers__offer-button.scss');
 @import url('./styles/__load-more-button/papers__load-more-button.scss');

src/pages/PapersPage/styles/__head-block/papers__head-block.css

@@ -17,4 +17,3 @@
     padding: 44px 0;
   }
 }
-

src/pages/PapersPage/styles/__title/papers__title.css

@@ -1,9 +1,4 @@
 .papers__title {
   margin: 0;
   padding: 0;
-  font-size: 20px;
-  line-height: 24px;
-  font-weight: 600;
 }
-
-