refresh pulldown

Golf-Drill-Challenge-App · Mar 14, 2024 · 092398f · 092398f
1 parent b7ccce8
commit 092398f
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 6 deletions.
diff --git a/app/content/drill/index.js b/app/content/drill/index.js
@@ -1,8 +1,10 @@
 import { Link, useNavigation } from "expo-router";
-import { ScrollView, StyleSheet } from "react-native";
+import { useCallback, useState } from "react";
+import { RefreshControl, ScrollView, StyleSheet } from "react-native";
 import { Appbar, List, PaperProvider } from "react-native-paper";
 import { SafeAreaView } from "react-native-safe-area-context";
 
+import { router } from "expo-router";
 import ErrorComponent from "~/components/errorComponent";
 import Loading from "~/components/loading";
 import { useDrillInfo } from "~/hooks/useDrillInfo";
@@ -16,6 +18,16 @@ export default function Index() {
  isLoading: drillInfoIsLoading,
  } = useDrillInfo();
 
+ const [refreshing, setRefreshing] = useState(false);
+
+ const onRefresh = useCallback(() => {
+ setRefreshing(true);
+ setTimeout(() => {
+ router.replace("content/drill/");
+ setRefreshing(false);
+ }, 500);
+ }, []);
+
  if (drillInfoIsLoading) {
  return <Loading />;
  }
@@ -31,7 +43,12 @@ export default function Index() {
  <Appbar.Content title="Drills" />
  </Appbar.Header>
 
- <ScrollView contentContainerStyle={styles.scrollView}>
+ <ScrollView
+ contentContainerStyle={styles.scrollView}
+ refreshControl={
+ <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+ }
+ >
  <List.Section>
  {Object.values(drillInfo).map((drill) => (
  <Link

diff --git a/app/content/profile/index.js b/app/content/profile/index.js
@@ -2,9 +2,17 @@ import {
  BottomSheetModal,
  BottomSheetModalProvider,
 } from "@gorhom/bottom-sheet";
+import { router } from "expo-router";
 import { signOut as signoutFireBase } from "firebase/auth";
-import { useCallback, useMemo, useRef } from "react";
-import { Pressable, ScrollView, StyleSheet, Text, View } from "react-native";
+import { useCallback, useMemo, useRef, useState } from "react";
+import {
+ Pressable,
+ RefreshControl,
+ ScrollView,
+ StyleSheet,
+ Text,
+ View,
+} from "react-native";
 import { Appbar, PaperProvider } from "react-native-paper";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { getUnique } from "~/Utility";
@@ -65,6 +73,16 @@ function Index(props) {
  isLoading: drillInfoIsLoading,
  } = useDrillInfo();
 
+ const [refreshing, setRefreshing] = useState(false);
+
+ const onRefresh = useCallback(() => {
+ setRefreshing(true);
+ setTimeout(() => {
+ router.replace("content/profile/");
+ setRefreshing(false);
+ }, 500);
+ }, []);
+
  if (userIsLoading || drillInfoIsLoading || attemptsIsLoading) {
  return <Loading />;
  }
@@ -90,7 +108,12 @@ function Index(props) {
  />
  </Appbar.Header>
  <BottomSheetModalProvider>
- <ScrollView contentContainerStyle={styles.scrollViewContent}>
+ <ScrollView
+ contentContainerStyle={styles.scrollViewContent}
+ refreshControl={
+ <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+ }
+ >
  <View style={styles.profileContainer}>
  <ProfileCard user={userData} />
  </View>

diff --git a/app/content/team/index.js b/app/content/team/index.js
@@ -3,11 +3,12 @@ import {
  BottomSheetModalProvider,
 } from "@gorhom/bottom-sheet";
 import { router } from "expo-router";
-import React, { useCallback, useMemo, useRef } from "react";
+import React, { useCallback, useMemo, useRef, useState } from "react";
 import {
  Image,
  Keyboard,
  Pressable,
+ RefreshControl,
  TouchableWithoutFeedback,
  View,
 } from "react-native";
@@ -51,6 +52,16 @@ function Index() {
  //console.log("handleSheetChanges", index);
  }, []);
 
+ const [refreshing, setRefreshing] = useState(false);
+
+ const onRefresh = useCallback(() => {
+ setRefreshing(true);
+ setTimeout(() => {
+ router.replace("content/team/");
+ setRefreshing(false);
+ }, 500);
+ }, []);
+
  if (userIsLoading) return <Loading />;
 
  if (userError) return <ErrorComponent message={userError.message} />;
@@ -93,6 +104,12 @@ function Index() {
  keyboardShouldPersistTaps="handled"
  showsVerticalScrollIndicator={false}
  stickyHeaderIndices={[3]}
+ refreshControl={
+ <RefreshControl
+ refreshing={refreshing}
+ onRefresh={onRefresh}
+ />
+ }
  >
  <View style={{ alignItems: "center" }}>
  <Image