added parts for last 3 calls

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

@@ -1,24 +1,32 @@
 import { connect } from "react-redux";
-import { selectCurrentEmployee, selectTechnician } from "../../redux/employee/employee.selectors";
+import {
+  selectCurrentEmployee,
+  selectTechnician,
+} from "../../redux/employee/employee.selectors";
 import { QUERY_ACTIVE_TIME_TICKETS } from "../../graphql/timetickets.queries";
-import { ActivityIndicator,Button, List, Modal, Portal, Searchbar } from "react-native-paper";
+import { ActivityIndicator } from "react-native-paper";
 import ErrorDisplay from "../error-display/error-display.component";
-import { View,Text,FlatList, RefreshControl, } from "react-native";
+import { View, Text, FlatList, RefreshControl } from "react-native";
 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 { setTmTicketJobId } from "../../redux/app/app.actions";
 
 const mapStateToProps = createStructuredSelector({
   technician: selectTechnician,
   //currentEmployee: selectCurrentEmployee,
 });
-const mapDispatchToProps = (dispatch) => ({});
+const mapDispatchToProps = (dispatch) => ({
+  setTmTicketJobId: (jobId) => dispatch(setTmTicketJobId(jobId)),
+});
 
 export function EmployeeClockedInList({ technician }) {
-    const { t } = useTranslation();
+  const { t } = useTranslation();
 
-  const { loading, error, data, refetch } = useQuery(QUERY_ACTIVE_TIME_TICKETS, {
+  const { loading, error, data, refetch } = useQuery(
+    QUERY_ACTIVE_TIME_TICKETS,
+    {
       variables: {
         employeeId: technician?.id,
       },
@@ -30,9 +38,9 @@ export function EmployeeClockedInList({ technician }) {
   if (loading) return <ActivityIndicator color="dodgerblue" size="large" />;
   if (error) return <ErrorDisplay errorMessage={error.message} />;
   //if (error) return <AlertComponent message={error.message} type="error" />;
-console.log("QUERY_ACTIVE_TIME_TICKETS data",data)
-
-const onRefresh = async () => {
+  console.log("QUERY_ACTIVE_TIME_TICKETS data", data);
+//   if (data) () => {setTmTicketJobId(data)}
+  const onRefresh = async () => {
     return refetch();
   };
   return (
@@ -40,9 +48,13 @@ const onRefresh = async () => {
       {data.timetickets.length > 0 ? (
         <View>
           <Text>You are already clocked in to the following job(s):</Text>
-          <FlatList data={data.timetickets} 
-          refreshControl={<RefreshControl refreshing={loading} onRefresh={onRefresh} />}
-          renderItem={(object) => <ClockedinListItem ticket={object.item} />} />
+          <FlatList
+            data={data.timetickets}
+            refreshControl={
+              <RefreshControl refreshing={loading} onRefresh={onRefresh} />
+            }
+            renderItem={(object) => <ClockedinListItem ticket={object.item} setTmTicketJobId={setTmTicketJobId}/>}
+          />
         </View>
       ) : null}
     </View>
@@ -105,4 +117,4 @@ const onRefresh = async () => {
   );
 }
 
-export default connect(mapStateToProps,null)(EmployeeClockedInList);
+export default connect(mapStateToProps, mapDispatchToProps)(EmployeeClockedInList);