Integrate firebase to everything under content/team (#81)

* feat: install Gluestack UI library * yarn * nice * replaced gluestack with react native paper * added db_spec * 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 ??? * add comments for frank * 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 * Teams page scrolling / keyboard / safearea fixes (#67) * team scroll fixes * comments * add no drills attempted yet text * 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 * fix local json imports to match current db_spec (#75) * 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 * mass formatting * drill list page is now based on firebase * updated db_spec * checkpoint save. moved drill attempts into their own thing at the root of teams. * *very* ugly implementation of drill list and drill leaderboard off of firestore * make stuff work * description, leaderboard, and statistics all use firebase now. * leaderboard attempts can be navigated into. The resulting page only works with 20 shot challenge * mass reformat, again! * Changed database so single attempt screen can more easily display for multiple drills * added some safe area, consolidated shotAccordion.js * Make drill pages (list, desc, leaderboard, and stat) fetch data from database (#74) * 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 * mass formatting * drill list page is now based on firebase * updated db_spec * checkpoint save. moved drill attempts into their own thing at the root of teams. * *very* ugly implementation of drill list and drill leaderboard off of firestore * make stuff work * description, leaderboard, and statistics all use firebase now. * leaderboard attempts can be navigated into. The resulting page only works with 20 shot challenge * mass reformat, again! * Changed database so single attempt screen can more easily display for multiple drills * added some safe area, consolidated shotAccordion.js --------- Co-authored-by: solderq35 <solderq35@gmail.com> * 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> * fix mainOutputAttempt (#76) * some temp work, team list page uses firebase now * Add README (#80) * 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) * edited main.yml to use yarn --------- Co-authored-by: Artem Kolpakov <artemkolpakov78@gmail.com> Co-authored-by: solderq35 <solderq35@gmail.com> Co-authored-by: hannacol <91215417+hannacol@users.noreply.github.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 1, 2024 · 4455992 · 4455992
1 parent 7c95d6b
commit 4455992
Show file tree

Hide file tree

Showing 5 changed files with 138 additions and 36 deletions.
diff --git a/Utility.js b/Utility.js
@@ -29,6 +29,10 @@ export function numTrunc(value) {
   return value === undefined ? "aaaaaaa" : parseFloat(value.toFixed(3));
 }
 
+export function refToID(ref) {
+  return ref["_key"] ? ref["_key"]["path"]["segments"].at(-1) : "bad ref";
+}
+
 export function calculateAverageProxToHole(drillSubmissions) {
   const userAverages = [];
   drillSubmissions.forEach((submission) => {

diff --git a/app/content/team/index.js b/app/content/team/index.js
@@ -4,7 +4,8 @@ import {
   BottomSheetModalProvider,
 } from "@gorhom/bottom-sheet";
 import { router, useNavigation } from "expo-router";
-import React, { useCallback, useMemo, useRef } from "react";
+import { collection, getDocs } from "firebase/firestore";
+import React, { useCallback, useEffect, useMemo, useRef } from "react";
 import {
   Image,
   Keyboard,
@@ -24,20 +25,35 @@ import {
   Text,
 } from "react-native-paper";
 import { SafeAreaView } from "react-native-safe-area-context";
-import drillData from "~/drill_data.json";
+import { db } from "~/firebaseConfig";
 
 function Index() {
   const navigation = useNavigation();
-  const users = drillData["teams"]["1"]["users"];
+  // const users = drillData["teams"]["1"]["users"];
+  const [users, setUsers] = React.useState([]);
+
+  const usersRef = collection(db, "teams", "1", "users");
+
+  useEffect(() => {
+    getDocs(usersRef).then((querySnapshot) => {
+      let newUsers = [];
+      querySnapshot.forEach((doc) => {
+        newUsers.push(doc.data());
+      });
+      setUsers(newUsers);
+    });
+  }, []);
 
   const [searchQuery, setSearchQuery] = React.useState("");
 
   const onChangeSearch = (query) => setSearchQuery(query);
 
-  const foundUsers = Object.values(users).filter((user) =>
+  const foundUsers = users.filter((user) =>
     user.name.toLowerCase().includes(searchQuery.toLowerCase()),
   );
 
+  console.log("Found: ", foundUsers);
+
   // ref
   const bottomSheetModalRef = useRef(null);
 
@@ -184,9 +200,14 @@ function Index() {
 
                 <List.Section>
                   {foundUsers.map((user, i) => {
+                    const userid =
+                      user.uid["_key"] !== undefined
+                        ? user.uid["_key"]["path"]["segments"].at(-1)
+                        : "awefr";
+                    console.log("userid: ", userid);
                     return (
                       <List.Item
-                        key={user.uid}
+                        key={userid}
                         title={user.name}
                         left={() => (
                           <Avatar.Image
@@ -209,7 +230,7 @@ function Index() {
                           </View>
                         )}
                         onPress={() =>
-                          router.push(`content/team/users/${user.uid}`)
+                          router.push(`content/team/users/${userid}`)
                         }
                       />
                     );

diff --git a/app/content/team/users/[user]/drills/[id].js b/app/content/team/users/[user]/drills/[id].js
@@ -3,12 +3,55 @@ import { useLocalSearchParams, useNavigation } from "expo-router";
 import { Appbar, PaperProvider } from "react-native-paper";
 import { SafeAreaView } from "react-native-safe-area-context";
 
+import {
+  collection,
+  doc,
+  getDoc,
+  getDocs,
+  query,
+  where,
+} from "firebase/firestore";
+import { useEffect, useState } from "react";
 import BarChartScreen from "~/components/barChart";
-import drillData from "~/drill_data.json";
+import { db } from "~/firebaseConfig";
 
 export default function Stat() {
   const navigation = useNavigation();
-  const { user: user_id, id: drill_id } = useLocalSearchParams();
+  const { user: userId, id: drillId } = useLocalSearchParams();
+  console.log("user_id: ", userId, "drill_id: ", drillId);
+
+  const [drillAttempts, setDrillAttempts] = useState([]);
+  const [drillInfo, setDrillInfo] = useState({});
+
+  useEffect(() => {
+    // massive data fetching on refresh. May or may not get its data from cache
+    getDoc(doc(db, "teams", "1", "drills", drillId)).then((doc) => {
+      // get drill data
+      if (doc.exists()) {
+        setDrillInfo(doc.data());
+      } else {
+        // doc.data() will be undefined in this case
+        console.log("No such document!");
+      }
+    });
+    getDocs(
+      query(
+        collection(db, "teams", "1", "attempts"),
+        where("did", "==", drillId),
+        where("uid", "==", userId),
+      ),
+    )
+      .then((querySnapshot) => {
+        // get all attempts in drill and filter only the highest score for a user
+        let newDrillAttempts = [];
+        querySnapshot.forEach((doc) => newDrillAttempts.push(doc.data()));
+        setDrillAttempts(newDrillAttempts);
+      })
+      .catch((error) => {
+        console.log("Error getting documents: ", error);
+      });
+    return () => {};
+  }, []);
   return (
     <PaperProvider>
       <SafeAreaView>
@@ -22,12 +65,7 @@ export default function Stat() {
           <Appbar.Content title={"Statistics"} />
         </Appbar.Header>
 
-        <BarChartScreen
-          drillData={
-            drillData["teams"]["1"]["users"][user_id]["history"][drill_id]
-          }
-          drillInfo={drillData["teams"]["1"]["drills"][drill_id]}
-        />
+        <BarChartScreen drillData={drillAttempts} drillInfo={drillInfo} />
       </SafeAreaView>
     </PaperProvider>
   );

diff --git a/app/content/team/users/[user]/index.js b/app/content/team/users/[user]/index.js
@@ -1,20 +1,52 @@
 import { useLocalSearchParams, useNavigation } from "expo-router";
+import {
+  collection,
+  doc,
+  getDoc,
+  getDocs,
+  query,
+  where,
+} from "firebase/firestore";
+import { useEffect, useState } from "react";
 import { ScrollView, StyleSheet, Text, View } from "react-native";
 import { Appbar, PaperProvider } from "react-native-paper";
 import { SafeAreaView } from "react-native-safe-area-context";
 import DrillCard from "~/components/drillCard";
 import ProfileCard from "~/components/profileCard";
-import drillData from "~/drill_data.json";
+import { db } from "~/firebaseConfig";
+import { refToID } from "~/Utility";
 
 function Index(props) {
-  const { user: user_id } = useLocalSearchParams();
-  const userData = drillData["teams"]["1"]["users"][user_id];
-  const drills = drillData["teams"]["1"]["drills"];
+  const user_id = useLocalSearchParams()["user"];
   const navigation = useNavigation();
-  console.log(userData);
-  const attemptedDrills = userData["history"]
-    ? Object.keys(drills).filter((drillId) => drillId in userData["history"])
-    : [];
+  const [drills, setDrills] = useState({});
+  const [userData, setUserData] = useState({});
+  console.log("userData", userData);
+  useEffect(() => {
+    let uniqueDrills = new Set();
+    getDoc(doc(db, "teams", "1", "users", user_id)).then((doc) => {
+      setUserData(doc.data());
+    });
+    getDocs(
+      query(collection(db, "teams", "1", "attempts")),
+      where("uid", "==", user_id),
+    ).then((querySnapshot) => {
+      querySnapshot.forEach((doc) => {
+        uniqueDrills.add(doc.data()["did"]);
+      });
+
+      getDocs(
+        query(collection(db, "teams", "1", "drills")),
+        where("did", "in", uniqueDrills),
+      ).then((querySnapshot) => {
+        let newDrills = {};
+        querySnapshot.forEach((doc) => {
+          newDrills[doc.id] = doc.data();
+        });
+        setDrills(newDrills);
+      });
+    });
+  }, []);
 
   return (
     <PaperProvider>
@@ -36,12 +68,15 @@ function Index(props) {
 
           <Text style={styles.heading}>Drills</Text>
 
-          {userData["history"] ? (
-            attemptedDrills.map((drillId) => (
+          {Object.keys(drills).length > 0 ? (
+            Object.keys(drills).map((drillId) => (
               <DrillCard
                 drill={drills[drillId]}
                 hrefString={
-                  "/content/team/users/" + userData.uid + "/drills/" + drillId
+                  "/content/team/users/" +
+                  refToID(userData.uid) +
+                  "/drills/" +
+                  drillId
                 }
                 key={drillId}
               />

diff --git a/components/barChart.js b/components/barChart.js
@@ -23,7 +23,6 @@ export default function BarChartScreen({ drillData, drillInfo }) {
   const data = drillDataSorted.map(
     (value) => value[drillInfo["mainOutputAttempt"]],
   );
-  console.log("data", drillInfo["mainOutputAttempt"]);
 
   const [_, setScrollPosition] = useState(0);
   const [movingAvgRange, setMovingAvgRange] = useState(5);
@@ -80,6 +79,7 @@ export default function BarChartScreen({ drillData, drillInfo }) {
 
   const transparentData = data.map((value, index) => ({
     value: value > 0 ? Math.max(...data) : Math.min(...data),
+    index: index,
     svg: {
       fill: "transparent",
       onPress: () => {
@@ -276,16 +276,20 @@ export default function BarChartScreen({ drillData, drillInfo }) {
                   style={{ pointerEvents: "none" }}
                 />
               </BarChart>
-              <BarChart
-                style={styles.barChart}
-                data={transparentData}
-                svg={{ fill }}
-                contentInset={{
-                  left: halfScreenCompensation,
-                  right: halfScreenCompensation,
-                }}
-                yAccessor={({ item }) => item.value}
-              ></BarChart>
+              {/*<BarChart*/}
+              {/*  style={{*/}
+              {/*    ...styles.barChart,*/}
+              {/*    zIndex: 10,*/}
+              {/*    backgroundColor: "blue",*/}
+              {/*  }}*/}
+              {/*  data={transparentData}*/}
+              {/*  svg={{ fill }}*/}
+              {/*  contentInset={{*/}
+              {/*    left: halfScreenCompensation,*/}
+              {/*    right: halfScreenCompensation,*/}
+              {/*  }}*/}
+              {/*  yAccessor={({ item }) => item.value}*/}
+              {/*></BarChart>*/}
             </View>
           </ScrollView>
         </View>