Fix: Navigation ecosystem

src/hooks/reduxHooks.ts

 import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
 import type { RootState, AppDispatch } from "../redux/store";
+import { IUser } from "../types/firestore/User";
 
 // Use throughout your app instead of plain `useDispatch` and `useSelector`
 export const useAppDispatch = () => useDispatch<AppDispatch>();
 export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
 
-export const useUser = () => useAppSelector((state) => state.user);
+export const useUser = (): IUser => useAppSelector((state) => state.user);

src/navigation/EcosystemStackNavigator.tsx

@@ -4,11 +4,11 @@ import BusinessEcosystemScreen from "../screens/ecosystem/BusinessEcosystemScree
 import { EcosystemStackParamList } from "../types/navigation/EcosystemStack";
 import {
   BusinessCategoryScreen,
-  UserListScreen,
   EcosystemDetailScreen,
   EcosystemListScreen,
   EcosystemMapScreen,
   RecommendedEcosystemScreen,
+  UserListScreen,
 } from "../screens/ecosystem";
 
 const EcosystemStack = createNativeStackNavigator<EcosystemStackParamList>();

src/screens/ecosystem/BusinessEcosystemScreen.tsx

@@ -33,7 +33,13 @@ const BusinessEcosystemScreen = () => {
       <View>
         <TouchableOpacity
           onPress={() => {
-            nav.navigate("Ecosystem", { screen: "MyEcosystem" });
+            nav.navigate("Ecosystem", {
+              screen: "Recommended",
+              params: {
+                headerTitle: "Ekosistem Saya",
+                toFetch: "myEcosystem",
+              },
+            });
           }}
         >
           <Text style={styles.link}>Ekosistem Saya</Text>
@@ -65,7 +71,13 @@ const BusinessEcosystemScreen = () => {
       <View>
         <TouchableOpacity
           onPress={() => {
-            nav.navigate("Ecosystem", { screen: "Popular" });
+            nav.navigate("Ecosystem", {
+              screen: "Recommended",
+              params: {
+                headerTitle: "Paling Populer",
+                toFetch: "popular",
+              },
+            });
           }}
         >
           <Text style={styles.link}>Paling Populer</Text>
@@ -75,7 +87,13 @@ const BusinessEcosystemScreen = () => {
       <View>
         <TouchableOpacity
           onPress={() => {
-            nav.navigate("Ecosystem", { screen: "Latest" });
+            nav.navigate("Ecosystem", {
+              screen: "Recommended",
+              params: {
+                headerTitle: "Terbaru Minggu Ini",
+                toFetch: "mostRecent",
+              },
+            });
           }}
         >
           <Text style={styles.link}>Terbaru Minggu Ini</Text>

src/screens/ecosystem/RecommendedEcosystemScreen.tsx

 import * as React from "react";
-import { Alert, StyleSheet } from "react-native";
+import { StyleSheet } from "react-native";
 import { Text, View } from "../../components/Themed";
 import Colors from "../../constants/Colors";
 import { EcosystemStackScreenProps } from "../../types/navigation";
+import { LogBox } from "react-native";
 
 const RecommendedEcosystemScreen = ({
   route,
 }: EcosystemStackScreenProps<"Recommended">) => {
   const { toFetch } = route.params;
 
+  switch (toFetch) {
+    case "popular":
+      break;
+    case "myEcosystem":
+      break;
+    case "mostRecent":
+      break;
+    case "joined":
+      break;
+    default:
+      break;
+  }
+
+  LogBox.ignoreLogs([
+    "Non-serializable values were found in the navigation state",
+  ]);
+
   return (
     <View style={styles.container}>
       <View>
-        <Text onPress={() => Alert.alert(toFetch)}>
-          Layar Rekomendasi Ekosistem
-        </Text>
+        <Text>Layar Rekomendasi Ekosistem</Text>
       </View>
     </View>
   );

src/screens/ecosystem/UserListScreen.tsx

@@ -7,7 +7,7 @@ const UserListScreen = () => {
   return (
     <View style={styles.container}>
       <View>
-        <Text>Layar List Bisnis</Text>
+        <Text>Layar List User</Text>
       </View>
     </View>
   );