DrillList has been componentized for main drill list and profile view…

… to be sectioned off
Golf-Drill-Challenge-App · Apr 11, 2024 · 7de231b · 7de231b
1 parent f93ca2e
commit 7de231b
Show file tree

Hide file tree

Showing 6 changed files with 178 additions and 194 deletions.
diff --git a/Utility.js b/Utility.js
@@ -34,15 +34,17 @@ export function numTrunc(value, pad = false) {
   }
 }
 
-export function getUnique(array, field) {
-  const uniqueMap = new Map();
+export function getUnique(array, field, drills) {
+  const unique = [];
   array.forEach((element) => {
     const keyValue = element[field];
-    if (!uniqueMap.has(keyValue)) {
-      uniqueMap.set(keyValue, element);
+    const drill = drills.find((item) => item.did === keyValue)
+    const idx = unique.findIndex(item => item.did === keyValue);
+    if (idx === -1) {
+      unique.push(drill);
     }
   });
-  return Array.from(uniqueMap.values());
+  return unique;
 }
 
 export function calculateAverageProxToHole(drillSubmissions) {

diff --git a/app/content/drill/index.js b/app/content/drill/index.js
@@ -1,12 +1,12 @@
-import { Link, useNavigation } from "expo-router";
-import { ScrollView, StyleSheet } from "react-native";
-import { Appbar, List, PaperProvider } from "react-native-paper";
+import { useNavigation } from "expo-router";
+import { StyleSheet } from "react-native";
+import { Appbar, PaperProvider } from "react-native-paper";
 import { SafeAreaView } from "react-native-safe-area-context";
 
 import ErrorComponent from "~/components/errorComponent";
 import Loading from "~/components/loading";
+import DrillList from "~/components/drillList";
 import { useDrillInfo } from "~/hooks/useDrillInfo";
-import { getCombinedDrillTitle } from "~/Utility";
 
 export default function Index() {
   const navigation = useNavigation();
@@ -25,54 +25,14 @@ 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>
         <Appbar.Header statusBarHeight={0} style={{ backgroundColor: "FFF" }}>
           <Appbar.Content title="Drills" />
         </Appbar.Header>
 
-        <ScrollView contentContainerStyle={styles.scrollView}>
-          <List.Section>
-            {Object.values(drills).map((drill) => (
-              <Link
-                key={drill.did}
-                href={{
-                  pathname: `/content/drill/${drill.did}`,
-                  params: { id: drill.did },
-                }}
-                style={{ paddingVertical: 8 }}
-              >
-                <List.Item
-                  title={getCombinedDrillTitle(drill)}
-                  description={drill.description}
-                  titleStyle={styles.title}
-                  descriptionStyle={styles.description}
-                  left={() => (
-                    <List.Icon
-                      icon="file-document-outline" /*TODO: pick a better icon*/
-                    />
-                  )}
-                  style={styles.item}
-                />
-              </Link>
-            ))}
-          </List.Section>
-        </ScrollView>
+        <DrillList drillData={drillInfo} href={"content/drill/"} />
       </SafeAreaView>
     </PaperProvider>
   );

diff --git a/app/content/profile/index.js b/app/content/profile/index.js
@@ -15,7 +15,6 @@ import { useEffect, useMemo, useRef, useState } from "react";
 import {
   Image,
   Pressable,
-  ScrollView,
   StyleSheet,
   Text,
   TextInput,
@@ -33,7 +32,7 @@ import {
 } from "react-native-paper";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { getUnique } from "~/Utility";
-import DrillCard from "~/components/drillCard";
+import DrillList from "~/components/drillList";
 import ErrorComponent from "~/components/errorComponent";
 import Loading from "~/components/loading";
 import ProfileCard from "~/components/profileCard";
@@ -208,7 +207,7 @@ function Index(props) {
     }
   };
 
-  const uniqueDrills = getUnique(attempts, "did");
+  const uniqueDrills = getUnique(attempts, "did", Object.values(drillInfo));
 
   return (
     <PaperProvider>
@@ -247,119 +246,108 @@ function Index(props) {
         </Appbar.Header>
 
         <BottomSheetModalProvider>
-          <ScrollView contentContainerStyle={styles.scrollViewContent}>
-            <View style={styles.profileContainer}>
-              <ProfileCard user={userData} />
-            </View>
-
-            <Text style={styles.heading}>Drill History</Text>
-
-            {uniqueDrills.length > 0 ? (
-              uniqueDrills.map((drill) => {
-                const drillId = drill["did"];
-                return (
-                  <DrillCard
-                    drill={drillInfo[drillId]}
-                    hrefString={"content/profile/drills/" + drillId}
-                    key={drillId}
+          <View style={styles.profileContainer}>
+            <ProfileCard user={userData} />
+          </View>
+
+          <Text style={styles.heading}>Drill History</Text>
+
+          {uniqueDrills.length > 0 ? (
+            <DrillList drillData={uniqueDrills} href={"content/profile/drills/"} />
+          ) : (
+            <Text style={styles.noDrillsText}>No drills attempted yet</Text>
+          )}
+
+          <BottomSheetModal
+            ref={bottomSheetModalRef}
+            index={1}
+            snapPoints={snapPoints}
+          >
+            <View style={styles.modalContent}>
+              {/* Close Button */}
+              <Pressable
+                onPress={() => {
+                  bottomSheetModalRef.current.close();
+                  resetForm();
+                  setPasswordInputVisible(false);
+                }}
+                style={styles.closeButton}
+              >
+                <Text style={styles.closeButtonText}>Close</Text>
+              </Pressable>
+
+              {/* Profile Picture */}
+              <TouchableOpacity onPress={handleImageClick}>
+                <View style={styles.profilePictureContainer}>
+                  <Image
+                    source={{ uri: userData.pfp }}
+                    style={styles.profilePicture}
                   />
-                );
-              })
-            ) : (
-              <Text style={styles.noDrillsText}>No drills attempted yet</Text>
-            )}
-
-            <BottomSheetModal
-              ref={bottomSheetModalRef}
-              index={1}
-              snapPoints={snapPoints}
-            >
-              <View style={styles.modalContent}>
-                {/* Close Button */}
-                <Pressable
-                  onPress={() => {
-                    bottomSheetModalRef.current.close();
-                    resetForm();
-                    setPasswordInputVisible(false);
-                  }}
-                  style={styles.closeButton}
-                >
-                  <Text style={styles.closeButtonText}>Close</Text>
-                </Pressable>
-
-                {/* Profile Picture */}
-                <TouchableOpacity onPress={handleImageClick}>
-                  <View style={styles.profilePictureContainer}>
-                    <Image
-                      source={{ uri: userData.pfp }}
-                      style={styles.profilePicture}
-                    />
-                    <View style={styles.penIconContainer}>
-                      <MaterialIcons name="edit" size={24} color="black" />
-                    </View>
+                  <View style={styles.penIconContainer}>
+                    <MaterialIcons name="edit" size={24} color="black" />
                   </View>
-                </TouchableOpacity>
-
-                <TextInput
-                  style={styles.input}
-                  value={newName}
-                  onChangeText={(text) => setNewName(text)}
-                  placeholder="Enter your name"
-                />
-                <TextInput
-                  style={styles.input}
-                  value={email}
-                  onChangeText={(text) => setEmail(text)}
-                  placeholder="Enter your email"
-                />
-
-                {/* Change Password Button */}
-                <Pressable
-                  onPress={() => {
-                    resetForm();
-                    setPasswordInputVisible(!passwordInputVisible);
-                  }}
-                >
-                  <Text style={styles.changePasswordButton}>
-                    Change Password
-                  </Text>
-                </Pressable>
-
-                {/* Password Input Field */}
-                {passwordInputVisible && (
-                  <>
-                    <TextInput
-                      style={styles.input}
-                      value={currentPassword}
-                      onChangeText={setCurrentPassword}
-                      placeholder="Enter your current password"
-                      secureTextEntry={true}
-                    />
-                    <TextInput
-                      style={styles.input}
-                      value={newPassword}
-                      onChangeText={setNewPassword}
-                      placeholder="Enter your new password"
-                      secureTextEntry={true}
-                    />
-                  </>
-                )}
-
-                {/* Save Button */}
-                <TouchableOpacity
-                  style={styles.saveChangesButton}
-                  onPress={handleUpdate}
-                >
-                  <Text style={styles.saveChangesButtonText}>Update</Text>
-                </TouchableOpacity>
-
-                {/* Sign Out Button */}
-                <Pressable onPress={handleSignOut}>
-                  <Text style={styles.signOutButton}>Sign Out</Text>
-                </Pressable>
-              </View>
-            </BottomSheetModal>
-          </ScrollView>
+                </View>
+              </TouchableOpacity>
+
+              <TextInput
+                style={styles.input}
+                value={newName}
+                onChangeText={(text) => setNewName(text)}
+                placeholder="Enter your name"
+              />
+              <TextInput
+                style={styles.input}
+                value={email}
+                onChangeText={(text) => setEmail(text)}
+                placeholder="Enter your email"
+              />
+
+              {/* Change Password Button */}
+              <Pressable
+                onPress={() => {
+                  resetForm();
+                  setPasswordInputVisible(!passwordInputVisible);
+                }}
+              >
+                <Text style={styles.changePasswordButton}>
+                  Change Password
+                </Text>
+              </Pressable>
+
+              {/* Password Input Field */}
+              {passwordInputVisible && (
+                <>
+                  <TextInput
+                    style={styles.input}
+                    value={currentPassword}
+                    onChangeText={setCurrentPassword}
+                    placeholder="Enter your current password"
+                    secureTextEntry={true}
+                  />
+                  <TextInput
+                    style={styles.input}
+                    value={newPassword}
+                    onChangeText={setNewPassword}
+                    placeholder="Enter your new password"
+                    secureTextEntry={true}
+                  />
+                </>
+              )}
+
+              {/* Save Button */}
+              <TouchableOpacity
+                style={styles.saveChangesButton}
+                onPress={handleUpdate}
+              >
+                <Text style={styles.saveChangesButtonText}>Update</Text>
+              </TouchableOpacity>
+
+              {/* Sign Out Button */}
+              <Pressable onPress={handleSignOut}>
+                <Text style={styles.signOutButton}>Sign Out</Text>
+              </Pressable>
+            </View>
+          </BottomSheetModal>
         </BottomSheetModalProvider>
       </SafeAreaView>
     </PaperProvider>