@cn-npm/search-autocomplete 0.2.16

package/src/components/SearchAutocomplete/SearchAutocomplete.tsx

@@ -0,0 +1,310 @@
+import React, { FC, useState } from "react";
+import styles from "./SearchAutocomplete.module.scss";
+import { DebounceInput } from "react-debounce-input";
+import SearchAutocompleteSection from "../SearchAutocompleteSection/SearchAutocompleteSection";
+import classNames from "classnames";
+import CSSTransition from "react-transition-group/CSSTransition";
+import axios from "axios";
+import { SearchResponse } from "../../search-result";
+import Loader from "../Loader/Loader";
+import { ReactComponent as SearchIcon } from "../../assets/img/search.svg";
+import { ReactComponent as CircleCloseIcon } from "../../assets/img/circle-close.svg";
+import ErrorBoundary from "../ErrorBoundary/ErrorBoundary";
+
+interface SearchAutocompleteProps {
+  label?: string;
+  open?: boolean;
+}
+
+const SearchAutocomplete: FC<SearchAutocompleteProps> = (props) => {
+  // Set state variables
+  const [open, setOpen] = useState(props.open || false);
+  const [label, setLabel] = useState(
+    props.label || "Search by Charity or Cause"
+  );
+  const [loading, setLoading] = useState<boolean>(false);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [searchData, setSearchData] = useState<SearchResponse>({
+    data: {
+      searchAutocomplete: [],
+    },
+  });
+  const [hasError, setHasError] = useState<boolean>(false);
+  const [selectedTag, setSelectedTag] = useState<number>(0);
+
+  // On selected tag change
+  React.useEffect(() => {
+    const tags = document.querySelectorAll(
+      ".autocomplete-tag, .autocomplete-custom-search"
+    );
+
+    tags.forEach((x, i) => {
+      x.classList.remove(
+        "autocomplete-selected",
+        "!bg-grey-100",
+        "!ring-blue-600"
+      );
+      if (i + 1 === selectedTag) {
+        x.classList.add(
+          "autocomplete-selected",
+          tags[i].classList.contains("autocomplete-tag")
+            ? "!bg-grey-100"
+            : "none",
+          "!ring-blue-600"
+        );
+        x.scrollIntoView({
+          behavior: "smooth",
+        });
+      }
+    });
+  }, [selectedTag]);
+
+  // On open props change
+  React.useEffect(() => {
+    setOpen(props.open || false);
+  }, [props.open]);
+
+  // On open change
+  React.useEffect(() => {
+    if (!open) {
+      setSelectedTag(0);
+    }
+  }, [open]);
+
+  // On label change
+  React.useEffect(() => {
+    setLabel(props.label || "Search by Charity or Cause");
+  }, [props.label]);
+
+  // On search term change
+  React.useEffect(() => {
+    setLoading(true);
+
+    setSelectedTag(0);
+
+    // Trigger custom event for analytics
+    if (searchTerm) {
+      // Create custom event
+      var event = new CustomEvent("autocomplete-search", {
+        detail: {
+          name: searchTerm,
+        },
+      });
+
+      // Trigger custom event
+      document.dispatchEvent(event);
+    }
+
+    const controller = new AbortController();
+
+    // Get results from API
+    axios({
+      signal: controller.signal,
+      url: `https://graph.charitynavigator.org/graphql`,
+      params: {
+        user_key: "67a233b3ae2f5690bce775c1760925f2",
+      },
+      method: "post",
+      data: {
+        query: `
+            query SearchQuery {
+              searchAutocomplete(term: "${searchTerm}") {
+                title
+                results {
+                  ein
+                  title
+                  url
+                }
+              }
+            }
+          `,
+      },
+    })
+      .then((res) => {
+        const data: SearchResponse = res.data;
+        setSearchData(data);
+        setHasError(false);
+        setLoading(false);
+      })
+      .catch((e: any) => {
+        setSearchData({} as SearchResponse);
+        setHasError(true);
+        setLoading(false);
+      });
+
+    return () => {
+      controller.abort();
+    };
+  }, [searchTerm]);
+
+  // Clear search
+  const clearSearch = (e: any) => {
+    e.preventDefault();
+    setSearchTerm("");
+  };
+
+  // Handle key events
+  const keyDownHandler = (e: any) => {
+    const tags = document.querySelectorAll(
+      ".autocomplete-tag, .autocomplete-custom-search"
+    );
+
+    switch (e.key) {
+      case "ArrowUp": {
+        setSelectedTag(Math.max(0, selectedTag - 1));
+        break;
+      }
+      case "ArrowDown": {
+        setOpen(true);
+        setSelectedTag(Math.min(tags.length, selectedTag + 1));
+        break;
+      }
+      case "ArrowLeft": {
+        if (selectedTag > 0) {
+          setSelectedTag(Math.max(0, selectedTag - 1));
+        }
+        break;
+      }
+      case "ArrowRight": {
+        setOpen(true);
+        if (selectedTag > 0) {
+          setSelectedTag(Math.min(tags.length, selectedTag + 1));
+        }
+        break;
+      }
+      case "Tab": {
+        break;
+      }
+      case "Enter": {
+        if (selectedTag > 0) {
+          e.preventDefault();
+          (tags[selectedTag - 1] as any).click();
+        }
+        break;
+      }
+      case "Space": {
+        break;
+      }
+      case "Escape": {
+        setOpen(false);
+        setSelectedTag(0);
+        break;
+      }
+      case "Home": {
+        setSelectedTag(1);
+        break;
+      }
+      case "End": {
+        setSelectedTag(tags.length);
+        break;
+      }
+    }
+  };
+
+  return (
+    <div
+      className={classNames(styles.SearchAutocomplete, "autocomplete")}
+      data-testid="SearchAutocomplete"
+    >
+      <form
+        action={`/search?q=${searchTerm}`}
+        className="flex font-sofia-pro"
+        autoComplete="off"
+      >
+        <label htmlFor="search" className="hidden">
+          {label}
+        </label>
+        <div className="relative flex flex-grow">
+          <DebounceInput
+            type="text"
+            name="q"
+            id="search"
+            placeholder={label}
+            className="flex-auto pr-0 items-stretch flex-grow text-night-sky-800 ring-0 py-0 shadow-none focus:ring-0 bg-white transition-colors border-opacity-100 hover:bg-grey-100 hover:border-grey-500 hover:border-opacity-50 focus:bg-grey-100 focus:border-blue-400 inline-block sm:text-sm border-grey-500 rounded-md rounded-tr-none rounded-br-none placeholder:text-gray-600"
+            debounceTimeout={300}
+            minLength={2}
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            onClick={() => setOpen(true)}
+            onFocus={() => setOpen(true)}
+            onBlur={() => setOpen(false)}
+            onKeyDown={(e) => keyDownHandler(e)}
+          />
+          {searchTerm !== "" && (
+            <button
+              type="button"
+              className="absolute right-3 top-[50%] -translate-y-[50%] text-night-sky-800 hover:text-blue-500 transition-colors !bg-[transparent] cursor-pointer"
+              onClick={clearSearch}
+            >
+              <CircleCloseIcon className="fill-night-sky-800 hover:fill-blue-500 h-4 w-4" />
+            </button>
+          )}
+        </div>
+        <button
+          type="submit"
+          className="inline-flex transition-colors items-center justify-center px-4 h-[38px] font-medium rounded-md shadow-sm border border-blue-500 text-white bg-blue-500 hover:bg-blue-600 hover:border-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:text-sm rounded-tl-none rounded-bl-none"
+        >
+          <SearchIcon className="fill-white h-4 w-4" />
+        </button>
+      </form>
+      <div className="relative">
+        <CSSTransition
+          mountOnEnter
+          unmountOnExit
+          in={open}
+          timeout={300}
+          classNames="fade-slide"
+          data-testid="searchResults"
+        >
+          <div
+            className={classNames(
+              "search-results-container absolute top-0 left-1/2 -translate-x-1/2 mt-2 bg-white py-5 rounded-[1.25rem] z-50 shadow-lg border border-[#a6abbd] border-opacity-60 w-full tablet:w-[70vw] min-h-[8rem] overflow-hidden"
+            )}
+          >
+            <ErrorBoundary>
+              {loading && (
+                <Loader
+                  data-testid="Loader"
+                  className="absolute top-5 right-5"
+                />
+              )}
+              <div
+                className="px-6 h-full mb-12 max-h-[70vh] overflow-y-auto"
+                data-testid="Sections"
+              >
+                {hasError && (
+                  <p>
+                    Sorry, there was a problem. Please try your search again.
+                  </p>
+                )}
+                {searchData.data &&
+                  searchData.data.searchAutocomplete &&
+                  searchData.data.searchAutocomplete!.map((section) => (
+                    <SearchAutocompleteSection
+                      key={section.title}
+                      searchTerm={searchTerm}
+                      title={section.title}
+                      results={section.results}
+                    />
+                  ))}
+              </div>
+            </ErrorBoundary>
+            <div className="border-t border-[#a6abbd] border-opacity-60 flex items-center absolute bottom-0 left-0 w-full bg-white h-16">
+              <a
+                href={`/search?q=${searchTerm}`}
+                className="px-3 py-1 ml-6 flex items-center space-x-3 ring ring-1 ring-offset-2 ring-transparent transition-colors text-blue-500 hover:text-blue-600 rounded-lg autocomplete-custom-search"
+              >
+                <SearchIcon className="fill-blue-500 hover:fill-blue-600 h-4 w-4" />
+                <span className="font-semibold text-[1.125rem] ">
+                  {searchTerm === "" ? "Custom Search" : "View All Results"}
+                </span>
+              </a>
+            </div>
+          </div>
+        </CSSTransition>
+      </div>
+    </div>
+  );
+};
+
+export default SearchAutocomplete;

