Загрузи больше

Удивительный! Сейчас мы на последнем этапе создания нашего приложения в стиле Unsplash. Мы можем получать данные и отображать галерею изображений при загрузке страницы, мы можем щелкать миниатюру, чтобы увидеть версию с более высоким разрешением, и мы можем искать фотографии по ключевому слову. Последняя функция, которую я хотел бы добавить, - это кнопка Load More для добавления еще тридцати изображений в нашу текущую галерею. Продолжим?

Давайте сначала добавим свойство page к состоянию в функции constructor, инициализируя его значением 1, а затем определим нашу функцию loadMore в нашем App компоненте. Функция loadMore сначала увеличивает свойство state page, используя this.setState, который принимает второй параметр, который является обратным вызовом, который будет выполняться после обновления состояния. В обратном вызове мы сначала проверим, является ли searchedQuery searchedQuery начальным значением 'Curated Collection'. Если это так, то это означает, что в галерее отображаются данные, которые были изначально загружены во время загрузки страницы. Мы можем использовать URL-адрес API, аналогичный тому, который мы использовали в нашей функции fetchInitialImages, за исключением того, что значением страницы будет значение, которое мы только что обновили. Каждый номер страницы представляет собой другой набор из тридцати объектов текущего поискового запроса. Когда мы устанавливаем состояние для свойства gallery, мы хотим сохранить текущий набор объектов и добавить новый набор в конце. Мы делаем это, используя оператор распространения, чтобы распределить все элементы в предыдущем состоянии, а затем распределить все элементы данных, которые мы только что выбрали. Если наш searchedQuery не равен 'Curated Collection', это означает, что пользователь загружает больше фотографий ключевого слова, которое он искал. В этом случае нам придется использовать поиск по URL API фотографий. Наша функция должна выглядеть примерно так:

loadMore = () => {
  this.setState((prevState) => {
    return {page: prevState.page + 1}
  }, () => {
    if (this.state.searchedQuery === 'Curated Collection') {     
      axios.get(`${this.ROOT}photos${this.KEY}${this.PERPAGE}&page=${this.state.page}`)
        .then(res => {
          let results = res.data
          this.setState((prevState) => {
            return { gallery: [...prevState.gallery, ...results] }
          })
        })
        .catch(error => console.log(error))
    } else {
      axios.get(`${this.ROOT}search/photos${this.KEY}&query=${this.state.currentQuery}${this.PERPAGE}&page=${this.state.page}`)
        .then(res => {
          let results = res.data.results
          this.setState((prevState) => {
            return { gallery: [...prevState.gallery, ...results] }
          })
        })
        .catch(error => console.log(error))
    }
  })
}

Отлично, теперь мы можем передать эту функцию нашему Gallery компоненту.

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

В нашем Gallery мы удалим loadMore из нашего props

const { gallery, loadMore, launchModal, selectedImage } = props

И, наконец, мы будем использовать классы начальной загрузки, чтобы создать кнопку с атрибутом onClick, которая запускает функцию loadMore. Мы можем разместить его сразу после нашего конечного тега section.

.
.
.
</section>
<button type="button" className="btn btn-outline-primary" onClick={loadMore}>Load more...</button>
.
.
.

Бац! Мы сделали это. Теперь у вас должна быть возможность загружать больше изображений из текущей галереи 🙂

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

Демо-приложение: https://darrylmendonez.github.io/find-inspiration/

Репозиторий GitHub: https://github.com/darrylmendonez/find-inspiration

Удачного отдыха!