diff --git a/components/Modals/JobSearchAndSelectModal.jsx b/components/Modals/JobSearchAndSelectModal.jsx index 92989a7..aebedf6 100644 --- a/components/Modals/JobSearchAndSelectModal.jsx +++ b/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 ; - 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 ; 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) => { - console.log("execute search with :", v); - if (v && v !== "") searchQuery(v); - }; - const searchDebouncer = useCallback( - _.debounce(search, 1000), - [] - ); - + const search = (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 - ? searchText === "" - ? data.search_jobs - : data.search_jobs.filter( - (j) => - (j.ro_number || "") - .toString() - .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()) - ) - : []; + useEffect(() => { + setTimeout(() => { + if (visible) { + setFocus(); + } + }, 300); + }, [visible, isMounted]); return ( <> @@ -208,6 +127,8 @@ export function JobSearchAndSelectModal(props) { style={{ flex: 1 }} onChangeText={onChangeSearch} value={searchText} + ref={inputSearch} + placeholder={t("selectjobid.labels.searchplaceholder")} /> { 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")} ); diff --git a/translations/en-US/common.json b/translations/en-US/common.json index 1ca773b..9e6f473 100644 --- a/translations/en-US/common.json +++ b/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": {