package/src/components/SearchAutocompleteSection/SearchAutocompleteSection.module.scss

@@ -0,0 +1,64 @@
+.SearchAutocompleteSection {
+  @apply font-sofia-pro mb-6;
+}
+
+// Hide results over 5 on mobile
+:global(.autocomplete-section a:nth-child(6)) {
+  @apply hidden tablet:inline-block;
+}
+
+:global(.autocomplete-section a:nth-child(7)) {
+  @apply hidden tablet:inline-block;
+}
+
+:global(.autocomplete-section a:nth-child(8)) {
+  @apply hidden tablet:inline-block;
+}
+
+:global(.autocomplete-section a:nth-child(9)) {
+  @apply hidden tablet:inline-block;
+}
+
+:global(.autocomplete-section a:nth-child(10)) {
+  @apply hidden tablet:inline-block;
+}
+
+:global(.autocomplete-section a:nth-child(11)) {
+  @apply hidden tablet:inline-block;
+}
+
+:global(.autocomplete-section a:nth-child(12)) {
+  @apply hidden tablet:inline-block;
+}
+
+:global(.autocomplete-section a:nth-child(13)) {
+  @apply hidden tablet:inline-block;
+}
+
+:global(.autocomplete-section a:nth-child(14)) {
+  @apply hidden tablet:inline-block;
+}
+
+:global(.autocomplete-section a:nth-child(15)) {
+  @apply hidden tablet:inline-block;
+}
+
+:global(.autocomplete-section a:nth-child(16)) {
+  @apply hidden tablet:inline-block;
+}
+
+:global(.autocomplete-section a:nth-child(17)) {
+  @apply hidden tablet:inline-block;
+}
+
+:global(.autocomplete-section a:nth-child(18)) {
+  @apply hidden tablet:inline-block;
+}
+
+:global(.autocomplete-section a:nth-child(19)) {
+  @apply hidden tablet:inline-block;
+}
+
+:global(.autocomplete-section a:nth-child(20)) {
+  @apply hidden tablet:inline-block;
+}

