123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263 |
- 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;
|