Merge pull request #24 from TritonSE/GeneralPrinciplesMainView

After messaging Megan, dimensions issues with styles were fixed and the switch from SafeAreaView to regular View was incorporated for consistency between Android and iOS across regular search page and the general principles main view. Since everything else on this was approved beforehand, we can proceed with the merge.
TritonSE · Mar 14, 2024 · e7d85d3 · e7d85d3
2 parents 1718a4a + 56fb1f7
commit e7d85d3
Show file tree

Hide file tree

Showing 6 changed files with 285 additions and 73 deletions.
diff --git a/dfm-sideline-sidekick-app/App.tsx b/dfm-sideline-sidekick-app/App.tsx
@@ -12,8 +12,9 @@ import { BottomNavBar, NavItem } from "./components/bar";
 import BookmarkPage from "./pages/BookmarkPage";
 import ConditionsSection from "./pages/ConditionsSection";
 import SearchPage from "./pages/SearchPage";
-import TabPage from "./pages/TabPage";
+// import TabPage from "./pages/TabPage";
 import GeneralPrinciples from "./pages/generalPrinciples";
+import GeneralPrinciplesMain from "./pages/generalPrinciplesMain";
 
 type DocumentBase = {
   _id: string;
@@ -27,6 +28,7 @@ type DocumentBase = {
 type RootStackParamList = {
   Bookmark: undefined;
   Search: undefined;
+  GPM: undefined;
   Tab: undefined;
   MedicalConditions: { emergency: DocumentBase };
   GeneralPrinciples: { contentProp: DocumentBase };
@@ -60,7 +62,7 @@ const BottomNavBarComponent = () => {
       routeName: "Principles",
       icon: "principles",
       onClick: () => {
-        navigation.navigate("Tab");
+        navigation.navigate("GPM");
       },
     },
   ];
@@ -76,7 +78,11 @@ export default function App() {
         <Stack.Navigator initialRouteName="Search">
           <Stack.Screen name="Bookmark" component={BookmarkPage} options={{ headerShown: false }} />
           <Stack.Screen name="Search" component={SearchPage} options={{ headerShown: false }} />
-          <Stack.Screen name="Tab" component={TabPage} options={{ headerShown: false }} />
+          <Stack.Screen
+            name="GPM"
+            component={GeneralPrinciplesMain}
+            options={{ headerShown: false }}
+          />
           <Stack.Screen
             name="MedicalConditions"
             component={ConditionsSection}

diff --git a/dfm-sideline-sidekick-app/assets/fonts/Roboto-Medium.ttf b/dfm-sideline-sidekick-app/assets/fonts/Roboto-Medium.ttf
diff --git a/dfm-sideline-sidekick-app/pages/SearchPage.tsx b/dfm-sideline-sidekick-app/pages/SearchPage.tsx
@@ -20,9 +20,14 @@ type DocumentBase = {
   content?: object;
 };
 
+type SearchPageProps = {
+  onPage: boolean;
+  setShowing?: (param: boolean) => void;
+};
+
 type ConditionsNavigationProp = StackNavigationProp<RootStackParamList, "Conditions">;
 
-const SearchPage: React.FC = () => {
+const SearchPage: React.FC<SearchPageProps> = ({ onPage = true, setShowing }) => {
   const [query, setQuery] = useState<string>("");
   const [filteredDocuments, setFilteredDocuments] = useState<DocumentBase[]>([]);
   const [recentSearches, setRecentSearches] = useState<DocumentBase[]>([]);
@@ -99,6 +104,10 @@ const SearchPage: React.FC = () => {
     if (inputRef.current !== null) {
       inputRef.current.blur();
     }
+    if (setShowing !== undefined) {
+      setShowing(false);
+      return;
+    }
     if (navigation.canGoBack()) {
       navigation.goBack();
     } else {
@@ -115,56 +124,63 @@ const SearchPage: React.FC = () => {
         onClear={clearInput}
         onCancel={cancelSearch}
         inputRef={inputRef}
-        isFocused={true}
+        isFocused={onPage}
+        onFocus={() => {
+          if (setShowing !== undefined) {
+            setShowing(true);
+          }
+        }}
       />
-      <View>
-        {query.length === 0 ? (
-          <>
-            <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={() => {
-                    handlePress(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>
-              )}
-            />
-          </>
-        ) : (
-          <View style={styles.resultList}>
-            <FlatList
-              data={filteredDocuments}
-              keyExtractor={(item) => item._id}
-              ItemSeparatorComponent={() => <View style={styles.divider} />}
-              renderItem={({ item }) => (
-                <TouchableOpacity
-                  style={styles.listItemContainer}
-                  onPress={() => {
-                    handlePress(item);
-                  }}
-                >
-                  <View style={styles.listItemTextContainer}>
-                    <Text style={styles.listItemTitle}>{highlightText(item.title, query)}</Text>
-                    <Text style={styles.listItemSubtitle}>{item.subtitle}</Text>
-                  </View>
-                  <Icon name="chevron-right" size={20} color="#909090" />
-                </TouchableOpacity>
-              )}
-            />
-          </View>
-        )}
-      </View>
+      {onPage && (
+        <View>
+          {query.length === 0 ? (
+            <>
+              <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={() => {
+                      handlePress(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>
+                )}
+              />
+            </>
+          ) : (
+            <View style={styles.resultList}>
+              <FlatList
+                data={filteredDocuments}
+                keyExtractor={(item) => item._id}
+                ItemSeparatorComponent={() => <View style={styles.divider} />}
+                renderItem={({ item }) => (
+                  <TouchableOpacity
+                    style={styles.listItemContainer}
+                    onPress={() => {
+                      handlePress(item);
+                    }}
+                  >
+                    <View style={styles.listItemTextContainer}>
+                      <Text style={styles.listItemTitle}>{highlightText(item.title, query)}</Text>
+                      <Text style={styles.listItemSubtitle}>{item.subtitle}</Text>
+                    </View>
+                    <Icon name="chevron-right" size={20} color="#909090" />
+                  </TouchableOpacity>
+                )}
+              />
+            </View>
+          )}
+        </View>
+      )}
     </View>
   );
 };

diff --git a/dfm-sideline-sidekick-app/pages/SearchPageStyles.tsx b/dfm-sideline-sidekick-app/pages/SearchPageStyles.tsx
@@ -1,24 +1,35 @@
-import { StyleSheet } from "react-native";
+import { Dimensions, StyleSheet } from "react-native";
+
+const { width, height } = Dimensions.get("window");
+const minDimension = Math.min(width, height);
 
 const styles = StyleSheet.create({
   container: {
-    paddingHorizontal: 17.5,
-    paddingTop: 50,
+    paddingHorizontal: width * 0.05, // 5% of screen width/height
+    paddingTop: height * 0.06927, // ~7% of screen width/height
   },
   listItemContainer: {
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "space-between",
-    paddingVertical: 15,
+    paddingVertical: height * 0.015, // 1.5% of screen width/height
+    //paddingHorizontal: width * 0.005, // 4% of screen width/height
+  },
+  cancelButton: {
+    paddingLeft: width * 0.02, // 2% of screen width/height
+    marginBottom: height * 0.008, // 0.8% of screen width/height
+    justifyContent: "center",
+    alignItems: "center",
+    overflow: "visible",
   },
   listItemTextContainer: {
     flex: 1,
-    marginRight: 30,
+    //marginRight: 30,
   },
   listItemTitle: {
-    fontSize: 18,
+    fontSize: 18, //minDimension * 0.06, // 6% of screen width/height
     fontWeight: "500",
-    paddingBottom: 10,
+    paddingBottom: height * 0.012, // 1.2% of screen width/height
   },
   recentItemTitle: {
     color: "#484848",
@@ -27,32 +38,57 @@ const styles = StyleSheet.create({
     fontWeight: "500",
   },
   listItemSubtitle: {
-    fontSize: 13,
+    fontSize: 13, //minDimension * 0.035, // 3.5% of screen width/height
     color: "grey",
   },
+  subtitle: {
+    color: "#182B49",
+    fontSize: 18,
+    fontFamily: "Roboto",
+    fontWeight: "500",
+    paddingTop: 15,
+  },
   divider: {
     height: 1,
     backgroundColor: "lightgrey",
-    marginVertical: 10,
+    //marginHorizontal: width * 0.04, // 4% of screen width/height
+    marginVertical: height * 0.01, // 1% of screen width/height
   },
   title: {
     color: "#182B49",
-    fontSize: 28,
-    fontFamily: "Roboto",
+    fontSize: 28, //minDimension * 0.1, // 10% of screen width/height
     fontWeight: "700",
-    marginBottom: 20,
+    marginBottom: height * 0.02, // 2% of screen width/height
     textAlign: "left",
-    paddingTop: 10,
+    paddingTop: height * 0.007, // 0.7% of screen width/height
+    fontFamily: "Roboto-Regular",
   },
-  subtitle: {
-    color: "#182B49",
-    fontSize: 18,
-    fontFamily: "Roboto",
-    fontWeight: "500",
-    paddingTop: 15,
+  searchContainer: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  searchSection: {
+    flexDirection: "row",
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    borderWidth: 1,
+    borderColor: "rgba(0, 0, 0, 0.4)",
+    borderRadius: minDimension * 0.02, // 2% of screen width
+    margin: 0,
+    marginBottom: height * 0.01, // 1% of screen height
+  },
+  searchIcon: {
+    padding: minDimension * 0.02, // 2% of screen width
+  },
+  input: {
+    flex: 1,
+    paddingVertical: height * 0.01, // 1% of screen height
+    color: "#424242",
   },
   itemTitle: {
-    padding: 10,
+    padding: minDimension * 0.02, // 2% of screen height/width
   },
   highlightedText: {
     color: "#00629B",
@@ -61,4 +97,5 @@ const styles = StyleSheet.create({
     paddingBottom: 350,
   },
 });
+
 export default styles;
diff --git a/dfm-sideline-sidekick-app/pages/generalPrinciplesMain.tsx b/dfm-sideline-sidekick-app/pages/generalPrinciplesMain.tsx
@@ -0,0 +1,74 @@
+import * as Font from "expo-font";
+import React, { useState } from "react";
+import { Pressable, ScrollView, Text, View } from "react-native";
+
+import SearchPage from "./SearchPage";
+import styles from "./generalPrinciplesMainStyles";
+
+const GeneralPrinciplesMain = () => {
+  const [fontsLoaded, setFontsLoaded] = useState<boolean>(false);
+  const [searchShowing, setSearchShowing] = useState(false);
+
+  React.useEffect(() => {
+    async function loadFont() {
+      try {
+        await Font.loadAsync({
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+          "Roboto-Medium": require("../assets/fonts/Roboto-Medium.ttf"),
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+          "Roboto-Bold": require("../assets/fonts/Roboto-Bold.ttf"),
+        });
+        setFontsLoaded(true);
+      } catch (error) {
+        console.error("Error loading fonts:", error);
+      }
+    }
+
+    void loadFont();
+  }, []);
+
+  if (!fontsLoaded) {
+    return <Text>Loading...</Text>;
+  }
+
+  const renderPressables = () => {
+    const pressableData = [
+      ["Emergency Action Plan", "Trauma Centers"],
+      ["Burn Centers", "Stroke Centers"],
+      ["Inclement Weather", "Serious On-Field Injury"],
+      ["Catastrophic Incident", "Administering Medication"],
+      ["Muscle Injuries", "Ligament Injuries"],
+      ["Dislocations/Subluxations", "Fractures"],
+    ];
+
+    return pressableData.map((row, index) => (
+      <View key={index} style={styles.row}>
+        {row.map((label, colIndex) => (
+          <Pressable key={`${index}-${colIndex}`} style={styles.pressable}>
+            <Text style={styles.pressableText} numberOfLines={0}>
+              {label}
+            </Text>
+          </Pressable>
+        ))}
+      </View>
+    ));
+  };
+
+  return (
+    <View>
+      <SearchPage onPage={searchShowing} setShowing={setSearchShowing} />
+      {!searchShowing && (
+        <ScrollView alwaysBounceHorizontal={false} contentContainerStyle={{ flexGrow: 1 }}>
+          <View style={styles.container}>
+            <View style={styles.subheader}>
+              <Text style={styles.subheaderText}>Browse by Category</Text>
+            </View>
+            <View style={styles.grid}>{renderPressables()}</View>
+          </View>
+        </ScrollView>
+      )}
+    </View>
+  );
+};
+
+export default GeneralPrinciplesMain;