Used better type safety and readability in handling navigation and ro…

…ute props in generalPrinciples.tsx to fix associated linter issues
TritonSE · Mar 3, 2024 · e7b5eb7 · e7b5eb7
1 parent 1cb47be
commit e7b5eb7
Showing 1 changed file with 32 additions and 15 deletions.
diff --git a/dfm-sideline-sidekick-app/pages/generalPrinciples.tsx b/dfm-sideline-sidekick-app/pages/generalPrinciples.tsx
@@ -1,5 +1,8 @@
 import { Roboto_400Regular, Roboto_700Bold } from "@expo-google-fonts/roboto";
+import { RouteProp } from "@react-navigation/native"; // Import RouteProp
+import { StackNavigationProp } from "@react-navigation/stack"; // Import StackNavigationProp
 import { useFonts } from "expo-font";
+import React from "react";
 import { Text, TouchableOpacity, View } from "react-native";
 import AntIcon from "react-native-vector-icons/AntDesign";
 
@@ -15,19 +18,29 @@ type Content = {
   content: ContentItem;
 };
 
+export type RootStackParamList = {
+  GeneralPrinciples: { titleProp: string; overviewProp?: object; contentProp: Content | Content[] };
+};
+
 type GeneralProps = {
-  route: {
-    params: {
-      titleProp: string;
-      overviewProp?: object;
-      contentProp: Content | Content[];
-    };
-  };
-  navigation: any;
+  route: RouteProp<RootStackParamList, "GeneralPrinciples">;
+  navigation: StackNavigationProp<RootStackParamList, "GeneralPrinciples">;
 };
 
+// type GeneralProps = {
+//   route: {
+//     params: {
+//       titleProp: string;
+//       overviewProp?: object;
+//       contentProp: Content | Content[];
+//     };
+//   };
+//   navigation: any;
+// };
+
 const GeneralPrinciples: React.FC<GeneralProps> = ({ route, navigation }) => {
-  const { titleProp, contentProp } = route.params;
+  const { params } = route; // Destructure params from the route object
+  //const { titleProp, contentProp } = route.params;
 
   const [fontsLoaded] = useFonts({
     "Roboto-Regular": Roboto_400Regular,
@@ -38,21 +51,25 @@ const GeneralPrinciples: React.FC<GeneralProps> = ({ route, navigation }) => {
   }
   // const { title, content } = contentProp;
 
-  if (Array.isArray(contentProp)) {
+  if (Array.isArray(params.contentProp)) {
     return (
       <View style={styles.container}>
-        <ArrayPage arrayProp={contentProp} title={titleProp} />
+        <ArrayPage arrayProp={params.contentProp} title={params.titleProp} />
       </View>
     );
   } else {
     return (
       <View style={styles.container}>
-        <TouchableOpacity onPress={() => navigation.goBack()}>
+        <TouchableOpacity
+          onPress={() => {
+            navigation.goBack();
+          }}
+        >
           <AntIcon name="close" style={styles.button} />
         </TouchableOpacity>
-        <Text style={styles.title}>{titleProp}</Text>
-        <Text style={styles.subTitle}>{contentProp.title}</Text>
-        <BulletPoint content={contentProp.content} />
+        <Text style={styles.title}>{params.titleProp}</Text>
+        <Text style={styles.subTitle}>{params.contentProp.title}</Text>
+        <BulletPoint content={params.contentProp.content} />
       </View>
     );
   }