Time Ticket displays current signed in employee

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

@@ -1,41 +1,30 @@
 import React, { useCallback, useState } from "react";
-import {
-  View,
-  Text,
-  StyleSheet,
-  ScrollView,
-  RefreshControl,
-} from "react-native";
+import moment from "moment";
+import {  View,  Text,  StyleSheet,  ScrollView,  RefreshControl} from "react-native";
+import { Button, Card, Headline, Subheading } from "react-native-paper";
+import styles from "../styles";
+
 import axios from "axios";
 import { connect } from "react-redux";
-import { employeeGetRatesStart } from "../../redux/employee/employee.actions";
 import { createStructuredSelector } from "reselect";
-import {
-  selectCurrentEmployee,
-  selectRates,
-  selectGettingRates,
-  selectSignInError,
-} from "../../redux/employee/employee.selectors";
-import { Button, Card } from "react-native-paper";
 
-import { QUERY_ACTIVE_TIME_TICKETS } from "../../graphql/timetickets.queries";
-//temp
-import { useQuery } from "@apollo/client";
-import ErrorDisplay from "../error-display/error-display.component";
+import { employeeGetRatesStart } from "../../redux/employee/employee.actions";
+import {  selectCurrentEmployee, selectRates, selectGettingRates,  selectSignInError,  selectEmployeeFullName,
+} from "../../redux/employee/employee.selectors";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+
 import { JobIdSearchSelect } from "../Selects/select-job-id";
 import { CostCenterSelect } from "../Selects/select-cost-center";
