Frankreed/Bar chart is 60fps consistent now (#129)

* Database updated and codebase uses title instead of drillType * Removed title and added prettyDrillType and subType * Added putting to database and updated codebase * Rebased with layout and prettiier ran * leaderboard is more resilient to incorrect data * style changes * barChart performance vastly improved. Frame rate is now pegged at 60 (for ios). Still crashes on Android. * this doesn't improve anything measurable, it just makes sense in my head * Paginate barChart * very minor tick change/add back * barChart now displays 0 as the minimum instead of the lowest value (if the lowest value is lower than 0, display that instead). Illegal attempts shall be terminated --------- Co-authored-by: hannacol <[email protected]>
Golf-Drill-Challenge-App · Apr 9, 2024 · 89ca85d · 89ca85d
1 parent 89eb868
commit 89ca85d
Show file tree

Hide file tree

Showing 14 changed files with 279 additions and 161 deletions.
diff --git a/Utility.js b/Utility.js
@@ -164,8 +164,16 @@ export function lookUpExpectedPutts(proxHole) {
 }
 
 export function getIconByKey(key) {
-  const icons = [{ carry: "arrow-up" }, { sideLanding: "arrow-left-right" }];
+  const icons = [
+    { carry: "arrow-up" },
+    { sideLanding: "arrow-left-right" },
+    { strokes: "golf-tee" },
+  ];
 
   const iconObject = icons.find((icon) => icon[key]);
   return iconObject ? iconObject[key] : null;
 }
+
+export const getCombinedDrillTitle = (drillInfo) => {
+  return `${drillInfo.prettyDrillType} | ${drillInfo.subType}`;
+};
diff --git a/app/content/_layout.js b/app/content/_layout.js
@@ -1,10 +1,7 @@
 import { Tabs } from "expo-router";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
-import { currentAuthContext } from "~/context/Auth";
 
 export default () => {
-  const { currentUserId } = currentAuthContext();
-  console.log("user", currentUserId);
   return (
     <Tabs options={{ headerShown: false }}>
       <Tabs.Screen

diff --git a/app/content/drill/[id]/description.js b/app/content/drill/[id]/description.js
@@ -59,13 +59,9 @@ export default function Description() {
     );
   };
 
-  const images = [
-    require("~/assets/drill-description-image.jpg"),
-    require("~/assets/adaptive-icon.png"),
-    require("~/assets/icon.png"),
-    require("~/assets/splash.png"),
-    require("~/assets/favicon.png"),
-  ];
+  const images = [];
+
+  const hasImages = !!images.length;
 
   const windowWidth = Dimensions.get("window").width;
   const windowHeight = Dimensions.get("window").height;
@@ -90,28 +86,33 @@ export default function Description() {
             Description
           </Text>
           <Text variant="bodySmall">{drillInfo["description"]}</Text>
-          <View style={{ marginTop: 10 }}>
-            <View
-              style={{
-                flexDirection: "row",
-                flexWrap: "wrap",
-                justifyContent: "space-between",
-              }}
-            >
-              {images.map((image, index) => (
-                <TouchableOpacity key={index} onPress={() => openModal(index)}>
-                  <Image
-                    style={{
-                      width: windowWidth / 3 - 10,
-                      height: windowWidth / 3 - 10,
-                      marginBottom: 15,
-                    }}
-                    source={image}
-                  />
-                </TouchableOpacity>
-              ))}
+          {hasImages && (
+            <View style={{ marginTop: 10 }}>
+              <View
+                style={{
+                  flexDirection: "row",
+                  flexWrap: "wrap",
+                  justifyContent: "space-between",
+                }}
+              >
+                {images.map((image, index) => (
+                  <TouchableOpacity
+                    key={index}
+                    onPress={() => openModal(index)}
+                  >
+                    <Image
+                      style={{
+                        width: windowWidth / 3 - 10,
+                        height: windowWidth / 3 - 10,
+                        marginBottom: 15,
+                      }}
+                      source={image}
+                    />
+                  </TouchableOpacity>
+                ))}
+              </View>
             </View>
-          </View>
+          )}
         </ScrollView>
 
         <Modal

diff --git a/app/content/drill/[id]/index.js b/app/content/drill/[id]/index.js
@@ -10,6 +10,7 @@ import { SafeAreaView } from "react-native-safe-area-context";
 import ErrorComponent from "~/components/errorComponent";
 import Loading from "~/components/loading";
 import { useDrillInfo } from "~/hooks/useDrillInfo";
+import { getCombinedDrillTitle } from "~/Utility";
 
 export default function Index() {
   const [value, setValue] = React.useState("description");
@@ -48,7 +49,7 @@ export default function Index() {
             }}
             color={"#F24E1E"}
           />
-          <Appbar.Content title={drillInfo["drillType"]} />
+          <Appbar.Content title={getCombinedDrillTitle(drillInfo)} />
         </Appbar.Header>
 
         {/* Tab system */}

diff --git a/app/content/drill/[id]/leaderboard.js b/app/content/drill/[id]/leaderboard.js
@@ -39,11 +39,14 @@ export default function Leaderboard() {
     error: leaderboardError,
   } = useLeaderboard({ drillId });
 
+  const preCalcLeaderboardExists =
+    preCalcLeaderboard && Object.keys(preCalcLeaderboard).length > 0;
+
   useEffect(() => {
     setManualAttemptCalc(
       !drillIsLoading && // so that mainOutputAttempt is calculated
         !leaderboardIsLoading && //leaderboard must've finished loading
-        (!preCalcLeaderboard || //and not exist
+        (!preCalcLeaderboardExists || //and not exist
           preCalcLeaderboard[Object.keys(preCalcLeaderboard)[0]][
             mainOutputAttempt
           ] === undefined), //or exist but does not have the required field
@@ -83,7 +86,7 @@ export default function Leaderboard() {
     : customMainOutputAttempt;
 
   const leaderboardAttempts = preCalcLeaderboard || {};
-  if (!preCalcLeaderboard && attempts) {
+  if (!preCalcLeaderboardExists && attempts) {
     //just in case...
     for (const id in attempts) {
       const entry = attempts[id];
@@ -125,6 +128,10 @@ export default function Leaderboard() {
       leaderboardAttempts[b][mainOutputAttempt]["value"],
   );
 
+  if (orderedLeaderboard.length < 1) {
+    return <Text>No attempts have been made yet.</Text>;
+  }
+
   return (
     <ScrollView>
       <List.Section style={{ marginLeft: 20 }}>
@@ -139,7 +146,7 @@ export default function Leaderboard() {
               asChild
             >
               <List.Item
-                title={userInfo[userId]["name"]}
+                title={userInfo[userId] ? userInfo[userId]["name"] : "Unknown"}
                 left={() => <Avatar.Text size={24} label="XD" />}
                 right={() => (
                   <View style={{ flexDirection: "row", alignItems: "center" }}>

diff --git a/app/content/drill/index.js b/app/content/drill/index.js
@@ -6,6 +6,7 @@ import { SafeAreaView } from "react-native-safe-area-context";
 import ErrorComponent from "~/components/errorComponent";
 import Loading from "~/components/loading";
 import { useDrillInfo } from "~/hooks/useDrillInfo";
+import { getCombinedDrillTitle } from "~/Utility";
 
 export default function Index() {
   const navigation = useNavigation();
@@ -24,6 +25,20 @@ export default function Index() {
     return <ErrorComponent message={drillInfoError} />;
   }
 
+  const drills = Object.values(drillInfo);
+
+  drills.sort((a, b) => {
+    const titleA = getCombinedDrillTitle(a).toUpperCase();
+    const titleB = getCombinedDrillTitle(b).toUpperCase();
+    if (titleA < titleB) {
+      return -1;
+    }
+    if (titleA > titleB) {
+      return 1;
+    }
+    return 0;
+  });
+
   return (
     <PaperProvider>
       <SafeAreaView>
@@ -33,7 +48,7 @@ export default function Index() {
 
         <ScrollView contentContainerStyle={styles.scrollView}>
           <List.Section>
-            {Object.values(drillInfo).map((drill) => (
+            {Object.values(drills).map((drill) => (
               <Link
                 key={drill.did}
                 href={{
@@ -43,7 +58,7 @@ export default function Index() {
                 style={{ paddingVertical: 8 }}
               >
                 <List.Item
-                  title={drill.drillType}
+                  title={getCombinedDrillTitle(drill)}
                   description={drill.description}
                   titleStyle={styles.title}
                   descriptionStyle={styles.description}