feat: Recommended screen navigation ecosystem

src/navigation/EcosystemStackNavigator.tsx

@@ -2,18 +2,13 @@ import { createNativeStackNavigator } from "@react-navigation/native-stack";
 import React from "react";
 import BusinessEcosystemScreen from "../screens/ecosystem/BusinessEcosystemScreen";
 import { EcosystemStackParamList } from "../types/navigation/EcosystemStack";
-import {
-  PopularEcosystemScreen,
-  JoinedEcosystemScreen,
-  MyEcosystemScreen,
-  LatestEcosystemScreen,
-} from "../screens/ecosystem/recomendation";
 import {
   BusinessCategoryScreen,
   BusinessListScreen,
   EcosystemDetailScreen,
   EcosystemListScreen,
   EcosystemMapScreen,
+  RecommendedEcosystemScreen,
 } from "../screens/ecosystem";
 
 const EcosystemStack = createNativeStackNavigator<EcosystemStackParamList>();
@@ -27,24 +22,12 @@ const EcosystemStackNavigator = () => {
         options={{ headerShown: false }}
       />
       <EcosystemStack.Screen
-        name="MyEcosystem"
-        component={MyEcosystemScreen}
-        options={{ title: "Ekosistem Saya" }}
-      />
-      <EcosystemStack.Screen
-        name="Joined"
-        component={JoinedEcosystemScreen}
-        options={{ title: "Sudah Bergabung" }}
-      />
-      <EcosystemStack.Screen
-        name="Popular"
-        component={PopularEcosystemScreen}
-        options={{ title: "Paling Populer" }}
-      />
-      <EcosystemStack.Screen
-        name="Latest"
-        component={LatestEcosystemScreen}
-        options={{ title: "Terbaru Minggu Ini" }}
+        name="Recommended"
+        component={RecommendedEcosystemScreen}
+        initialParams={{
+          headerTitle: "",
+        }}
+        options={({ route }) => ({ title: route.params.headerTitle })}
       />
       <EcosystemStack.Screen
         name="BusinessCategory"

src/navigation/RootNavigator.tsx

@@ -10,7 +10,6 @@ import { getUser } from "../redux/user/actions";
 import LandingScreen from "../screens/auth/LandingScreen";
 import firebase from "firebase";
 import { Alert } from "react-native";
-import CreateBusinessEcosystemScreen from "../screens/CreateBusinessEcosystemScreen";
 
 /**
  * A root stack navigator is often used for displaying modals on top of all other content.
@@ -74,11 +73,6 @@ const RootNavigator = () => {
         component={SuccessChangePasswordScreen}
         options={{ headerShown: false }}
       />
-      <RootStack.Screen
-        name="CreateBusinessEcosystem"
-        component={CreateBusinessEcosystemScreen}
-        options={{ title: "" }}
-      />
     </RootStack.Navigator>
   ) : (
     <RootStack.Navigator>

src/screens/ecosystem/BusinessEcosystemScreen.tsx

@@ -27,7 +27,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>
@@ -59,7 +65,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>
@@ -69,7 +81,13 @@ const BusinessEcosystemScreen = () => {
       <View>
         <TouchableOpacity
           onPress={() => {
-            nav.navigate("Ecosystem", { screen: "Latest" });
+            nav.navigate("Ecosystem", {
+              screen: "Recommended",
+              params: {
+                headerTitle: "Terbaru Minggu Ini",
+                toFetch: "Latest",
+              },
+            });
           }}
         >
           <Text style={styles.link}>Terbaru Minggu Ini</Text>

src/screens/ecosystem/recomendation/JoinedEcosystemScreen.tsx → src/screens/ecosystem/RecommendedEcosystemScreen.tsx

 import * as React from "react";
-import { StyleSheet } from "react-native";
-import { Text, View } from "../../../components/Themed";
-import Colors from "../../../constants/Colors";
+import { Alert, StyleSheet } from "react-native";
+import { Text, View } from "../../components/Themed";
+import Colors from "../../constants/Colors";
+import { EcosystemStackScreenProps } from "../../types/navigation";
+
+const RecommendedEcosystemScreen = ({
+  route,
+}: EcosystemStackScreenProps<"Recommended">) => {
+  const { toFetch } = route.params;
 
-const JoinedEcosystemScreen = () => {
   return (
     <View style={styles.container}>
       <View>
-        <Text>Layar Ekosistem Sudah Bergabung</Text>
+        <Text onPress={() => Alert.alert(toFetch)}>
+          Layar Rekomendasi Ekosistem
+        </Text>
       </View>
     </View>
   );
@@ -22,4 +29,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default JoinedEcosystemScreen;
+export default RecommendedEcosystemScreen;

src/screens/ecosystem/index.ts

@@ -3,6 +3,7 @@ import BusinessListScreen from "./BusinessListScreen";
 import EcosystemDetailScreen from "./EcosystemDetailScreen";
 import EcosystemListScreen from "./EcosystemListScreen";
 import EcosystemMapScreen from "./EcosystemMapScreen";
+import RecommendedEcosystemScreen from "./RecommendedEcosystemScreen";
 
 export {
   BusinessCategoryScreen,
@@ -10,4 +11,5 @@ export {
   EcosystemDetailScreen,
   EcosystemListScreen,
   EcosystemMapScreen,
+  RecommendedEcosystemScreen,
 };

src/screens/ecosystem/recomendation/LatestEcosystemScreen.tsx

-import * as React from "react";
-import { StyleSheet } from "react-native";
-import { Text, View } from "../../../components/Themed";
-import Colors from "../../../constants/Colors";
-
-const LatestEcosystemScreen = () => {
-  return (
-    <View style={styles.container}>
-      <View>
-        <Text>Layar Ekosistem Terbaru</Text>
-      </View>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: Colors.background,
-    paddingHorizontal: 24,
-    justifyContent: "center",
-  },
-});
-
-export default LatestEcosystemScreen;

src/screens/ecosystem/recomendation/MyEcosystemScreen.tsx

-import * as React from "react";
-import { StyleSheet } from "react-native";
-import { Text, View } from "../../../components/Themed";
-import Colors from "../../../constants/Colors";
-
-const MyEcosystemScreen = () => {
-  return (
-    <View style={styles.container}>
-      <View>
-        <Text>Layar Ekosistem Saya</Text>
-      </View>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: Colors.background,
-    paddingHorizontal: 24,
-    justifyContent: "center",
-  },
-});
-
-export default MyEcosystemScreen;

src/screens/ecosystem/recomendation/PopularEcosystemScreen.tsx

-import * as React from "react";
-import { StyleSheet } from "react-native";
-import { Text, View } from "../../../components/Themed";
-import Colors from "../../../constants/Colors";
-
-const PopularEcosystemScreen = () => {
-  return (
-    <View style={styles.container}>
-      <View>
-        <Text>Layar Ekosistem Populer</Text>
-      </View>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: Colors.background,
-    paddingHorizontal: 24,
-    justifyContent: "center",
-  },
-});
-
-export default PopularEcosystemScreen;

src/screens/ecosystem/recomendation/index.ts

-import JoinedEcosystemScreen from "./JoinedEcosystemScreen";
-import MyEcosystemScreen from "./MyEcosystemScreen";
-import PopularEcosystemScreen from "./PopularEcosystemScreen";
-import LatestEcosystemScreen from "./LatestEcosystemScreen";
-
-export {
-  PopularEcosystemScreen,
-  JoinedEcosystemScreen,
-  MyEcosystemScreen,
-  LatestEcosystemScreen,
-};

src/types/navigation/EcosystemStack.ts

@@ -6,16 +6,13 @@ import { NativeStackScreenProps } from "@react-navigation/native-stack";
 
 export type EcosystemStackParamList = {
   BusinessEcosystem: undefined;
-  Joined: undefined;
-  Popular: undefined;
-  Latest: undefined;
-  MyEcosystem: undefined;
   CreateEcosystem: undefined;
   BusinessCategory: undefined;
   EcosystemList: { headerTitle: string };
   EcosystemMap: undefined;
   BusinessList: { headerTitle: string };
   EcosystemDetails: { headerTitle: string };
+  Recommended: { headerTitle: string; toFetch: string };
 };
 
 export type EcosystemStackScreenProps<