Clean up of comments on Modal

components/Modals/JobSearchAndSelectModal.jsx

@@ -5,14 +5,29 @@ import { useTranslation } from "react-i18next";
 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 { SEARCH_JOBS_FOR_AUTOCOMPLETE } from "../../graphql/jobs.queries";
 import ErrorDisplay from "../error-display/error-display.component";
-// import LoadingDisplay from "../loading-display/loading-display.component";
 import _ from "lodash";
 import { useCallback } from "react";
+import { useRef } from "react";
+import { useEffect } from "react";
+
+
+const useIsMounted = () => {
+  const isMounted = useRef(false);
+  useEffect(() => {
+    isMounted.current = true;
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
+
+  return isMounted.current;
+};
 
 export function JobSearchAndSelectModal(props) {
+  
+  const { t } = useTranslation();
   const jobSrchNotExported =
     props?.notExported !== undefined ? props.notExported : true;
   const jobSrchNotInvoiced =
@@ -30,98 +45,18 @@ export function JobSearchAndSelectModal(props) {
       : (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("notExported:", jobSrchNotExported);//works
-    // console.log("notInvoiced:", jobSrchNotInvoiced);//works
-    // console.log("convertedOnly:", jobSrchConvertedOnly);//works
-    // console.log("jobSrchCurrentValue:", jobSrchCurrentValue); //{"id": "temp", "ro_number": "Temporary Storage"}
-    // console.log("jobSrchOnSetCurrentValue:", jobSrchOnSetCurrentValue);
-    // console.log("jobSrchCurrentValueId:", jobSrchCurrentValueId); //temp  will be currentValue
-    // console.log("jobSrchOnSetCurrentValueId:", jobSrchOnSetCurrentValueId); // will be onSetCurrentValue
-
-  const { t } = useTranslation();
   const [visible, setVisible] = React.useState(false);
   const [searchText, setSearchText] = React.useState("");
 
-  // const [error, setError] = React.useState(null);
-  // const [data, setData] = React.useState(null);
-  // const [loading, setLoading] = React.useState(null);
-
-  //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 } : {}),
-  //       }
-  //     : {}),
-
-  //orig works 7/20
-  // 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 } : {}),
-  //           }
-  //         : {}),
-  //     },
-  //   }
-  // );
-  //temp placeholder commented code
-  // const searchQuery = useQuery([SEARCH_JOBS_FOR_AUTOCOMPLETE, debouncedSearchTerm], () => fetchSearchResults(debouncedSearchTerm));
-  //2nd try with uselazyquery
-  const [searchQuery, { loading, error, data, refetch }] = 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 [searchQuery, { loading, error, data, refetch }] = useLazyQuery(
+    SEARCH_JOBS_FOR_AUTOCOMPLETE,{fetchPolicy: "cache-and-network",}
+  );
+  if (error) return <ErrorDisplay errorMessage={error.message} />;
   const onRefresh = async () => {
-    // searchDebouncer({
-    //   variables: {
-    //     search: searchText,
-    //     ...(jobSrchConvertedOnly || jobSrchNotExported
-    //       ? {
-    //           ...(jobSrchConvertedOnly ? { isConverted: true } : {}),
-    //           ...(jobSrchNotExported ? { notExported: true } : {}),
-    //           ...(jobSrchNotInvoiced ? { notInvoiced: true } : {}),
-    //         }
-    //       : {}),
-    //   },
-    // });
     refetch({
       notInvoiced: jobSrchNotInvoiced,
       notExported: jobSrchNotExported,
@@ -129,18 +64,10 @@ export function JobSearchAndSelectModal(props) {
       search: searchText,
     });
   };
-
+  const search = (v) => {if (v && v !== "") searchQuery(v);};
-  const search = (v) => {
+  const searchDebouncer = useCallback(_.debounce(search, 1000),[]);
-    console.log("execute search with :", v);
-    if (v && v !== "") searchQuery(v);
-  };
-  const searchDebouncer = useCallback(
-    _.debounce(search, 1000),
-    []
-  );
-
   const onChangeSearch = (query) => {
-     setSearchText(query);
+    setSearchText(query);
     searchDebouncer({
       variables: {
         search: query,
@@ -154,30 +81,22 @@ export function JobSearchAndSelectModal(props) {
       },
     });
   };
+  const inputSearch = useRef(null);
+  const isMounted = useIsMounted();
+  const setFocus = useCallback(() => {
+    console.log("setFocus called",inputSearch);
+    if (inputSearch.current) {
+      inputSearch.current.focus();
+    }
+  }, []);
 
-  const jobs = data
+  useEffect(() => {
-    ? searchText === ""
+      setTimeout(() => {
-      ? data.search_jobs
+        if (visible) {
-      : data.search_jobs.filter(
+          setFocus();
-          (j) =>
+        }
-            (j.ro_number || "")
+      }, 300);
-              .toString()
+  }, [visible, isMounted]);
-              .toLowerCase()
-              .includes(searchText.toLowerCase()) ||
-            (j.ownr_fn || "")
-              .toLowerCase()
-              .includes(searchText.toLowerCase()) ||
-            (j.ownr_ln || "")
-              .toLowerCase()
-              .includes(searchText.toLowerCase()) ||
-            (j.v_model_desc || "")
-              .toLowerCase()
-              .includes(searchText.toLowerCase()) ||
-            (j.v_make_desc || "")
-              .toLowerCase()
-              .includes(searchText.toLowerCase())
-        )
-    : [];
 
   return (
     <>
@@ -208,6 +127,8 @@ export function JobSearchAndSelectModal(props) {
               style={{ flex: 1 }}
               onChangeText={onChangeSearch}
               value={searchText}
+              ref={inputSearch}
+              placeholder={t("selectjobid.labels.searchplaceholder")}
             />
           </View>
           <FlatList
@@ -220,7 +141,6 @@ export function JobSearchAndSelectModal(props) {
               <List.Item
                 onPress={() => {
                   jobSrchOnSetCurrentValue(object.item);
-                  // jobSrchOnSetCurrentValueId(object.item.id);
                   hideModal();
                   setSearchText("");
                 }}
@@ -295,7 +215,7 @@ export function JobSearchAndSelectModal(props) {
               } - ${jobSrchCurrentValue.v_model_yr || ""} ${
                 jobSrchCurrentValue.v_make_desc || ""
               } ${jobSrchCurrentValue.v_model_desc || ""}`
-          : t("mediabrowser.labels.selectjob")}
+          : t("selectjobid.labels.placeholder")}
       </Button>
     </>
   );

translations/en-US/common.json

@@ -369,7 +369,7 @@
 				"missingvalues": "Please make sure all fields have a value."
 			},
 			"titles": {
-				"createtimeticket": "Create a Time Ticket"
+				"createtimeticket": "New Time Ticket"
 			}
 		},
 		"joblines": {