project-codepen/src/pages/Search.js

import { actionSearch } from "../actions/actionSearch";
import { Link } from "react-router-dom";
import { connect } from "react-redux";
import { useState } from "react";
import code from "../../src/code.png";
import "./Main.css";

const Search = ({ onSearch, snippets }) => {
  const [request, setRequest] = useState("");
  return (
    <>
      <Link to="/work">
        <div className="btn_block_back">
          <button className="btn_search">Back to Work Page</button>
        </div>
      </Link>
      <br />
      <br />
      <div>
        <input
          className="field_for_search"
          value={request}
          onChange={(e) => setRequest(e.target.value)}
          type="search"
          placeholder="Type name or description"
          aria-label="Search"
        />
        <br />
        <div className="btn_block_search">
          <button className="btn_search" onClick={() => onSearch(request)}>
            Search
          </button>
        </div>
      </div>
      <div className="snippet_block">
        {snippets?.map((key, index) => (
          <div key={key} className="snippet">
            <img src={code} alt="code"></img>
            <div className="block_content">
              <p>
                {`Name: ${snippets?.[index]?.title}` || "Project without name"}
              </p>
              <p>{`Description: ${snippets?.[index]?.description}` || ""}</p>
              <p>{`Owner: ${snippets?.[index]?.owner?.login}`}</p>
              <div className="btn_center">
                <Link to={"/project/" + snippets?.[index]?._id}>
                  <button className="btn_search">Open project</button>
                </Link>
              </div>
            </div>
          </div>
        ))}
      </div>
    </>
  );
};

const ConnectFormSearch = connect(
  (state) => ({
    snippets: state?.p?.searchSnippet?.payload?.data?.SnippetFind,
  }),
  { onSearch: actionSearch }
)(Search);

export default ConnectFormSearch;