From 8f07527d03ade46e0fa4aa973a6e792018c8ac06 Mon Sep 17 00:00:00 2001 From: Rodion Kostyuchenko Date: Wed, 18 Sep 2024 22:53:02 +0300 Subject: [PATCH 1/6] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?= =?UTF-8?q?=D0=BD=D0=B8=D0=B5=20=D0=B7=D0=B0=D0=B2=D0=B8=D1=81=D0=B8=D0=BC?= =?UTF-8?q?=D0=BE=D1=81=D1=82=D0=B8=20=D0=BE=D1=82=20intersection-observer?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 5 +++++ package.json | 1 + 2 files changed, 6 insertions(+) diff --git a/package-lock.json b/package-lock.json index 4bf090afd..07321468b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12199,6 +12199,11 @@ "integrity": "sha512-Ju0Bz/cEia55xDwUWEa8+olFpCiQoypjnQySseKtmjNrnps3P+xfpUmGr90T7yjlVJmOtybRvPXhKMbHr+fWnw==", "dev": true }, + "intersection-observer": { + "version": "0.12.2", + "resolved": "https://registry.npmjs.org/intersection-observer/-/intersection-observer-0.12.2.tgz", + "integrity": "sha512-7m1vEcPCxXYI8HqnL8CKI6siDyD+eIWSwgB3DZA+ZTogxk9I4CDnj4wilt9x/+/QbHI4YG5YZNmC6458/e9Ktg==" + }, "invariant": { "version": "2.2.4", "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", diff --git a/package.json b/package.json index 851cfb353..c4637d739 100644 --- a/package.json +++ b/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", From 0b0443fd28de78996dd9395669c495df447fe6fd Mon Sep 17 00:00:00 2001 From: Rodion Kostyuchenko Date: Wed, 18 Sep 2024 23:24:45 +0300 Subject: [PATCH 2/6] =?UTF-8?q?=D0=A3=D0=B4=D0=B0=D0=BB=D0=B5=D0=BD=D0=B8?= =?UTF-8?q?=D0=B5=20=D0=B4=D1=83=D0=B1=D0=BB=D0=B8=D1=80=D1=83=D1=8E=D1=89?= =?UTF-8?q?=D0=B5=D0=B9=20=D1=80=D0=B5=D0=B0=D0=BB=D0=B8=D0=B7=D0=B0=D1=86?= =?UTF-8?q?=D0=B8=D0=B8=20=D1=85=D1=83=D0=BA=D0=B0=20=D0=B4=D0=BB=D1=8F=20?= =?UTF-8?q?=D0=BD=D0=B0=D0=B1=D0=BB=D1=8E=D0=B4=D0=B5=D0=BD=D0=B8=D1=8F=20?= =?UTF-8?q?=D0=B7=D0=B0=20=D0=B8=D0=B7=D0=BC=D0=B5=D0=BD=D0=B5=D0=BD=D0=B8?= =?UTF-8?q?=D0=B5=D0=BC=20=D0=BF=D0=B5=D1=80=D0=B5=D1=81=D0=B5=D1=87=D0=B5?= =?UTF-8?q?=D0=BD=D0=B8=D1=8F=20=D1=8D=D0=BB=D0=B5=D0=BC=D0=B5=D0=BD=D1=82?= =?UTF-8?q?=D0=BE=D0=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/main-header/main-header.tsx | 4 +-- src/shared/hooks/use-intersection-observer.ts | 26 ------------------- 2 files changed, 2 insertions(+), 28 deletions(-) delete mode 100644 src/shared/hooks/use-intersection-observer.ts diff --git a/src/components/main-header/main-header.tsx b/src/components/main-header/main-header.tsx index f4fc5cf06..123d55cdb 100644 --- a/src/components/main-header/main-header.tsx +++ b/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 = (props) => { } = props; const router = useRouter(); - const [containerElRef, isContainerElInViewport] = useIntersectionObserver({ threshold: 0.1 }); + const [containerElRef, isContainerElInViewport] = useIntersection({ threshold: 0.1 }); return (
{ - const elementRef = useRef(null); - const [isIntersecting, setIsIntersecting] = useState(false); - - useEffect(() => { - const element = elementRef.current; - const observer = new IntersectionObserver( - ([entry]) => setIsIntersecting(entry.isIntersecting), - options - ); - - if (element) { - observer.observe(element); - } - - return () => { - if (element) { - observer.unobserve(element); - } - }; - }, [elementRef, options]); - - return [elementRef, isIntersecting]; -}; From 6033358be6fba6a786b661b82bac7c83ca6fe8fb Mon Sep 17 00:00:00 2001 From: Rodion Kostyuchenko Date: Wed, 18 Sep 2024 23:26:02 +0300 Subject: [PATCH 3/6] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?= =?UTF-8?q?=D0=BD=D0=B8=D0=B5=20=D0=BF=D0=BE=D0=BB=D0=B8=D1=84=D0=B8=D0=BB?= =?UTF-8?q?=D0=B0=20IntersectionObserver?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/hooks/use-intersection.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/shared/hooks/use-intersection.ts b/src/shared/hooks/use-intersection.ts index d474120c4..83bb73397 100644 --- a/src/shared/hooks/use-intersection.ts +++ b/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 = (options?: IntersectionObserve }; useEffect(() => { - if ('IntersectionObserver' in window) { + if (typeof IntersectionObserver !== 'undefined') { observerRef.current = new IntersectionObserver(handleIntersection, options); } }, [options]); From 12b027faf23b2a65bf77303ae7d44b632780c234 Mon Sep 17 00:00:00 2001 From: Rodion Kostyuchenko Date: Thu, 19 Sep 2024 00:02:19 +0300 Subject: [PATCH 4/6] =?UTF-8?q?=D0=98=D1=81=D0=BF=D1=80=D0=B0=D0=B2=D0=BB?= =?UTF-8?q?=D0=B5=D0=BD=D0=B8=D0=B5=20=D0=BE=D0=B1=D1=80=D0=B0=D0=B1=D0=BE?= =?UTF-8?q?=D1=82=D0=BA=D0=B8=20=D0=BE=D1=88=D0=B8=D0=B1=D0=BE=D0=BA=20API?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/[author].tsx | 18 +++++++++++------- src/pages/blog/[id].tsx | 18 +++++++++++------- src/pages/history/[year].tsx | 24 ++++++++++++++---------- src/pages/news/[id].tsx | 18 +++++++++++------- src/pages/performances/[id].tsx | 18 +++++++++++------- 5 files changed, 58 insertions(+), 38 deletions(-) diff --git a/src/pages/[author].tsx b/src/pages/[author].tsx index 35b89e3e8..6e959244c 100644 --- a/src/pages/[author].tsx +++ b/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(`/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 { diff --git a/src/pages/blog/[id].tsx b/src/pages/blog/[id].tsx index d92db8a8e..f85bd0085 100644 --- a/src/pages/blog/[id].tsx +++ b/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(`/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 { diff --git a/src/pages/history/[year].tsx b/src/pages/history/[year].tsx index 777e2b143..2a28422f9 100644 --- a/src/pages/history/[year].tsx +++ b/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) @@ -71,19 +71,23 @@ export const getServerSideProps = async ({ params }: GetServerSidePropsContext(`/info/festivals/${defaultYear}/`); + festival = await fetcher(`/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 showVolunteers = settings.permissions.show_volunteers; - + return { props: { festival, diff --git a/src/pages/news/[id].tsx b/src/pages/news/[id].tsx index 85df5b9ea..b05b5c401 100644 --- a/src/pages/news/[id].tsx +++ b/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(`/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 { diff --git a/src/pages/performances/[id].tsx b/src/pages/performances/[id].tsx index f3e92ffeb..36f2417e6 100644 --- a/src/pages/performances/[id].tsx +++ b/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(`/afisha/performances/${performanceId}/media-reviews/`), fetcher(`/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 { From e01c571ee35e395bb6e0a7c8c76f3aa8c9fd0be3 Mon Sep 17 00:00:00 2001 From: Rodion Kostyuchenko Date: Thu, 19 Sep 2024 00:03:46 +0300 Subject: [PATCH 5/6] =?UTF-8?q?=D0=90=D0=B2=D1=82=D0=BE=D0=BC=D0=B0=D1=82?= =?UTF-8?q?=D0=B8=D1=87=D0=B5=D1=81=D0=BA=D0=B8=D0=B5=20=D0=BF=D1=80=D0=B0?= =?UTF-8?q?=D0=B2=D0=BA=D0=B8=20Stylelint?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../donation-link/donation-link.module.css | 2 +- .../main-layout/feed/main-layout-feed.module.css | 14 ++++++++------ src/components/navbar/navbar.module.css | 2 +- 3 files changed, 10 insertions(+), 8 deletions(-) diff --git a/src/components/donation-link/donation-link.module.css b/src/components/donation-link/donation-link.module.css index 0be461148..b0f0ae134 100644 --- a/src/components/donation-link/donation-link.module.css +++ b/src/components/donation-link/donation-link.module.css @@ -33,7 +33,7 @@ } &:hover, - &.active { + &.active { &::before, &::after { visibility: visible; diff --git a/src/components/main-layout/feed/main-layout-feed.module.css b/src/components/main-layout/feed/main-layout-feed.module.css index c66b0fdb8..1277b5e8a 100644 --- a/src/components/main-layout/feed/main-layout-feed.module.css +++ b/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; /* Добавляем небольшую задержку перед скрытием */ } } diff --git a/src/components/navbar/navbar.module.css b/src/components/navbar/navbar.module.css index ba4b454ff..ca085f251 100644 --- a/src/components/navbar/navbar.module.css +++ b/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: ""; } From efc589a206b4d2f647e4de1f3968b1ddc3dbc40b Mon Sep 17 00:00:00 2001 From: Rodion Kostyuchenko Date: Thu, 19 Sep 2024 00:10:19 +0300 Subject: [PATCH 6/6] =?UTF-8?q?=D0=A3=D0=B4=D0=B0=D0=BB=D0=B5=D0=BD=D0=B8?= =?UTF-8?q?=D0=B5=20=D0=BB=D0=B8=D1=88=D0=BD=D0=B5=D0=B3=D0=BE=20=D0=BA?= =?UTF-8?q?=D0=BE=D0=BC=D0=BC=D0=B5=D0=BD=D1=82=D0=B0=D1=80=D0=B8=D1=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/history/[year].tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/history/[year].tsx b/src/pages/history/[year].tsx index 2a28422f9..d861fd125 100644 --- a/src/pages/history/[year].tsx +++ b/src/pages/history/[year].tsx @@ -85,7 +85,7 @@ export const getServerSideProps = async ({ params }: GetServerSidePropsContext