use useLockedBody in <SplitView />

daostack · Dec 1, 2023 · ed51abc · ed51abc
1 parent dce1b9d
commit ed51abc
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 5 deletions.
diff --git a/src/pages/commonFeed/CommonFeedPage.tsx b/src/pages/commonFeed/CommonFeedPage.tsx
@@ -4,7 +4,6 @@ import { useParams } from "react-router-dom";
 import { selectUser } from "@/pages/Auth/store/selectors";
 import { InboxItemType } from "@/shared/constants";
 import { MainRoutesProvider } from "@/shared/contexts";
-import { useLockedBody } from "@/shared/hooks";
 import { useLastVisitedCommon } from "@/shared/hooks/useCases";
 import { MultipleSpacesLayoutPageContent } from "@/shared/layouts";
 import {
@@ -59,7 +58,6 @@ const renderContentWrapper: RenderCommonFeedContentWrapper = ({
 
 const CommonFeedPage: FC = () => {
   const { id: commonId } = useParams<CommonFeedPageRouterParams>();
-  const { lockBodyScroll, unlockBodyScroll } = useLockedBody();
   const dispatch = useDispatch();
   const layoutMainWidth = useSelector(selectMultipleSpacesLayoutMainWidth);
   const user = useSelector(selectUser());
@@ -99,9 +97,7 @@ const CommonFeedPage: FC = () => {
   }, [commonId]);
 
   useEffect(() => {
-    lockBodyScroll();
     return () => {
-      unlockBodyScroll();
       dispatch(multipleSpacesLayoutActions.clearBreadcrumbs());
     };
   }, []);

diff --git a/src/pages/commonFeed/components/FeedLayout/components/SplitView/SplitView.tsx b/src/pages/commonFeed/components/FeedLayout/components/SplitView/SplitView.tsx
@@ -1,5 +1,6 @@
-import React, { FC } from "react";
+import React, { FC, useEffect } from "react";
 import SplitPane from "react-split-pane";
+import { useLockedBody } from "@/shared/hooks";
 import styles from "./SplitView.module.scss";
 
 interface SplitViewProps {
@@ -14,6 +15,14 @@ interface SplitViewProps {
 const SplitView: FC<SplitViewProps> = (props) => {
   const { className, size, minSize, maxSize, defaultSize, onChange, children } =
     props;
+  const { lockBodyScroll, unlockBodyScroll } = useLockedBody();
+
+  useEffect(() => {
+    lockBodyScroll();
+    return () => {
+      unlockBodyScroll();
+    };
+  }, []);
 
   return (
     <SplitPane