package/src/components/SearchAutocompleteSection/SearchAutocompleteSection.test.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom/extend-expect";
+import SearchAutocompleteSection, {
+  SearchAutocompleteSectionProps,
+} from "./SearchAutocompleteSection";
+
+// Search autocomplete section test block
+describe("<SearchAutocompleteSection />", () => {
+  // Set component props
+  const props: SearchAutocompleteSectionProps = {
+    searchTerm: "Test",
+    title: "test",
+    results: [
+      {
+        title: "Tag 1",
+        url: "http://yahoo.com",
+      },
+      {
+        title: "Tag 2",
+        url: "http://google.com",
+      },
+    ],
+  };
+
+  // Component should mount
+  test("it should mount", async () => {
+    await render(<SearchAutocompleteSection {...props} />);
+    const searchAutocompleteSection = screen.getByTestId(
+      "searchAutocompleteSection"
+    );
+    expect(searchAutocompleteSection).toBeInTheDocument();
+  });
+
+  // Component should have correct title
+  test("it should have correct title", async () => {
+    await render(<SearchAutocompleteSection {...props} />);
+    const searchResultTitle = screen.getByTestId("searchResultTitle");
+    expect(searchResultTitle.textContent).toBe("test");
+  });
+
+  // Component should have a tag
+  test("it should have a tag", async () => {
+    await render(<SearchAutocompleteSection {...props} />);
+    const searchTag = screen.getByTestId("searchTag");
+    expect(searchTag).toBeInTheDocument();
+  });
+
+  // Component should have correct tags
+  test("it should have correct tags", async () => {
+    await render(<SearchAutocompleteSection {...props} />);
+    expect(screen.getAllByRole("link").length).toBe(2);
+  });
+});

