feat: integrate CategoryEcosystemListScreen and EcosystemDetailScreen, add params in EcosystemStack

src/navigation/EcosystemStackNavigator.tsx

@@ -6,10 +6,10 @@ import {
   BusinessCategoryScreen,
   BusinessListScreen,
   EcosystemDetailScreen,
-  EcosystemListScreen,
   EcosystemMapScreen,
   RecommendedEcosystemScreen,
 } from "../screens/ecosystem";
+import CategoryEcosystemListScreen from "../screens/ecosystem/CategoryEcosystemListScreen";
 
 const EcosystemStack = createNativeStackNavigator<EcosystemStackParamList>();
 
@@ -36,7 +36,7 @@ const EcosystemStackNavigator = () => {
       />
       <EcosystemStack.Screen
         name="EcosystemList"
-        component={EcosystemListScreen}
+        component={CategoryEcosystemListScreen}
         initialParams={{ headerTitle: "" }}
         options={({ route }) => ({ title: route.params.headerTitle })}
       />

src/screens/CategoryEcosystemListScreen.tsx → src/screens/ecosystem/CategoryEcosystemListScreen.tsx

-import { FlatList, SafeAreaView, StyleSheet } from "react-native";
-import React, { useState } from "react";
-import HorizontalCards from "../components/Cards/HorizontalCards";
-// import { useNavigation } from "@react-navigation/core";
-import Colors from "../constants/Colors";
-import { View } from "../components/Themed";
-import Spacer from "../components/Spacer/Spacer";
-// import { IEcosystem } from "../types/firestore/ecosystems";
-import IconForm from "../components/Forms/IconForm";
+import { FlatList, ScrollView, StyleSheet } from "react-native";
+import React, { useEffect, useState } from "react";
+import HorizontalCards from "../../components/Cards/HorizontalCards";
+import { useNavigation } from "@react-navigation/core";
+import Colors from "../../constants/Colors";
+import { View } from "../../components/Themed";
+import Spacer from "../../components/Spacer/Spacer";
+import IconForm from "../../components/Forms/IconForm";
+import { getByCategory } from "../../service/firestore/ecosystem/getByCategory";
+import { IEcosystem } from "../../types/firestore/ecosystems";
+// import { EcosystemStackScreenProps } from "../../types/navigation";
 
 const CategoryEcosystemListScreen = () => {
-  // const nav = useNavigation();
+  const nav = useNavigation();
+  // const { toFetch } = route.params;
   const [search, setSearch] = useState("");
-  const [
-    listData,
-    //  setListData
-  ] = useState([
-    {
-      id: "1",
-      image:
-        "https://asset.kompas.com/crops/O_Vgje1nMEqUCaDexq2UJdbyT14=/9x1:989x655/750x500/data/photo/2020/02/21/5e5008d10c825.jpg",
-      member: "100",
-      title: "Pengolahan Kerupuk",
-      rate: "5",
-    },
-    {
-      id: "2",
-      image:
-        "https://asset.kompas.com/crops/O_Vgje1nMEqUCaDexq2UJdbyT14=/9x1:989x655/750x500/data/photo/2020/02/21/5e5008d10c825.jpg",
-      member: "120",
-      title: "Pengolahan Kerupuk",
-      rate: "4.9",
-    },
-    {
-      id: "3",
-      image:
-        "https://asset.kompas.com/crops/O_Vgje1nMEqUCaDexq2UJdbyT14=/9x1:989x655/750x500/data/photo/2020/02/21/5e5008d10c825.jpg",
-      member: "130",
-      title: "Pengolahan Kerupuk",
-      rate: "5",
-    },
-    {
-      id: "4",
-      image:
-        "https://asset.kompas.com/crops/O_Vgje1nMEqUCaDexq2UJdbyT14=/9x1:989x655/750x500/data/photo/2020/02/21/5e5008d10c825.jpg",
-      member: "140",
-      title: "Pengolahan Kerupuk",
-      rate: "4.4",
-    },
-    {
-      id: "5",
-      image:
-        "https://asset.kompas.com/crops/O_Vgje1nMEqUCaDexq2UJdbyT14=/9x1:989x655/750x500/data/photo/2020/02/21/5e5008d10c825.jpg",
-      member: "100",
-      title: "Pengolahan Kerupuk",
-      rate: "4",
-    },
-    {
-      id: "6",
-      image:
-        "https://asset.kompas.com/crops/O_Vgje1nMEqUCaDexq2UJdbyT14=/9x1:989x655/750x500/data/photo/2020/02/21/5e5008d10c825.jpg",
-      member: "10",
-      title: "Pengolahan Kerupuk",
-      rate: "5",
-    },
-  ]);
+  const [listData, setListData] = useState<IEcosystem[]>([]);
+
+  useEffect(() => {
+    getByCategory("A").then((res) => setListData(res));
+  });
 
   return (
-    <SafeAreaView style={styles.container}>
+    <ScrollView style={styles.container}>
       <View>
         <IconForm
           text={search}
@@ -82,11 +37,23 @@ const CategoryEcosystemListScreen = () => {
           return (
             <View style={styles.horizontalCard}>
               <HorizontalCards
-                image={item.image}
-                member={item.member}
-                title={item.title}
-                rate={item.rate}
-                onPress={null}
+                image={item.pic}
+                member={item.followerCount.toString()}
+                title={item.name}
+                rate={item.rating.toString()}
+                onPress={() =>
+                  nav.navigate("Ecosystem", {
+                    screen: "EcosystemDetails",
+                    params: {
+                      headerTitle: item.name,
+                      title: item.name,
+                      desc: item.description,
+                      image: item.pic,
+                      member: item.followerCount.toString(),
+                      rating: item.rating.toString(),
+                    },
+                  })
+                }
               />
             </View>
           );
@@ -96,7 +63,7 @@ const CategoryEcosystemListScreen = () => {
         showsVerticalScrollIndicator={false}
         showsHorizontalScrollIndicator={false}
       />
-    </SafeAreaView>
+    </ScrollView>
   );
 };
 

src/screens/ecosystem/EcosystemDetailScreen.tsx

@@ -6,23 +6,26 @@ import SmallButton from "../../components/button/SmallButton";
 import Spacer from "../../components/Spacer/Spacer";
 import { MaterialIcons } from "@expo/vector-icons";
 import Layout from "../../constants/Layout";
+import { EcosystemStackScreenProps } from "../../types/navigation";
 
-const EcosystemDetailScreen = () => {
+const EcosystemDetailScreen = ({
+  route,
+}: EcosystemStackScreenProps<"EcosystemDetails">) => {
+  const { title, desc, image, member, rating } = route.params;
   return (
     <View style={styles.container}>
       <View style={styles.imageWrapper}>
         <Image
           style={styles.image}
           source={{
-            // uri: {image}
-            uri: "https://bsmedia.business-standard.com/_media/bs/img/article/2020-12/11/full/1607656152-0479.jpg",
+            uri: image,
           }}
         />
       </View>
       <Spacer variant={"l"} />
       <View style={styles.textWrapper}>
         {/* <Text style={styles.title}>{Title}</Text> */}
-        <Text style={styles.title}>Petani Beras dan Gandum Jawa Tengah</Text>
+        <Text style={styles.title}>{title}</Text>
         <Spacer variant={"l"} />
         <SmallButton
           text={"Lihat Peta Ekosistem"}
@@ -34,8 +37,7 @@ const EcosystemDetailScreen = () => {
           <View style={styles.bodyWrapper}>
             <MaterialIcons name={"group"} style={styles.iconMember} size={30} />
             <View style={styles.textWrapper}>
-              {/* <Text style={styles.iconText}>{member} Anggota</Text> */}
-              <Text style={styles.iconText}>350 Anggota</Text>
+              <Text style={styles.iconText}>{member} Anggota</Text>
             </View>
           </View>
           <View style={styles.bodyWrapper}>
@@ -43,18 +45,12 @@ const EcosystemDetailScreen = () => {
 
             <View style={styles.textWrapper}>
               {/* <Text style={styles.iconText}>{rate}</Text> */}
-              <Text style={styles.iconText}>4.7</Text>
+              <Text style={styles.iconText}>{rating}</Text>
             </View>
           </View>
         </View>
         <Spacer variant={"s"} />
-        <Text style={styles.textBody}>
-          {/* {content} */}
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-          aliquip.
-        </Text>
+        <Text style={styles.textBody}>{desc}</Text>
         <Spacer variant={"xl"} />
         <SmallButton
           text={"Keluar dari Ekosistem"}

src/types/navigation/EcosystemStack.ts

@@ -3,6 +3,7 @@
  * https://reactnavigation.org/docs/typescript/
  */
 import { NativeStackScreenProps } from "@react-navigation/native-stack";
+import { IEcosystem } from "../firestore/ecosystems";
 
 export type EcosystemStackParamList = {
   BusinessEcosystem: undefined;
@@ -11,8 +12,15 @@ export type EcosystemStackParamList = {
   EcosystemList: { headerTitle: string };
   EcosystemMap: undefined;
   BusinessList: { headerTitle: string };
-  EcosystemDetails: { headerTitle: string };
-  Recommended: { headerTitle: string; toFetch: string };
+  EcosystemDetails: {
+    headerTitle: string;
+    title: string;
+    desc: string;
+    image: string;
+    member: string;
+    rating: string;
+  };
+  Recommended: { headerTitle: string; toFetch: () => Promise<IEcosystem[]> };
 };
 
 export type EcosystemStackScreenProps<