{"size": 2126, "ext": "js", "max_stars_repo_path": "src/components/SearchNews.js", "max_stars_repo_name": "CryptexFinanceOrg/website", "max_stars_repo_stars_event_min_datetime": "2021-10-02T10:06:33.000Z", "max_stars_repo_stars_event_max_datetime": "2022-03-23T18:04:24.000Z", "max_issues_repo_path": "src/components/SearchNews.js", "max_issues_repo_name": "CryptexFinanceOrg/website", "max_issues_repo_issues_event_min_datetime": "2021-09-25T05:10:10.000Z", "max_issues_repo_issues_event_max_datetime": "2022-01-07T17:12:28.000Z", "max_forks_repo_path": "src/components/SearchNews.js", "max_forks_repo_name": "CryptexFinanceOrg/website", "max_forks_repo_forks_event_min_datetime": "2021-06-15T09:55:50.000Z", "max_forks_repo_forks_event_max_datetime": "2022-01-07T17:10:03.000Z"}
{"max_stars_count": 2, "max_issues_count": 3, "max_forks_count": 2, "avg_line_length": 29.5277777778, "max_line_length": 118, "alphanum_fraction": 0.6354656632}
import React, { useState } from "react";
import SelectCryptex from "./Select";
import { FaSearch } from "@react-icons/all-files/fa/FaSearch";


const SearchNews = ({
  blogKeys,
  setFilteredBlogKeys,
  tagList,
  setActivePage
}) => {
  const keysDivider = "+++";
  const dbDefaultTitle = "Filter";
  const [searchCriteria, setSearchCriteria] = useState("");
  const [selectedTag, setSelectedTag] = useState(dbDefaultTitle);


  const filterPosts = (criteria, filterTag) => {
    setActivePage(0);
    let filterKeys = [];
    if (filterTag === dbDefaultTitle && criteria !== "")
      filterKeys = blogKeys.filter(key => key.includes(criteria.toLowerCase()));
    else if (criteria === "" && filterTag !== dbDefaultTitle)
      filterKeys = blogKeys.filter(key => key.includes([keysDivider, filterTag.toLowerCase(), keysDivider].join("")));
    else if (criteria !== "" && filterTag !== dbDefaultTitle) {
      const tagF = [keysDivider, filterTag.toLowerCase(), keysDivider].join("");
      filterKeys = blogKeys.filter(key => key.includes(tagF) && key.includes(criteria.toLowerCase()));
    }
    else {
      filterKeys = blogKeys;
    }
    setFilteredBlogKeys(filterKeys);
  }  

  const onChange = (criteria) => {
    setSearchCriteria(criteria);
    filterPosts(criteria, selectedTag);
  }

  const onSelectChange = (inputValue, { action }) => {
    if (action === "clear") {
      setSelectedTag(dbDefaultTitle);
      filterPosts(searchCriteria, dbDefaultTitle);
    }
    else {
      setSelectedTag(inputValue.value);
      filterPosts(searchCriteria, inputValue.value);
    }
  }  
    
  return (
    <div className="filter-box">
      <FaSearch className="search-icon" />
      <input
        id="news-search"
        value={searchCriteria} onChange={(e) => onChange(e.target.value)}
        className="newsbox-search"
        placeholder="Search"
      />
      <SelectCryptex
        isClearable={true}
        isMulti={false}
        isSearchable={true}
        options={tagList}
        placeholder="Filter"
        onSelectChange={onSelectChange}
      />
    </div>    
  );
}

export default SearchNews;