Optimized all firebase calls to use tanstack query (react query) (#84)

* Laid out directory and files (#48) mapped out all pages * navigation to stats working * 2 dropdowns! * added dropdown, accordions, and drill submission view below the graph * Scroll list for shots works now! * apparently we don't need safe area anymore ??? * Moved all files into appropriate places. Added a babel plugin for root level imports * Drilll Description merging into Layout (#53) * navigation to stats working * 2 dropdowns! * added dropdown, accordions, and drill submission view below the graph * Scroll list for shots works now! * Basic navigation for drill description, leaderboard and stats * disable header statusbar * fix: adjust height of status bar back button and screen title * navigation to stats working * Basic navigation for drill description, leaderboard and stats * disable header statusbar * fix: adjust height of status bar back button and screen title * Drill description rebase * Dynamic and parameratized routes for drill description + added drills.json --------- Co-authored-by: Frankreed <baoanhtdn@gmail.com> Co-authored-by: Artem Kolpakov <artemkolpakov78@gmail.com> * Deleted extra drills directory in /app * Layouts/drill submission (#62) * navigation to stats working * 2 dropdowns! * added dropdown, accordions, and drill submission view below the graph * Scroll list for shots works now! * Basic navigation for drill description, leaderboard and stats * Initial incorporation from work done on "Golf-App-Test" * Increase data to reflect a full 20 shots * began "Back to Latest / Next Shot" button logic * renamed useState hooks to have better terms * fixed "Back to Latest" logic * "Core Data" is now displayed horizontally for multiple attributes + added basic logic for "Submit Drill" button * Added a shot with 3 "Core Data" attributes * removed safe area view * got it working on my mac + keyboardscrollview * added bottom sheet, reanimated, and gesture handler * added react-native-reanimated plugin * working bottom sheet * bottom sheet has shot navigation test * Static Navigation rectanges added * Initial NavigationRectangle with dynamic data implimented * added both bottom sheets with test buttons * removed "index" from inputs map * hooked up bottom sheet open on proper components + removed some test buttons * added "id" to pressable in Navigation Rectangle * fixed warning related to key * Removed test indices * Initial Test Leave Drill Modal implimented with test button * Fixed bottom box bug * Refactored to dialog instead of modal * Removed test button and set up dialog on the back arrow * fixed key warning in NavigationRectangle * navigation to stats working * Basic navigation for drill description, leaderboard and stats * Initial incorporation from work done on "Golf-App-Test" * Increase data to reflect a full 20 shots * began "Back to Latest / Next Shot" button logic * renamed useState hooks to have better terms * fixed "Back to Latest" logic * "Core Data" is now displayed horizontally for multiple attributes + added basic logic for "Submit Drill" button * Added a shot with 3 "Core Data" attributes * removed safe area view * got it working on my mac + keyboardscrollview * added bottom sheet, reanimated, and gesture handler * added react-native-reanimated plugin * working bottom sheet * bottom sheet has shot navigation test * Static Navigation rectanges added * Initial NavigationRectangle with dynamic data implimented * added both bottom sheets with test buttons * removed "index" from inputs map * hooked up bottom sheet open on proper components + removed some test buttons * added "id" to pressable in Navigation Rectangle * fixed warning related to key * Removed test indices * Initial Test Leave Drill Modal implimented with test button * Fixed bottom box bug * Refactored to dialog instead of modal * Removed test button and set up dialog on the back arrow * fixed key warning in NavigationRectangle * Adjusted files to better match File structure after rebase * added link to get to description screen * added key to input value map to hopefully finally fix warning * added fonts shown in figma * created test theme to start messing around with * added react-native config file for fonts * installed expo-font and added fonts into plugins * removed fonts from expo-plugins * Updated Styling * Update yarn.lock * Revert "Update yarn.lock" This reverts commit cae7beb. * nav buttons stay * Note about moving stuff into file structure * copied over drills/input.js to app/(content)/drill/[id]/submission/input.js * added navigation to new location in file system * index in submission now displaying Input component * added basic description modal based on Colby's decription component * description modal working * refactored terminolgy for testData * InputValues useState hook abstracted to index file * Added base logic for preventing advancing with empty fields * created initial outputData generator when clicking the "Submit Drill" button * removed "drills" folder that was copied over during rebase * added banner that displays when not all input fields are filled * removed testTheme --------- Co-authored-by: Frankreed <baoanhtdn@gmail.com> Co-authored-by: hannacol <hannacol@oregonstate.edu> * Layouts/drill leaderboard (#63) * Screen works! * Restart button * removed victory-native * feat: stylize drill submission results screen * feat: add rounding for all displayed data fields * fix: center scatter chart positioning * fix: stylize shot accordion width to fit Figma designs * Screen works! * Restart button * removed victory-native * feat: stylize drill submission results screen * feat: add rounding for all displayed data fields * fix: center scatter chart positioning * fix: stylize shot accordion width to fit Figma designs * not js * Updated drill.json and made leaderboards dynamic with json data * fix: revamp routing and navigation * feat: style drills list screen * feat: add icons for drill result screen Added icons to containers that display average differences data on the drill results screen, aligning screen's design with the Figma design. Ensured proper styling and centering of the data containers. * Refactored drill.json and leaderboard with new database structure * Drill results page loads with drill_data.json file --------- Co-authored-by: Frankreed <baoanhtdn@gmail.com> Co-authored-by: Artem Kolpakov <artemkolpakov78@gmail.com> * Layouts/teams (#59) * teams page init * don't hardcode pfp * switch to nested object data * object keys length * data for players on team * bottom sheet settings * set teamdata format like profile branch * Layouts/profile (#57) * sth * Made a profile page with a list of a user's attempted drills, and the corresponding drill stat page that respond to that drill's structure. * edited db_spec.jsonc to match drill_data.json * Made hitbox of statistics bigger. * componentized barchart! * add actual folder (#61) Co-authored-by: Frankreed <baoanhtdn@gmail.com> * Layouts/bottom navigation (#65) * add actual folder * merged and situated some files --------- Co-authored-by: Andy <andy.matthew.james@gmail.com> * feat: implement navigation for merged screens Resolved invalid routing to accurately direct to the intended screens. Adjusted header navigation styling to fit within the screen. Corrected importing of the mocked data to ensure proper utilization. * minor fixes to team and profile (#66) * minor fixes to team and profile * move team data to main drill_data file * updated drill data generation script to push data to firestore * move drill submission files to new directory to hide tab bar (#68) * move drill submission to new directory to hide bottom nav * eradicated drills.json and unified everything under drill_data.json. Also made result.js use the mock data directly. Whoever is handling the input and result should resolve this * fix data imports for profile, teams, drill stats --------- Co-authored-by: Frankreed <baoanhtdn@gmail.com> * Frankreed/incorporating prettier (#73) * mass formatting * added easy npm command to start prettier * mass reformat 2 * drill list page is now based on firebase * *very* ugly implementation of drill list and drill leaderboard off of firestore * leaderboard attempts can be navigated into. The resulting page only works with 20 shot challenge * Style Profile and Statistics Screens (#77) * feat: style the profile card component * feat: style the drill card component * feat: style the personal and user profile pages * feat: style the statistics page * fix: adjust barChart component styling * fix: add leaderboard margins * feat: style the ShotAccordion component * feat: style the data field rows within the ShotAccordion component * fixed bar charts and stuff --------- Co-authored-by: Frankreed <baoanhtdn@gmail.com> * Sticky searchbar in scrollview for Teams page (#78) * reference * animations on this work now * ran yarn, and merged --------- Co-authored-by: Frankreed <baoanhtdn@gmail.com> * teams pages are all hooked up. Remove the hitbox system from barChart because it doesn't work for all positive values charts (like 20 shot challenges) * import db is now import db instead of import { db } All bar chart scrolling and spacing behavior fixed. All references to "current user" replaced with react context All pages in content/profile now using firebase Added scrollbox to description in case it's longer than the screen * some firebase emulation setup tanstack quorks!!!! * changed all uses of direct firebase querying to tanstack query hooks. * Prevent shotAccordion numbers from jumping back and forth * removed firebase emulator files --------- Co-authored-by: hannacol <91215417+hannacol@users.noreply.github.com> Co-authored-by: Artem Kolpakov <artemkolpakov78@gmail.com> Co-authored-by: hannacol <hannacol@oregonstate.edu> Co-authored-by: Jake Gehrke <91503842+Gehrkej@users.noreply.github.com> Co-authored-by: Jeff Huang <82061589+solderq35@users.noreply.github.com> Co-authored-by: ajpert <84763013+ajpert@users.noreply.github.com> Co-authored-by: Andy <andy.matthew.james@gmail.com> Co-authored-by: Artem <91341345+artkolpakov@users.noreply.github.com>
Golf-Drill-Challenge-App · Mar 8, 2024 · ddba260 · ddba260
1 parent 8919282
commit ddba260
Show file tree

Hide file tree

Showing 30 changed files with 696 additions and 466 deletions.
diff --git a/.firebaserc b/.firebaserc
@@ -0,0 +1,5 @@
+{
+ "projects": {
+ "default": "osu-golf-drill-challenge-app"
+ }
+}
diff --git a/Contexts.js b/Contexts.js
diff --git a/Utility.js b/Utility.js
@@ -33,6 +33,17 @@ export function refToID(ref) {
  return ref["_key"] ? ref["_key"]["path"]["segments"].at(-1) : "bad ref";
 }
 
+export function getUnique(array, field) {
+ const uniqueMap = new Map();
+ array.forEach((element) => {
+ const keyValue = element[field];
+ if (!uniqueMap.has(keyValue)) {
+ uniqueMap.set(keyValue, element);
+ }
+ });
+ return Array.from(uniqueMap.values());
+}
+
 export function calculateAverageProxToHole(drillSubmissions) {
  const userAverages = [];
  drillSubmissions.forEach((submission) => {
@@ -106,5 +117,5 @@ export function createOutputData(inputValues, attemptData) {
  return { ...object, sid: shotNum };
  });
 
- console.log("Output Data: ", outputData);
+ //console.log("Output Data: ", outputData);
 }
diff --git a/app/_layout.js b/app/_layout.js
@@ -1,25 +1,30 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { Stack } from "expo-router";
 import { useState } from "react";
-import { CurrentUserContext } from "~/Contexts";
+import { CurrentUserContext } from "~/contexts/CurrentUserContext";
+
+// Create a client
+const queryClient = new QueryClient();
 
 export default function RootLayoutNav() {
  const [currentUser, setCurrentUser] = useState("c0nEyjaOMhItMQTLMY0X");
+ const [currentTeam, setCurrentTeam] = useState("1");
 
- // Function to update the context value
- const updateCurrentUser = (newValue) => {
- setCurrentUser(newValue);
- };
  return (
- <CurrentUserContext.Provider value={{ currentUser, updateCurrentUser }}>
- <Stack
- screenOptions={{
- headerShown: false,
- }}
+ <QueryClientProvider client={queryClient}>
+ <CurrentUserContext.Provider
+ value={{ currentUser, currentTeam, setCurrentUser, setCurrentTeam }}
  >
- <Stack.Screen name="index" />
- <Stack.Screen name="content" />
- <Stack.Screen name="test" />
- </Stack>
- </CurrentUserContext.Provider>
+ <Stack
+ screenOptions={{
+ headerShown: false,
+ }}
+ >
+ <Stack.Screen name="index" />
+ <Stack.Screen name="content" />
+ <Stack.Screen name="test" />
+ </Stack>
+ </CurrentUserContext.Provider>
+ </QueryClientProvider>
  );
 }
diff --git a/app/content/drill/[id]/attempts/[attempt].js b/app/content/drill/[id]/attempts/[attempt].js
@@ -1,6 +1,4 @@
 import { useLocalSearchParams } from "expo-router";
-import { doc, getDoc } from "firebase/firestore";
-import { useEffect, useState } from "react";
 import {
  ScrollView,
  StyleSheet,
@@ -11,19 +9,39 @@ import {
 import { SafeAreaView } from "react-native-safe-area-context";
 import ScatterChart from "react-native-scatter-chart";
 import { numTrunc } from "~/Utility";
+import ErrorComponent from "~/components/errorComponent";
+import Loading from "~/components/loading";
 import ShotAccordion from "~/components/shotAccordion";
-import db from "~/firebaseConfig";
+import { useAttempts } from "~/hooks/useAttempts";
+import { useDrillInfo } from "~/hooks/useDrillInfo";
 
 function Result() {
  const drillId = useLocalSearchParams()["id"];
  const attemptId = useLocalSearchParams()["attempt"];
- const [drillInfo, setDrillInfo] = useState({});
- const [attempt, setAttempt] = useState({});
+ const { width } = useWindowDimensions();
+
+ const {
+ data: drillInfo,
+ isLoading: drillInfoIsLoading,
+ error: drillInfoError,
+ } = useDrillInfo(drillId);
+
+ const {
+ data: attempt,
+ isLoading: attemptIsLoading,
+ error: attemptError,
+ } = useAttempts({ attemptId });
+
+ if (drillInfoIsLoading || attemptIsLoading) {
+ return <Loading />;
+ }
+
+ if (drillInfoError || attemptError) {
+ return <ErrorComponent message={[drillInfoError, attemptError]} />;
+ }
 
  let dots = [];
  if (
- Object.keys(drillInfo).length > 0 &&
- Object.keys(attempt).length > 0 &&
  drillInfo["outputs"].includes("sideLanding") &&
  drillInfo["outputs"].includes("carryDiff")
  ) {
@@ -32,29 +50,6 @@ function Result() {
  value["carryDiff"],
  ]);
  }
- const { width } = useWindowDimensions();
- useEffect(() => {
- // massive data fetching on refresh. May or may not get its data from cache
- let mainOutputAttempt = "";
- getDoc(doc(db, "teams", "1", "drills", drillId)).then((doc) => {
- // get drill data
- if (doc.exists()) {
- setDrillInfo(doc.data());
- console.log("got drill data", mainOutputAttempt);
- } else {
- // doc.data() will be undefined in this case
- console.log("No such document!");
- }
- });
- getDoc(doc(db, "teams", "1", "attempts", attemptId))
- .then((doc) => {
- setAttempt(doc.data());
- })
- .catch((error) => {
- console.log("Error getting documents: ", error);
- });
- return () => {};
- }, []);
 
  return (
  <>

diff --git a/app/content/drill/[id]/description.js b/app/content/drill/[id]/description.js
@@ -1,9 +1,23 @@
 import { Link, useLocalSearchParams } from "expo-router";
 import { Image, ScrollView } from "react-native";
 import { Button, Text } from "react-native-paper";
+import Loading from "~/components/loading";
+import ErrorComponent from "../../../../components/errorComponent";
+import { useDrillInfo } from "../../../../hooks/useDrillInfo";
 
-export default function Description({ descData }) {
+export default function Description() {
  const drillId = useLocalSearchParams()["id"];
+
+ const {
+ data: drillInfo,
+ error: drillInfoError,
+ isLoading: drillInfoIsLoading,
+ } = useDrillInfo(drillId);
+
+ if (drillInfoIsLoading) return <Loading />;
+
+ if (drillInfoError) return <ErrorComponent error={error.message} />;
+
  return (
  <ScrollView
  contentContainerStyle={{
@@ -14,7 +28,7 @@ export default function Description({ descData }) {
  <Text style={{ paddingBottom: 10 }} variant="headlineLarge">
  Description
  </Text>
- <Text variant="bodySmall">{descData.description}</Text>
+ <Text variant="bodySmall">{drillInfo["description"]}</Text>
  <Image
  source={require("~/assets/drill-description-image.jpg")}
  style={{ width: "100%", maxHeight: 200, marginTop: 50 }}

diff --git a/app/content/drill/[id]/index.js b/app/content/drill/[id]/index.js
@@ -1,36 +1,37 @@
 import { useLocalSearchParams, useNavigation } from "expo-router";
-import React, { useEffect, useState } from "react";
+import React from "react";
 import { Appbar, PaperProvider, SegmentedButtons } from "react-native-paper";
 
 import Description from "./description";
 import Leaderboard from "./leaderboard";
 import Stat from "./statistics";
 
-import { doc, getDoc } from "firebase/firestore";
 import { SafeAreaView } from "react-native-safe-area-context";
-import db from "~/firebaseConfig";
+import ErrorComponent from "~/components/errorComponent";
+import Loading from "~/components/loading";
+import { useDrillInfo } from "../../../../hooks/useDrillInfo";
 
 export default function Index() {
  const [value, setValue] = React.useState("description");
  const navigation = useNavigation();
- const { id } = useLocalSearchParams();
+ const drillId = useLocalSearchParams()["id"];
 
- const drillsRef = doc(db, "teams", "1", "drills", id);
+ const {
+ data: drillInfo,
+ error: drillInfoError,
+ isLoading: drillInfoIsLoading,
+ } = useDrillInfo(drillId);
 
- const [drillData, setDrillData] = useState({});
+ if (drillInfoIsLoading) return <Loading />;
 
- useEffect(() => {
- getDoc(drillsRef).then((document) => {
- setDrillData(document.data());
- });
- }, []);
+ if (drillInfoError) return <ErrorComponent error={drillInfoError.message} />;
 
  const tabComponent = () => {
  switch (value) {
  case "leaderboard":
  return <Leaderboard />;
  case "description":
- return <Description descData={drillData} />;
+ return <Description />;
  case "stats":
  return <Stat />;
  }
@@ -46,7 +47,7 @@ export default function Index() {
  }}
  color={"#F24E1E"}
  />
- <Appbar.Content title={drillData.drillType} />
+ <Appbar.Content title={drillInfo["drillType"]} />
  </Appbar.Header>
 
  {/* Tab system */}