Загрузи больше
Удивительный! Сейчас мы на последнем этапе создания нашего приложения в стиле 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
Удачного отдыха!