Search Listings

import LazyLoader from '../../../../js/utils/lazy-loader';
import Pagination from '../pagination/pagination';
import { getQueryStringParameter, setQueryParams } from '../../../../js/utils/routing';
import format from '../../../../js/utils/string';
import { PropertyListCard } from '../../cards/property-list-card/property-list-card';

const pageQueryStringParameterName = 'page';

export class SearchListings {
    constructor(container) {
        this.container = container;

        this.resultsContainer = this.container.querySelector('.js-results-container');
        this.filterButtons = this.container.querySelectorAll('.js-apply-filter-btn');
        this.selectOptions = this.container.querySelector('.js-filter-select-options');
        this.categoryQueryStringParameterName = 'category';

        this.init();
    }

    init() {
        this.parseQueryParams();
        this.setUpLazyLoader();
        this.addEventListener();
    }

    parseQueryParams() {
        let currentCategory = getQueryStringParameter(this.categoryQueryStringParameterName);

        if (!currentCategory) {
            currentCategory = this.container.dataset.initialcategory;
        }

        if (currentCategory) {
            const filterButton = this.container.querySelector(`.js-apply-filter-btn[data-category='${currentCategory}']`);
            if (filterButton) {
                this.resetButtons();
                filterButton.classList.add('selected');
            }
        }
    }

    setUpLazyLoader() {
        const loadMoreButton = this.container.querySelector('.js-load-more-button');
        const paginationElement = this.container.querySelector('.js-pagination');

        const pageNumberParamValue = getQueryStringParameter(pageQueryStringParameterName);
        let pageNumber = 1;
        if (pageNumberParamValue) {
            pageNumber = parseInt(pageNumberParamValue, 10);
        }

        if (paginationElement) {
            this.pagination = new Pagination(this.container.querySelector('.js-pagination'), () => { this.onPaginationChange(); });
        }

        this.lazyLoader = new LazyLoader(
            this.container.dataset.endpoint,
            this.container.dataset.pageSize,
            loadMoreButton,
            this.resultsContainer,
            () => this.onApiSuccess(),
            'get',
        );

        const { endpoint } = this.container.dataset;
        const { category } = this.container.querySelector('.js-apply-filter-btn.selected').dataset;
        this.endpoint = endpoint;
        this.updatedEndPoint = format(this.endpoint, category);
        this.lazyLoader.setPage(pageNumber);
        this.lazyLoader.setEndPoint(this.updatedEndPoint);
        this.lazyLoader.load();
    }

    addEventListener() {
        const that = this;
        function updateCategory(category) {
            that.updatedEndPoint = format(that.endpoint, category);
            that.lazyLoader.reset();
            that.lazyLoader.setEndPoint(that.updatedEndPoint);
            that.lazyLoader.load();
            setQueryParams(that.categoryQueryStringParameterName, category);
        }

        this.filterButtons.forEach((btn) => {
            btn.addEventListener('click', (event) => {
                event.preventDefault();
                const button = event.target;
                this.resetButtons();
                button.classList.add('selected');
                const { category } = button.dataset;

                updateCategory(category);
            });
        });

        if (this.selectOptions) {
            this.selectOptions.addEventListener('change', () => {
                const selectedOption = this.selectOptions.options[this.selectOptions.selectedIndex];
                const { category } = selectedOption.dataset;

                updateCategory(category);
            });
        }
    }

    onApiSuccess() {
        const propertyCards = this.resultsContainer.querySelectorAll('[data-module="propertyListCard"]');
        propertyCards.forEach((propertyCardElement) => {
            new PropertyListCard(propertyCardElement);
        });

        if (this.pagination) {
            this.pagination.setNumberOfPages(this.lazyLoader.totalPages);
        }
    }

    resetButtons() {
        this.filterButtons.forEach((btn) => {
            btn.classList.remove('selected');
        });
    }

    onPaginationChange() {
        setQueryParams(pageQueryStringParameterName, this.pagination.currentPage);
        if (this.pagination) {
            this.lazyLoader.reset();
        }

        this.lazyLoader.setPage(this.pagination.currentPage);
        this.lazyLoader.load();
    }
}

export default (module) => new SearchListings(module);