Исправил путаницу в названиях маршрутов, поскольку ранее маршрут стра…

…ницы отзывов назывался reviews, а страница с обзорами тоже reviews. Теперь отзывы это feedbacks. Кроме того добавил в shared функцию прокрутки скрола в начало, для исправления поведения react-router. Добавил вызов функции на страницы отзывов и продукта.

src/app/router/AppRouter/ui/AppRouter.tsx

@@ -20,6 +20,7 @@ import MainPage from '@/pages/MainPage/MainPage'
 import { PrivacyPage } from '@/pages/PrivacyPage/PrivacyPage'
 import { ProductPage } from '@/pages/ProductPage/ProductPage'
 import { ProductsPage } from '@/pages/ProductsPage/ProductsPage'
+import { ReviewsPage } from '@/pages/ReviewsPage/ReviewsPage'
 import RootPage from '@/pages/RootPage/RootPage'
 import SearchResultsPage from '@/pages/SearchResultsPage/SearchResultsPage'
 import { TermsPage } from '@/pages/TermsPage/TermsPage'
@@ -95,9 +96,13 @@ export const AppRouter = createBrowserRouter([
         element: <ProductsPage />
       },
       {
-        path: Routes.REVIEWS + '/:index',
+        path: Routes.FEEDBACKS + '/:index',
         element: <FeedbackPage />
       },
+      {
+        path: Routes.REVIEWS,
+        element: <ReviewsPage />
+      },
       {
         path: Routes.SEARCH,
         element: <SearchResultsPage />

src/entities/ReviewCard/ui/ReviewCardFeedback/ReviewCardFeedback.tsx

@@ -55,7 +55,7 @@ export const ReviewCardFeedback: FC<IReviewCardFeedbackProps> = ({ pk, text, sco
       <Paragraph className={styles.reviewCardFeedback__review}>{text}</Paragraph>
 
       <Subheading>{newDate}</Subheading>
-      <Link to={`${Routes.REVIEWS}/${index}`} className={styles.reviewCardFeedback__link}>
+      <Link to={`${Routes.FEEDBACKS}/${index}`} className={styles.reviewCardFeedback__link}>
         Читать полный отзыв
       </Link>
     </div>

src/entities/ReviewCard/ui/ReviewCardStore/ReviewCardStore.tsx

@@ -29,7 +29,7 @@ export const ReviewCardStore: FC<IReviewCardStoreProps> = ({ score }) => {
       <Paragraph className={styles.paragraph}>{FEEDBACK_STORE_COMMENT}</Paragraph>
       <Paragraph className={styles.paragraph}>
         Вы можете&nbsp;
-        <Link to={`${Routes.REVIEWS}/0`} className={styles.link}>
+        <Link to={`${Routes.FEEDBACKS}/0`} className={styles.link}>
           оставить отзыв
         </Link>
         &nbsp; о нашем магазине или&nbsp;

src/mockData/headerMenuData.ts

@@ -21,7 +21,7 @@ export const headerMenuData = [
   },
   {
     title: 'Отзывы о магазине',
-    link: Routes.REVIEWS
+    link: Routes.FEEDBACKS
   },
   {
     title: 'Контакты',

src/pages/FeedbackPage/FeedbackPage.tsx

@@ -9,6 +9,7 @@ import {
   getNextFeedbacks
 } from '@/features/Reviews/model/slice/feedbacksSlice'
 import { bodyScrollControl } from '@/shared/libs/helpers/popupHelper'
+import { scrollPageToTop } from '@/shared/libs/helpers/scrollPageToTop'
 import { useAppDispatch } from '@/shared/libs/hooks/store'
 import { useResize } from '@/shared/libs/hooks/useResize'
 import Breadcrumbs from '@/shared/ui/Breadcrumbs/Breadcrumbs'
@@ -42,6 +43,8 @@ export const FeedbackPage = () => {
     dispatch(getFirstFeedbacks())
 
     dispatch(getAverageMark())
+
+    scrollPageToTop()
   }, [])
 
   const fetchNextPage = () => {
@@ -63,7 +66,7 @@ export const FeedbackPage = () => {
         </div>
         <div className={styles.feedbackpage__container}>
           <FeedbackList
-            targetId={(index && +index) || 0}
+            targetId={index ? +index : undefined}
             feedbacks={feedback.feedbacks}
             isLoading={feedback.isLoading}
             nextPage={feedback.next}

src/pages/ProductPage/ProductPage.tsx

@@ -3,6 +3,7 @@ import { useSelector } from 'react-redux'
 import { useParams } from 'react-router'
 
 import { StateSchema } from '@/app/providers/StoreProvider'
+import { scrollPageToTop } from '@/shared/libs/helpers/scrollPageToTop'
 import { useAppDispatch } from '@/shared/libs/hooks/store'
 import Breadcrumbs from '@/shared/ui/Breadcrumbs/Breadcrumbs'
 import Heading from '@/shared/ui/Heading/Heading'
@@ -30,6 +31,8 @@ export const ProductPage = () => {
     { heading: productStore.product.name, href: '' }
   ]
 
+  useEffect(scrollPageToTop, [])
+
   useEffect(() => {
     if (slug) dispatch(getProduct(slug))
   }, [slug])

src/pages/ReviewsPage/ReviewsPage.module.scss

@@ -0,0 +1,27 @@
+@use '../../shared/styles/utils/mixins' as media;
+
+.reviewsPage {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+
+  &__pageDescriptor {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  &__contant {
+    margin-top: 40px;
+    width: 100%;
+    display: flex;
+    align-items: flex-start;
+    gap: 25px;
+
+    @include media.respond-to('large') {
+      flex-direction: column-reverse;
+    }
+  }
+}

src/pages/ReviewsPage/ReviewsPage.tsx

@@ -0,0 +1,35 @@
+import { FC } from 'react'
+
+import { Routes } from '@/shared/config/routerConfig/routes'
+import Breadcrumbs from '@/shared/ui/Breadcrumbs/Breadcrumbs'
+import Heading from '@/shared/ui/Heading/Heading'
+import Paragraph from '@/shared/ui/Paragraph/Paragraph'
+import WrapperForMainContent from '@/shared/ui/WrapperForMainContent/WrapperForMainContent'
+
+import styles from './ReviewsPage.module.scss'
+
+/**
+ * Страница с обзорами.
+ * TODO наполнить страницу смыслом
+ */
+export const ReviewsPage: FC = () => {
+  const links = [
+    { heading: 'Главная', href: '/' },
+    { heading: 'Блог', href: Routes.BLOG },
+    { heading: 'Обзоры', href: '' }
+  ]
+
+  return (
+    <WrapperForMainContent>
+      <div className={styles.reviewsPage}>
+        <div className={styles.reviewsPage__pageDescriptor}>
+          <Heading>Обзоры</Heading>
+          <Breadcrumbs links={links} />
+        </div>
+        <div className={styles.reviewsPage__contant}>
+          <Paragraph>Обзоры</Paragraph>
+        </div>
+      </div>
+    </WrapperForMainContent>
+  )
+}

src/shared/config/routerConfig/routes.ts

@@ -15,6 +15,7 @@ export enum Routes {
   PRIVACY = '/privacy',
   PRODUCTS = '/products/',
   PRODUCTS_ID = '/products/:id',
+  FEEDBACKS = '/feedbacks',
   REVIEWS = '/reviews',
   SEARCH = '/search/:query',
   TERMS = '/terms',

src/shared/libs/helpers/scrollPageToTop.ts

@@ -0,0 +1,6 @@
+/**
+ * Функция выполняет скролл в верх страницы
+ */
+export const scrollPageToTop = () => {
+  window.scrollTo(0, 0)
+}

src/shared/mockData/catalogListData.ts

@@ -3,7 +3,7 @@ import { Routes } from '@/shared/config/routerConfig/routes'
 export const linkItems = [
   { index: 0, label: 'Блог', to: Routes.BLOG },
   { index: 1, label: 'Новости', to: Routes.NEWS },
-  { index: 2, label: 'Отзывы о магазине', to: `${Routes.REVIEWS}/0` },
+  { index: 2, label: 'Отзывы о магазине', to: `${Routes.FEEDBACKS}/0` },
   { index: 3, label: 'Контакты', to: Routes.CONTACTS }
 ]
 

src/widgets/FeedbackList/FeedbackList.tsx

@@ -8,7 +8,7 @@ import styles from './FeedbackList.module.scss'
 import type { IFeedback } from './model/types/types'
 
 interface IFeedbackListProps {
-  targetId: number
+  targetId: number | undefined
   feedbacks: IFeedback[]
   isLoading: boolean
   nextPage: Nullable<number>
@@ -33,7 +33,7 @@ export const FeedbackList: FC<IFeedbackListProps> = ({
   const virtuosoRef = useRef<VirtuosoHandle>(null)
 
   useEffect(() => {
-    if (virtuosoRef && virtuosoRef.current) {
+    if (virtuosoRef && virtuosoRef.current && targetId) {
       virtuosoRef.current.scrollToIndex({ index: targetId, behavior: 'smooth' })
     }
   }, [targetId])

src/widgets/ReviewsBlock/ui/ReviewsBlock.tsx

@@ -46,7 +46,7 @@ const ReviewsBlock: FC = () => {
           alt="картинка"
           isLink={true}
           subtitle={LINK_REVIEWS_ALL}
-          link={`${Routes.REVIEWS}/${0}`}
+          link={`${Routes.FEEDBACKS}/${0}`}
         />
         {isScreenMd ? (
           <ul className={styles.grid}>
@@ -93,7 +93,7 @@ const ReviewsBlock: FC = () => {
                 index={index}
               />
             ))}
-            <LinkButton link={`${Routes.REVIEWS}/${0}`} text={LINK_REVIEWS_ALL} />
+            <LinkButton link={`${Routes.FEEDBACKS}/${0}`} text={LINK_REVIEWS_ALL} />
           </Scroll>
         )}
       </section>