Body scroll

src/components/Calendar/Calendar.tsx

@@ -1,15 +1,16 @@
-import React, { useState, useEffect } from "react";
-import * as Styled from "./Calendar.styled";
-import { useAppDispatch } from "../../redux/redux_ts/hook";
-import { getAmountMonthlyThunk } from "../../redux/water/water.operations";
-import { useSelector } from "react-redux";
+import React, { useState, useEffect } from 'react';
+import * as Styled from './Calendar.styled';
+import { useAppDispatch } from '../../redux/redux_ts/hook';
+import { getAmountMonthlyThunk } from '../../redux/water/water.operations';
+import { useSelector } from 'react-redux';
 import {
   selectAmountDaily,
   selectAmountMonthly,
-} from "../../redux/water/waterSelectors";
-import CalendarModal from "./CalendarModal";
-import { useTranslation } from "react-i18next";
-import { selectDailyNorma } from "../../redux/auth/authSelectors";
+} from '../../redux/water/waterSelectors';
+import { addScrollLock, removeScrollLock } from '../Modal/services/services';
+import CalendarModal from './CalendarModal';
+import { useTranslation } from 'react-i18next';
+import { selectDailyNorma } from '../../redux/auth/authSelectors';
 
 export interface Day {
   day: number;
@@ -32,7 +33,7 @@ const Calendar: React.FC = () => {
   const data = useSelector(selectAmountDaily);
   const id = `${currentDate.getFullYear()}-${(currentDate.getMonth() + 1)
     .toString()
-    .padStart(2, "0")}`;
+    .padStart(2, '0')}`;
   const dispatch = useAppDispatch();
 
   useEffect(() => {
@@ -48,7 +49,7 @@ const Calendar: React.FC = () => {
     for (let i = 1; i <= lastDay; i++) {
       daysArray.push({
         day: i,
-        month: date.toLocaleString("en-US", { month: "long" }),
+        month: date.toLocaleString('en-US', { month: 'long' }),
       });
     }
 
@@ -57,7 +58,7 @@ const Calendar: React.FC = () => {
 
   const handlePrevMonth = (): void => {
     setCurrentDate(
-      (prevDate) => new Date(prevDate.getFullYear(), prevDate.getMonth() - 1)
+      prevDate => new Date(prevDate.getFullYear(), prevDate.getMonth() - 1)
     );
     setSelectedDay(null);
   };
@@ -77,6 +78,7 @@ const Calendar: React.FC = () => {
     if (selectedDay === day.day) {
       closeModal();
       setSelectedDay(null);
+      removeScrollLock();
       return;
     }
 
@@ -118,17 +120,19 @@ const Calendar: React.FC = () => {
     setSelectedDay(day.day);
     setModalContent(day);
 
-    document.documentElement.style.setProperty("--modal-top", `${modalTop}px`);
+    document.documentElement.style.setProperty('--modal-top', `${modalTop}px`);
     document.documentElement.style.setProperty(
-      "--modal-left",
+      '--modal-left',
       `${modalLeft}px`
     );
 
     setIsModalOpen(true);
+    addScrollLock();
   };
 
   const closeModal = (): void => {
     setIsModalOpen(false);
+    removeScrollLock();
   };
 
   const getCurrentDayInfo = (day: IDateInfo) => {
@@ -141,7 +145,7 @@ const Calendar: React.FC = () => {
 
     const currentDay = day.day.toString();
     const index = amountMonth.month
-      .map((obj) => obj.date.slice(-2).trim())
+      .map(obj => obj.date.slice(-2).trim())
       .indexOf(currentDay);
 
     if (index === -1) {
@@ -175,17 +179,17 @@ const Calendar: React.FC = () => {
   return (
     <Styled.CalendarContainer>
       <div className="right-align">
-        <h1 className="month">{t("homepage.h2Month")}</h1>
+        <h1 className="month">{t('homepage.h2Month')}</h1>
         <div className="header">
           <button
-            className={`button ${isJanuary2024 ? "disabled" : ""}`}
+            className={`button ${isJanuary2024 ? 'disabled' : ''}`}
             disabled={isJanuary2024}
             onClick={handlePrevMonth}
           >
             &lt;
           </button>
           <div className="month-title">
-            {currentDate.toLocaleString("en-US", { month: "long" })},{" "}
+            {currentDate.toLocaleString('en-US', { month: 'long' })},{' '}
             {currentDate.getFullYear()}
           </div>
           {currentDate.getMonth() === new Date().getMonth() &&
@@ -211,13 +215,13 @@ const Calendar: React.FC = () => {
             <li
               key={day.day}
               id={`day-${day.day}`}
-              className={`li hover active ${isDisabled ? "disabled" : ""}`}
+              className={`li hover active ${isDisabled ? 'disabled' : ''}`}
             >
               {day.percent !== undefined && day.percent < 100 ? (
                 <Styled.LowPercentageDay
                   className={`day ${
-                    selectedDay === day.day ? "selected" : ""
-                  } ${isDisabled ? "disabled" : ""}`}
+                    selectedDay === day.day ? 'selected' : ''
+                  } ${isDisabled ? 'disabled' : ''}`}
                   onClick={isDisabled ? undefined : () => handleDayClick(day)}
                   aria-disabled={isDisabled}
                 >
