Merge pull request #589 from Studio-Yandex-Practicum/develop

Release

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/app-layout/app-layout.tsx

@@ -23,7 +23,9 @@ import { mainNavigationItems } from 'shared/constants/main-navigation-items';
 import { participationFormPath } from 'shared/constants/participation-form-path';
 import { socialLinkItems } from 'shared/constants/social-link-items';
 import { useDisableBodyScroll } from 'shared/hooks/use-disable-body-scroll';
+import { useEffectSkipMount } from 'shared/hooks/use-effect-skip-mount';
 import { useMediaQuery } from 'shared/hooks/use-media-query';
+import useOrientation from 'shared/hooks/use-orientation';
 
 import type { NavbarProps } from 'components/navbar';
 
@@ -42,12 +44,15 @@ export const AppLayout: React.VFC<React.PropsWithChildren<AppLayoutProps>> = (pr
     navbarAddon,
     hiddenPartners,
   } = props;
+
+  const router = useRouter();
   const { settings } = useSettings();
   const { partners } = usePartners({ onlyGeneral: true });
+  const isMobile = useMediaQuery(`(max-width: ${breakpoints['tablet-portrait']})`);
+  const screenOrientation = useOrientation();
+
   const [isOverlayMenuOpen, setIsOverlayMenuOpen] = useState(false);
   const [scrollPosition, setScrollPosition] = useState(0);
-  const isMobile = useMediaQuery(`(max-width: ${breakpoints['tablet-portrait']})`);
-  const router = useRouter();
 
   const toggleOverlayMenu = useCallback(() => {
     setIsOverlayMenuOpen(!isOverlayMenuOpen);
@@ -61,19 +66,13 @@ export const AppLayout: React.VFC<React.PropsWithChildren<AppLayoutProps>> = (pr
     }
   }, [isMobile]);
 
-  useEffect(() => {
-    const onChange = () => {
-      setScrollPosition(window.scrollY);
-      if (screen.orientation.type === 'landscape-primary') {
-        window.scroll(0, scrollPosition * (window.outerWidth / window.outerHeight));
-      }
-    };
-    screen.orientation.addEventListener('change', onChange);
+  useEffectSkipMount(() => {
+    setScrollPosition(window.scrollY);
 
-    return () => {
-      screen.orientation.removeEventListener('change', onChange);
-    };
-  }, [scrollPosition]);
+    if (screenOrientation === 'landscape-primary') {
+      window.scroll(0, scrollPosition * (window.outerWidth / window.outerHeight));
+    }
+  }, [screenOrientation]);
 
   return (
     <Page>

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

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

src/components/event-card/event-card.module.css

@@ -110,3 +110,12 @@
     }
   }
 }
+
+.timeZone {
+  @mixin text;
+  @mixin textSmall;
+
+  margin-left: 5px;
+  line-height: 1;
+  vertical-align: super;
+}

src/components/event-card/event-card.tsx

@@ -67,6 +67,9 @@ export const EventCard = forwardRef<HTMLDivElement, EventCardProps>((props, ref)
           </span>
           <span>
             {time}
+            <span className={cx('timeZone')}>
+              мск
+            </span>
           </span>
         </time>
         <h3 className={cx('title')}>

src/components/festival-event-card/festival-event-card.module.css

@@ -157,3 +157,13 @@
     }
   }
 }
+
+.timeZone {
+  @mixin text;
+  @mixin textMedium;
+
+  margin-left: 5px;
+  font-weight: normal;
+  line-height: 1;
+  vertical-align: super;
+}

src/components/festival-event-card/festival-event-card.tsx

@@ -59,6 +59,9 @@ export const FestivalEventCard: React.VFC<FestivalEventCardProps> = (props) => {
         </dt>
         <dd className={cx('time')}>
           {time}
+          <span className={cx('timeZone')}>
+            мск
+          </span>
         </dd>
         <dt className={cx('hiddenText')}>
           Место

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;
-    width: 1px;
     height: 80%;
+    border-right: 1px solid black;
     background-color: var(--coal);
     content: "";
   }

src/components/performance-event-list/item/performance-event-list-item.module.css

@@ -21,3 +21,13 @@
     min-width: 240px;
   }
 }
+
+.timeZone {
+  @mixin text;
+  @mixin textLarge;
+
+  margin-left: 5px;
+  font-weight: normal;
+  line-height: 1;
+  vertical-align: super;
+}

src/components/performance-event-list/item/performance-event-list-item.tsx

@@ -27,6 +27,9 @@ export const PerformanceEventListItem: FC<PerformanceEventListProps> = (props) =
       {date && (
         <time className={cx('date')}>
           {date}
+          <span className={cx('timeZone')}>
+            мск
+          </span>
         </time>
       )}
       {actionText && actionUrl && (

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/contacts/contacts.tsx

@@ -82,9 +82,21 @@ const contactFormReducer = (state: ContactFormState, action: ContactFormAction)
   }
 };
 
+const getSubmitButtonText = (formSuccessfullySent: boolean, isSubmitting: boolean) => {
+  if (formSuccessfullySent) {
+    return 'Отправлено';
+  } 
+  if (isSubmitting) {
+    return 'Отправляется';
+  }
+
+  return 'Отправить';
+};
+
 const Contacts: NextPage = () => {
   const [contactFormState, dispatch] = useReducer(contactFormReducer, initialContactFormState);
   const [formSuccessfullySent, setFormSuccessfullySent] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
   const { settings } = useSettings();
 
   const {
@@ -153,6 +165,7 @@ const Contacts: NextPage = () => {
 
   const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
+    setIsSubmitting(true);
 
     const data = {
       author_name: name.value,
@@ -168,6 +181,9 @@ const Contacts: NextPage = () => {
         },
         body: JSON.stringify(data),
       });
+
+      setFormSuccessfullySent(true);
+      resetContactForm();
     } catch (err) {
       if (isHttpRequestError(err)) {
         const { statusCode } = err.response;
@@ -192,10 +208,9 @@ const Contacts: NextPage = () => {
           throw new InternalServerError();
         }
       }
+    } finally {
+      setIsSubmitting(false);
     }
-
-    setFormSuccessfullySent(true);
-    resetContactForm();
   };
 
   const canSubmit = name.wasChanged && !name.error
@@ -252,11 +267,11 @@ const Contacts: NextPage = () => {
                   )}
                   iconPosition="right"
                   border="full"
-                  disabled={!canSubmit}
+                  disabled={!canSubmit || isSubmitting}
                   upperCase
                   fullWidth
                 >
-                  {formSuccessfullySent ? 'Отправлено' : 'Отправить'}
+                  {getSubmitButtonText(formSuccessfullySent, isSubmitting)}
                 </Button>
               </Form.Actions>
               <Form.Disclaimer className={styles.container}>

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,