text: import { useState, useEffect } from 'react';
  import { useLocation } from 'react-router';
  import { PexelsFetchObject } from '../../services/pexels';
  import { useLS } from '../../hooks/useLS';
  import { Link } from 'react-router-dom';
  const base_url = `https://api.pexels.com/v1/`;
  const api_key = `563492ad6f91700001000001390f9fee0a794c1182a72e49e0e0eae2`;
  const newPexelsFetchObject = new PexelsFetchObject(base_url, api_key);
  
  export function ImagesList({ searchValue, perPage }) {
    const [searchResults, setSearchResults] = useLS('pexelImages', []);
    const [status, setStatus] = useState('init');
    // =================
    const location = useLocation();
    // console.log(location);
    useEffect(() => {
      if (!searchValue.trim()) return;
      setStatus('pending');
      newPexelsFetchObject.resetPage();
      newPexelsFetchObject.searchQuery = searchValue;
      newPexelsFetchObject.perPage = perPage;
      newPexelsFetchObject
        .searchPhotos()
        .then(searchResults => {
          // console.log(searchResults);
          setSearchResults(searchResults);
          setStatus('success');
        })
        .catch(err => {
          console.log(err);
          setStatus('error');
        });
    }, [searchValue, perPage, setSearchResults]);
    // =================
    const handleClick = () => {
      newPexelsFetchObject.page = 1;
      newPexelsFetchObject
        .searchPhotos()
        .then(searchResults => {
          setSearchResults(prev => [...prev, ...searchResults]);
          setStatus('success');
        })
        .catch(err => {
          setStatus('error');
        });
    };
    if (status === 'init') {
      return <h1>Hello! Search something</h1>;
    }
    if (status === 'pending') {
      return <h1>Wait please!</h1>;
    }
    if (status === 'success') {
      return (
        <>
          <ul style={{ display: 'flex', flexFlow: 'row wrap' }}>
            {searchResults.length > 0 &&
              searchResults.map(el => (
                <li key={el.id}>
                  {/* обернем картинку в Link для перехода на страницу карточеи */}
                  {/* <Link to={`/pexels/${el.id}`}> */}
                  <Link
                    to={{
                      pathname: `/pexels/${el.id}`,
                      state: {
                        from: { location, label: `back to pixels` },
                      },
                    }}
                  >
                    <img src={el.src.tiny} alt={el.photographer} />
                  </Link>
                </li>
              ))}
          </ul>
          <button type="button" onClick={handleClick}>
            load more
          </button>
        </>
      );
    }
    if (status === 'error') {
      return <h1>ALARMA!!!</h1>;
    }
  }
  