Refactor: Category Data Retrieve Update

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/RootNavigator.tsx

@@ -10,7 +10,6 @@ import { getUser } from "../redux/user/actions";
 import LandingScreen from "../screens/auth/LandingScreen";
 import firebase from "firebase";
 import { Alert } from "react-native";
-import CreateBusinessEcosystemScreen from "../screens/CreateBusinessEcosystemScreen";
 
 /**
  * A root stack navigator is often used for displaying modals on top of all other content.
@@ -74,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}>