bodyshop/client/src/components/job-detail-lines/job-lines.container.jsx

import React, { useMemo, useState } from "react";
import JobLinesComponent from "./job-lines.component";

function JobLinesContainer({
  job,
  joblines,
  billsQuery,
  handleBillOnRowClick,
  handlePartsOrderOnRowClick,
  handlePartsDispatchOnRowClick,
  refetch,
  form,
  ...rest
}) {
  const [searchText, setSearchText] = useState("");

  const jobLines = useMemo(() => {
    return joblines
      ? searchText
        ? joblines.filter(
            (jl) =>
              (jl.unq_seq || "").toString().toLowerCase().includes(searchText.toLowerCase()) ||
              (jl.line_desc || "").toLowerCase().includes(searchText.toLowerCase()) ||
              (jl.part_type || "").toLowerCase().includes(searchText.toLowerCase()) ||
              (jl.oem_partno || "").toLowerCase().includes(searchText.toLowerCase()) ||
              (jl.op_code_desc || "").toLowerCase().includes(searchText.toLowerCase()) ||
              (jl.db_price || "").toString().includes(searchText.toLowerCase()) ||
              (jl.act_price || "").toString().includes(searchText.toLowerCase())
          )
        : joblines
      : [];
  }, [joblines, searchText]);

  return (
    <div>
      <JobLinesComponent
        refetch={refetch}
        jobLines={jobLines}
        billsQuery={billsQuery}
        handleBillOnRowClick={handleBillOnRowClick}
        handlePartsOrderOnRowClick={handlePartsOrderOnRowClick}
        handlePartsDispatchOnRowClick={handlePartsDispatchOnRowClick}
        setSearchText={setSearchText}
        job={job}
        form={form}
      />
    </div>
  );
}

export default JobLinesContainer;