add getemployeebyid call N costcenter dropdown

components/time-ticket/screen-time-ticket-create.component.jsx

@@ -1,5 +1,5 @@
 import { Formik } from "formik";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { StyleSheet, Text } from "react-native";
 import { useTranslation } from "react-i18next";
 import { View, ScrollView } from "react-native";
@@ -9,18 +9,28 @@ import { Button, Dialog, TextInput } from "react-native-paper";
 import { QUERY_EMPLOYEE_BY_ID } from "../../graphql/employees.queries";
 //import SelectDropdown from 'react-native-select-dropdown';
 import { SelectCostCenter } from "../Selects/select-cost-center";
-import { selectCurrentEmployee } from "../../redux/employee/employee.selectors";
+import {
+  selectCurrentEmployee,
+  selectRates,
+} from "../../redux/employee/employee.selectors";
 import DateTimePickerModal from "react-native-modal-datetime-picker";
 
 //TODO add props needed for call
 const mapStateToProps = createStructuredSelector({
   currentEmployee: selectCurrentEmployee,
+  currentRatesNCostCenters: selectRates,
 });
-const mapDispatchToProps = (dispatch) => ({})
+const mapDispatchToProps = (dispatch) => ({});
+
+export function TimeTicketCreate({
+  currentEmployee,
+  currentRatesNCostCenters,
+}) {
+  const { t } = useTranslation();
 
-export function TimeTicketCreate({currentEmployee}) {
   const [isDatePickerVisible, setDatePickerVisibility] = useState(false);
   const [date2, setDate2] = useState(new Date());
+  const [costCenters, setCostCenters] = useState([]);
 
   const showDatePicker = () => {
     setDatePickerVisibility(true);
@@ -33,14 +43,23 @@ export function TimeTicketCreate({currentEmployee}) {
     //console.warn("A date has been picked: ", date);
     hideDatePicker();
   };
-
-  const { t } = useTranslation();
-
   const formSubmit = (values) => {
     Dialog.alert({ content: <pre>{JSON.stringify(values, null, 2)}</pre> });
     //TODO update with start call for create time ticket
   };
 
+  useEffect(() => {
+    var count = Object.keys(currentRatesNCostCenters).length;
+    let selectDataArray = [];
+    for (let i = 0; i < count; i++) {
+      selectDataArray.push({
+        value: currentRatesNCostCenters[i].cost_center,
+        label: currentRatesNCostCenters[i].cost_center,
+      });
+    }
+    setCostCenters(selectDataArray);
+  }, []);
+
   return (
     <View style={localStyles.content}>
       <ScrollView>
@@ -68,16 +87,10 @@ export function TimeTicketCreate({currentEmployee}) {
               />
 
               {/* Below will be replaced with a Date Picker*/}
-              {/* <TextInput
-                style={localStyles.input}
-                mode="flat"
-                onChangeText={handleChange("ticketdate")}
-                onBlur={handleBlur("ticketdate")}
-                value={values.ticketdate}
-                label={"Ticket Date"}
-              /> */}
+              {/* <TextInput style={localStyles.input} mode="flat" onChangeText={handleChange("ticketdate")} onBlur={handleBlur("ticketdate")} value={values.ticketdate} label={"Ticket Date"} /> */}
               <Button title="TicketDatePickerButton" onPress={showDatePicker}>
-                Ticket Date: {date2.toLocaleDateString()}
+                {" "}
+                Ticket Date: {date2.toLocaleDateString()}{" "}
               </Button>
               <DateTimePickerModal
                 isVisible={isDatePickerVisible}
@@ -96,7 +109,7 @@ export function TimeTicketCreate({currentEmployee}) {
                 label={"Employee"}
               />
 
-              <SelectCostCenter />
+              <SelectCostCenter selectorData={costCenters} />
               {/* Below will be replaced with SelectCostCenter */}
               <TextInput
                 style={localStyles.input}