test-lib-audits/src/components/Search/index.js

React library for audits

import React, { useState } from "react";
import moment from "moment";

import deleteIcon from "../../assets/noun_Delete_1676375.svg";
import printIcon from "../../assets/noun_print_2117815.svg";
import pdfIcon from "../../assets/noun_export pdf_2021663.svg";
import csvIcon from "../../assets/noun_export csv_2021662.svg";
import filterIcon from "../../assets/filter.png";
import confirmIcon from "../../assets/noun_confirm_275573.svg";
import "./style.css";

const Search = props => {
  const [searchTerm, updateSearch] = useState("");
  const [showPanel, togglePanel] = useState(false);
  const [filterEnabled, filterEnabler] = useState(false);
  const [filterName, setFilterName] = useState("");
  const [filterText, changeFilterText] = useState("");
  const toggleFilter = (filterKey, filterEnabled) => {
    setFilterName(filterKey);
    filterEnabler(filterEnabled);
  };
  const createFilterObject = e => {
    e.preventDefault();
    let obj;
    if (
      filterName === "date" ||
      filterName === "time" ||
      filterName === "createdAt"
    ) {
      obj = {
        key: filterName,
        value: filterText || moment().format("YYYY-MM-DD")
      };
    } else {
      obj = {
        key: filterName,
        value: filterText
      };
    }
    props.filterData(obj);
    changeFilterText("");
    toggleFilter("", false);
  };
  return (
    <div>
      <div className="separator search-div">
        <div className="search-form-div">
          <form
            className="search-form"
            onSubmit={e => {
              e.preventDefault();
              props.textSearch(searchTerm);
            }}>
            <input
              type="text"
              value={searchTerm}
              onChange={e => updateSearch(e.target.value)}
              placeholder="Search by any text"
              className="search-input search-box-content search-box"
            />
          </form>
          <div
            onClick={() => togglePanel(!showPanel)}
            className={
              props.filters.length !== 0
                ? "filter-tags filter-tags-visible"
                : "filter-tags"
            }>
            <span>
              <img src={filterIcon} alt="filter" width={25} height={25} />
            </span>
            <span
              className={
                props.filters.length !== 0
                  ? "filter-marker-change filter-marker"
                  : "filter-marker"
              }>
              {props.filters.length}
            </span>
          </div>
        </div>

        <div
          className={`search-box-content hide-box display-box ${props.filters
            .length === 0 && "d-none"}`}
          style={{ minHeight: "2rem" }}>
          <ul className="search-box-ul">
            {props.filters.length !== 0
              ? props.filters.map((filter, index) => (
                  <li
                    key={index}
                    className="search-li-active search-li-active-tag">
                    {`${filter.key}: ${filter.value}`}
                    <a
                      className="cancel-icon"
                      onClick={() => props.removeFilter(filter)}>
                      x
                    </a>
                  </li>
                ))
              : null}
          </ul>
        </div>
        <div className="hide-box">
          <ul className="search-icon-ul">
            <li onClick={() => props.deleteAudits()}>
              <img src={deleteIcon} alt="deleteIcon" className="action-icon" />
            </li>
            <li>
              <img src={printIcon} alt="printIcon" className="action-icon" />
            </li>
            <li onClick={() => props.exportPDF()}>
              <img src={pdfIcon} alt="PDFIcon" className="action-icon" />
            </li>
            <li onClick={() => props.exportCSV()}>
              <img src={csvIcon} alt="CSVIcon" className="action-icon" />
            </li>
          </ul>
        </div>
      </div>
      {showPanel && (
        <div className="search-filter-div">
          <h5 className="search-user-text">
            Filter By{" "}
            {filterEnabled
              ? filterName === "createdAt"
                ? "Time"
                : filterName.charAt(0).toUpperCase() + filterName.slice(1)
              : "Options"}
            <span
              className="cancel-filter-btn"
              onClick={() =>
                filterEnabled ? toggleFilter("", false) : togglePanel(false)
              }>
              X
            </span>
          </h5>
          {!filterEnabled ? (
            <div>
              <ul className="search-filters-ul">
                <li onClick={() => toggleFilter("createdAt", true)}>
                  <span>Time</span>
                  <span className="search-icon">></span>
                </li>
                <li onClick={() => toggleFilter("user", true)}>
                  <span>User</span>
                  <span className="search-icon">></span>
                </li>
                <li onClick={() => toggleFilter("resource", true)}>
                  <span>Resource</span>
                  <span className="search-icon">></span>
                </li>
              </ul>
            </div>
          ) : (
            <form onSubmit={e => createFilterObject(e)}>
              <div className="search-user-input-div">
                <input
                  type={`${filterName === "createdAt" ? "date" : "text"}`}
                  placeholder="Search by text..."
                  className="search-user-input"
                  value={
                    filterText ||
                    (filterName === "createdAt"
                      ? moment().format("YYYY-MM-DD")
                      : "")
                  }
                  onChange={e => changeFilterText(e.target.value)}
                />
                <img
                  src={confirmIcon}
                  className="confirm-btn"
                  alt="confirm"
                  onClick={e => createFilterObject(e)}
                />
              </div>
            </form>
          )}
        </div>
      )}
    </div>
  );
};

export default Search;