From 9675147845cb7cdd82f5ac28b25e7ab55f0ae3c9 Mon Sep 17 00:00:00 2001 From: jfrye122 Date: Wed, 19 Jul 2023 17:13:44 -0400 Subject: [PATCH] working on adding debounce --- components/Modals/JobSearchAndSelectModal.jsx | 246 ++++++++++++------ 1 file changed, 160 insertions(+), 86 deletions(-) diff --git a/components/Modals/JobSearchAndSelectModal.jsx b/components/Modals/JobSearchAndSelectModal.jsx index 24fafd1..6afdeab 100644 --- a/components/Modals/JobSearchAndSelectModal.jsx +++ b/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 { setCameraJob, setCameraJobId } from "../../redux/app/app.actions"; -// import { -// selectCurrentCameraJob, -// selectCurrentCameraJobId, -// } from "../../redux/app/app.selectors"; -// import { selectBodyshop } from "../../redux/user/user.selectors"; +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 LoadingDisplay from "../loading-display/loading-display.component"; +import _ from 'lodash'; -// const mapStateToProps = createStructuredSelector({ -// cameraJobId: selectCurrentCameraJobId, -// cameraJob: selectCurrentCameraJob, -// }); -// const mapDispatchToProps = (dispatch) => ({ -// setCameraJobId: (id) => dispatch(setCameraJobId(id)), -// setCameraJob: (job) => dispatch(setCameraJob(job)), -// }); - -export function JobSearchAndSelectModal( - props, -// cameraJobId, -// setCameraJobId, -// cameraJob, -// setCameraJob, -) { +export function JobSearchAndSelectModal(props) { 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 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 jobSrchCurrentValue = + props?.currentValue !== undefined + ? props.currentValue + : { 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("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 { 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(""); - if (loading) return ; + const [searchText, setSearchText] = 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 } : {}), + // } + // : {}), + + // 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 ; const showModal = () => setVisible(true); const hideModal = () => setVisible(false); - const onRefresh = async () => { - console.log("onRefresh was called"); - return refetch(); + // 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 === "" - ? data.jobs - : data.jobs.filter( + ? searchText === "" + ? data.search_jobs + : data.search_jobs.filter( (j) => (j.ro_number || "") .toString() .toLowerCase() - .includes(searchQuery.toLowerCase()) || - (j.ownr_co_nm || "") - .toLowerCase() - .includes(searchQuery.toLowerCase()) || + .includes(searchText.toLowerCase()) || (j.ownr_fn || "") .toLowerCase() - .includes(searchQuery.toLowerCase()) || + .includes(searchText.toLowerCase()) || (j.ownr_ln || "") .toLowerCase() - .includes(searchQuery.toLowerCase()) || - (j.plate_no || "") - .toLowerCase() - .includes(searchQuery.toLowerCase()) || + .includes(searchText.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 } - data={[{ id: "temp", ro_number: "Temporary Storage" }, ...jobs]} + data={data?.search_jobs} keyExtractor={(item) => item.id} renderItem={(object) => ( { - //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_co_nm || "" - } ${ + }${object.item.ownr_fn || ""} ${object.item.ownr_ln || ""}${ 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={ + + No Data + + } /> -