From 7de231bbbae24c6c78c482fff57e84eeb05f6a1b Mon Sep 17 00:00:00 2001
From: hannacol <hannacol@oregonstate.edu>
Date: Wed, 10 Apr 2024 20:48:12 -0700
Subject: [PATCH] DrillList has been componentized for main drill list and
 profile view to be sectioned off

---
 Utility.js                             |  12 +-
 app/content/drill/index.js             |  50 +-----
 app/content/profile/index.js           | 216 ++++++++++++-------------
 app/content/team/users/[user]/index.js |  38 ++---
 components/drillCard.js                |   4 +-
 components/drillList.js                |  52 ++++++
 6 files changed, 178 insertions(+), 194 deletions(-)
 create mode 100644 components/drillList.js

diff --git a/Utility.js b/Utility.js
index 600e8d82..f74b4193 100644
--- 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
index 37bd8171..9ffa542c 100644
--- 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,20 +25,6 @@ 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>
@@ -46,33 +32,7 @@ export default function Index() {
           <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
index 50a26300..f3565ed7 100644
--- 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>
diff --git a/app/content/team/users/[user]/index.js b/app/content/team/users/[user]/index.js
index 8897d1ac..906b6fe3 100644
--- a/app/content/team/users/[user]/index.js
+++ b/app/content/team/users/[user]/index.js
@@ -3,7 +3,7 @@ import { ScrollView, StyleSheet, Text, View } from "react-native";
 import { Appbar, PaperProvider } 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";
@@ -42,7 +42,7 @@ function Index(props) {
     );
   }
 
-  const uniqueDrills = getUnique(attempts, "did");
+  const uniqueDrills = getUnique(attempts, "did", Object.values(drillInfo));
 
   return (
     <PaperProvider>
@@ -57,33 +57,17 @@ function Index(props) {
           <Appbar.Content title={userData["name"] + "'s Profile"} />
         </Appbar.Header>
 
-        <ScrollView contentContainerStyle={styles.scrollViewContent}>
-          <View style={styles.profileContainer}>
-            <ProfileCard user={userData} />
-          </View>
+        <View style={styles.profileContainer}>
+          <ProfileCard user={userData} />
+        </View>
 
-          <Text style={styles.heading}>Drills</Text>
+        <Text style={styles.heading}>Drills</Text>
 
-          {uniqueDrills.length > 0 ? (
-            uniqueDrills.map((drill) => {
-              const drillId = drill["did"];
-              return (
-                <DrillCard
-                  drill={drillInfo[drillId]}
-                  hrefString={
-                    "/content/team/users/" +
-                    userData["uid"] +
-                    "/drills/" +
-                    drillId
-                  }
-                  key={drillId}
-                />
-              );
-            })
-          ) : (
-            <Text style={styles.noDrillsText}>No drills attempted yet</Text>
-          )}
-        </ScrollView>
+        {uniqueDrills.length > 0 ? (
+          <DrillList drillData={uniqueDrills} href={"/content/team/users/" + userData["uid"] + "/drills/"  } />
+        ) : (
+          <Text style={styles.noDrillsText}>No drills attempted yet</Text>
+        )}
       </SafeAreaView>
     </PaperProvider>
   );
diff --git a/components/drillCard.js b/components/drillCard.js
index 4759af7c..44d90aeb 100644
--- a/components/drillCard.js
+++ b/components/drillCard.js
@@ -3,12 +3,11 @@ import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
 import { getCombinedDrillTitle } from "~/Utility";
 
 function DrillCard(props) {
-  // console.log(props);
   return (
     <Link href={props.hrefString} asChild>
       <TouchableOpacity style={styles.cardContainer}>
         <View style={styles.cardContent}>
-          <Text style={styles.title}>{getCombinedDrillTitle(props.drill)}</Text>
+          <Text style={styles.title}>{props.drill.subType}</Text>
           <View style={styles.specContainer}>
             <Text style={styles.inputText}>
               {props.drill["inputs"]
@@ -56,7 +55,6 @@ const styles = StyleSheet.create({
   },
   title: {
     fontSize: 16,
-    fontWeight: "bold",
     color: "#333",
   },
   specContainer: {
diff --git a/components/drillList.js b/components/drillList.js
new file mode 100644
index 00000000..a321ff83
--- /dev/null
+++ b/components/drillList.js
@@ -0,0 +1,52 @@
+import { SectionList, Text } from "react-native";
+import { Divider } from "react-native-paper";
+
+import DrillCard from "~/components/drillCard"
+
+export default function DrillList(props) {
+  const drills = [];
+  Object.values(props.drillData).forEach(drill => {
+    if (drills.length !== 0) {
+      const idx = drills.findIndex(item => item.title === drill.prettyDrillType)
+      if (idx !== -1) {
+        drills[idx].data.push(drill)
+      }
+      else {
+        drills.push({
+          title: drill.prettyDrillType,
+          data: [
+            drill,
+          ],
+        })
+      }
+    }
+    else {
+      drills.push({
+        title: drill.prettyDrillType,
+        data: [
+          drill,
+        ],
+      })
+    }
+  });
+
+  return (
+    <SectionList
+      style={{ paddingHorizontal: 20, paddingBottom: 50 }}
+      sections={drills}
+      renderItem={({item}) => (
+        <DrillCard
+          key={item.did}
+          drill={item}
+          hrefString={props.href + item.did}
+        />
+      )}
+      renderSectionHeader={({section: {title}}) => (
+        <>
+          <Text style={{ fontSize: 16, fontWeight: "bold", paddingVertical: 5 }}>{title}</Text>
+          <Divider bold={true} />
+        </>
+      )}
+    />
+  )
+}
\ No newline at end of file