Merge branch 'master' into 'business-Eco-Screen'

# Conflicts:
#   src/navigation/RootNavigator.tsx
#   src/screens/ecosystem/BusinessEcosystemScreen.tsx

src/components/button/PlainButton.tsx

@@ -19,11 +19,11 @@ const PlainButton = ({ text, desc, onPress, descText }: props) => {
               <View style={{ marginRight: 3 }}>
                 <MaterialIcons
                   name="group"
-                  size={15}
+                  size={18}
                   color={Colors.icon.tab.inactive}
                 />
               </View>
-              <View style={{ flex: 1, paddingRight: 7 }}>
+              <View style={{ flex: 1, paddingRight: 8 }}>
                 <Text style={styles.descText}>{descText}</Text>
               </View>
             </View>
@@ -36,7 +36,7 @@ const PlainButton = ({ text, desc, onPress, descText }: props) => {
             }}
             name="keyboard-arrow-right"
             size={24}
-            color="#666666"
+            color={Colors.text.body}
           />
         </View>
       </TouchableOpacity>
@@ -67,7 +67,7 @@ const styles = StyleSheet.create({
   },
   texts: {
     fontWeight: "300",
-    width: 307,
+    width: "100%",
     fontSize: 16,
     textAlign: "left",
     textAlignVertical: "center",

src/helpers/alphabetConverter.ts

+import { IData } from "react-native-section-alphabet-list";
+import { getCategories } from "../service/firestore/categories";
+
+export const iDataConverter = <T>(
+  key: string,
+  value: string,
+  list: T[]
+): IData[] => {
+  const newIdata: IData[] = [];
+
+  list.forEach((e) => {
+    newIdata.push({
+      key: e[key],
+      value: e[value],
+    });
+  });
+
+  return newIdata;
+};
+
+export const getCategoriesAsIData = async (): Promise<IData[]> => {
+  const categories = await getCategories();
+  return iDataConverter("id", "name", categories);
+};

src/helpers/ddConverter.tsx

+import { getCategories } from "../service/firestore/categories";
 import { IDD } from "../types/firestore";
 
 export const ddConverter = <T,>(
@@ -16,3 +17,8 @@ export const ddConverter = <T,>(
 
   return newIdd;
 };
+
+export const getCategoriesAsDdFormat = async (): Promise<IDD[]> => {
+  const categories = await getCategories();
+  return ddConverter("name", "id", categories);
+};

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

@@ -73,11 +73,6 @@ const RootNavigator = () => {
         component={SuccessChangePasswordScreen}
         options={{ headerShown: false }}
       />
-      {/* <RootStack.Screen
-        name="CreateBusinessEcosystem"
-        component={CreateBusinessEcosystemScreen}
-        options={{ title: "" }}
-      /> */}
     </RootStack.Navigator>
   ) : (
     <RootStack.Navigator>

src/screens/auth/RegisterGoogleFacebookScreen.tsx

 import { Text, View } from "../../components/Themed";
 import * as React from "react";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { ScrollView, StyleSheet } from "react-native";
 import PlainForm from "../../components/Forms/PlainForm";
 import Spacer from "../../components/Spacer/Spacer";
@@ -8,6 +8,8 @@ import MainButton from "../../components/button/MainButton";
 import Colors from "../../constants/Colors";
 import DropdownForm from "../../components/Forms/DropdownForm";
 import { RootTabScreenProps } from "../../types/navigation";
+import { getCategoriesAsDdFormat } from "../../helpers/ddConverter";
+import { IDD } from "../../types/firestore";
 
 const RegisterGoogleFacebookScreen = ({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -17,26 +19,10 @@ const RegisterGoogleFacebookScreen = ({
   const [lastName, setLastName] = useState("");
   const [phoneNo, setPhoneNo] = useState("");
   const [picked, setPicked] = useState("");
-  const [categories, setCategories] = useState([
-    { label: "Agrikultur", value: "B" },
-    { label: "Pertanian", value: "D" },
-    { label: "Pertambangan", value: "E" },
-    { label: "Perikanan", value: "F" },
-    { label: "Real Estat", value: "G" },
-    { label: "Makanan dan Minuman", value: "H" },
-    { label: "Otomotif", value: "I" },
-    { label: "Industri Berat", value: "J" },
-    { label: "Pengolahan Bahan Mentah", value: "K" },
-    { label: "Distributor", value: "L" },
-    { label: "Pasar Modal", value: "M" },
-  ]);
-  // const [categories, setCategories] = useState<IDD[]>();
-  //
-  // useEffect(() => {
-  //   getCategories().then((res) =>
-  //     setCategories(ddConverter<ICategory>("name", "id", res))
-  //   );
-  // }, []);
+  const [categories, setCategories] = useState<IDD[]>([]);
+  useEffect(() => {
+    getCategoriesAsDdFormat().then((res) => setCategories(res));
+  });
 
   return (
     <View style={styles.container}>

src/screens/auth/RegisterScreen.tsx

 import { Text, View } from "../../components/Themed";
 import * as React from "react";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { ScrollView, StyleSheet, Alert } from "react-native";
 import Colors from "../../constants/Colors";
 import PlainForm from "../../components/Forms/PlainForm";
@@ -13,6 +13,8 @@ import { useNavigation } from "@react-navigation/core";
 import { validateEmail, validateEmpty } from "../../helpers/Validators";
 import { useAppDispatch } from "../../hooks/reduxHooks";
 import { signupUser } from "../../redux/user/actions";
+import { IDD } from "../../types/firestore";
+import { getCategoriesAsDdFormat } from "../../helpers/ddConverter";
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const RegisterScreen = ({ navigation }: RootTabScreenProps<"TabOne">) => {
@@ -24,26 +26,12 @@ const RegisterScreen = ({ navigation }: RootTabScreenProps<"TabOne">) => {
   const [phoneNo, setPhoneNo] = useState("");
   const [picked, setPicked] = useState("");
 
-  // TODO: Use getCategories firestore function to fetch categories
-  const [categories, setCategories] = useState([
-    { label: "Agrikultur", value: "B" },
-    { label: "Pertanian", value: "D" },
-    { label: "Pertambangan", value: "E" },
-    { label: "Perikanan", value: "F" },
-    { label: "Real Estat", value: "G" },
-    { label: "Makanan dan Minuman", value: "H" },
-    { label: "Otomotif", value: "I" },
-    { label: "Industri Berat", value: "J" },
-    { label: "Pengolahan Bahan Mentah", value: "K" },
-    { label: "Distributor", value: "L" },
-    { label: "Pasar Modal", value: "M" },
-  ]);
+  const [categories, setCategories] = useState<IDD[]>([]);
+  useEffect(() => {
+    getCategoriesAsDdFormat().then((res) => setCategories(res));
+  });
+
   const dispatch = useAppDispatch();
-  // useEffect(() => {
-  //   getCategories().then((res) =>
-  //     setCategories(ddConverter<ICategory>("name", "id", res))
-  //   );
-  // }, []);
 
   const handleSubmit = () => {
     if (

src/screens/ecosystem/BusinessCategoryScreen.tsx

@@ -3,34 +3,15 @@ import { StyleSheet } from "react-native";
 import { View } from "../../components/Themed";
 import Colors from "../../constants/Colors";
 import AlphabetGroupList from "../../components/GroupList/AlphabetGroupList";
+import { useState, useEffect } from "react";
+import { getCategoriesAsIData } from "../../helpers/alphabetConverter";
+import { IData } from "react-native-section-alphabet-list";
 
 const BusinessCategoryScreen = () => {
-  const data = [
-    { value: "Accomodation and Food Services", key: "1" },
-    {
-      value:
-        "Administrative and Support and Waste Management and Remediation Services",
-      key: "2",
-    },
-    { value: "Agriculture, Forestry, Fishing, and Hunting", key: "3" },
-    { value: "Arts, Entertainment, and Recreation", key: "4" },
-    { value: "Construction", key: "5" },
-    { value: "Educational Services", key: "6" },
-    { value: "Finance and Insurance", key: "7" },
-    { value: "Health Care and Social Assistance", key: "8" },
-    { value: "Management of Companies and Enterprises", key: "9" },
-    { value: "Manufacturing", key: "10" },
-    { value: "Mining, Quarrying, and Oil and Gas Extraction ", key: "11" },
-    { value: "Other Services (Except Public Administration)", key: "12" },
-    { value: "Professional, Scientific, and Technical Services", key: "13" },
-    { value: "Public Administration", key: "14" },
-    { value: "Real Estate and Rental and Leasing", key: "15" },
-    { value: "Retail Trade", key: "16" },
-    { value: "Transportation and Warehousing", key: "17" },
-    { value: "Utilities", key: "18" },
-    { value: "Umum", key: "19" },
-    { value: "Wholesale Trade", key: "20" },
-  ];
+  const [data, setData] = useState<IData[]>([]);
+  useEffect(() => {
+    getCategoriesAsIData().then((res) => setData(res));
+  });
 
   return (
     <View style={styles.container}>

src/screens/ecosystem/BusinessEcosystemScreen.tsx

@@ -45,7 +45,19 @@ const BusinessEcosystemScreen = () => {
       </View>
       <Spacer variant="xl" />
       <View>
-        <Text style={styles.text}>Ekosistem Bisnis</Text>
+        <TouchableOpacity
+          onPress={() => {
+            nav.navigate("Ecosystem", {
+              screen: "Recommended",
+              params: {
+                headerTitle: "Ekosistem Saya",
+                toFetch: "MyEcosystem",
+              },
+            });
+          }}
+        >
+          <Text style={styles.link}>Ekosistem Saya</Text>
+        </TouchableOpacity>
       </View>
       <Spacer variant="xl" />
       <View>

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<