home-page pulltorefresh

src/pages/home/home-page.tsx

@@ -14,6 +14,7 @@ import {
 	useSetHeaderType,
 	useSetFooterMode,
   useSetFooterCurrentPage,
+  useSetIsPullToRefreshEnabled,
 } from '@/widgets/sub-layout/use-sub-layout';
 import { useStore } from '@/shared/model/store';
 import { useHomeBannerListMutation } from '@/entities/home/api/use-home-banner-list-mutation';
@@ -30,6 +31,7 @@ export const HomePage = () => {
   const { openBiometricRegistrationPopup, checkAlarmLink } = useAppBridge();
   const { mutateAsync: homeBannerList } = useHomeBannerListMutation();
   
+  useSetIsPullToRefreshEnabled(true);
   useSetHeaderTitle('');
   useSetHeaderType(HeaderType.Home);
   useSetFooterMode(true);

src/widgets/sub-layout/index.tsx

@@ -8,6 +8,7 @@ import {
 import { Outlet } from 'react-router-dom';
 import { HeaderNavigation } from '@/widgets/navigation/header';
 import { FooterNavigation } from '@/widgets/navigation/footer';
+import { PullToRefresh } from '@/widgets/pull-to-refresh/pull-to-refresh';
 import { 
   CodeListItem, 
   CodesSelectParams, 
@@ -36,6 +37,7 @@ import { useCodesSelectMutation } from '@/entities/common/api/use-codes-select-m
 import { MenuItems } from '@/entities/common/model/constant';
 import { AlarmLinkOptions } from '@/entities/alarm/model/types';
 import { AlarmRoutes } from '@/entities/alarm/ui/alarm-routes';
+import { useNavigate } from '@/shared/lib/hooks';
 
 export interface ContextType {
   setOnBack: (onBack: () => void) => void;
@@ -65,6 +67,9 @@ export const SubLayout = () => {
     updateUserData
   } = useUserInfo();
 
+  const { reload } = useNavigate();
+
+  const [isPullToRefreshEnabled, setIsPullToRefreshEnabled] = useState(false);
   const [onBack, setOnBack] = useState(undefined);
   const [onRightClick, setOnRightClick] = useState(undefined);
   const [headerTitle, setHeaderTitle] = useState<string>('');
@@ -405,47 +410,50 @@ export const SubLayout = () => {
   }, [mid]);
 
   return (
-    <div className={ wrapperClassName }>
-      <div 
-        className="header-empty-block" 
-        style={{ width: '100%', height: '50px' }}
-      ></div>
-      <Fragment>
-        <HeaderNavigation
-          onBack={ onBack }
-          onRightClick={ onRightClick }
-          headerTitle={ headerTitle }
-          headerType={ headerType }
-          key={ headerNavigationKey }
-          loginSuccess={ loginSuccess }
-          mid={ mid }
-          setMid={ setMid }
-        />
-        { loginSuccess && 
-          <Outlet
-            context={{
-              setOnBack,
-              setOnRightClick,
-              setHeaderTitle,
-              setHeaderType,
-              setFooterMode,
-              setFooterCurrentPage,
-            }}
+    <PullToRefresh onRefresh={reload} isPullable={isPullToRefreshEnabled}>
+      <div className={ wrapperClassName }>
+        <div 
+          className="header-empty-block" 
+          style={{ width: '100%', height: '50px' }}
+        ></div>
+        <Fragment>
+          <HeaderNavigation
+            onBack={ onBack }
+            onRightClick={ onRightClick }
+            headerTitle={ headerTitle }
+            headerType={ headerType }
+            key={ headerNavigationKey }
+            loginSuccess={ loginSuccess }
+            mid={ mid }
+            setMid={ setMid }
           />
-        }
-        {
-          footerMode && 
-          <FooterNavigation
-            footerCurrentPage={ footerCurrentPage }
-          ></FooterNavigation>
-        }
-        { alarmRoutesOn &&
-          <AlarmRoutes
-            options={ alarmOptions }
-          ></AlarmRoutes>
-        }
-        
-      </Fragment>
-    </div>
+          { loginSuccess && 
+            <Outlet
+              context={{
+                setOnBack,
+                setOnRightClick,
+                setHeaderTitle,
+                setHeaderType,
+                setFooterMode,
+                setFooterCurrentPage,
+                setIsPullToRefreshEnabled,
+              }}
+            />
+          }
+          {
+            footerMode && 
+            <FooterNavigation
+              footerCurrentPage={ footerCurrentPage }
+            ></FooterNavigation>
+          }
+          { alarmRoutesOn &&
+            <AlarmRoutes
+              options={ alarmOptions }
+            ></AlarmRoutes>
+          }
+          
+        </Fragment>
+      </div>
+    </PullToRefresh>
   );
 };

src/widgets/sub-layout/use-sub-layout.ts

@@ -64,4 +64,13 @@ export const useSetFooterCurrentPage = (footerCurrentPage?: FooterItemActiveKey
     return () => setFooterCurrentPage(undefined);
   }, [footerCurrentPage, setFooterCurrentPage]);
   return { setFooterCurrentPage };
+};
+
+export const useSetIsPullToRefreshEnabled = (enabled: boolean) => {
+  const { setIsPullToRefreshEnabled } = useSubLayoutContext();
+  useEffect(() => {
+    setIsPullToRefreshEnabled(enabled);
+    return () => setIsPullToRefreshEnabled(false);
+  }, [setIsPullToRefreshEnabled, enabled]);
+  return { setIsPullToRefreshEnabled };
 };