text: import React, { useEffect, useContext } from "react";
  import { useImmer } from "use-immer";
  import DispatchContext from "../DispatchContext";
  import Axios from "axios";
  import { Link } from "react-router-dom";
  import Post from "./Post";
  
  function Search() {
    const appDispatch = useContext(DispatchContext);
  
    const [state, setState] = useImmer({
      searchTerm: "",
      results: [],
      show: "neither",
      requestCount: 0,
    });
  
    useEffect(() => {
      document.addEventListener("keyup", checkIfEscWasPressed);
  
      return () => document.removeEventListener("keyup", checkIfEscWasPressed);
    }, []);
  
    function checkIfEscWasPressed(e) {
      if (e.keyCode == 27) {
        appDispatch({ type: "searchClosed" });
      }
    }
  
    function handleInput(e) {
      const query = e.target.value;
      setState((draft) => {
        draft.searchTerm = query;
      });
    }
  
    useEffect(() => {
      if (state.searchTerm.trim()) {
        setState((draft) => {
          draft.show = "loading";
        });
  
        const requestDelay = setTimeout(() => {
          setState((draft) => {
            draft.requestCount++;
          });
        }, 750);
  
        return () => clearTimeout(requestDelay);
      } else {
        setState((draft) => {
          draft.show = "neither";
        });
      }
    }, [state.searchTerm]);
  
    useEffect(() => {
      if (state.requestCount) {
        const serverResquest = Axios.CancelToken.source();
        async function fetchResults() {
          try {
            const response = await Axios.post(
              "/search",
              { searchTerm: state.searchTerm },
              { cancelToken: serverResquest.token }
            );
            setState((draft) => {
              draft.results = response.data;
              draft.show = "results";
            });
          } catch (e) {
            console.log(e.response.data);
          }
        }
  
        fetchResults();
  
        return () => serverResquest.cancel();
      }
    }, [state.requestCount]);
  
    return (
      <>
        <div className="search-overlay-top shadow-sm">
          <div className="container container--narrow">
            <label htmlFor="live-search-field" className="search-overlay-icon">
              <i className="fas fa-search"></i>
            </label>
            <input
              onChange={handleInput}
              autoFocus
              type="text"
              autoComplete="off"
              id="live-search-field"
              className="live-search-field"
              placeholder="What are you interested in?"
            />
            <span
              onClick={() => appDispatch({ type: "searchClosed" })}
              className="close-live-search"
            >
              <i className="fas fa-times-circle"></i>
            </span>
          </div>
        </div>
  
        <div className="search-overlay-bottom">
          <div className="container container--narrow py-3">
            <div
              className={
                "circle-loader " +
                (state.show == "loading" ? "circle-loader--visible" : "")
              }
            ></div>
            <div
              className={
                "live-search-results " +
                (state.show == "results" ? "live-search-results--visible" : "")
              }
            >
              {Boolean(state.results.length) && (
                <div className="list-group shadow-sm">
                  <div className="list-group-item active">
                    <strong>Search Results</strong> ({state.results.length}{" "}
                    {state.results.length > 1 ? "items" : "item"} found)
                  </div>
                  {state.results.map((post) => {
                    return (
                      <Post
                        post={post}
                        key={post._id}
                        onClick={() => {
                          appDispatch({ type: "searchClosed" });
                        }}
                      />
                    );
                  })}
                </div>
              )}
              {!Boolean(state.results.length) && (
                <p className="alert alert-danger text-danger shadow-sm">
                  {" "}
                  Sorry, we could not find any results for that search.
                </p>
              )}
            </div>
          </div>
        </div>
      </>
    );
  }
  
  export default Search;
  