added refresing of calls for active tickets

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

@@ -1,8 +1,5 @@
 import { connect } from "react-redux";
-import {
-  selectCurrentEmployee,
-  selectTechnician,
-} from "../../redux/employee/employee.selectors";
+import { selectCurrentEmployee } from "../../redux/employee/employee.selectors";
 import { QUERY_ACTIVE_TIME_TICKETS } from "../../graphql/timetickets.queries";
 import { ActivityIndicator } from "react-native-paper";
 import ErrorDisplay from "../error-display/error-display.component";
@@ -11,31 +8,36 @@ import { 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 { setTmTicketJobId } from "../../redux/app/app.actions";
 
 const mapStateToProps = createStructuredSelector({
-  technician: selectTechnician,
-  //currentEmployee: selectCurrentEmployee,
+  //technician: selectTechnician,
+  currentEmployee: selectCurrentEmployee,
 });
 // const mapDispatchToProps = (dispatch) => ({
 //   setTmTicketJobId: (jobId) => dispatch(setTmTicketJobId(jobId)),
 // });
 
-export function EmployeeClockedInList({ technician }) {
-   console.info("EmployeeClockedInList, QUERY_ACTIVE_TIME_TICKETS called.");
+export function EmployeeClockedInList({ currentEmployee }) {
   
+  const [jobData, setJobData] = useState(null);
+  console.info(
+    "EmployeeClockedInList, QUERY_ACTIVE_TIME_TICKETS called.",
+    currentEmployee
+  );
+
   const { t } = useTranslation();
 
   const { loading, error, data, refetch } = useQuery(
     QUERY_ACTIVE_TIME_TICKETS,
     {
       variables: {
-        employeeId: technician?.id,
+        employeeId: currentEmployee?.technician?.id,
       },
-      skip: !technician,
-      fetchPolicy: "network-only",
-      nextFetchPolicy: "network-only",
+      skip: !currentEmployee?.technician,
+      onCompleted:setJobData
     }
   );
   if (loading) return <ActivityIndicator color="dodgerblue" size="large" />;
@@ -46,18 +48,23 @@ export function EmployeeClockedInList({ technician }) {
   };
 
   return (
-    <View style={{ flex:1, flexGrow:1  }} >
-      {data.timetickets.length > 0 ? (
+    <View style={{ flex: 1, flexGrow: 1 }}>
+      {jobData ? (
         <View>
           <Text style={{ paddingLeft: 12, paddingTop: 14 }}>
             You are already clocked in to the following job(s):
           </Text>
           <FlatList
-            data={data.timetickets}
+            data={jobData?.timetickets}
             refreshControl={
               <RefreshControl refreshing={loading} onRefresh={onRefresh} />
             }
-            renderItem={(object) => <ClockedinListItem ticket={object.item} />}
+            renderItem={(object) => (
+              <ClockedinListItem
+                ticket={object.item}
+                handleRefresh={onRefresh}
+              />
+            )}
             // setTmTicketJobId={setTmTicketJobId}
           />
         </View>