From 84a93758f773b4af26f8a402f58c068cdece0497 Mon Sep 17 00:00:00 2001
From: angelindepthios <angelin.depthios@ui.ac.id>
Date: Sun, 7 Nov 2021 16:22:07 +0700
Subject: [PATCH 1/2] FEAT: integrate update profile user

---
 src/screens/profile/AccountSettingsScreen.tsx | 56 +++++++++++++------
 1 file changed, 40 insertions(+), 16 deletions(-)

diff --git a/src/screens/profile/AccountSettingsScreen.tsx b/src/screens/profile/AccountSettingsScreen.tsx
index 5337082..844bdde 100644
--- a/src/screens/profile/AccountSettingsScreen.tsx
+++ b/src/screens/profile/AccountSettingsScreen.tsx
@@ -1,12 +1,7 @@
 import { useNavigation } from "@react-navigation/core";
 import * as React from "react";
-import {
-  Button,
-  StyleSheet,
-  Image,
-  ActivityIndicator,
-  Alert,
-} from "react-native";
+import { StyleSheet, Image, ActivityIndicator, Alert } from "react-native";
+import DropdownForm from "../../components/Forms/DropdownForm";
 import { ScrollView, TouchableOpacity } from "react-native-gesture-handler";
 import PlainForm from "../../components/Forms/PlainForm";
 import { useEffect, useState } from "react";
@@ -19,7 +14,10 @@ import { ImageInfo } from "expo-image-picker/build/ImagePicker.types";
 import { setProfilePic } from "../../redux/user/actions";
 import { useAppDispatch, useUser } from "../../hooks/reduxHooks";
 import { getCategory } from "../../service/firestore/ecosystem/getCategory";
