diff --git a/components/Modals/JobSearchAndSelectModal.jsx b/components/Modals/JobSearchAndSelectModal.jsx index 6afdeab..92989a7 100644 --- a/components/Modals/JobSearchAndSelectModal.jsx +++ b/components/Modals/JobSearchAndSelectModal.jsx @@ -6,13 +6,11 @@ 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 { 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 _ from "lodash"; +import { useCallback } from "react"; export function JobSearchAndSelectModal(props) { const jobSrchNotExported = @@ -25,36 +23,40 @@ export function JobSearchAndSelectModal(props) { const jobSrchCurrentValue = props?.currentValue !== undefined ? props.currentValue - : { id: "temp", ro_number: "Temporary Storage" }; + : { id: "temp", ro_number: "No Selection" }; 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"); - }; + // 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 + // 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(null); + 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, @@ -66,6 +68,7 @@ export function JobSearchAndSelectModal(props) { // } // : {}), + //orig works 7/20 // const { loading, error, data, refetch } = useQuery( // SEARCH_JOBS_FOR_AUTOCOMPLETE, // { @@ -82,11 +85,13 @@ export function JobSearchAndSelectModal(props) { // }, // } // ); + //temp placeholder commented code // const searchQuery = useQuery([SEARCH_JOBS_FOR_AUTOCOMPLETE, debouncedSearchTerm], () => fetchSearchResults(debouncedSearchTerm)); - const [searchQuery, { loading, error, data }] = useLazyQuery( + //2nd try with uselazyquery + const [searchQuery, { loading, error, data, refetch }] = useLazyQuery( SEARCH_JOBS_FOR_AUTOCOMPLETE, { - // fetchPolicy: "cache-and-network", + fetchPolicy: "cache-and-network", // variables: { // search: searchText, // ...(jobSrchConvertedOnly || jobSrchNotExported @@ -99,27 +104,45 @@ export function JobSearchAndSelectModal(props) { // }, } ); + if (error) return ; const showModal = () => setVisible(true); const hideModal = () => setVisible(false); const onRefresh = async () => { - // refetch({ - // notInvoiced: jobSrchNotInvoiced, - // notExported: jobSrchNotExported, - // isConverted: jobSrchConvertedOnly, - // search: searchText, + // searchDebouncer({ + // variables: { + // search: searchText, + // ...(jobSrchConvertedOnly || jobSrchNotExported + // ? { + // ...(jobSrchConvertedOnly ? { isConverted: true } : {}), + // ...(jobSrchNotExported ? { notExported: true } : {}), + // ...(jobSrchNotInvoiced ? { notInvoiced: true } : {}), + // } + // : {}), + // }, // }); + refetch({ + notInvoiced: jobSrchNotInvoiced, + notExported: jobSrchNotExported, + isConverted: jobSrchConvertedOnly, + search: searchText, + }); }; - const executeSearch = (v) => { - console.log("executeSearchWithV:", v); + + const search = (v) => { + console.log("execute search with :", v); if (v && v !== "") searchQuery(v); }; - const debouncedExecuteSearch = _.debounce(executeSearch, 1000); + const searchDebouncer = useCallback( + _.debounce(search, 1000), + [] + ); - const onChangeSearch = (query) => { - setSearchText(query); - debouncedExecuteSearch({variables: { + const onChangeSearch = (query) => { + setSearchText(query); + searchDebouncer({ + variables: { search: query, ...(jobSrchConvertedOnly || jobSrchNotExported ? { @@ -128,17 +151,10 @@ export function JobSearchAndSelectModal(props) { ...(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 ? searchText === "" ? data.search_jobs @@ -147,7 +163,7 @@ export function JobSearchAndSelectModal(props) { (j.ro_number || "") .toString() .toLowerCase() - .includes(searchText.toLowerCase()) || + .includes(searchText.toLowerCase()) || (j.ownr_fn || "") .toLowerCase() .includes(searchText.toLowerCase()) || @@ -162,11 +178,7 @@ export function JobSearchAndSelectModal(props) { .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 @@ -208,12 +220,12 @@ export function JobSearchAndSelectModal(props) { { jobSrchOnSetCurrentValue(object.item); - jobSrchOnSetCurrentValueId(object.item.id); + // jobSrchOnSetCurrentValueId(object.item.id); hideModal(); setSearchText(""); }} left={() => { - if (object.item.id !== jobSrchCurrentValueId) return null; + if (object.item.id !== jobSrchCurrentValue?.id) return null; return ( @@ -255,16 +269,22 @@ export function JobSearchAndSelectModal(props) { /> -