working on adding debounce

components/Modals/JobSearchAndSelectModal.jsx

@@ -1,38 +1,20 @@
-import { useQuery } from "@apollo/client";
+import { useLazyQuery, useQuery } from "@apollo/client";
 import { Ionicons } from "@expo/vector-icons";
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { FlatList, RefreshControl, View } from "react-native";
+import { FlatList, RefreshControl, Text, View } from "react-native";
 import { Button, List, Modal, Portal, Searchbar } from "react-native-paper";
 import { connect } from "react-redux";
 // import { createStructuredSelector } from "reselect";
-import { QUERY_ALL_ACTIVE_JOBS } from "../../graphql/jobs.queries";
+import {
-// import { setCameraJob, setCameraJobId } from "../../redux/app/app.actions";
+  SEARCH_JOBS_FOR_AUTOCOMPLETE,
-// import {
+} from "../../graphql/jobs.queries";
-//   selectCurrentCameraJob,
-//   selectCurrentCameraJobId,
-// } from "../../redux/app/app.selectors";
-// import { selectBodyshop } from "../../redux/user/user.selectors";
 import ErrorDisplay from "../error-display/error-display.component";
-import LoadingDisplay from "../loading-display/loading-display.component";
+// import LoadingDisplay from "../loading-display/loading-display.component";
+import _ from 'lodash';
 
-// const mapStateToProps = createStructuredSelector({
-//   cameraJobId: selectCurrentCameraJobId,
-//   cameraJob: selectCurrentCameraJob,
-// });
 
