added functionality to track recent searches and developed the recent…

… searches page
TritonSE · Mar 10, 2024 · c3a6cfd · c3a6cfd
1 parent d87121f
commit c3a6cfd
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 5 deletions.
diff --git a/dfm-sideline-sidekick-app/SearchBarStyles.tsx b/dfm-sideline-sidekick-app/SearchBarStyles.tsx
@@ -15,7 +15,6 @@ const styles = StyleSheet.create({
     borderColor: "rgba(0, 0, 0, 0.4)",
     borderRadius: 10,
     margin: 0,
-    marginBottom: 10,
   },
   input: {
     flex: 1,

diff --git a/dfm-sideline-sidekick-app/pages/SearchPage.tsx b/dfm-sideline-sidekick-app/pages/SearchPage.tsx
@@ -9,7 +9,7 @@ import { searchDocuments } from "../HandleSearch";
 import SearchBar from "../SearchBarComponent";
 
 import { RootStackParamList } from "./ConditionsSection";
-import styles from "./GlobalSearchStyles";
+import styles from "./SearchPageStyles";
 
 type DocumentBase = {
   _id: string;
@@ -26,6 +26,7 @@ const SearchPage: React.FC = () => {
   const [query, setQuery] = useState<string>("");
   const [filteredDocuments, setFilteredDocuments] = useState<DocumentBase[]>([]);
   const [isFocused, setIsFocused] = useState<boolean>(false);
+  const [recentSearches, setRecentSearches] = useState<DocumentBase[]>([]);
   const { jsonData } = useData();
   const emergencies = jsonData?.emergencies ?? [];
   const generalPrinciples = jsonData?.generalPrinciples ?? [];
@@ -41,14 +42,25 @@ const SearchPage: React.FC = () => {
         _id: doc._id ?? "fallback-id",
         subtitle:
           doc.subtitle ??
-          "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.",
+          "Lorem ipsum dolor sit amet, consectetur adip iscing elit, sed do.",
       }));
       setFilteredDocuments(matchedDocuments);
     } else {
       setFilteredDocuments([]);
     }
   };
 
+  const addToRecentSearches = (document: DocumentBase) => {
+    setRecentSearches((currentSearches) => {
+      const exists = currentSearches.find((item) => item._id === document._id);
+      if (exists) {
+        return currentSearches; 
+      }
+      const newSearches = [document, ...currentSearches];
+      return newSearches.slice(0, 10); // limitting to most recent 10 searches
+    });
+  };
+
   const highlightText = (text: string, input: string): React.ReactNode[] => {
     const words = input.split(/\s+/).map((word) => word.replace(/[-\\^$*+?.()|[\]{}]/g, "\\$&"));
     const pattern = words.join("|");
@@ -103,7 +115,30 @@ const SearchPage: React.FC = () => {
       <View>
         {query.length === 0 ? (
           isFocused ? (
-            <Text>Recent Searches...</Text>
+            <><Text style={styles.subtitle}>Recent</Text>
+            <FlatList
+              data={recentSearches}
+              keyExtractor={(item) => item._id}
+              ItemSeparatorComponent={() => <View style={styles.divider} />}
+              renderItem={({ item }) => (
+                <TouchableOpacity
+                  style={styles.listItemContainer}
+                  onPress={() => {
+                    if (item.content !== undefined) {
+                      navigation.navigate("GeneralPrinciples", { contentProp: item });
+                      console.log(item.content);
+                    } else {
+                      navigation.navigate("MedicalConditions", { emergency: item });
+                    }
+                  } }
+                >
+                  <View style={styles.listItemTextContainer}>
+                    <Text style={styles.recentItemTitle}>{item.title}</Text>
+                    <Text style={styles.listItemSubtitle}>{item.subtitle}</Text>
+                  </View>
+                  <Icon name="chevron-right" size={20} color="#909090" />
+                </TouchableOpacity>
+              )} /></>
           ) : (
             <Text>Home Screen Cards...</Text>
           )
@@ -117,6 +152,7 @@ const SearchPage: React.FC = () => {
                 <TouchableOpacity
                   style={styles.listItemContainer}
                   onPress={() => {
+                    addToRecentSearches(item);
                     if (item.content !== undefined) {
                       navigation.navigate("GeneralPrinciples", { contentProp: item });
                       console.log(item.content);

diff --git a/...sidekick-app/pages/GlobalSearchStyles.tsx → ...e-sidekick-app/pages/SearchPageStyles.tsx b/...sidekick-app/pages/GlobalSearchStyles.tsx → ...e-sidekick-app/pages/SearchPageStyles.tsx
@@ -9,16 +9,23 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "space-between",
-    paddingVertical: 10,
+    paddingVertical: 10, 
   },
   listItemTextContainer: {
     flex: 1,
+    marginRight: 30
   },
   listItemTitle: {
     fontSize: 18,
     fontWeight: "500",
     paddingBottom: 10,
   },
+  recentItemTitle: {
+    color: "#484848",
+    paddingBottom: 10,
+    fontSize: 18,
+    fontWeight: "500",
+  },
   listItemSubtitle: {
     fontSize: 13,
     color: "grey",
@@ -37,6 +44,13 @@ const styles = StyleSheet.create({
     textAlign: "left",
     paddingTop: 10,
   },
+  subtitle: {
+    color: "#182B49",
+    fontSize: 18,
+    fontFamily: "Roboto",
+    fontWeight: "500",
+    paddingTop: 12
+  },
   itemTitle: {
     padding: 10,
   },