added some checks for bugs

components/error-display/error-display.component.jsx

@@ -1,10 +1,20 @@
 import React from "react";
-import { View, Text } from "react-native";
+import { StyleSheet,View, Text } from "react-native";
+import { Title } from "react-native-paper";
 
 export default function ErrorDisplay({ errorMessage }) {
   return (
-    <View style={{ backgroundColor: "red", paddingLeft:10, paddingVertical:8 }}>
+    <View >
-      <Text>{errorMessage}</Text>
+      <Title style={localStyles.alert}>{errorMessage}</Title>
+      {/* <Text>{errorMessage}</Text> */}
     </View>
   );
 }
+const localStyles = StyleSheet.create({
+  alert: {
+    color: "red",
+    textAlign: "center",
+    margin: 15,
+    padding: 15,
+  },
+});

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

@@ -1,5 +1,11 @@
-import React, { useState } from "react";
+import React, { useCallback, useState } from "react";
-import { View, Text, StyleSheet, ScrollView } from "react-native";
+import {
+  View,
+  Text,
+  StyleSheet,
+  ScrollView,
+  RefreshControl,
+} from "react-native";
 import axios from "axios";
 import { connect } from "react-redux";
 import { employeeGetRatesStart } from "../../redux/employee/employee.actions";
@@ -24,7 +30,7 @@ import {
   selectCurrentTimeTicketJobId,
 } from "../../redux/timetickets/timetickets.selectors";
 import moment from "moment";
-import  EmployeeClockedInList  from "../time-ticket-lists/employee-clockedin-list.component";
+import EmployeeClockedInList from "../time-ticket-lists/employee-clockedin-list.component";
 import { useNavigation } from "@react-navigation/native";
 
 import { INSERT_NEW_TIME_TICKET } from "../../graphql/timetickets.queries";
