debounce-5: abstracted simple debounced navigation out to a hook (#296)

* tried debouncing drill list

* debounced leaderboard, assigning drills, and users on team

* debounced some more buttons

* handled debouncing user info update button

* handled wacky submit btn

* WIP on frankreed/debounce-2-teams-page

* removed typescript dependency

* some work

* added back typescript lmao

* moved typescript to devDependency

* forgot button countdown works. Technically not debouncing but in the same veins

* pretty

* handled timeIntervalPassword is NaN

* abstracted simple debounced navigation out to a hook

* decrease reset cooldown time to 30s

Co-authored-by: Jake Gehrke <91503842+Gehrkej@users.noreply.github.com>

---------

Co-authored-by: Jake Gehrke <91503842+Gehrkej@users.noreply.github.com>

app/content/drill/[id]/leaderboard.js

@@ -1,8 +1,7 @@
-import { router, useLocalSearchParams, usePathname } from "expo-router";
-import { useCallback, useState } from "react";
+import { useLocalSearchParams, usePathname } from "expo-router";
+import { useState } from "react";
 import { ScrollView, TouchableOpacity, View } from "react-native";
 import { Icon, List, Text } from "react-native-paper";
-import { debounce } from "underscore";
 import { prettyTitle, themeColors } from "~/Constants";
 import { formatDate, numTrunc } from "~/Utility";
 import ProfilePicture from "~/components/ProfilePicture";
@@ -14,6 +13,7 @@ import { useAllTimeRecords } from "~/dbOperations/hooks/useAllTimeRecords";
 import { useBestAttempts } from "~/dbOperations/hooks/useBestAttempts";
 import { useDrillInfo } from "~/dbOperations/hooks/useDrillInfo";
 import { useUserInfo } from "~/dbOperations/hooks/useUserInfo";
+import { useDebouncedNavigation } from "~/hooks/useDebouncedNavigation";
 
 function getLeaderboardRanks(
   orderedLeaderboard,
@@ -75,16 +75,7 @@ export default function Leaderboard() {
     error: leaderboardError,
   } = useBestAttempts({ drillId });
 
-  const debouncedPress = useCallback(
-    debounce(
-      (href) => {
-        router.push(href);
-      },
-      1000,
-      true,
-    ),
-    [],
-  );
+  const debouncedPress = useDebouncedNavigation();
 
   const invalidateKeys = [
     ["userInfo"],

app/content/team/index.js

@@ -5,9 +5,8 @@ import {
   BottomSheetTextInput,
 } from "@gorhom/bottom-sheet";
 import { useQueryClient } from "@tanstack/react-query";
-import { router } from "expo-router";
 import { doc, updateDoc } from "firebase/firestore";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import {
   Keyboard,
   StyleSheet,
@@ -26,7 +25,6 @@ import {
   Text,
 } from "react-native-paper";
 import { SafeAreaView } from "react-native-safe-area-context";
-import { debounce } from "underscore";
 import { themeColors } from "~/Constants";
 import { getErrorString } from "~/Utility";
 import ProfilePicture from "~/components/ProfilePicture";
@@ -44,6 +42,7 @@ import { handleImageUpload } from "~/dbOperations/imageUpload";
 import { invalidateMultipleKeys } from "~/dbOperations/invalidateMultipleKeys";
 import { resetLeaderboards } from "~/dbOperations/resetLeaderboards";
 import { db } from "~/firebaseConfig";
+import { useDebouncedNavigation } from "~/hooks/useDebouncedNavigation";
 
 function Index() {
   const { currentUserId, currentTeamId } = useAuthContext();
@@ -94,14 +93,7 @@ function Index() {
     setNewName(currentTeamData ? currentTeamData.name : "");
   }, [currentTeamData]);
 
-  const handleUserPress = useCallback(
-    debounce(
-      (userId) => router.push(`content/team/users/${userId}`),
-      1000,
-      true,
-    ),
-    [],
-  );
+  const handleUserPress = useDebouncedNavigation();
 
   const resetForm = () => {
     setNewName(currentTeamData.name);
@@ -489,7 +481,9 @@ function Index() {
                           <Icon source="chevron-right" />
                         </View>
                       )}
-                      onPress={() => handleUserPress(userId)}
+                      onPress={() =>
+                        handleUserPress(`content/team/users/${userId}`)
+                      }
                     />
                   );
                 })}

components/drillList.js

@@ -1,16 +1,14 @@
 import { SectionList, Text, View } from "react-native";
 import { Divider } from "react-native-paper";
 
-import { router } from "expo-router";
-import { useCallback } from "react";
-import { debounce } from "underscore";
 import { themeColors } from "~/Constants";
 import DrillCard from "~/components/drillCard";
 import ErrorComponent from "~/components/errorComponent";
 import Loading from "~/components/loading";
 import RefreshInvalidate from "~/components/refreshInvalidate";
 import { useAuthContext } from "~/context/Auth";
 import { useUserInfo } from "~/dbOperations/hooks/useUserInfo";
+import { useDebouncedNavigation } from "~/hooks/useDebouncedNavigation";
 
 export default function DrillList({
   drillData,
@@ -27,16 +25,7 @@ export default function DrillList({
   } = useUserInfo({ userId: currentUserId });
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  const debouncedPress = useCallback(
-    debounce(
-      (href) => {
-        router.push(href);
-      },
-      1000,
-      true,
-    ),
-    [],
-  ); //useCallback so the debounce timer don't get reset every render
+  const debouncedPress = useDebouncedNavigation();
 
   if (userIsLoading) {
     return <Loading />;

hooks/useDebouncedNavigation.js

@@ -0,0 +1,16 @@
+import { router } from "expo-router";
+import { useCallback } from "react";
+import { debounce } from "underscore";
+
+// eslint-disable-next-line react-hooks/exhaustive-deps
+export const useDebouncedNavigation = () =>
+  useCallback(
+    debounce(
+      (href) => {
+        router.push(href);
+      },
+      1000,
+      true,
+    ),
+    [],
+  );