-
+import { updateUser } from "../../service/firestore/user";
+import MainButton from "../../components/button/MainButton";
+import { IDD } from "../../types/firestore";
+import { getCategoriesAsDdFormat } from "../../helpers/ddConverter";
 export default function AccountSettingsScreen({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   navigation,
@@ -31,9 +29,23 @@ export default function AccountSettingsScreen({
   const [email, setEmail] = useState(user.email);
   const [hp, setHp] = useState(user.phone);
   const [bisnis, setBisnis] = useState(user.businessType);
+  const [picked, setPicked] = useState("");
   const nav = useNavigation();
   const [isLoading, setIsLoading] = useState(false);
   const dispatch = useAppDispatch();
+  const [categories, setCategories] = useState<IDD[]>([]);
+  const handleUpdateProfile = () => {
+    updateUser(user.id, {
+      firstName: namaDepan,
+      lastName: namaBelakang,
+      email: "",
+      phone: hp,
+      pic: "",
+      businessType: picked,
+    }).then(() => {
+      Alert.alert("Berhasil Mengupdate");
+    });
+  };
   const handlePickImage = () => {
     // setIsLoading(true);
     pickImage().then((res) => {
@@ -53,6 +65,7 @@ export default function AccountSettingsScreen({
     });
   };
   useEffect(() => {
+    getCategoriesAsDdFormat().then((res) => setCategories(res));
     (async () => {
       const name = await getCategory(bisnis);
       setBisnis(name);
@@ -116,6 +129,7 @@ export default function AccountSettingsScreen({
               placeholder="Masukkan Email"
               email
               errorMessage={"Silahkan masukkan email yang benar"}
+              disabled
             />
           </View>
           <Spacer variant="l" />
@@ -131,22 +145,32 @@ export default function AccountSettingsScreen({
           </View>
           <Spacer variant="l" />
           <View style={styles.componentWrapper}>
-            <PlainForm
-              formTitle={"Kategori Bisnis"}
-              text={bisnis}
-              setText={setBisnis}
-              placeholder=""
-              disabled
+            <DropdownForm
+              formPlaceholder={bisnis}
+              searchPlaceholder={"Cari Kategori Bisnis"}
+              value={picked}
+              setValue={setPicked}
+              items={categories}
+              setItems={setCategories}
             />
           </View>
         </View>
         <Spacer variant="xl" />
         <View style={styles.componentWrapper}>
-          <Button
+          <MainButton
             onPress={() =>
               nav.navigate("Profile", { screen: "ChangePassword" })
             }
-            title="Change Password"
+            text="Change Password"
+            colors="main"
+          />
+        </View>
+        <Spacer variant="xl" />
+        <View style={styles.componentWrapper}>
+          <MainButton
+            text="Update Profile"
+            colors="main"
+            onPress={() => handleUpdateProfile()}
           />
         </View>
       </View>
-- 
GitLab


From ab63f687a32c7e08264e01f6f8421a32b016326b Mon Sep 17 00:00:00 2001
From: angelindepthios <angelin.depthios@ui.ac.id>
Date: Sun, 7 Nov 2021 18:51:08 +0700
Subject: [PATCH 2/2] feat : integrate user list screen

---
 src/navigation/EcosystemStackNavigator.tsx    |  2 +-
 .../CategoryEcosystemListScreen.tsx           | 81 -------------------
 .../ecosystem/EcosystemDetailScreen.tsx       |  8 +-
 src/screens/ecosystem/EcosystemMapScreen.tsx  | 30 ++++++-
 src/screens/ecosystem/UserListScreen.tsx      | 33 +++-----
 src/service/firestore/ecosystem/fetchUsers.ts | 60 ++++++++++++++
 src/types/navigation/EcosystemStack.ts        |  4 +-
 7 files changed, 107 insertions(+), 111 deletions(-)
 delete mode 100644 src/screens/EcosystemMapScreenDetail.tsx/CategoryEcosystemListScreen.tsx
 create mode 100644 src/service/firestore/ecosystem/fetchUsers.ts

diff --git a/src/navigation/EcosystemStackNavigator.tsx b/src/navigation/EcosystemStackNavigator.tsx
index 30a299e..623bc67 100644
--- a/src/navigation/EcosystemStackNavigator.tsx
+++ b/src/navigation/EcosystemStackNavigator.tsx
@@ -49,7 +49,7 @@ const EcosystemStackNavigator = () => {
       <EcosystemStack.Screen
         name="EcosystemMap"
         component={EcosystemMapScreen}
-        options={{ title: "Peta Ekosistem" }}
+        options={({ route }) => ({ title: route.params.headerTitle })}
       />
       <EcosystemStack.Screen
         name="UserList"
diff --git a/src/screens/EcosystemMapScreenDetail.tsx/CategoryEcosystemListScreen.tsx b/src/screens/EcosystemMapScreenDetail.tsx/CategoryEcosystemListScreen.tsx
deleted file mode 100644
index 6f25774..0000000
--- a/src/screens/EcosystemMapScreenDetail.tsx/CategoryEcosystemListScreen.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-// 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 { toFetch } = route.params;
-//   const [search, setSearch] = useState("");
-//   const [listData, setListData] = useState<IEcosystem[]>([]);
-
-//   useEffect(() => {
-//     getByCategory("A").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;
diff --git a/src/screens/ecosystem/EcosystemDetailScreen.tsx b/src/screens/ecosystem/EcosystemDetailScreen.tsx
index 4f0b4be..437d0a2 100644
--- a/src/screens/ecosystem/EcosystemDetailScreen.tsx
+++ b/src/screens/ecosystem/EcosystemDetailScreen.tsx
@@ -63,7 +63,13 @@ const EcosystemDetailScreen = ({
           text={"Lihat Peta Ekosistem"}
           colors={"primary"}
           onPress={() => {
-            nav.navigate("Ecosystem", { screen: "EcosystemMap" });
+            nav.navigate("Ecosystem", {
+              screen: "EcosystemMap",
+              params: {
+                headerTitle: title,
+                id: id,
+              },
+            });
           }}
         />
         <Spacer variant={"l"} />
diff --git a/src/screens/ecosystem/EcosystemMapScreen.tsx b/src/screens/ecosystem/EcosystemMapScreen.tsx
index ebc3e99..2ab5b9a 100644
--- a/src/screens/ecosystem/EcosystemMapScreen.tsx
+++ b/src/screens/ecosystem/EcosystemMapScreen.tsx
@@ -5,8 +5,12 @@ import Colors from "../../constants/Colors";
 import PlainButton from "../../components/button/PlainButton";
 import Spacer from "../../components/Spacer/Spacer";
 import { useNavigation } from "@react-navigation/core";
+import { EcosystemStackScreenProps } from "../../types/navigation";
 
-const EcosystemMapScreen = () => {
+const EcosystemMapScreen = ({
+  route,
+}: EcosystemStackScreenProps<"EcosystemMap">) => {
+  const { id } = route.params;
   const nav = useNavigation();
   return (
     <View style={styles.container}>
@@ -15,21 +19,39 @@ const EcosystemMapScreen = () => {
         <PlainButton
           text={"Suppliers"}
           onPress={() => {
-            nav.navigate("Ecosystem", { screen: "UserList" });
+            nav.navigate("Ecosystem", {
+              screen: "UserList",
+              params: {
+                headerTitle: "supplier",
+                id: id,
+              },
+            });
           }}
         />
         <Spacer variant="xl" />
         <PlainButton
           text={"Customer"}
           onPress={() => {
-            nav.navigate("Ecosystem", { screen: "UserList" });
+            nav.navigate("Ecosystem", {
+              screen: "UserList",
+              params: {
+                headerTitle: "customer",
+                id: id,
+              },
+            });
           }}
         />
         <Spacer variant="xl" />
         <PlainButton
           text={"Support"}
           onPress={() => {
-            nav.navigate("Ecosystem", { screen: "UserList" });
+            nav.navigate("Ecosystem", {
+              screen: "UserList",
+              params: {
+                headerTitle: "support",
+                id: id,
+              },
+            });
           }}
         />
         <Spacer variant="xl" />
diff --git a/src/screens/ecosystem/UserListScreen.tsx b/src/screens/ecosystem/UserListScreen.tsx
index a4a2e37..30c5ea8 100644
--- a/src/screens/ecosystem/UserListScreen.tsx
+++ b/src/screens/ecosystem/UserListScreen.tsx
@@ -1,31 +1,20 @@
 import * as React from "react";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { StyleSheet } from "react-native";
 import { View } from "../../components/Themed";
 import UserList from "../../components/UserList/UserList";
 import Colors from "../../constants/Colors";
-// import { EcosystemStackScreenProps } from "../../types/navigation";
-const UserListScreen = () => {
+import { fetchUsersByEcosystemIdAndType } from "../../service/firestore/ecosystem/fetchUsersByEcosystemIdAndType";
+import { EcosystemStackScreenProps } from "../../types/navigation";
+const UserListScreen = ({ route }: EcosystemStackScreenProps<"UserList">) => {
+  const { id, headerTitle } = route.params;
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [listData, setListData] = useState([
-    {
-      userId: "1",
-      name: "Angel",
-      image:
-        "https://asset.kompas.com/crops/O_Vgje1nMEqUCaDexq2UJdbyT14=/9x1:989x655/750x500/data/photo/2020/02/21/5e5008d10c825.jpg",
-      categoryId: "Pengolahan Kerupuk",
-      category: "orang",
-    },
-    {
-      userId: "1",
-      name: "Angelin",
-      image:
-        "https://asset.kompas.com/crops/O_Vgje1nMEqUCaDexq2UJdbyT14=/9x1:989x655/750x500/data/photo/2020/02/21/5e5008d10c825.jpg",
-      categoryId: "Pengolahan Kerupuk",
-      category: "orang",
-    },
-  ]);
-
+  const [listData, setListData] = useState([]);
+  useEffect(() => {
+    (async () => {
+      setListData(await fetchUsersByEcosystemIdAndType(id, headerTitle));
+    })();
+  }, []);
   return (
     <View style={styles.container}>
       <View>
diff --git a/src/service/firestore/ecosystem/fetchUsers.ts b/src/service/firestore/ecosystem/fetchUsers.ts
new file mode 100644
index 0000000..e23c153
--- /dev/null
+++ b/src/service/firestore/ecosystem/fetchUsers.ts
@@ -0,0 +1,60 @@
+import firebase from "firebase";
+import { getEnv } from "../../../helpers/getEnv";
+import { IUsers } from "../../../types/firestore/users";
+import { IEcosystemCategoryMember } from "../../../types/firestore/ecosystemCategoryMember";
+import { IUser } from "../../../types/firestore/User";
+import { getCategory } from "./getCategory";
+
+export const fetchUsers = async (
+  ecosystemId: string,
+  type: string
+): Promise<IUsers[]> => {
+  const db = firebase.firestore();
+
+  const ecosystemCategoryMembers: IEcosystemCategoryMember[] = [];
+  const ecosystemCategoryMemberSnap = await db
+    .collection("ecosystem_category_members_" + getEnv())
+    .where("type", "==", type)
+    .where("ecosystemId", "==", ecosystemId)
+    .get();
+  ecosystemCategoryMemberSnap.docs.forEach((doc) => {
+    const data: IEcosystemCategoryMember = {
+      ...(doc.data() as IEcosystemCategoryMember),
+    };
+    ecosystemCategoryMembers.push(data);
+  });
+
+  const users: IUsers[] = [];
+
+  for (let i = 0; i < ecosystemCategoryMembers.length; i++) {
+    const userId = Object.keys(ecosystemCategoryMembers[i].members);
+    for (let j = 0; j < userId.length; j++) {
+      users.push({
+        userId: userId[j],
+        categoryId: ecosystemCategoryMembers[i].categoryId,
+      });
+    }
+  }
+
+  const promises: Promise<void>[] = [];
+
+  for (let i = 0; i < users.length; i++) {
+    const categoryId = users[i].categoryId;
+    const userId = users[i].userId;
+
+    const wrap = async () => {
+      const categoryName = await getCategory(categoryId);
+      const userSnap = await db.collection("users").doc(userId).get();
+      const userData = userSnap.data() as IUser;
+
+      users[i].category = categoryName;
+      users[i].image = userData.pic;
+      users[i].name = userData.firstName + " " + userData.lastName;
+    };
+    promises.push(wrap());
+  }
+
+  await Promise.all(promises);
+
+  return users;
+};
diff --git a/src/types/navigation/EcosystemStack.ts b/src/types/navigation/EcosystemStack.ts
index 695d215..074c237 100644
--- a/src/types/navigation/EcosystemStack.ts
+++ b/src/types/navigation/EcosystemStack.ts
@@ -14,7 +14,7 @@ export type EcosystemStackParamList = {
     ecosystemCategories?: ecosystemItem;
   };
   EcosystemList: { headerTitle: string; toFetch: string };
-  EcosystemMap: undefined;
+  EcosystemMap: { id: string; headerTitle: string };
   EcosystemDetails: {
     headerTitle: string;
     id: string;
@@ -24,7 +24,7 @@ export type EcosystemStackParamList = {
     member: string;
     rating: string;
   };
-  UserList: { headerTitle: string };
+  UserList: { headerTitle: string; id: string };
   Recommended: { headerTitle: string; toFetch: string };
 };
 
-- 
GitLab