bodyshop/client/src/components/global-search/global-search.component.jsx

import { useLazyQuery } from "@apollo/react-hooks";
import { AutoComplete, Input } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
import { logImEXEvent } from "../../firebase/firebase.utils";
import { GLOBAL_SEARCH_QUERY } from "../../graphql/search.queries";
import CurrencyFormatter from "../../utils/CurrencyFormatter";
import AlertComponent from "../alert/alert.component";
export default function GlobalSearch() {
  const { t } = useTranslation();

  const [callSearch, { loading, error, data }] = useLazyQuery(
    GLOBAL_SEARCH_QUERY
  );

  const handleSearch = (searchTerm) => {
    logImEXEvent("global_search", { term: searchTerm });

    if (searchTerm.length > 0)
      callSearch({ variables: { search: searchTerm } });
  };

  const renderTitle = (title) => {
    return (
      <span>
        {title}
        <a
          style={{ float: "right" }}
          href="https://www.google.com/search?q=antd"
          target="_blank"
          rel="noopener noreferrer"
        >
          more
        </a>
      </span>
    );
  };

  const options = data
    ? [
        {
          label: renderTitle(t("menus.header.search.jobs")),
          options: data.search_jobs.map((job) => {
            return {
              value: job.ro_number,
              label: (
                <Link to={`/manage/jobs/${job.id}`}>
                  <div className="imex-flex-row">
                    <span className="imex-flex-row__margin-large">
                      <strong>{job.ro_number || t("general.labels.na")}</strong>
                    </span>

                    <span className="imex-flex-row__margin-large">{`${
                      job.ownr_fn || ""
                    } ${job.ownr_ln || ""} ${job.ownr_co_nm || ""}`}</span>
                    <span className="imex-flex-row__margin-large">{`${
                      job.v_model_yr || ""
                    } ${job.v_make_desc || ""} ${
                      job.v_model_desc || ""
                    }`}</span>
                    <span className="imex-flex-row__margin-large">{`${job.clm_no}`}</span>
                    <span className="imex-flex-row__margin-large imex-flex-row__grow">
                      <CurrencyFormatter>{`${job.clm_total}`}</CurrencyFormatter>
                    </span>
                  </div>
                </Link>
              ),
            };
          }),
        },
        {
          label: renderTitle(t("menus.header.search.owners")),
          options: data.search_owners.map((owner) => {
            return {
              value: `${owner.ownr_fn || ""} ${owner.ownr_ln || ""} ${
                owner.ownr_co_nm || ""
              }`,
              label: (
                <Link to={`/manage/owners/${owner.id}`}>
                  <div className="imex-flex-row">
                    <span className="imex-flex-row__margin-large">{`${
                      owner.ownr_fn || ""
                    } ${owner.ownr_ln || ""} ${owner.ownr_co_nm || ""}`}</span>
                  </div>
                </Link>
              ),
            };
          }),
        },
        {
          label: renderTitle(t("menus.header.search.vehicles")),
          options: data.search_vehicles.map((vehicle) => {
            return {
              value: `${vehicle.v_model_yr || ""} ${
                vehicle.v_make_desc || ""
              } ${vehicle.v_model_desc || ""}`,
              label: (
                <Link to={`/manage/vehicles/${vehicle.id}`}>
                  <div className="imex-flex-row">
                    <span className="imex-flex-row__margin-large">{`${
                      vehicle.v_model_yr || ""
                    } ${vehicle.v_make_desc || ""} ${
                      vehicle.v_model_desc || ""
                    } - ${vehicle.plate_no} - ${vehicle.v_vin}`}</span>
                  </div>
                </Link>
              ),
            };
          }),
        },
        {
          label: renderTitle(t("menus.header.search.payments")),
          options: data.search_payments.map((payment) => {
            return {
              value: `${payment.job.ro_number} ${payment.payer} ${payment.amount}`,
              label: (
                <Link to={`/manage/jobs/${payment.job.id}`}>
                  <div className="imex-flex-row">
                    <span className="imex-flex-row__margin-large">{`${payment.job.ro_number}`}</span>
                    <span className="imex-flex-row__margin-large">{`${payment.job.memo}`}</span>
                    <span className="imex-flex-row__margin-large">{`${payment.job.amount}`}</span>
                    <span className="imex-flex-row__margin-large">{`${payment.job.transactionid}`}</span>
                  </div>
                </Link>
              ),
            };
          }),
        },
        {
          label: renderTitle(t("menus.header.search.bills")),
          options: data.search_bills.map((bill) => {
            return {
              value: `${bill.invoice_number}`,
              label: (
                <Link to={`/manage/bills?billid=${bill.id}`}>
                  <div className="imex-flex-row">
                    <span className="imex-flex-row__margin-large">{`${bill.invoice_number}`}</span>
                    <span className="imex-flex-row__margin-large">{`${bill.vendor.name}`}</span>
                    <span className="imex-flex-row__margin-large">{`${bill.date}`}</span>
                  </div>
                </Link>
              ),
            };
          }),
        },
      ]
    : [];

  if (error) return <AlertComponent message={error.message} type="error" />;

  return (
    <div>
      <AutoComplete
        dropdownMatchSelectWidth={false}
        style={{ width: 200 }}
        options={options}
      >
        <Input.Search loading={loading} onSearch={handleSearch} />
      </AutoComplete>
    </div>
  );
}