Merge pull request #587 from Studio-Yandex-Practicum/intersection-obs…

…erver-polyfill

Добавление полифила IntersectionObserver

package.json

@@ -31,6 +31,7 @@
     "classnames": "2.3.1",
     "date-fns": "2.29.3",
     "express": "4.17.2",
+    "intersection-observer": "0.12.2",
     "keen-slider": "6.8.5",
     "lodash": "4.17.21",
     "next": "12.0.8",

src/components/donation-link/donation-link.module.css

@@ -33,7 +33,7 @@
   }
 
   &:hover,
-  &.active { 
+  &.active {
     &::before,
     &::after {
       visibility: visible;

src/components/main-header/main-header.tsx

@@ -11,7 +11,7 @@ import { Menu } from 'components/ui/menu';
 import { donationPath } from 'shared/constants/donation-path';
 import { mainNavigationItems } from 'shared/constants/main-navigation-items';
 import { socialLinkItems } from 'shared/constants/social-link-items';
-import { useIntersectionObserver } from 'shared/hooks/use-intersection-observer';
+import { useIntersection } from 'shared/hooks/use-intersection';
 
 import styles from './main-header.module.css';
 
@@ -35,7 +35,7 @@ export const MainHeader: React.VFC<MainHeaderProps> = (props) => {
   } = props;
 
   const router = useRouter();
-  const [containerElRef, isContainerElInViewport] = useIntersectionObserver({ threshold: 0.1 });
+  const [containerElRef, isContainerElInViewport] = useIntersection({ threshold: 0.1 });
 
   return (
     <div

src/components/main-layout/feed/main-layout-feed.module.css

@@ -35,18 +35,20 @@
   }
 
   /* Псевдоэлемент для создания дополнительной зоны, где скрытие не будет происходить сразу */
-  &:after {
-    content: '';
+  &::after {
     position: absolute;
+    z-index: -1;  /* Псевдоэлемент не будет влиять на другие элементы */
     top: -40px;   /* 40px выше блока */
-    left: -40px;  /* 40px левее блока */
     right: -40px; /* 40px правее блока */
-    bottom: -40px;/* 40px ниже блока */
-    z-index: -1;  /* Псевдоэлемент не будет влиять на другие элементы */
+    bottom: -40px;
+    left: -40px;  /* 40px левее блока */
+    content: "";
+
+    /* 40px ниже блока */
   }
 
   /* Если курсор покидает расширенную область, блок скрывается */
-  &:not(:hover):after {
+  &:not(:hover)::after {
     transition-delay: .4s; /* Добавляем небольшую задержку перед скрытием */
   }
 }

src/components/navbar/navbar.module.css

@@ -42,8 +42,8 @@
     right: 0;
     bottom: 0;
     display: block;
-    border-right: 1px solid black;
     height: 80%;
+    border-right: 1px solid black;
     background-color: var(--coal);
     content: "";
   }

src/pages/[author].tsx

@@ -11,7 +11,7 @@ import { PlayList } from 'components/play-list';
 import { Section } from 'components/section';
 import { SEO } from 'components/seo';
 import { useSettings } from 'services/api/settings-adapter';
-import { fetcher } from 'services/fetcher';
+import { fetcher, HttpRequestError } from 'services/fetcher';
 import * as breakpoints from 'shared/breakpoints.js';
 import { notFoundResult } from 'shared/constants/server-side-props';
 import { InternalServerError } from 'shared/helpers/internal-server-error';
@@ -114,13 +114,17 @@ export const getServerSideProps = async ({ params }: GetServerSidePropsContext<R
 
   try {
     author = await fetcher<AuthorRetrieve>(`/library/authors/${slug}/`);
-  } catch ({ statusCode }) {
-    switch (statusCode) {
-    case 404:
-      return notFoundResult;
-    default:
-      throw new InternalServerError();
+  } catch (error) {
+    if (error instanceof HttpRequestError) {
+      switch (error.response.statusCode) {
+      case 404:
+        return notFoundResult;
+      default:
+        throw new InternalServerError();
+      }
     }
+
+    throw error;
   }
 
   return {

src/pages/blog/[id].tsx

@@ -14,7 +14,7 @@ import { PageBreadcrumbs } from 'components/page';
 import { Section } from 'components/section';
 import { SEO } from 'components/seo';
 import { ShareLinks } from 'components/share-links';
-import { fetcher } from 'services/fetcher';
+import { fetcher, HttpRequestError } from 'services/fetcher';
 import { notFoundResult } from 'shared/constants/server-side-props';
 import { InternalServerError } from 'shared/helpers/internal-server-error';
 
@@ -106,13 +106,17 @@ export const getServerSideProps = async ({ params }: GetServerSidePropsContext<R
 
   try {
     data = await fetcher<BlogItemDetailOutput>(`/blog/${id}/`);
-  } catch ({ statusCode }) {
-    switch (statusCode) {
-    case 404:
-      return notFoundResult;
-    default:
-      throw new InternalServerError();
+  } catch (error) {
+    if (error instanceof HttpRequestError) {
+      switch (error.response.statusCode) {
+      case 404:
+        return notFoundResult;
+      default:
+        throw new InternalServerError();
+      }
     }
+
+    throw error;
   }
 
   return {

src/pages/history/[year].tsx

@@ -6,7 +6,7 @@ import { HistoryTitle } from 'components/history-page/title';
 import { SEO } from 'components/seo';
 import { Menu } from 'components/ui/menu';
 import { fetchSettings } from 'services/api/settings-adapter';
-import { fetcher } from 'services/fetcher';
+import { fetcher, HttpRequestError } from 'services/fetcher';
 import { notFoundResult } from 'shared/constants/server-side-props';
 import { InternalServerError } from 'shared/helpers/internal-server-error';
 import { useHorizontalScroll } from 'shared/hooks/use-horizontal-scroll';
@@ -45,7 +45,7 @@ const History = (props: InferGetServerSidePropsType<typeof getServerSideProps>)
         <HistoryTitle
           data={festival}
           currentYear={defaultYear}
-          showVolunteers={showVolunteers} 
+          showVolunteers={showVolunteers}
         />
         <HistoryItself data={itselfData}/>
       </AppLayout>
@@ -71,19 +71,23 @@ export const getServerSideProps = async ({ params }: GetServerSidePropsContext<R
       ? Number(params.year)
       : years[0];
 
-    festival = await fetcher<Festival>(`/info/festivals/${defaultYear}/`);   
+    festival = await fetcher<Festival>(`/info/festivals/${defaultYear}/`);
 
-  } catch ({ statusCode }) {
-    switch (statusCode) {
-    case 404:
-      return notFoundResult;
-    default:
-      throw new InternalServerError();
+  } catch (error) {
+    if (error instanceof HttpRequestError) {
+      switch (error.response.statusCode) {
+      case 404:
+        return notFoundResult;
+      default:
+        throw new InternalServerError();
+      }
     }
+
+    throw error;
   }
-  const settings = await fetchSettings(); // Semicolon added
+  const settings = await fetchSettings();
   const showVolunteers = settings.permissions.show_volunteers;
-  
+
   return {
     props: {
       festival,

src/pages/news/[id].tsx

@@ -13,7 +13,7 @@ import { PageBreadcrumbs } from 'components/page';
 import { Section } from 'components/section';
 import { SEO } from 'components/seo';
 import { ShareLinks } from 'components/share-links';
-import { fetcher } from 'services/fetcher';
+import { fetcher, HttpRequestError } from 'services/fetcher';
 import { notFoundResult } from 'shared/constants/server-side-props';
 import { InternalServerError } from 'shared/helpers/internal-server-error';
 
@@ -94,13 +94,17 @@ export const getServerSideProps = async ({ params }: GetServerSidePropsContext<R
 
   try {
     data = await fetcher<NewsItemDetail>(`/news/${id}/`);
-  } catch ({ statusCode }) {
-    switch (statusCode) {
-    case 404:
-      return notFoundResult;
-    default:
-      throw new InternalServerError();
+  } catch (error) {
+    if (error instanceof HttpRequestError) {
+      switch (error.response.statusCode) {
+      case 404:
+        return notFoundResult;
+      default:
+        throw new InternalServerError();
+      }
     }
+
+    throw error;
   }
 
   return {

src/pages/performances/[id].tsx

@@ -19,7 +19,7 @@ import { Section } from 'components/section';
 import { SEO } from 'components/seo';
 import { ShareLinks } from 'components/share-links';
 import { Video } from 'components/video';
-import { fetcher } from 'services/fetcher';
+import { fetcher, HttpRequestError } from 'services/fetcher';
 import { notFoundResult } from 'shared/constants/server-side-props';
 import { InternalServerError } from 'shared/helpers/internal-server-error';
 import { isNonEmpty } from 'shared/helpers/is-non-empty';
@@ -209,13 +209,17 @@ export const getServerSideProps = async ({ params }: GetServerSidePropsContext<R
       fetcher<PaginatedPerformanceMediaReviewList>(`/afisha/performances/${performanceId}/media-reviews/`),
       fetcher<PaginatedPerformanceReviewList>(`/afisha/performances/${performanceId}/reviews/`),
     ]);
-  } catch ({ statusCode }) {
-    switch (statusCode) {
-    case 404:
-      return notFoundResult;
-    default:
-      throw new InternalServerError();
+  } catch (error) {
+    if (error instanceof HttpRequestError) {
+      switch (error.response.statusCode) {
+      case 404:
+        return notFoundResult;
+      default:
+        throw new InternalServerError();
+      }
     }
+
+    throw error;
   }
 
   return {

src/shared/hooks/use-intersection.ts

@@ -1,3 +1,4 @@
+import 'intersection-observer';
 import { useEffect, useRef, useState, useCallback } from 'react';
 
 import type { RefCallback } from 'react';
@@ -20,7 +21,7 @@ export const useIntersection = <T extends Element>(options?: IntersectionObserve
   };
 
   useEffect(() => {
-    if ('IntersectionObserver' in window) {
+    if (typeof IntersectionObserver !== 'undefined') {
       observerRef.current = new IntersectionObserver(handleIntersection, options);
     }
   }, [options]);