@@ -226,8 +230,8 @@ const Calendar: React.FC = () => {
               ) : (
                 <Styled.Day
                   className={`day ${
-                    selectedDay === day.day ? "selected" : ""
-                  } ${isDisabled ? "disabled" : ""}`}
+                    selectedDay === day.day ? 'selected' : ''
+                  } ${isDisabled ? 'disabled' : ''}`}
                   onClick={isDisabled ? undefined : () => handleDayClick(day)}
                   aria-disabled={isDisabled}
                 >
@@ -237,8 +241,8 @@ const Calendar: React.FC = () => {
               <p
                 className={`procent ${
                   day.percent !== undefined && day.percent < 100
-                    ? "lowPercentage"
-                    : ""
+                    ? 'lowPercentage'
+                    : ''
                 }`}
               >{`${
                 day.percent !== undefined && day.percent >= 100

src/components/Calendar/CalendarModal.tsx

@@ -1,8 +1,9 @@
-import { FC, useEffect, useRef } from "react";
-import * as Styled from "./Calendar.styled";
-import { useOutsideClick } from "../../hooks/useOutsideClick";
-import { Day } from "./Calendar";
-import { useTranslation } from "react-i18next";
+import { FC, useEffect, useRef } from 'react';
+import * as Styled from './Calendar.styled';
+import { useOutsideClick } from '../../hooks/useOutsideClick';
+import { Day } from './Calendar';
+import { useTranslation } from 'react-i18next';
+import { removeScrollLock } from '../Modal/services/services';
 
 interface ICalendarModal {
   setIsModalOpen(state: boolean): void;
@@ -21,37 +22,38 @@ const CalendarModal: FC<ICalendarModal> = ({
   const modalRef = useRef(null);
   useEffect(() => {
     const handleEscapeKey = (event: Event): void => {
-      if (event instanceof KeyboardEvent && event.key === "Escape") {
+      if (event instanceof KeyboardEvent && event.key === 'Escape') {
         closeModal();
       }
     };
 
-    window.addEventListener("keydown", handleEscapeKey);
+    window.addEventListener('keydown', handleEscapeKey);
 
     return () => {
-      window.removeEventListener("keydown", handleEscapeKey);
+      window.removeEventListener('keydown', handleEscapeKey);
     };
   }, [closeModal]);
 
   useOutsideClick(modalRef, () => {
     if (isModalOpen) {
       setIsModalOpen(false);
+      removeScrollLock();
     }
   });
 
   return (
-    <Styled.Modal ref={modalRef} className={isModalOpen ? "open" : ""}>
+    <Styled.Modal ref={modalRef} className={isModalOpen ? 'open' : ''}>
       <Styled.ModalContent>
         <button className="close hover active" onClick={() => closeModal()}>
           &times;
         </button>
         <h3 className="title-modal">{`${modalContent?.day}, ${modalContent?.month}`}</h3>
         <p className="modal-paragraf modal-paragraf-one">
-          {t("calendarModal.daily")}
+          {t('calendarModal.daily')}
           <span className="span-modal">{modalContent?.dailyNorma}</span>
         </p>
         <p className="modal-paragraf modal-paragraf-two-three">
-          {t("calendarModal.fulfill")}
+          {t('calendarModal.fulfill')}
           <span className="span-modal">
             {modalContent?.percent !== undefined && modalContent?.percent >= 100
               ? 100
@@ -60,7 +62,7 @@ const CalendarModal: FC<ICalendarModal> = ({
           </span>
         </p>
         <p className="modal-paragraf modal-paragraf-two-three">
-          {t("calendarModal.serve")}
+          {t('calendarModal.serve')}
           <span className="span-modal">{modalContent?.amountOfWater}</span>
         </p>
       </Styled.ModalContent>

src/components/DailyNorma/DailyNorma.tsx

@@ -1,47 +1,55 @@
-import { useState } from "react";
-import Modal from "../Modal/Modal";
-import DailyNormaModal from "./DailyNormaModal";
+import { useState } from 'react';
+import Modal from '../Modal/Modal';
+import DailyNormaModal from './DailyNormaModal';
 import {
   EditButton,
   SpanNorma,
   Title,
   Wrapper,
   WrapperButton,
   WrapperImg,
-} from "./DailyNorma.styled";
-import { useSelector } from "react-redux";
-import { selectDailyNorma } from "../../redux/auth/authSelectors";
-import { useTranslation } from "react-i18next";
+} from './DailyNorma.styled';
+import { useSelector } from 'react-redux';
+import { selectDailyNorma } from '../../redux/auth/authSelectors';
+import { useTranslation } from 'react-i18next';
+import { addScrollLock, removeScrollLock } from '../Modal/services/services';
 
 const DailyNorma: React.FC = () => {
   const [visible, setVisible] = useState(false);
 
-  const toggleModal = () => {
-    setVisible(!visible);
-  };
-
   const waterRate = useSelector(selectDailyNorma);
   const { t } = useTranslation();
   return (
     <>
       <WrapperImg>
         <Wrapper className="first-step">
-          <Title>{t("homepage.h3DailyNorma")}</Title>
+          <Title>{t('homepage.h3DailyNorma')}</Title>
           <WrapperButton>
             <SpanNorma>
-              {waterRate} {t("homepage.litres")}
+              {waterRate} {t('homepage.litres')}
             </SpanNorma>
             {visible && (
               <Modal
-                setVisible={toggleModal}
-                title={t("homepage.h3DailyNorma")}
+                setVisible={setVisible}
+                title={t('homepage.h3DailyNorma')}
                 daily={true}
               >
-                <DailyNormaModal onClose={toggleModal} />
+                <DailyNormaModal
+                  onClose={() => {
+                    setVisible(false);
+                    removeScrollLock();
+                  }}
+                />
               </Modal>
             )}
-            <EditButton type="button" onClick={toggleModal}>
-              {t("homepage.editButton")}
+            <EditButton
+              type="button"
+              onClick={() => {
+                setVisible(true);
+                addScrollLock();
+              }}
+            >
+              {t('homepage.editButton')}
             </EditButton>
           </WrapperButton>
         </Wrapper>