Merge pull request #110 from daithihearn/pull-to-refresh

Reenable pull to refresh
daithihearn · Jan 25, 2023 · 2eece3c · 2eece3c
2 parents 78aa0ad + 566122c
commit 2eece3c
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 36 deletions.
diff --git a/package.json b/package.json
@@ -44,6 +44,7 @@
         "react-router": "^6.6.2",
         "react-router-config": "^5.1.1",
         "react-router-dom": "^6.6.2",
+        "react-simple-pull-to-refresh": "^1.3.3",
         "react-stomp-hooks": "2.1.0",
         "react-viewer": "^3.2.2",
         "reactstrap": "9.1.5",

diff --git a/src/pages/Game/Game.tsx b/src/pages/Game/Game.tsx
@@ -2,6 +2,7 @@ import React, { useEffect } from "react"
 import GameWrapper from "../../components/Game/GameWrapper"
 import GameOver from "../../components/Game/GameOver"
 import GameService from "../../services/GameService"
+import PullToRefresh from "react-simple-pull-to-refresh"
 
 import { withAuthenticationRequired } from "@auth0/auth0-react"
 
@@ -12,6 +13,7 @@ import { useSnackbar } from "notistack"
 import { getIsGameActive, resetGame } from "../../caches/GameSlice"
 import { clearAutoPlay } from "../../caches/AutoPlaySlice"
 import { clearMyCards } from "../../caches/MyCardsSlice"
+import RefreshingData from "../../components/icons/RefreshingData"
 import parseError from "../../utils/ErrorUtils"
 
 const Game = () => {
@@ -43,13 +45,17 @@ const Game = () => {
     }, [id])
 
     return (
-        <div className="app carpet">
-            <div className="game_wrap">
-                <div className="game_container">
-                    {isGameActive ? <GameWrapper /> : <GameOver />}
+        <PullToRefresh
+            onRefresh={fetchData}
+            refreshingContent={<RefreshingData />}>
+            <div className="app carpet">
+                <div className="game_wrap">
+                    <div className="game_container">
+                        {isGameActive ? <GameWrapper /> : <GameOver />}
+                    </div>
                 </div>
             </div>
-        </div>
+        </PullToRefresh>
     )
 }
 

diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx
@@ -6,6 +6,7 @@ import StartNewGame from "../../components/StartNewGame/StartNewGame"
 import MyGames from "../../components/MyGames/MyGames"
 import GameStats from "../../components/GameStats/GameStats"
 import { withAuthenticationRequired } from "@auth0/auth0-react"
+import PullToRefresh from "react-simple-pull-to-refresh"
 
 import { useAppDispatch, useAppSelector } from "../../caches/hooks"
 import { getMyProfile } from "../../caches/MyProfileSlice"
@@ -14,6 +15,7 @@ import { useSnackbar } from "notistack"
 import StatsService from "../../services/StatsService"
 import { Divider } from "@mui/material"
 import parseError from "../../utils/ErrorUtils"
+import RefreshingData from "../../components/icons/RefreshingData"
 
 const Home = () => {
     const dispatch = useAppDispatch()
@@ -38,39 +40,43 @@ const Home = () => {
     }, [])
 
     return (
-        <div className="app carpet">
-            <div className="game_wrap">
-                <div className="game_container">
-                    {!myProfile.isPlayer && !myProfile.isAdmin ? (
-                        <CardGroup>
-                            <Card className="p-6">
-                                <CardHeader tag="h2">
-                                    You are successfully logged in but don't yet
-                                    have any access permissions. Please contact
-                                    Daithi to get access.
-                                </CardHeader>
-                            </Card>
-                        </CardGroup>
-                    ) : (
-                        <div>
-                            {myProfile.isPlayer ? (
-                                <>
-                                    <MyGames />
-                                    <Divider />
-                                    <Divider />
-                                    <Divider />
-                                    <GameStats />
-                                    <Divider />
-                                    <Divider />
-                                    <Divider />
-                                </>
-                            ) : null}
-                            {myProfile.isAdmin ? <StartNewGame /> : null}
-                        </div>
-                    )}
+        <PullToRefresh
+            onRefresh={fetchData}
+            refreshingContent={<RefreshingData />}>
+            <div className="app carpet">
+                <div className="game_wrap">
+                    <div className="game_container">
+                        {!myProfile.isPlayer && !myProfile.isAdmin ? (
+                            <CardGroup>
+                                <Card className="p-6">
+                                    <CardHeader tag="h2">
+                                        You are successfully logged in but don't
+                                        yet have any access permissions. Please
+                                        contact Daithi to get access.
+                                    </CardHeader>
+                                </Card>
+                            </CardGroup>
+                        ) : (
+                            <div>
+                                {myProfile.isPlayer ? (
+                                    <>
+                                        <MyGames />
+                                        <Divider />
+                                        <Divider />
+                                        <Divider />
+                                        <GameStats />
+                                        <Divider />
+                                        <Divider />
+                                        <Divider />
+                                    </>
+                                ) : null}
+                                {myProfile.isAdmin ? <StartNewGame /> : null}
+                            </div>
+                        )}
+                    </div>
                 </div>
             </div>
-        </div>
+        </PullToRefresh>
     )
 }