business ecosystem

App.tsx

@@ -3,13 +3,11 @@ import React from "react";
 import { SafeAreaProvider } from "react-native-safe-area-context";
 import { Provider as StoreProvider } from "react-redux";
 import useCachedResources from "./src/hooks/useCachedResources";
-import useColorScheme from "./src/hooks/useColorScheme";
 import Navigation from "./src/navigation";
 import store from "./src/redux/store";
 
 export default function App() {
   const isLoadingComplete = useCachedResources();
-  const colorScheme = useColorScheme();
   if (!isLoadingComplete) {
     return null;
   } else {

app.config.js

@@ -39,6 +39,7 @@ export default {
       appId: process.env.appId,
       measurementId: process.env.measurementId,
       env: process.env.env,
+      cloudFunctionsUrl: process.env.cloudFunctionsUrl,
     },
   },
 };

config/firebase.ts

@@ -5,10 +5,14 @@ const FirebaseConfig = {
   apiKey: Constants.manifest.extra?.apiKey || process.env.apiKey,
   authDomain: Constants.manifest.extra?.authDomain || process.env.authDomain,
   projectId: Constants.manifest.extra?.projectId || process.env.projectid,
-  storageBucket: Constants.manifest.extra?.storageBucket || process.env.storageBucket,
-  messagingSenderId: Constants.manifest.extra?.messagingSenderId || process.env.messagingSenderId,
-  appId: Constants.manifest.extra?.appId || process.env.appId, 
-  measurementId: Constants.manifest.extra?.measurementId || process.env.measurementId,
+  storageBucket:
+    Constants.manifest.extra?.storageBucket || process.env.storageBucket,
+  messagingSenderId:
+    Constants.manifest.extra?.messagingSenderId ||
+    process.env.messagingSenderId,
+  appId: Constants.manifest.extra?.appId || process.env.appId,
+  measurementId:
+    Constants.manifest.extra?.measurementId || process.env.measurementId,
 };
 
 export default FirebaseConfig;

package.json

@@ -33,6 +33,7 @@
     "@react-navigation/native": "^6.0.2",
     "@react-navigation/native-stack": "^6.1.0",
     "@reduxjs/toolkit": "^1.6.1",
+    "axios": "^0.22.0",
     "babel-plugin-inline-dotenv": "^1.6.0",
     "dotenv": "^10.0.0",
     "expo": "~42.0.1",

src/components/CreateEcosystem/TopForms.tsx