package/src/components/SearchAutocompleteSection/SearchAutocompleteSection.tsx

@@ -0,0 +1,74 @@
+import classNames from "classnames";
+import React, { FC } from "react";
+import { Result } from "../../search-result";
+import SearchAutocompleteTag from "../SearchAutocompleteTag/SearchAutocompleteTag";
+import styles from "./SearchAutocompleteSection.module.scss";
+
+export interface SearchAutocompleteSectionProps {
+  searchTerm: string;
+  title?: string;
+  results?: Result[];
+}
+
+// Custom limits based on section
+const resultsLimit = (title: string) => {
+  switch (title.toLowerCase()) {
+    case "where to give now": {
+      return 3;
+    }
+    case "organizations": {
+      return 10;
+    }
+    case "causes": {
+      return 5;
+    }
+    default: {
+      return 20;
+    }
+  }
+};
+
+const SearchAutocompleteSection: FC<SearchAutocompleteSectionProps> = (
+  props
+) => (
+  <div
+    className={classNames(
+      styles.SearchAutocompleteSection,
+      "autocomplete-section"
+    )}
+    data-testid="searchAutocompleteSection"
+  >
+    <h2
+      className="text-night-sky-800 mb-2 text-base"
+      data-testid="searchResultTitle"
+    >
+      {props.title}
+    </h2>
+    <div className="flow-root">
+      <div
+        className="-m-1 flex flex-wrap autocomplete-section"
+        data-testid="searchTag"
+      >
+        {(props.results == null || props.results.length === 0) && (
+          <p className="pl-3">No results found</p>
+        )}
+        {props.results &&
+          props.results!.length > 0 &&
+          props.results
+            ?.slice(0, resultsLimit(props.title || ""))
+            .map((results) => (
+              <SearchAutocompleteTag
+                key={results.url}
+                section={props.title || ""}
+                searchTerm={props.searchTerm}
+                ein={results.ein}
+                name={results.title}
+                url={results.url}
+              />
+            ))}
+      </div>
+    </div>
+  </div>
+);
+
+export default SearchAutocompleteSection;

package/src/components/SearchAutocompleteTag/SearchAutocompleteTag.module.scss

@@ -0,0 +1,6 @@
+.SearchAutocompleteTag {
+  @apply inline-block font-sofia-pro font-normal text-base leading-6 tracking-normal text-left transition-colors text-night-sky-800 bg-grey-50 hover:bg-grey-100 rounded-lg pt-2 pb-2 pl-3 pr-3 m-1 ring ring-1 ring-offset-2 ring-transparent;
+}
+:global(.highlighted-text) {
+  @apply font-semibold;
+}

