Merge branch 'master' into 'ecosystem-map-screen'

# Conflicts:
#   src/screens/ecosystem/EcosystemDetailScreen.tsx

src/components/GroupList/AlphabetGroupList.tsx

@@ -48,6 +48,14 @@ const AlphabetGroupList = ({
                       },
                     });
                   }
+                } else if (fromScreen === "BusinessEcosystem") {
+                  nav.navigate("Ecosystem", {
+                    screen: "EcosystemList",
+                    params: {
+                      headerTitle: item.value,
+                      toFetch: item.key,
+                    },
+                  });
                 }
               }}
             />

src/navigation/EcosystemStackNavigator.tsx

@@ -5,11 +5,11 @@ import { EcosystemStackParamList } from "../types/navigation/EcosystemStack";
 import {
   BusinessCategoryScreen,
   EcosystemDetailScreen,
-  EcosystemListScreen,
   EcosystemMapScreen,
   RecommendedEcosystemScreen,
   UserListScreen,
 } 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/redux/user/actions.tsx

@@ -72,19 +72,29 @@ export const signupUser = (
   firstName: string,
   lastName: string,
   email: string,
-  password: string
+  password: string,
+  phone: string,
+  businessType: string
 ) => {
   return async (dispatch: Dispatch<any>) => {
     try {
       const userAuth = await authService.signUpAuth(email, password);
       const uid = userAuth.user.uid;
-      await userService.createUser(email, firstName, lastName, uid);
-      dispatch({
+      await userService.createUser(uid, {
+        firstName,
+        lastName,
+        email,
+        phone,
+        businessType,
+        pic: "",
+      });
+      return dispatch({
         type: "SIGNUP",
-        payload: { email, firstName, lastName, id: uid },
+        payload: { email, firstName, lastName, id: uid, phone, businessType },
       });
     } catch (e) {
       console.log(e);
+      return { error: e };
     }
   };
 };

src/screens/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";
-
-const CategoryEcosystemListScreen = () => {
-  // const nav = useNavigation();
-  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",
-    },
-  ]);
-
-  return (
-    <SafeAreaView style={styles.container}>
-      <View>
-        <IconForm
-          text={search}
-          setText={setSearch}
-          placeholder={"Cari di kategori ini"}
-          search
-        />
-      </View>
-      <Spacer variant={"xl"} />
-      <FlatList
-        data={listData}
-        renderItem={({ item }) => {
-          return (
-            <View style={styles.horizontalCard}>
-              <HorizontalCards
-                image={item.image}
-                member={item.member}
-                title={item.title}
-                rate={item.rate}
-                onPress={null}
-              />
-            </View>
-          );
-        }}
-        keyExtractor={(item) => item.id}
-        ItemSeparatorComponent={() => <Spacer variant={"l"} />}
-        showsVerticalScrollIndicator={false}
-        showsHorizontalScrollIndicator={false}
-      />
-    </SafeAreaView>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    padding: 24,
-    backgroundColor: Colors.background,
-  },
-  horizontalCard: {
-    paddingHorizontal: 4,
-    paddingTop: 2,
-  },
-});
-
-export default CategoryEcosystemListScreen;

src/screens/CreateEcosystemScreen.tsx

@@ -7,6 +7,7 @@ import {
   FlatList,
   TouchableOpacity,
   SafeAreaView,
+  Alert,
 } from "react-native";
 import Colors from "../constants/Colors";
 import PlainForm from "../components/Forms/PlainForm";
@@ -18,10 +19,16 @@ import Spacer from "../components/Spacer/Spacer";
 import { ecosystemItem } from "../types/ListItems";
 import { getCategoriesAsDdFormat } from "../helpers/ddConverter";
 import { CreateEcosystemStackScreenProps } from "../types/navigation";