+import React from "react";
+import { View, Text, StyleSheet } from "react-native";
+import PlainForm from "../Forms/PlainForm";
+import Spacer from "../Spacer/Spacer";
+import DropdownForm from "../Forms/DropdownForm";
+import Colors from "../../constants/Colors";
+
+type props = {
+  ecosystemName: string;
+  setEcosystemName: React.Dispatch<React.SetStateAction<string>>;
+  ecosystemDetails: string;
+  setEcosystemDetails: React.Dispatch<React.SetStateAction<string>>;
+  ecosystemCategory: string;
+  setEcosystemCategory: React.Dispatch<React.SetStateAction<string>>;
+  items: any[];
+  setItems: React.Dispatch<React.SetStateAction<any[]>>;
+};
+
+const TopForms = ({
+  ecosystemName,
+  setEcosystemName,
+  ecosystemDetails,
+  setEcosystemDetails,
+  ecosystemCategory,
+  setEcosystemCategory,
+  items,
+  setItems,
+}: props) => {
+  return (
+    <View style={styles.componentWrapper}>
+      <View style={styles.componentWrapper}>
+        <Text style={styles.title}>Buat Ekosistem Bisnis</Text>
+      </View>
+      <Spacer variant="xl" />
+      <View style={styles.componentWrapper}>
+        <Text style={styles.subtitle}>
+          Silahkan masukkan data berikut untuk membuat ekosistem bisnis
+        </Text>
+      </View>
+      <Spacer variant="xl" />
+      <View style={styles.componentWrapper}>
+        <PlainForm
+          formTitle="Nama Ekosistem Bisnis"
+          placeholder="Masukkan Nama Ekosistem Bisnis"
+          text={ecosystemName}
+          setText={setEcosystemName}
+          errorMessage="Silahkan masukkan nama ekosistem"
+        />
+      </View>
+      <Spacer variant="xl" />
+      <View style={styles.componentWrapper}>
+        <PlainForm
+          formTitle="Deskripsi Ekosistem Bisnis"
+          placeholder="Masukkan Deskripsi Ekosistem Bisnis"
+          text={ecosystemDetails}
+          setText={setEcosystemDetails}
+          errorMessage="Silahkan masukkan deskripsi ekosistem bisnis"
+        />
+      </View>
+      <Spacer variant="xl" />
+      <View style={styles.componentWrapper}>
+        <View style={styles.componentWrapper}>
+          <Text style={styles.componentTitle}>Kategori Ekosistem Bisnis</Text>
+        </View>
+        <Spacer variant="m" />
+        <DropdownForm
+          value={ecosystemCategory}
+          setValue={setEcosystemCategory}
+          items={items}
+          setItems={setItems}
+          formPlaceholder="Pilih Kategori Ekosistem Binis"
+          searchPlaceholder="Cari Kategori Bisnis"
+        />
+      </View>
+      <Spacer variant="xl" />
+      <View style={styles.componentWrapper}>
+        <Text style={styles.componentTitleBold}>Anggota Supplier</Text>
+      </View>
+      <Spacer variant="m" />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: Colors.background,
+    padding: 24,
+  },
+  componentWrapper: {
+    width: "100%",
+  },
+  title: {
+    fontSize: 32,
+    fontWeight: "500",
+    color: Colors.text.title,
+  },
+  subtitle: {
+    fontSize: 20,
+    fontWeight: "300",
+    color: Colors.text.subtitle,
+  },
+  listText: {
+    fontSize: 14,
+    fontWeight: "300",
+    color: Colors.text.link,
+  },
+  warningText: {
+    fontSize: 14,
+    fontWeight: "bold",
+    color: Colors.button.warning.bg,
+  },
+  membersCount: {
+    fontSize: 14,
+    fontWeight: "300",
+    color: Colors.text.body,
+  },
+  componentTitle: {
+    fontSize: 14,
+    width: "100%",
+    color: Colors.text.subtitle,
+    fontWeight: "300",
+  },
+  componentTitleBold: {
+    fontSize: 14,
+    width: "100%",
+    color: Colors.text.subtitle,
+    fontWeight: "bold",
+  },
+});
+
+export default TopForms;

src/components/GroupList/AlphabetGroupList.tsx

 import React from "react";
-import { StyleSheet, Text, View } from "react-native";
+import { Alert, StyleSheet, Text, View } from "react-native";
 import { AlphabetList } from "react-native-section-alphabet-list";
 import PlainButton from "../button/PlainButton";
 import Colors from "../../constants/Colors";
 import { IData, ISectionData } from "../../types/alphabetGroupList";
+import { useNavigation } from "@react-navigation/core";
+import { ecosystemItem } from "../../types/ListItems";
 
 type props = {
   data: IData[];
+  fromScreen?: string;
+  forGroup?: string;
+  ecosystemCategories?: ecosystemItem;
 };
 