package/src/components/SearchAutocompleteTag/SearchAutocompleteTag.test.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { fireEvent, render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom/extend-expect";
+import SearchAutocompleteTag, {
+  SearchAutocompleteTagProps,
+} from "./SearchAutocompleteTag";
+
+// Search autocomplete tag test block
+describe("<SearchAutocompleteTag />", () => {
+  // Set component props
+  const props: SearchAutocompleteTagProps = {
+    section: "Test",
+    searchTerm: "Tes",
+    name: "Test",
+    url: "http://google.com",
+  };
+
+  // Component should mount
+  test("it should mount", async () => {
+    await render(<SearchAutocompleteTag {...props} />);
+    const searchAutocompleteTag = screen.getByTestId("searchAutocompleteTag");
+    expect(searchAutocompleteTag).toBeInTheDocument();
+  });
+
+  // Component should have correct name
+  test("it should have correct name", async () => {
+    await render(<SearchAutocompleteTag {...props} />);
+    const searchAutocompleteTag = screen.getByTestId("searchAutocompleteTag");
+    expect(searchAutocompleteTag.textContent).toBe("Test");
+  });
+
+  // Component should have correct url
+  test("it should have correct url", async () => {
+    await render(<SearchAutocompleteTag {...props} />);
+    const searchAutocompleteTag = screen.getByTestId("searchAutocompleteTag");
+    expect(searchAutocompleteTag.getAttribute("href")).toBe(
+      "http://google.com"
+    );
+  });
+
+  // Component should have correct highlighted text
+  test("it should have correct highlighted text", async () => {
+    await render(<SearchAutocompleteTag {...props} />);
+    const highlightedText = screen.getByText("Tes");
+    expect(highlightedText).toHaveClass("highlighted-text");
+  });
+
+  // Component should trigger tracking event
+  test("it should trigger tracking event", async () => {
+    // TODO: Write test for tracking event
+  });
+});

package/src/components/SearchAutocompleteTag/SearchAutocompleteTag.tsx

@@ -0,0 +1,67 @@
+import React, { FC } from "react";
+import styles from "./SearchAutocompleteTag.module.scss";
+import Highlighter from "react-highlight-words";
+import classNames from "classnames";
+
+export interface SearchAutocompleteTagProps {
+  section: string;
+  searchTerm: string;
+  ein?: string;
+  name: string;
+  url?: string;
+}
+
+const Highlight = ({ children, highlightIndex }: any) => (
+  <span className="highlighted-text">{children}</span>
+);
+
+const SearchAutocompleteTag: FC<SearchAutocompleteTagProps> = (props) => {
+  // Custom event trigger
+  const triggerCustomEvent = (e: any) => {
+    e.preventDefault();
+
+    // Create custom event
+    var event = new CustomEvent("autocomplete-term-clicked", {
+      detail: {
+        name: props.name,
+        searchTerm: props.searchTerm,
+        section: props.section,
+        url: props.url,
+      },
+    });
+
+    // Trigger custom event
+    document.dispatchEvent(event);
+
+    if (props.url) {
+      window.location.href = props.url;
+    }
+  };
+
+  return (
+    <a
+      key={props.ein}
+      href={props.url}
+      className={classNames(
+        styles.SearchAutocompleteTag,
+        "autocomplete-tag"
+        // ? 'bg-grey-100' : ''
+      )}
+      data-section={props.section}
+      data-testid="searchAutocompleteTag"
+      onClick={(e) => triggerCustomEvent(e)}
+    >
+      {props.searchTerm === "" ? (
+        <span className="highlighted-text">{props.name}</span>
+      ) : (
+        <Highlighter
+          highlightTag={Highlight}
+          searchWords={[props.searchTerm]}
+          textToHighlight={props.name}
+        />
+      )}
+    </a>
+  );
+};
+
+export default SearchAutocompleteTag;

package/src/components/index.tsx

@@ -0,0 +1,4 @@
+import SearchAutocomplete from "./SearchAutocomplete/SearchAutocomplete";
+import "../index.css";
+
+export { SearchAutocomplete };