@@ -62,22 +68,14 @@ export function ScreenTimeTicketBrowser({
   const [currentSJobId, setCurrentSJobId] = useState(null);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
-  const [insertTimeTicket] = useMutation(INSERT_NEW_TIME_TICKET,{
+  const [refreshing, setRefreshing] = useState(false);
+  const [insertTimeTicket] = useMutation(INSERT_NEW_TIME_TICKET, {
     refetchQueries: ["QUERY_ACTIVE_TIME_TICKETS"],
   });
   const [jobCount, setJobCount] = useState(0);
-  // const { error, data } = useQuery(QUERY_EMPLOYEE_BY_ID, {
-  //   variables: { id: currentEmployee.technician.id },
-  // });
-  // const signingErrorMsg = error ? (<ErrorDisplay errorMessage={error.message} />) : null;
-  // const signingErrorMsg = signingError ? (<ErrorDisplay errorMessage={signingError} />) : null;
 
-  // const wrapperSetCurrentSJobState = useCallback(
+  //test area
-  //   (val) => {
+
-  //     setCurrentSJobId(val);
-  //   },
-  //   [setCurrentSJobId]
-  // );
   const handleFinish = async (values) => {
     console.log("handleFinish called in ScreenTimeTicketBrowser");
     setLoading(true);
@@ -133,6 +131,7 @@ export function ScreenTimeTicketBrowser({
     const result = await insertTimeTicket(tempVariablesObj);
     console.log("insertTimeTicket, result :", result);
 
+    setLoading(false);
     if (!!result.errors) {
       console.log("insertTimeTicket, result.error :", result.errors);
       setError(JSON.stringify(result.errors));
@@ -144,14 +143,24 @@ export function ScreenTimeTicketBrowser({
       setCurrentSJobId(null);
       setCurrentSCC(null);
     }
-
-    setLoading(false);
   };
+  const onRefresh = useCallback(() => {
+    setRefreshing(true);
+    setTimeout(() => {
+      setRefreshing(false);
+    }, 2000);
+  }, []);
 
   return (
     <View style={localStyles.content}>
-      <ScrollView style={{flex:1}} contentContainerStyle={{ flexGrow: 1 }}>
+      <ScrollView
-        <Card >
+        style={{ flex: 1 }}
+        contentContainerStyle={{ flexGrow: 1 }}
+        refreshControl={
+          <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+        }
+      >
+        <Card>
           <JobIdSearchSelect
             currentValue={currentSJobId}
             onJobSelected={setCurrentSJobId}
@@ -170,10 +179,26 @@ export function ScreenTimeTicketBrowser({
             <ErrorDisplay errorMessage={error.message} />
           ) : null}
         </Card>
+        {/* <View style={{ flexGrow: 1, flex: 1 }}>
+          <EmployeeClockedInList
+            technician={currentEmployee}
+            isRefresh={refreshing}
+            onRefresh={onRefresh}
+          />
+        </View> */}
       </ScrollView>
+      <View style={{ flexGrow: 1, flex: 1 }}>
+          <EmployeeClockedInList
+            technician={currentEmployee}
+            isRefresh={refreshing}
+          />
+        </View>
+      {/* <ScrollView style={{flex:1}} contentContainerStyle={{ flexGrow: 1 }}  refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />} >
+
       <View style={{ flexGrow: 1, flex:1 }}>
-        <EmployeeClockedInList technician={currentEmployee} />
+        <EmployeeClockedInList technician={currentEmployee} handleRefresh={refreshing} onRefresh={onRefresh} />
       </View>
+      </ScrollView> */}
     </View>
   );
 }

components/time-ticket-items/clockedin-list-item.component.jsx

@@ -11,8 +11,8 @@ const mapDispatchToProps = (dispatch) => ({
   setTmTicketJobIdRedux: (jobId) => dispatch(setTmTicketJobId(jobId)),
 });
 
-export function ClockedinListItem({ setTmTicketJobIdRedux, ticket, handleRefresh }) {
+export function ClockedinListItem({ setTmTicketJobIdRedux, ticket }) {
-  console.log("makeNavToTimeTicketClockOff, handleRefresh:",handleRefresh);
+  console.log("makeNavToTimeTicketClockOff, handleRefresh:");
   const { t } = useTranslation();
   const navigation = useNavigation();
 
@@ -22,7 +22,7 @@ export function ClockedinListItem({ setTmTicketJobIdRedux, ticket, handleRefresh
     navigation.navigate("TimeTicketClockOff", {
       // jobId: ticket.jobid, //item.id,
       timeTicketId:ticket.id,
-      handleOnDone:handleRefresh,
+      // handleOnDone:handleRefresh,
       //completedCallback: refetch,
     })
   );

components/time-ticket-lists/employee-clockedin-list.component.jsx

@@ -4,32 +4,49 @@ import { QUERY_ACTIVE_TIME_TICKETS } from "../../graphql/timetickets.queries";
 import { ActivityIndicator } from "react-native-paper";
 import ErrorDisplay from "../error-display/error-display.component";
 import { View, Text, FlatList, RefreshControl } from "react-native";
-import { useQuery } from "@apollo/client";
+import { useMutation, useQuery } from "@apollo/client";
 import { createStructuredSelector } from "reselect";
 import { useTranslation } from "react-i18next";
 import ClockedinListItem from "../time-ticket-items/clockedin-list-item.component";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 // import { setTmTicketJobId } from "../../redux/app/app.actions";
 
 const mapStateToProps = createStructuredSelector({
   //technician: selectTechnician,
   currentEmployee: selectCurrentEmployee,
+  // updateJobs: selectUpdateJobs
 });
 // const mapDispatchToProps = (dispatch) => ({
 //   setTmTicketJobId: (jobId) => dispatch(setTmTicketJobId(jobId)),
 // });
 
-export function EmployeeClockedInList({ currentEmployee }) {
+export function EmployeeClockedInList({ currentEmployee, isRefresh }) {
-  
+  const [refreshKey, setRefreshKey] = useState(isRefresh);
-  const [jobData, setJobData] = useState(null);
+  const [jobData, setJobData] = useState(data);
   console.info(
     "EmployeeClockedInList, QUERY_ACTIVE_TIME_TICKETS called.",
     currentEmployee
   );
 
+  // console.info(
+  //   "EmployeeClockedInList, isRefresh :",
+  //   isRefresh
+  // );
   const { t } = useTranslation();
 
+  useEffect(() => {
+    // async function fetchData(){
+    //     // const result = await getUsers();
+    //     // setData(result);
+    //     console.log("teste: ", result);
+    // }
+    // fetchData();
+    console.log("useEffect: ", isRefresh);
+    // setRefreshKey(isRefresh);
+    
+}, [isRefresh]);
+
   const { loading, error, data, refetch } = useQuery(
     QUERY_ACTIVE_TIME_TICKETS,
     {
@@ -37,16 +54,21 @@ export function EmployeeClockedInList({ currentEmployee }) {
         employeeId: currentEmployee?.technician?.id,
       },
       skip: !currentEmployee?.technician,
-      onCompleted:setJobData
+      onCompleted:setJobData,
+      onRefresh:{onRefresh}
     }
   );
   if (loading) return <ActivityIndicator color="dodgerblue" size="large" />;
   if (error) return <ErrorDisplay errorMessage={error.message} />;
 
   const onRefresh = async () => {
+    console.info("EmployeeClockedInList, onRefresh.");
     return refetch();
   };
 
+
+
+
   return (
     <View style={{ flex: 1, flexGrow: 1 }}>
       {jobData ? (
@@ -62,7 +84,7 @@ export function EmployeeClockedInList({ currentEmployee }) {
             renderItem={(object) => (
               <ClockedinListItem
                 ticket={object.item}
-                handleRefresh={onRefresh}
+                // handleRefresh={onRefresh}
               />
             )}
             // setTmTicketJobId={setTmTicketJobId}

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

@@ -41,9 +41,9 @@ export function TimeTicketClockOff({
   route,
 }) {
   const navigation = useNavigation();
-  const { timeTicketId, handleOnDone } = route.params;
+  const { timeTicketId } = route.params;
   // console.log("TimeTicketClockOff, timeTicketId :", timeTicketId);
-   console.log( "TimeTicketClockOff, handleOnDone :", handleOnDone );
+  //  console.log( "TimeTicketClockOff, handleOnDone :", handleOnDone );
 
   const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
@@ -61,6 +61,12 @@ export function TimeTicketClockOff({
       !!values.productivehours &&
       !!currentSCC?.value
     ) {
+      if (isNaN(values.actualhours)|isNaN(values.productivehours)) {
+        console.log("actual hours is NAN!");
+        setError({ message: "Please make sure all fields have valid values." });
+      return;
+      
+      }
       setError(null);
       console.log("all have values:");
     } else {

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

@@ -25,7 +25,6 @@ import { logImEXEvent } from "../../firebase/firebase.analytics";
 import moment from "moment";
 import { useNavigation } from "@react-navigation/native";
 
-
 const mapStateToProps = createStructuredSelector({
   currentEmployee: selectCurrentEmployee,
   currentRatesNCostCenters: selectRates,
@@ -87,8 +86,14 @@ export function TimeTicketCreate({
       !!values.productivehours &&
       !!currentBodyshop.id &&
       !!currentEmployee?.technician?.id &&
-      !!date2 && !!values.actualhours
+      !!date2 &&
+      !!values.actualhours
     ) {
+      if (isNaN(values.actualhours) | isNaN(values.productivehours)) {
+        console.log("actual hours is NAN!");
+        setError({ message: "Please make sure all fields have valid values." });
+        return;
+      }
       setError(null);
       console.log("have all values");
     } else {
@@ -107,14 +112,33 @@ export function TimeTicketCreate({
           {
             actualhrs: values?.actualhours ? values?.actualhours : null,
             bodyshopid: currentBodyshop.id,
-            ciecacode: currentBodyshop?.cdk_dealerid || currentBodyshop?.pbs_serialnumber ? currentSCC?.value : Object.keys(currentBodyshop.md_responsibility_centers.defaults.costs).find((key) => {return (currentBodyshop.md_responsibility_centers.defaults.costs[key] === currentSCC?.value);}),
+            ciecacode:
+              currentBodyshop?.cdk_dealerid || currentBodyshop?.pbs_serialnumber
+                ? currentSCC?.value
+                : Object.keys(
+                    currentBodyshop.md_responsibility_centers.defaults.costs
+                  ).find((key) => {
+                    return (
+                      currentBodyshop.md_responsibility_centers.defaults.costs[
+                        key
+                      ] === currentSCC?.value
+                    );
+                  }),
             cost_center: currentSCC?.value,
             date: moment(date2).format("YYYY-MM-DD"),
             employeeid: currentEmployee?.technician?.id,
-            flat_rate: currentEmployee && currentEmployee.technician && currentEmployee.technician?.flat_rate,
+            flat_rate:
+              currentEmployee &&
+              currentEmployee.technician &&
+              currentEmployee.technician?.flat_rate,
             jobid: currentSJobId?.value,
             productivehrs: values?.productivehours,
-            rate: currentRatesNCostCenters && currentSCC?.value ? currentRatesNCostCenters.filter((r) => r.cost_center === currentSCC?.value)[0].rate : null,
+            rate:
+              currentRatesNCostCenters && currentSCC?.value
+                ? currentRatesNCostCenters.filter(
+                    (r) => r.cost_center === currentSCC?.value
+                  )[0].rate
+                : null,
           },
         ],
       },
@@ -122,12 +146,12 @@ export function TimeTicketCreate({
     // clockoff: undefined,
     //         clockon: undefined,
     //         memo: undefined,
-            
+
     // console.log("insertTicket, tempVariablesObj. :", tempVariablesObj?.variables?.timeTicketInput[0]);
 
     //after obj is good add below to make call
 
-    const result = await insertTicket(tempVariablesObj);//.catch(handleMutationError);
+    const result = await insertTicket(tempVariablesObj); //.catch(handleMutationError);
 
     // console.log(" result : ", result);
     // //after call results are retuning add handling below for cases
@@ -146,7 +170,9 @@ export function TimeTicketCreate({
   const handleMutationError = (error) => {
     // setEnterAgain(false);
     console.log("insertTicket, result.error :", error);
-      setError(error?.message ? JSON.stringify(error?.message) : JSON.stringify(error));
+    setError(
+      error?.message ? JSON.stringify(error?.message) : JSON.stringify(error)
+    );
     setLoading(false);
   };
   return (
@@ -231,7 +257,7 @@ export function TimeTicketCreate({
               >
                 <Text style={{ fontSize: 12 }}>Create Ticket</Text>
               </Button>
-              {error ? <ErrorDisplay  errorMessage={error.message} /> : null}
+              {error ? <ErrorDisplay errorMessage={error.message} /> : null}
             </View>
           )}
         </Formik>