-const AlphabetGroupList = ({ data }: props) => {
+const AlphabetGroupList = ({
+  data,
+  fromScreen,
+  forGroup,
+  ecosystemCategories,
+}: props) => {
+  const nav = useNavigation();
+
   return (
     <View style={styles.container}>
       <AlphabetList
@@ -17,7 +29,28 @@ const AlphabetGroupList = ({ data }: props) => {
         indexLetterStyle={styles.indexLetter}
         renderCustomItem={(item: IData) => (
           <View style={styles.listItemContainer}>
-            <PlainButton text={item.value} onPress={() => {}} />
+            <PlainButton
+              text={item.value}
+              onPress={() => {
+                if (fromScreen === "CreateEcosystem") {
+                  if (ecosystemCategories[item.key] != null) {
+                    Alert.alert(
+                      "Kategori Sudah Ditambahkan",
+                      "Silahkan pilih kategori lain"
+                    );
+                  } else {
+                    nav.navigate("CreateEcosystem", {
+                      screen: "CreateEcosystemScreen",
+                      params: {
+                        id: item.key,
+                        name: item.value,
+                        forGroup: forGroup,
+                      },
+                    });
+                  }
+                }
+              }}
+            />
           </View>
         )}
         renderCustomSectionHeader={(section: ISectionData) => (

src/constants/urls.ts

+import Constants from "expo-constants";
+
+export const CLOUD_FUNCTIONS_URL = (Constants.manifest.extra
+  ?.cloudFunctionsUrl || process.env.cloudFunctionsUrl) as string;

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 = (): IUser => useAppSelector((state) => state.user);

src/navigation/CreateEcosystemStackNavigator.tsx

+import { createNativeStackNavigator } from "@react-navigation/native-stack";
+import React from "react";
+import CreateEcosystemScreen from "../screens/CreateEcosystemScreen";
+import { BusinessCategoryScreen } from "../screens/EcosystemMapScreenDetail.tsx";
+import { CreateEcosystemStackParamList } from "../types/navigation/CreateEcosystemStack";
+
+const CreateEcosystemStack =
+  createNativeStackNavigator<CreateEcosystemStackParamList>();
+
+const CreateEcosystemStackNavigator = () => {
+  return (
+    <CreateEcosystemStack.Navigator initialRouteName="CreateEcosystemScreen">
+      <CreateEcosystemStack.Screen
+        name="CreateEcosystemScreen"
+        component={CreateEcosystemScreen}
+        options={{ title: "" }}
+      />
+      <CreateEcosystemStack.Screen
+        name="BusinessCategory"
+        component={BusinessCategoryScreen}
+        options={{ title: "Ekosistem Saya" }}
+      />
+    </CreateEcosystemStack.Navigator>
+  );
+};
+
+export default CreateEcosystemStackNavigator;

src/navigation/EcosystemStackNavigator.tsx

 import { createNativeStackNavigator } from "@react-navigation/native-stack";
 import React from "react";
-import BusinessEcosystemScreen from "../screens/ecosystem/BusinessEcosystemScreen";
+import BusinessEcosystemScreen from "../screens/EcosystemMapScreenDetail.tsx/BusinessEcosystemScreen";
 import { EcosystemStackParamList } from "../types/navigation/EcosystemStack";
 import {
   BusinessCategoryScreen,
-  BusinessListScreen,
   EcosystemDetailScreen,
   EcosystemListScreen,
   EcosystemMapScreen,
   RecommendedEcosystemScreen,
-} from "../screens/ecosystem";
+  UserListScreen,
+} from "../screens/EcosystemMapScreenDetail.tsx";
 
 const EcosystemStack = createNativeStackNavigator<EcosystemStackParamList>();
 
@@ -52,8 +52,8 @@ const EcosystemStackNavigator = () => {
         options={{ title: "Peta Ekosistem" }}
       />
       <EcosystemStack.Screen
-        name="BusinessList"
-        component={BusinessListScreen}
+        name="UserList"
+        component={UserListScreen}
         initialParams={{ headerTitle: "" }}
         options={({ route }) => ({ title: route.params.headerTitle })}
       />

src/navigation/RootNavigator.tsx

 import React, { useEffect, useState } from "react";
 import { createNativeStackNavigator } from "@react-navigation/native-stack";
 import BottomTabNavigator from "./BottomTabNavigator";
+import CreateEcosystemStackNavigator from "./CreateEcosystemStackNavigator";
 import { RootStackParamList } from "../types/navigation";
 import AuthStackNavigator from "./AuthStackNavigator";
 import SuccessChangePasswordScreen from "../screens/SuccessChangePasswordScreen";
@@ -68,11 +69,20 @@ const RootNavigator = () => {
           options={{ headerShown: false }}
         />
       )}
-      <RootStack.Screen
-        name="SuccessChangePassword"
-        component={SuccessChangePasswordScreen}
-        options={{ headerShown: false }}
-      />
+      {user.id !== "" && (
+        <RootStack.Screen
+          name="CreateEcosystem"
+          component={CreateEcosystemStackNavigator}
+          options={{ headerShown: false }}
+        />
+      )}
+      {user.id !== "" && (
+        <RootStack.Screen
+          name="SuccessChangePassword"
+          component={SuccessChangePasswordScreen}
+          options={{ headerShown: false }}
+        />
+      )}
     </RootStack.Navigator>
   ) : (
     <RootStack.Navigator>

src/screens/ecosystem/BusinessCategoryScreen.tsx → src/screens/EcosystemMapScreenDetail.tsx/BusinessCategoryScreen.tsx

@@ -6,8 +6,12 @@ import AlphabetGroupList from "../../components/GroupList/AlphabetGroupList";
 import { useState, useEffect } from "react";
 import { getCategoriesAsIData } from "../../helpers/alphabetConverter";
 import { IData } from "react-native-section-alphabet-list";
+import { CreateEcosystemStackScreenProps } from "../../types/navigation";
 
-const BusinessCategoryScreen = () => {
+const BusinessCategoryScreen = ({
+  route,
+}: CreateEcosystemStackScreenProps<"BusinessCategory">) => {
+  const { fromScreen, forGroup, ecosystemCategories } = route.params;
   const [data, setData] = useState<IData[]>([]);
   useEffect(() => {
     getCategoriesAsIData().then((res) => setData(res));
@@ -15,7 +19,12 @@ const BusinessCategoryScreen = () => {
 
   return (
     <View style={styles.container}>
-      <AlphabetGroupList data={data} />
+      <AlphabetGroupList
+        data={data}
+        fromScreen={fromScreen}
+        forGroup={forGroup}
+        ecosystemCategories={ecosystemCategories}
+      />
     </View>
   );
 };

src/screens/ecosystem/BusinessEcosystemScreen.tsx → src/screens/EcosystemMapScreenDetail.tsx/BusinessEcosystemScreen.tsx

 import { useNavigation } from "@react-navigation/core";
-import * as React from "react";
+import React, { useState, useEffect } from "react";
 import { ScrollView, StyleSheet } from "react-native";
 import { TouchableOpacity } from "react-native-gesture-handler";
 import SmallButton from "../../components/button/SmallButton";
 import VerticalEcosystemCarousel from "../../components/carousel/VerticalEcosystemCarousel";
+import CategoryHorizontalCarousel from "../../components/carousel/CategoryHorizontalCarousel";
 import Spacer from "../../components/Spacer/Spacer";
 import { Text, View } from "../../components/Themed";
 import Colors from "../../constants/Colors";
 import { useAppSelector } from "../../hooks/reduxHooks";
+import { getByMostRecent } from "../../service/firestore/ecosystem/getMostRecent";
+import { getByPopularity } from "../../service/firestore/ecosystem/getByPopularity";
+import { getByFollowed } from "../../service/firestore/ecosystem/getByFollowed";
+import { IEcosystem } from "../../types/firestore/ecosystems";
 import { IUser } from "../../types/firestore/User";
-import CategoryHorizontalCarousel from "../../components/carousel/CategoryHorizontalCarousel";
+import { getCategories } from "../../service/firestore/categories";
+import { ICategory } from "../../types/firestore";
 const BusinessEcosystemScreen = () => {
-  const listData = [
-    {
-      id: "5",
-      pic: "https://asset.kompas.com/crops/O_Vgje1nMEqUCaDexq2UJdbyT14=/9x1:989x655/750x500/data/photo/2020/02/21/5e5008d10c825.jpg",
-      name: "Pengolahan Kerupuk",
-      rate: 4,
-    },
-    {
-      id: "6",
-      pic: "https://asset.kompas.com/crops/O_Vgje1nMEqUCaDexq2UJdbyT14=/9x1:989x655/750x500/data/photo/2020/02/21/5e5008d10c825.jpg",
-      name: "Pengolahan Kerupuk",
-      rate: 5,
-    },
-  ];
-
-  const lists = [
-    {
-      id: "5",
-      name: "Pengolahan Kerupuk",
-    },
-    {
-      id: "6",
-      name: "Pengolahan Kerupuk",
-    },
-  ];
   const nav = useNavigation();
   const user: IUser = useAppSelector((state) => state.user);
+  const [listData, setListData] = useState<IEcosystem[]>([]);
+  const [listBergabung, setListBergabung] = useState<IEcosystem[]>([]);
+  const [listTerbaru, setListTerbaru] = useState<IEcosystem[]>([]);
+  const [listCategory, setListCategory] = useState<ICategory[]>([]);
+  useEffect(() => {
+    getByPopularity().then((res) => {
+      setListData(res.slice(0, 5));
+    });
+    getByFollowed(user.id).then((res) => {
+      setListBergabung(res.slice(0, 5));
+    });
+    getByMostRecent().then((res) => {
+      setListTerbaru(res.slice(0, 5));
+    });
+    getCategories().then((res) => {
+      setListCategory(res.slice(0, 6));
+    });
+  }, []);
+
   return (
     <ScrollView style={styles.container}>
       <View>
@@ -49,14 +49,11 @@ const BusinessEcosystemScreen = () => {
           onPress={() => {
             nav.navigate("Ecosystem", {
               screen: "Recommended",
-              params: {
-                headerTitle: "Ekosistem Saya",
-                toFetch: "MyEcosystem",
-              },
+              params: { headerTitle: "Ekosistem Saya", toFetch: "myEcosystem" },
             });
           }}
         >
-          <Text style={styles.link}>Ekosistem Saya</Text>
+          <Text style={styles.textLink}>Ekosistem Saya</Text>
         </TouchableOpacity>
       </View>
       <Spacer variant="xl" />
@@ -74,7 +71,15 @@ const BusinessEcosystemScreen = () => {
         </View>
         <View>
           <TouchableOpacity
-            onPress={() => nav.navigate("Ecosystem", { screen: "MyEcosystem" })}
+            onPress={() =>
+              nav.navigate("Ecosystem", {
+                screen: "Recommended",
+                params: {
+                  headerTitle: "Ekosistem Saya",
+                  toFetch: "myEcosystem",
+                },
+              })
+            }
           >
             <Text style={{ fontSize: 16, color: Colors.text.link }}>
               Lihat Semua
@@ -82,8 +87,6 @@ const BusinessEcosystemScreen = () => {
           </TouchableOpacity>
         </View>
       </View>
-      <Spacer variant="l" />
-      <VerticalEcosystemCarousel list={listData} />
       <Spacer variant="xl" />
       <View style={styles.headContainer}>
         <View style={styles.textContainer}>
@@ -92,7 +95,10 @@ const BusinessEcosystemScreen = () => {
         <View>
           <TouchableOpacity
             onPress={() =>
-              nav.navigate("Ecosystem", { screen: "EcosystemDetails" })
+              nav.navigate("Ecosystem", {
+                screen: "Recommended",
+                params: { headerTitle: "Sudah Bergabung", toFetch: "joined" },
+              })
             }
           >
             <Text style={{ fontSize: 16, color: Colors.text.link }}>
@@ -102,7 +108,7 @@ const BusinessEcosystemScreen = () => {
         </View>
       </View>
       <Spacer variant="l" />
-      <VerticalEcosystemCarousel list={listData} />
+      <VerticalEcosystemCarousel list={listBergabung} />
       <Spacer variant="xl" />
       <View style={styles.headContainer}>
         <View style={styles.textContainer}>
@@ -123,7 +129,7 @@ const BusinessEcosystemScreen = () => {
         </View>
       </View>
       <Spacer variant="l" />
-      <VerticalEcosystemCarousel list={listData} />
+      <CategoryHorizontalCarousel list={listCategory} />
       <Spacer variant="xl" />
       <View style={styles.headContainer}>
         <View style={styles.textContainer}>
@@ -131,7 +137,15 @@ const BusinessEcosystemScreen = () => {
         </View>
         <View>
           <TouchableOpacity
-            onPress={() => nav.navigate("Ecosystem", { screen: "Popular" })}
+            onPress={() =>
+              nav.navigate("Ecosystem", {
+                screen: "Recommended",
+                params: {
+                  headerTitle: "Paling Populer",
+                  toFetch: "getByPopularity",
+                },
+              })
+            }
           >
             <Text style={{ fontSize: 16, color: Colors.text.link }}>
               Lihat Semua
@@ -140,7 +154,7 @@ const BusinessEcosystemScreen = () => {
         </View>
       </View>
       <Spacer variant="l" />
-      <CategoryHorizontalCarousel list={lists} />
+      <VerticalEcosystemCarousel list={listData} />
       <Spacer variant="xl" />
       <View style={styles.headContainer}>
         <View style={styles.textContainer}>
@@ -148,7 +162,12 @@ const BusinessEcosystemScreen = () => {
         </View>
         <View>
           <TouchableOpacity
-            onPress={() => nav.navigate("Ecosystem", { screen: "Latest" })}
+            onPress={() =>
+              nav.navigate("Ecosystem", {
+                screen: "Recommended",
+                params: { headerTitle: "paling populer", toFetch: "popular" },
+              })
+            }
           >
             <Text style={{ fontSize: 16, color: Colors.text.link }}>
               Lihat Semua
@@ -157,7 +176,7 @@ const BusinessEcosystemScreen = () => {
         </View>
       </View>
       <Spacer variant="l" />
-      <VerticalEcosystemCarousel list={listData} />
+      <VerticalEcosystemCarousel list={listTerbaru} />
       <Spacer variant="xl" />
     </ScrollView>
   );

src/screens/ecosystem/RecommendedEcosystemScreen.tsx → src/screens/EcosystemMapScreenDetail.tsx/RecommendedEcosystemScreen.tsx

-import * as React from "react";
-import { Alert, <