В последнее время я стал поклонником мемов, которые в настоящее время циркулируют в социальных сетях. Особенно мем "Малыш Йода". Я обнаружил, что использую мемы в групповых чатах, и считаю, что некоторые мемы — идеальные ответы! Однако иногда я забываю название мема или забываю твит, в котором я видел, как этот мем используется.

Я хотел создать поисковик мемов, чтобы помочь с этим, к счастью, мне удалось найти довольно простой API мемов под названием Imgflip API. Просмотрев документацию по API, я нашел конечную точку, которая вернула бы мне массив из 100 мемов. Эти мемы были упорядочены по тому, сколько раз они были подписаны за последние 30 дней. Это ИДЕАЛЬНЫЕ данные, которые мне нужны, они возвращают мне самые используемые мемы за последний месяц.

Начиная

Я хотел использовать React, так как он помогает относительно быстро создать простое приложение. Сначала мне нужно создать новое приложение для реагирования на моем компьютере, мы можем использовать следующую подсказку командной строки.

npx create-react-app meme-seacher

Он обрабатывает создание базовой файловой структуры и выполняет первоначальную установку npm. Теперь вы можете запустить npm start, и он запустит приложение на вашем локальном хосте.

Создание React-приложения

Первое, что я люблю делать после создания нового приложения для реагирования. Это настроить дерево компонентов реакции и создать простой каркас.

The App tree :
-App
  -SearchContainer
  -ResultsContainer
  -MemeCard

SearchContainer будет содержать заголовок и ввод поиска. Контейнер результатов будет содержать компонент MemeCard, который будет отображать изображение мема и имя мема.

Теперь создайте компоненты. Мне нравится создавать их как компоненты класса, но это просто личное предпочтение. Обычно мне просто нравится возвращать div с текстом того, каким компонентом они являются.

На изображении выше вы можете увидеть созданный компонент SearchContainer и файл App.js, который импортирует этот контейнер вместе с ResultsContainer.

На изображении выше вы можете увидеть компоненты ResultsContainer и MemeCard. MemeCard находится внутри контейнера результатов, позже мы будем отображать данные мема для создания нескольких компонентов MemeCard.

Теперь, если вы откроете консоль в браузере, вы увидите иерархию компонентов.

Вытягивание и визуализация данных

Хорошо, теперь, когда у нас все настроено, нам нужно подумать о том, где будет находиться состояние в нашем приложении React. Поскольку и SearchContainer, и ResultsContainer должны знать состояние и управлять им, оно будет жить в файле App.js.

SearchContainer должен иметь возможность манипулировать данными мема и отфильтровывать только те мемы, которые содержат искомое слово. В то время как ResultsContainer должен отображать эти отфильтрованные мемы.

Как было решено, состояние нашего приложения React будет в файле App.js. Сейчас мы можем определить состояние с пустыми значениями. У состояния будет ключ «allMemes», и он будет установлен в пустой массив. Здесь у нас будут мемы, как только мы получим их из API. Состояние также будет иметь ключ «searchText», и для него будет задана пустая строка.

Далее наступает самое интересное — получение данных из API. В нашем файле App.js мы создадим функцию componentDidMount(), которая в основном работает как «DOMContentLoaded». Он ожидает загрузки компонентов, а затем извлекает данные.

В функции componentDidMount() мы сделаем выборку на https://api.imgflip.com/get_memes, это будет запрос на получение, и он вернет нам массив мемов из 100 объектов. В конце нашей выборки мы будем обновлять наше состояние, используя this.setState, и мы изменим ключ allMemes в нашем состоянии с пустого на массив мемов, который мы только что получили из запроса на получение.

Теперь, если вы проверите состояние в консоли, вы увидите, что у нас есть объекты в нашем массиве allMemes. Каждый объект имеет идентификатор, ширину, высоту, имя и URL-адрес. Теперь мы можем использовать эти данные для создания компонентов MemeCard.

Поскольку данные нашего массива находятся в состоянии нашего приложения. Нам нужно передать информацию в качестве реквизита в контейнер результатов, где мы сопоставим этот массив, чтобы создать новый массив мем-карт.

 < ResultsContainer memesArray={this.state.allMemes}/> 

class ResultsContainer extends React.Component{
   render(){
     return (
      <div>This is the Results Container
      {this.props.memesArray.map(meme => {
      return < MemeCard key={meme.id} memeObject={meme}/>
       })}
     </div>
     )
    }
  }

В приведенном выше коде вы можете видеть, что мы теперь сопоставляем переданный реквизит и возвращаем новый массив мем-карт для отображения.

Теперь нам просто нужно отрендерить изображения и заголовок в компоненте MemeCard.

class MemeCard extends React.Component {
  render(){
    return (
     <div>
      <h1>{this.props.memeObject.name}</h1>
      <img alt="meme" src={this.props.memeObject.url}></img>
    </div>
    )
  }
}
export default MemeCard

В следующем фрагменте кода мы теперь отображаем имя мема и имя мема.

Создание функции поиска

В нашем SearchContainer нам нужно создать форму с текстовым вводом, чтобы вводить текст, который хочет найти пользователь.

<div>
  <h1>Meme Searcher</h1>
  <form>
  <input type="text"></input>
   </form>
</div>

Теперь нам нужно создать функцию класса поиска в приложении, которая будет обновлять текст поиска состояний в зависимости от того, что пользователь вводит в поле ввода.

searchMemes = (event) => {
  this.setState({
  searchText: event.target.value
  })
}

Мы передадим эту функцию в SearchContainer в качестве реквизита. Он будет использоваться полем ввода. Мы хотим, чтобы он срабатывал при изменении, поэтому мы будем использовать прослушиватель событий React onChange.

<form>
  <input onChange={(event) => this.props.searchMemes(event)}
   type="text"></input>
</form>

Теперь это состояние обновляется в зависимости от того, что вводится в поле ввода. Последний шаг, который нужно сделать, — отфильтровать массив memesArray, который мы передаем в контейнер результатов, по введенному тексту поиска.

< ResultsContainer memesArray={this.state.allMemes.filter(meme => meme.name.includes(this.state.searchText))}/>

С приведенным выше кодом memesArray теперь фильтруется, но после тестирования он выглядит так, как будто он чувствителен к регистру. Я не сторонник использования заглавных букв в своих поисках, поэтому, чтобы исправить это, мы просто будем манипулировать названием мема.

В нашей реквизите memesArray мы переходим к resultsContainer, внутри функции фильтра мы изменим meme.name на все в нижнем регистре, используя .toLowerCase()

Теперь наш контейнер результатов внутри приложения выглядит так:

< ResultsContainer memesArray={this.state.allMemes.filter(meme => meme.name.toLowerCase().includes(this.state.searchText) ) }/>

И все, теперь у нас есть полнофункциональный поисковик мемов. Я добавлю некоторые стили, чтобы очистить его, но технически мы закончили с приложением.

Вы можете проверить готовый продукт в следующем репозитории GitHub:

https://github.com/Nihaprezz/meme_searcher.git