search.js 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. import {actionPromise} from "../reducers";
  2. import {gql} from "../actions";
  3. import {useState} from "react";
  4. import {Link} from "react-router-dom";
  5. import {connect} from "react-redux";
  6. import {CTrack} from "./track";
  7. const actionTrackSearch = (word) => (
  8. actionPromise('trackFind', gql(`query trackById($q: String) {
  9. TrackFind(query: $q) {
  10. _id url originalFileName
  11. }
  12. }`, {q: JSON.stringify([
  13. {
  14. $or: [{originalFileName: `/${word}/`}]
  15. },
  16. {
  17. sort: [{originalFileName: 1}]
  18. }
  19. ])
  20. }
  21. ))
  22. )
  23. const TrackSearch = ({ onSearch }) => {
  24. const [value, setValue] = useState("");
  25. return (
  26. <div>
  27. <input
  28. type="text"
  29. placeholder="Поиск..."
  30. value={value}
  31. onChange={(e) => setValue(e.target.value)}
  32. />
  33. <Link to="/search">
  34. <button onClick={() => onSearch(value)}>Найти</button>
  35. </Link>
  36. </div>
  37. );
  38. };
  39. export const CTrackSearch = connect(null,{onSearch:actionTrackSearch})(TrackSearch)
  40. const SearchResult = ({ trackFind }) => {
  41. return (
  42. <>
  43. {trackFind.map((track) => (
  44. <CTrack track={track} />
  45. ))}
  46. </>
  47. );
  48. };
  49. export const CSearchResult = connect((state) => ({
  50. trackFind: state.promise.trackFind?.payload || [],
  51. }))(SearchResult);