+import { createEcosystem } from "../service/functions/createEcosystem";
+import { useUser } from "../hooks/reduxHooks";
+import { IEcosystemCategoryMember } from "../types/firestore/ecosystemCategoryMember";
+import { IEcosystemMembership } from "../types/firestore/ecosystemMembership";
+import { ActivityIndicator } from "react-native-paper";
 const CreateEcosystemScreen = ({
   route,
 }: CreateEcosystemStackScreenProps<"CreateEcosystemScreen">) => {
   const nav = useNavigation();
+  const user = useUser();
   const [ecosystemName, setEcosystemName] = useState("");
   const [ecosystemDetails, setEcosystemDetails] = useState("");
   const [ecosystemCategory, setEcosystemCategory] = useState("");
@@ -33,6 +40,8 @@ const CreateEcosystemScreen = ({
   const [ecosystemMainBusiness, setEcosystemMainBusiness] =
     useState<ecosystemItem>({});
 
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
   //   const handlePickImage = () => {
   //     setIsLoading(true);
   //     pickImage().then((res) => {
@@ -51,7 +60,6 @@ const CreateEcosystemScreen = ({
   });
 
   useEffect(() => {
-    console.log("test");
     if (route.params?.id && route.params?.name) {
       switch (route.params?.forGroup) {
         case "supplier":
@@ -116,6 +124,125 @@ const CreateEcosystemScreen = ({
     }
   };
 
+  const handleSubmit = async () => {
+    setIsSubmitting(true);
+    const ecosystemCategoryMembers: {
+      categoryMember: IEcosystemCategoryMember;
+      ecosystemMemberships: IEcosystemMembership[];
+    }[] = [];
+
+    const suppliers = Object.keys(ecosystemSupplier);
+    suppliers.forEach((categoryId) => {
+      const item = ecosystemSupplier[categoryId];
+      const member: IEcosystemCategoryMember = {
+        type: "supplier",
+        categoryId: categoryId,
+      };
+
+      const memberships: IEcosystemMembership[] = [];
+      Object.keys(item.members).forEach((userId) => {
+        memberships.push({
+          userId: userId,
+        });
+      });
+
+      ecosystemCategoryMembers.push({
+        categoryMember: member,
+        ecosystemMemberships: memberships,
+      });
+    });
+
+    const customer = Object.keys(ecosystemCustomer);
+    customer.forEach((categoryId) => {
+      const item = ecosystemCustomer[categoryId];
+      const member: IEcosystemCategoryMember = {
+        type: "customer",
+        categoryId: categoryId,
+      };
+
+      const memberships: IEcosystemMembership[] = [];
+      Object.keys(item.members).forEach((userId) => {
+        memberships.push({
+          userId: userId,
+        });
+      });
+
+      ecosystemCategoryMembers.push({
+        categoryMember: member,
+        ecosystemMemberships: memberships,
+      });
+    });
+
+    const support = Object.keys(ecosystemSupport);
+    support.forEach((categoryId) => {
+      const item = ecosystemSupport[categoryId];
+      const member: IEcosystemCategoryMember = {
+        type: "support",
+        categoryId: categoryId,
+      };
+
+      const memberships: IEcosystemMembership[] = [];
+      Object.keys(item.members).forEach((userId) => {
+        memberships.push({
+          userId: userId,
+        });
+      });
+
+      ecosystemCategoryMembers.push({
+        categoryMember: member,
+        ecosystemMemberships: memberships,
+      });
+    });
+
+    const mainBusiness = Object.keys(ecosystemMainBusiness);
+    mainBusiness.forEach((categoryId) => {
+      const item = ecosystemMainBusiness[categoryId];
+      const member: IEcosystemCategoryMember = {
+        type: "main",
+        categoryId: categoryId,
+      };
+
+      const memberships: IEcosystemMembership[] = [];
+      Object.keys(item.members).forEach((userId) => {
+        memberships.push({
+          userId: userId,
+        });
+      });
+
+      ecosystemCategoryMembers.push({
+        categoryMember: member,
+        ecosystemMemberships: memberships,
+      });
+    });
+    try {
+      const response = await createEcosystem({
+        ecosystem: {
+          name: ecosystemName,
+          description: ecosystemDetails,
+          followerCount: 0,
+          pic: "",
+          visibility: "public",
+          raters: 0,
+          rating: 0,
+          creatorId: user.id,
+          categoryId: ecosystemCategory,
+        },
+        ecosystemCategoryMembers: ecosystemCategoryMembers,
+      });
+      setIsSubmitting(false);
+      if (response.status === 200 || response.status === "200") {
+        nav.navigate("MainTab");
+      } else {
+        console.log(response);
+        Alert.alert("Error", "error creating new ecosystem");
+      }
+    } catch (e) {
+      setIsSubmitting(false);
+      console.log(e);
+      Alert.alert("Error", "error creating new ecosystem");
+    }
+  };
+
   return (
     <SafeAreaView>
       <FlatList
@@ -491,10 +618,19 @@ const CreateEcosystemScreen = ({
                                 />
                               )}
                               <Spacer variant="xl" />
+                              {isSubmitting && (
+                                <ActivityIndicator
+                                  size={"large"}
+                                  animating={true}
+                                />
+                              )}
+                              <Spacer variant="xl" />
                               <MainButton
                                 text="lanjut"
                                 colors="primary"
-                                onPress={() => {}}
+                                onPress={() => {
+                                  handleSubmit();
+                                }}
                               />
                               <Spacer variant="xl" />
                               <Spacer variant="xl" />

src/screens/auth/RegisterScreen.tsx

@@ -25,13 +25,12 @@ const RegisterScreen = ({ navigation }: RootTabScreenProps<"TabOne">) => {
   const [password, setPassword] = useState("");
   const [phoneNo, setPhoneNo] = useState("");
   const [picked, setPicked] = useState("");
+  const dispatch = useAppDispatch();
 
   const [categories, setCategories] = useState<IDD[]>([]);
   useEffect(() => {
     getCategoriesAsDdFormat().then((res) => setCategories(res));
-  });
-
-  const dispatch = useAppDispatch();
+  }, []);
 
   const handleSubmit = () => {
     if (
@@ -42,7 +41,11 @@ const RegisterScreen = ({ navigation }: RootTabScreenProps<"TabOne">) => {
       validateEmpty(password) &&
       validateEmpty(picked)
     ) {
-      dispatch(signupUser(firstName, lastName, email, password));
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+      dispatch(
+        signupUser(firstName, lastName, email, password, phoneNo, picked)
+      ).then(() => Alert.alert("Error", "Something went wrong"));
+      // .then((e: ActionErrorRes) => e.error && Alert.alert("Error", e.error));
     } else {
       Alert.alert("Form Tidak Lengkap", "Silahkan isi form dengan benar");
     }
@@ -155,6 +158,7 @@ const RegisterScreen = ({ navigation }: RootTabScreenProps<"TabOne">) => {
         <MainButton text="Daftar" colors="primary" onPress={handleSubmit} />
       </View>
       <Spacer variant="xl" />
+      <Spacer variant="xl" />
     </ScrollView>
   );
 };
@@ -163,6 +167,7 @@ const styles = StyleSheet.create({
   container: {
     padding: 24,
     backgroundColor: Colors.background,
+    flex: 1,
   },
   titleText: {
     fontSize: 32,

src/screens/ecosystem/BusinessEcosystemScreen.tsx

@@ -61,6 +61,9 @@ const BusinessEcosystemScreen = () => {
           onPress={() => {
             nav.navigate("Ecosystem", {
               screen: "BusinessCategory",
+              params: {
+                fromScreen: "BusinessEcosystem",
+              },
             });
           }}
         >

src/screens/ecosystem/CategoryEcosystemListScreen.tsx

+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 = ({
+  route,
+}: EcosystemStackScreenProps<"EcosystemList">) => {
+  const nav = useNavigation();
+  const { toFetch } = route.params;
+  const [search, setSearch] = useState("");
+  const [listData, setListData] = useState<IEcosystem[]>([]);
+
+  useEffect(() => {
+    getByCategory(toFetch).then((res) => setListData(res));
+  });
+
+  return (
+    <ScrollView style={styles.container}>
+      <View>
+        <IconForm
+          text={search}
+          setText={setSearch}
+          placeholder={"Cari di kategori ini"}
+          search
+        />
+      </View>
+      <Spacer variant={"xl"} />
+      <FlatList
+        data={listData}
+        renderItem={({ item }) => {
+          return (
+            <View style={styles.horizontalCard}>
+              <HorizontalCards
+                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>
+          );
+        }}
+        keyExtractor={(item) => item.id}
+        ItemSeparatorComponent={() => <Spacer variant={"l"} />}
+        showsVerticalScrollIndicator={false}
+        showsHorizontalScrollIndicator={false}
+      />
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 24,
+    backgroundColor: Colors.background,
+  },
+  horizontalCard: {
+    paddingHorizontal: 4,
+    paddingTop: 2,
+  },
+});
+
+export default CategoryEcosystemListScreen;

src/screens/ecosystem/EcosystemDetailScreen.tsx

@@ -6,25 +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 { useNavigation } from "@react-navigation/core";
+import { EcosystemStackScreenProps } from "../../types/navigation";
 
-const EcosystemDetailScreen = () => {
-  const nav = useNavigation();
+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"}
@@ -38,8 +39,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}>
@@ -47,18 +47,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/screens/ecosystem/RecommendedEcosystemScreen.tsx

-import React, { useEffect } from "react";
-import { StyleSheet } from "react-native";
-import { Text, View } from "../../components/Themed";
+import React, { useEffect, useState } from "react";
+import { StyleSheet, FlatList, ListRenderItem } from "react-native";
+import { View } from "../../components/Themed";
 import Colors from "../../constants/Colors";
 import { EcosystemStackScreenProps } from "../../types/navigation";
-import { LogBox } from "react-native";