-import {
-  selectCurrentTimeTicketJob,
-  selectCurrentTimeTicketJobId,
+import ErrorDisplay from "../error-display/error-display.component";
+import {  selectCurrentTimeTicketJob,  selectCurrentTimeTicketJobId,
 } from "../../redux/timetickets/timetickets.selectors";
-import moment from "moment";
-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";
-import { useMutation } from "@apollo/client";
+import { useMutation, useQuery } from "@apollo/client";
+import { QUERY_ACTIVE_TIME_TICKETS } from "../../graphql/timetickets.queries";
+
+import EmployeeClockedInList from "../time-ticket-lists/employee-clockedin-list.component";
 import { logImEXEvent } from "../../firebase/firebase.analytics";
+import StyleRepeater from "../style-repeater/style-repeater";
 
 const mapStateToProps = createStructuredSelector({
   currentEmployee: selectCurrentEmployee,
@@ -45,6 +34,7 @@ const mapStateToProps = createStructuredSelector({
   currentRatesNCostCenters: selectRates,
   currentSelectedTimeTicketJobId: selectCurrentTimeTicketJobId,
   currentSelectedTimeTicketJob: selectCurrentTimeTicketJob,
+  currentEmployeeFullName: selectEmployeeFullName,
 });
 
 const mapDispatchToProps = (dispatch) => ({
@@ -61,9 +51,8 @@ export function ScreenTimeTicketBrowser({
   currentRatesNCostCenters,
   currentSelectedTimeTicketJob,
   currentSelectedTimeTicketJobId,
+  currentEmployeeFullName,
 }) {
-  const navigation = useNavigation();
-  //const employeeId = currentEmployee.technician.id;
   const [currentSCC, setCurrentSCC] = useState(null);
   const [currentSJobId, setCurrentSJobId] = useState(null);
   const [loading, setLoading] = useState(false);
@@ -72,31 +61,24 @@ export function ScreenTimeTicketBrowser({
   const [insertTimeTicket] = useMutation(INSERT_NEW_TIME_TICKET, {
     refetchQueries: ["QUERY_ACTIVE_TIME_TICKETS"],
   });
-  const [jobCount, setJobCount] = useState(0);
-
-  //test area
 
   const handleFinish = async (values) => {
     console.log("handleFinish called in ScreenTimeTicketBrowser");
     setLoading(true);
     setError(null);
-    //do stuff...
 
     const theTime = (await axios.post("/utils/time")).data;
 
     if (!!currentSCC?.value && !!currentSJobId?.value) {
       setError(null);
-      console.log("have all values");
+      // console.log("have all values");
     } else {
-      console.log("missing values!");
+      // console.log("missing values!");
       setLoading(false);
       setError({ message: "Please make sure all fields have a value." });
       return;
     }
 
-    if (currentSJobId)
-      console.log("jobid or currentSJobId", currentSJobId?.value);
-
     const tempVariablesObj = {
       variables: {
         timeTicketInput: [
@@ -123,23 +105,15 @@ export function ScreenTimeTicketBrowser({
         ],
       },
     };
-    console.info(
-      "INSERT_NEW_TIME_TICKET, variables for clockin. : ",
-      tempVariablesObj?.variables?.timeTicketInput[0]
-    );
-
+    // console.info("INSERT_NEW_TIME_TICKET, variables for clockin. : ",tempVariablesObj?.variables?.timeTicketInput[0] );
     const result = await insertTimeTicket(tempVariablesObj);
-    console.log("insertTimeTicket, result :", result);
-
+    // console.log("insertTimeTicket, result :", result);
     setLoading(false);
     if (!!result.errors) {
-      console.log("insertTimeTicket, result.error :", result.errors);
+      // console.log("insertTimeTicket, result.error :", result.errors);
       setError(JSON.stringify(result.errors));
     } else {
-      console.log("insertTimeTicket, result. :", result.data);
-      //show success
-      //clear fields
-
+      // console.log("insertTimeTicket, result. :", result.data);
       setCurrentSJobId(null);
       setCurrentSCC(null);
     }
@@ -152,14 +126,22 @@ export function ScreenTimeTicketBrowser({
   }, []);
 
   return (
-    <View style={localStyles.content}>
-      <ScrollView
-        style={{ flex: 1 }}
-        contentContainerStyle={{ flexGrow: 1 }}
-        refreshControl={
-          <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
-        }
-      >
+    <ScrollView
+      style={styles.cardBackground}
+      // contentContainerStyle={{ flexGrow: 0 }}
+      refreshControl={
+        <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+      }
+    >
+      <StyleRepeater childStyle={{ margin: 4 }}>
+        <Card>
+          <Card.Title title={"Logged in Employee"} />
+          <Card.Content>
+            {currentEmployeeFullName && (
+              <Subheading>{currentEmployeeFullName}</Subheading>
+            )}
+          </Card.Content>
+        </Card>
         <Card>
           <JobIdSearchSelect
             currentValue={currentSJobId}
@@ -178,29 +160,15 @@ export function ScreenTimeTicketBrowser({
           <Button mode="outlined" loading={loading} onPress={handleFinish}>
             <Text>Clock In</Text>
           </Button>
-          
         </Card>
-        {/* <View style={{ flexGrow: 1, flex: 1 }}>
-          <EmployeeClockedInList
-            technician={currentEmployee}
-            isRefresh={refreshing}
-            onRefresh={onRefresh}
-          />
-        </View> */}
-      </ScrollView>
+      </StyleRepeater>
       <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} handleRefresh={refreshing} onRefresh={onRefresh} />
+        <EmployeeClockedInList
+          technician={currentEmployee}
+          isRefresh={refreshing}
+        />
       </View>
-      </ScrollView> */}
-    </View>
+    </ScrollView>
   );
 }
 

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

@@ -24,10 +24,7 @@ const mapStateToProps = createStructuredSelector({
 export function EmployeeClockedInList({ currentEmployee, isRefresh }) {
   const [refreshKey, setRefreshKey] = useState(isRefresh);
   const [jobData, setJobData] = useState(data);
-  console.info(
-    "EmployeeClockedInList, QUERY_ACTIVE_TIME_TICKETS called.",
-    currentEmployee
-  );
+  //  console.info("EmployeeClockedInList, QUERY_ACTIVE_TIME_TICKETS called.",currentEmployee);
 
   // console.info(
   //   "EmployeeClockedInList, isRefresh :",
@@ -42,6 +39,9 @@ export function EmployeeClockedInList({ currentEmployee, isRefresh }) {
     //     console.log("teste: ", result);
     // }
     // fetchData();
+    if(isRefresh){
+      refetch();
+    }
     console.log("useEffect: ", isRefresh);
     // setRefreshKey(isRefresh);