-// const mapDispatchToProps = (dispatch) => ({
+export function JobSearchAndSelectModal(props) {
-//   setCameraJobId: (id) => dispatch(setCameraJobId(id)),
-//   setCameraJob: (job) => dispatch(setCameraJob(job)),
-// });
-
-export function JobSearchAndSelectModal(
-  props,
-//   cameraJobId,
-//   setCameraJobId,
-//   cameraJob,
-//   setCameraJob,
-) {
   const jobSrchNotExported =
     props?.notExported !== undefined ? props.notExported : true;
   const jobSrchNotInvoiced =
@@ -40,82 +22,157 @@ export function JobSearchAndSelectModal(
   const jobSrchConvertedOnly =
     props?.convertedOnly !== undefined ? props.convertedOnly : false;
 
-    const jobSrchCurrentValue = props?.currentValue !== undefined ? props.currentValue : { id: "temp", ro_number: "Temporary Storage" };
+  const jobSrchCurrentValue =
-    const jobSrchOnSetCurrentValue = props?.onSetCurrentValue !== undefined ? props.onSetCurrentValue : (e) => { console.info("onSetCurrentValue was called",e);};
+    props?.currentValue !== undefined
-    const jobSrchCurrentValueId = props?.currentValueId !== undefined ? props.currentValueId : "temp";
+      ? props.currentValue
-    const jobSrchOnSetCurrentValueId = props?.onSetCurrentValueId !== undefined ? props.onSetCurrentValueId : () => { console.info("onSetCurrentValueId was called"); };
+      : { id: "temp", ro_number: "Temporary Storage" };
+  const jobSrchOnSetCurrentValue =
+    props?.onSetCurrentValue !== undefined
+      ? props.onSetCurrentValue
+      : (e) => {
+          console.info("onSetCurrentValue was called", e);
+        };
+  const jobSrchCurrentValueId =
+    props?.currentValueId !== undefined ? props.currentValueId : "temp";
+  const jobSrchOnSetCurrentValueId =
+    props?.onSetCurrentValueId !== undefined
+      ? props.onSetCurrentValueId
+      : () => {
+          console.info("onSetCurrentValueId was called");
+        };
 
   console.log(" ");
   console.log("*****JobSearchAndSelectModal*****");
-  console.log("props:", props);//works
+  //   console.log("props:", props);//works
-//   console.log("notExported:", jobSrchNotExported);//works
+  //   console.log("notExported:", jobSrchNotExported);//works
-//   console.log("notInvoiced:", jobSrchNotInvoiced);//works
+  //   console.log("notInvoiced:", jobSrchNotInvoiced);//works
-//   console.log("convertedOnly:", jobSrchConvertedOnly);//works
+  //   console.log("convertedOnly:", jobSrchConvertedOnly);//works
-  console.log("jobSrchCurrentValue:", jobSrchCurrentValue); //{"id": "temp", "ro_number": "Temporary Storage"}
+  //   console.log("jobSrchCurrentValue:", jobSrchCurrentValue); //{"id": "temp", "ro_number": "Temporary Storage"}
-  console.log("jobSrchOnSetCurrentValue:", jobSrchOnSetCurrentValue);  
+  //   console.log("jobSrchOnSetCurrentValue:", jobSrchOnSetCurrentValue);
-  console.log("jobSrchCurrentValueId:", jobSrchCurrentValueId); //temp  will be currentValue
+  //   console.log("jobSrchCurrentValueId:", jobSrchCurrentValueId); //temp  will be currentValue
-  console.log("jobSrchOnSetCurrentValueId:", jobSrchOnSetCurrentValueId); // will be onSetCurrentValue
+  //   console.log("jobSrchOnSetCurrentValueId:", jobSrchOnSetCurrentValueId); // will be onSetCurrentValue
 
-
-  const { loading, error, data, refetch } = useQuery(QUERY_ALL_ACTIVE_JOBS, {
-    fetchPolicy: "cache-and-network",
-    variables: {
-      statuses: false || ["Open", "Open*"],
-    },
-  });
   const { t } = useTranslation();
   const [visible, setVisible] = React.useState(false);
-  const [searchQuery, setSearchQuery] = React.useState("");
+  const [searchText, setSearchText] = React.useState(null);
-  if (loading) return <LoadingDisplay />;
+
+  //TODO:Replace QUERY_ALL_ACTIVE_JOBS with SEARCH_JOBS_BY_ID_FOR_AUTOCOMPLETE and update variables,  statuses: false || ["Open", "Open*"],
+  // with search: value,
+  // ...(convertedOnly || notExported
+  //     ? {
+  //         ...(convertedOnly ? { isConverted: true } : {}),
+  //         ...(notExported ? { notExported: true } : {}),
+  //         ...(notInvoiced ? { notInvoiced: true } : {}),
+  //       }
+  //     : {}),
+
+  // const { loading, error, data, refetch } = useQuery(
+  //   SEARCH_JOBS_FOR_AUTOCOMPLETE,
+  //   {
+  //     fetchPolicy: "cache-and-network",
+  //     variables: {
+  //       search: searchText,
+  //       ...(jobSrchConvertedOnly || jobSrchNotExported
+  //         ? {
+  //             ...(jobSrchConvertedOnly ? { isConverted: true } : {}),
+  //             ...(jobSrchNotExported ? { notExported: true } : {}),
+  //             ...(jobSrchNotInvoiced ? { notInvoiced: true } : {}),
+  //           }
+  //         : {}),
+  //     },
+  //   }
+  // );
+  // const searchQuery = useQuery([SEARCH_JOBS_FOR_AUTOCOMPLETE, debouncedSearchTerm], () => fetchSearchResults(debouncedSearchTerm));
+  const [searchQuery, { loading, error, data }] = useLazyQuery(
+    SEARCH_JOBS_FOR_AUTOCOMPLETE,
+    {
+      // fetchPolicy: "cache-and-network",
+      // variables: {
+      //   search: searchText,
+      //   ...(jobSrchConvertedOnly || jobSrchNotExported
+      //     ? {
+      //         ...(jobSrchConvertedOnly ? { isConverted: true } : {}),
+      //         ...(jobSrchNotExported ? { notExported: true } : {}),
+      //         ...(jobSrchNotInvoiced ? { notInvoiced: true } : {}),
+      //       }
+      //     : {}),
+      // },
+    }
+  );
   if (error) return <ErrorDisplay errorMessage={error.message} />;
 
   const showModal = () => setVisible(true);
   const hideModal = () => setVisible(false);
-
   const onRefresh = async () => {
-    console.log("onRefresh was called");
+    // refetch({
-    return refetch();
+    //   notInvoiced: jobSrchNotInvoiced,
+    //   notExported: jobSrchNotExported,
+    //   isConverted: jobSrchConvertedOnly,
+    //   search: searchText,
+    // });
   };
+  const executeSearch = (v) => {
+     console.log("executeSearchWithV:", v);
+    if (v && v !== "") searchQuery(v);
+  };
+  const debouncedExecuteSearch = _.debounce(executeSearch, 1000);
 
-  const onChangeSearch = (query) => setSearchQuery(query);
+    const onChangeSearch = (query) => {
+      setSearchText(query); 
+      debouncedExecuteSearch({variables: {
+        search: query,
+        ...(jobSrchConvertedOnly || jobSrchNotExported
+          ? {
+              ...(jobSrchConvertedOnly ? { isConverted: true } : {}),
+              ...(jobSrchNotExported ? { notExported: true } : {}),
+              ...(jobSrchNotInvoiced ? { notInvoiced: true } : {}),
+            }
+          : {}),
+      }});
+      // debouncedSearchTerm(query);
     
+    };
+
+    // const debouncedSearchTerm = debounce(searchText => {
+    //   // Fetch search results using useQuery
+    //   searchQuery.refetch();
+    // }, 1000);
+
+  //TODO:Replace this with returns of the other call jobs:search_jobs, This should be done
   const jobs = data
-    ? searchQuery === ""
+    ? searchText === ""
-      ? data.jobs
+      ? data.search_jobs
-      : data.jobs.filter(
+      : data.search_jobs.filter(
           (j) =>
             (j.ro_number || "")
               .toString()
               .toLowerCase()
-              .includes(searchQuery.toLowerCase()) ||
+              .includes(searchText.toLowerCase()) ||           
-            (j.ownr_co_nm || "")
-              .toLowerCase()
-              .includes(searchQuery.toLowerCase()) ||
             (j.ownr_fn || "")
               .toLowerCase()
-              .includes(searchQuery.toLowerCase()) ||
+              .includes(searchText.toLowerCase()) ||
             (j.ownr_ln || "")
               .toLowerCase()
-              .includes(searchQuery.toLowerCase()) ||
+              .includes(searchText.toLowerCase()) ||
-            (j.plate_no || "")
-              .toLowerCase()
-              .includes(searchQuery.toLowerCase()) ||
             (j.v_model_desc || "")
               .toLowerCase()
-              .includes(searchQuery.toLowerCase()) ||
+              .includes(searchText.toLowerCase()) ||
             (j.v_make_desc || "")
               .toLowerCase()
-              .includes(searchQuery.toLowerCase())
+              .includes(searchText.toLowerCase())
         )
     : [];
+  //TODO:Replace the Button with returns of the other call, This should be done
+  //Side Note removed ${jobSrchCurrentValue.ownr_co_nm || ""} from button display when jobSrchCurrentValueId has a value
+  //Side Note removed ${object.item.ownr_co_nm || ""} from title of <List.Item in flatlist
 
+  //side note removed following from <FlatList Data, : { id: "temp", ro_number: "No Selection" },
   return (
     <>
       <Portal>
         <Modal
           visible={visible}
           onDismiss={hideModal}
-          // eslint-disable-next-line react-native/no-color-literals
           contentContainerStyle={{
             paddingTop: 20,
             paddingBottom: 20,
@@ -138,24 +195,22 @@ export function JobSearchAndSelectModal(
             <Searchbar
               style={{ flex: 1 }}
               onChangeText={onChangeSearch}
-              value={searchQuery}
+              value={searchText}
             />
           </View>
           <FlatList
             refreshControl={
               <RefreshControl refreshing={loading} onRefresh={onRefresh} />
             }
-            data={[{ id: "temp", ro_number: "Temporary Storage" }, ...jobs]}
+            data={data?.search_jobs}
             keyExtractor={(item) => item.id}
             renderItem={(object) => (
               <List.Item
                 onPress={() => {
-                  //setCameraJob(object.item);
-                  //setCameraJobId(object.item.id);
                   jobSrchOnSetCurrentValue(object.item);
                   jobSrchOnSetCurrentValueId(object.item.id);
                   hideModal();
-                  setSearchQuery("");
+                  setSearchText("");
                 }}
                 left={() => {
                   if (object.item.id !== jobSrchCurrentValueId) return null;
@@ -175,32 +230,51 @@ export function JobSearchAndSelectModal(
                 }}
                 title={`${
                   object.item.ro_number ? `${object.item.ro_number} ` : ``
-                }${object.item.ownr_fn || ""} ${object.item.ownr_ln || ""} ${
+                }${object.item.ownr_fn || ""} ${object.item.ownr_ln || ""}${
-                  object.item.ownr_co_nm || ""
-                } ${
                   object.item.v_model_yr ? `- ${object.item.v_model_yr}` : ""
-                } ${
+                }${
                   object.item.v_make_desc ? `- ${object.item.v_make_desc}` : ""
-                } ${
+                }${
-                  object.item.v_model_desc
+                  object.item.v_model_desc ? `- ${object.item.v_model_desc}` : ""
-                    ? `- ${object.item.v_model_desc}`
-                    : ""
                 }`}
                 key={object.item.id}
               />
             )}
+            ListEmptyComponent={
+              <View
+                style={{
+                  flex: 1,
+                  padding: 10,
+                  alignItems: "center",
+                  justifyContent: "center",
+                }}
+              >
+                <Text>No Data</Text>
+              </View>
+            }
           />
         </Modal>
       </Portal>
-      <Button mode="outlined" style={{ margin: 8 }} onPress={showModal}>
+      <Button mode="outlined" style={{ margin: 8,
+    height: 50,
+    borderColor: "gray",
+    borderWidth: 0.5,
+    borderRadius: 4,
+    marginVertical: 4,
+    marginHorizontal: 16, 
+    justifyContent: "center"}} onPress={showModal}>
         {jobSrchCurrentValueId
           ? jobSrchCurrentValueId === "temp"
             ? t("mediabrowser.labels.temporarystorage")
-            : `${jobSrchCurrentValue.ro_number ? `${jobSrchCurrentValue.ro_number} - ` : ``}${
+            : `${
-                jobSrchCurrentValue.ownr_fn || ""
+                jobSrchCurrentValue.ro_number
-              } ${jobSrchCurrentValue.ownr_ln || ""} ${jobSrchCurrentValue.ownr_co_nm || ""} - ${
+                  ? `${jobSrchCurrentValue.ro_number} - `
-                jobSrchCurrentValue.v_model_yr || ""
+                  : ``
-              } ${jobSrchCurrentValue.v_make_desc || ""} ${jobSrchCurrentValue.v_model_desc || ""}`
+              }${jobSrchCurrentValue.ownr_fn || ""} ${
+                jobSrchCurrentValue.ownr_ln || ""
+              } - ${jobSrchCurrentValue.v_model_yr || ""} ${
+                jobSrchCurrentValue.v_make_desc || ""
+              } ${jobSrchCurrentValue.v_model_desc || ""}`
           : t("mediabrowser.labels.selectjob")}
       </Button>
     </>