Unsplash API с React Часть 2

Запустить модальный

Добро пожаловать обратно. Давайте продолжим создание нашего React-приложения в стиле Unsplash. Во время нашего последнего раунда мы успешно извлекли наши данные из Unsplash API, установили наше состояние с возвращенными результатами и визуализировали галерею из тридцати изображений при загрузке страницы.

Мы продолжим настройку onClick функции, которая запускается, когда пользователь щелкает миниатюру, которая затем запускает модальное окно, отображающее полную версию изображения вместе с описанием. В функции constructor нашего App компонента, где мы инициализировали состояние, давайте добавим еще одно свойство с именем selectedImage, например:

constructor(props) {
  super(props)
  this.state = {
    gallery: [],
    searchedQuery: '',
    selectedImage: {
      description: '',
      src: '',
      username: '',
      page: '',
    },
  }
}

Этот объект будет использоваться для получения всех данных, которые нам нужны для содержимого нашего модального окна. Давайте также настроим нашу launchModal функцию в нашем App компоненте.

launchModal = (index) => {
  this.setState((prevState) => {
    return {
      selectedImage: {
        description: prevState.gallery[index].description,
        src: prevState.gallery[index].urls.regular,
        username: prevState.gallery[index].user.username,
        page: prevState.gallery[index].user.links.html,
      }
    }
  })
}

Как видите, мы передадим index, что будет выполнено в событии onClick. Затем мы установим наше состояние асинхронно, передав prevState и назначив свойства selectedImage их соответствующим свойствам текущего элемента в prevState gallery с помощью index. Обратите внимание, что на этот раз мы используем URL regular для свойства src, тогда как мы использовали свойство small при настройке эскизов галереи нашей страницы. Теперь мы можем передать эту функцию в качестве опоры нашему компоненту Gallery, а также нашему объекту selectedImage следующим образом:

<Gallery gallery={this.state.gallery} launchModal={this.launchModal} selectedImage={this.state.selectedImage} />

Теперь перейдем к созданию модального всплывающего окна, когда пользователь выбирает изображение. Мы можем использовать Bootstrap для его модального окна (а затем для его навигационной панели и формы ввода для нашей функции поиска), установив его через npm или cdn. Мы также возьмем фрагмент модального шаблона из Bootstrap и вставим его в наш компонент Gallery прямо под конечным тегом section. Не забудьте изменить все атрибуты class на className, поскольку мы пишем JSX, а не HTML. Вам может не понадобиться div.modal-header, если вы не хотите добавить заголовок в модальное окно. Не стесняйтесь настраивать модальное окно так или как хотите:

<div className="modal fade" id="selected-img-modal" tabIndex="-1" role="dialog" aria-labelledby="selected-img-modal-label" aria-hidden="true">
  <div className="modal-dialog modal-lg" role="document">
    <div className="modal-content">
      <div className="modal-body">
        <img src={selectedImage.src} alt={selectedImage.description} />
        <hr/>
        <p>{selectedImage.description}</p>
        <p>Photo by <a href={selectedImage.page + `?utm_source=find-inspiration`} target="_blank" rel="noopener noreferrer">{selectedImage.username}</a> on <a href="https://unsplash.com/?utm_source=find-inspiration`" target="_blank" rel="noopener noreferrer">Unsplash</a></p>
      </div>
    </div>
  </div>
</div>

Отлично, теперь у нас настроен модальный шаблон. У нас есть привязанные атрибуты src и alt тега img, а также описание и кредит для фотографа и Unsplash, что не требуется в соответствии с их страницей лицензий, но это приятно. Теперь нам нужно принять нашу launchModal функцию и настроить ее как событие щелчка для каждого эскиза. Наряду с деструктуризацией gallery из нашего props давайте также добавим launchModal и selectedImage. Нам также необходимо добавить некоторые атрибуты данных и прослушиватель событий onClick в тег img:

const Gallery = (props) => {
  const { gallery, launchModal, selectedImage } = props
  .
  .
  .
          <img
            src={image.urls.small}
            alt={image.description}
            data-toggle="modal"
            data-target="#selected-img-modal"
            onClick={() => launchModal(index)}
          />
  .
  .
  .
}

Отлично, теперь у вас должна быть возможность щелкнуть миниатюру, чтобы просмотреть версию изображения в увеличенном разрешении 😊

Далее добавление функции Search…