pull to refresh

leanstacks · Aug 8, 2024 · c293669 · c293669
1 parent ab97771
commit c293669
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 2 deletions.
diff --git a/src/pages/Home/HomePage.tsx b/src/pages/Home/HomePage.tsx
@@ -1,6 +1,17 @@
-import { IonCol, IonContent, IonGrid, IonPage, IonRow } from '@ionic/react';
+import {
+  IonCol,
+  IonContent,
+  IonGrid,
+  IonPage,
+  IonRefresher,
+  IonRefresherContent,
+  IonRow,
+  RefresherEventDetail,
+} from '@ionic/react';
+import { useQueryClient } from '@tanstack/react-query';
 
 import './HomePage.scss';
+import { QueryKey } from 'common/utils/constants';
 import Header from 'common/components/Header/Header';
 import UserSummaryCard from 'pages/Users/components/UserSummaryCard/UserSummaryCard';
 import WelcomeBlock from './components/WelcomeBlock/WelcomeBlock';
@@ -11,11 +22,22 @@ import WelcomeBlock from './components/WelcomeBlock/WelcomeBlock';
  * @returns JSX
  */
 const HomePage = (): JSX.Element => {
+  const queryClient = useQueryClient();
+
+  const handleRefresh = async (event: CustomEvent<RefresherEventDetail>) => {
+    await queryClient.refetchQueries({ queryKey: [QueryKey.Users], exact: true });
+    event.detail.complete();
+  };
+
   return (
     <IonPage className="page-home" data-testid="page-home">
       <Header title="Ionic Playground" />
 
       <IonContent fullscreen>
+        <IonRefresher slot="fixed" onIonRefresh={handleRefresh}>
+          <IonRefresherContent></IonRefresherContent>
+        </IonRefresher>
+
         <IonGrid fixed>
           <IonRow>
             <IonCol sizeXs="2" sizeMd="1">

diff --git a/src/pages/Users/components/UserList/UserListPage.tsx b/src/pages/Users/components/UserList/UserListPage.tsx
@@ -1,6 +1,14 @@
-import { IonContent, IonPage } from '@ionic/react';
+import {
+  IonContent,
+  IonPage,
+  IonRefresher,
+  IonRefresherContent,
+  RefresherEventDetail,
+} from '@ionic/react';
+import { useQueryClient } from '@tanstack/react-query';
 
 import './UserListPage.scss';
+import { QueryKey } from 'common/utils/constants';
 import Header from 'common/components/Header/Header';
 import Container from 'common/components/Content/Container';
 import PageHeader from 'common/components/Content/PageHeader';
@@ -14,13 +22,23 @@ import ProgressProvider from 'common/providers/ProgressProvider';
  */
 export const UserListPage = (): JSX.Element => {
   const testid = 'page-user-list';
+  const queryClient = useQueryClient();
+
+  const handleRefresh = async (event: CustomEvent<RefresherEventDetail>) => {
+    await queryClient.refetchQueries({ queryKey: [QueryKey.Users], exact: true });
+    event.detail.complete();
+  };
 
   return (
     <IonPage className="page-user-list" data-testid={testid}>
       <ProgressProvider>
         <Header />
 
         <IonContent>
+          <IonRefresher slot="fixed" onIonRefresh={handleRefresh}>
+            <IonRefresherContent></IonRefresherContent>
+          </IonRefresher>
+
           <Container fixed>
             <PageHeader title="Users" />
             <UserList className="ion-hide-md-up" />