PHP Classes

File: src/blocks/spacex-data/view.tsx

Recommend this page to a friend!
  Classes of Maniruzzaman Akash   Maniruzzaman WordPress Frontend Editor   src/blocks/spacex-data/view.tsx   Download  
File: src/blocks/spacex-data/view.tsx
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: Maniruzzaman WordPress Frontend Editor
WordPress plugin for visual front-end development
Author: By
Last change:
Date: 8 months ago
Size: 5,987 bytes
 

Contents

Class file image Download
/** * External dependencies. */ import domReady from "@wordpress/dom-ready"; import {render, useState} from "@wordpress/element"; import {__} from '@wordpress/i18n'; /** * Internal dependencies. */ import {ICapsule, ICapsuleItem, IFilter, ISpacexDataView} from "../../interfaces"; import {CAPSULE_BASE_URL, initialFilter} from "../../utils/spacex-data-helper"; import Search from "../../components/spacex-data-search/Search"; import Modal from "../../components/modal/Modal"; import CapsuleItem from "../../components/capsule/CapsuleItem"; import LoadingSpinner from "../../components/spinner/LoadingSpinner"; import {buildQueryByParameters} from "../../utils/url-generator"; import Pagination from "../../components/pagination"; import useCapsuleFetchData from "../../hooks/use-capsule-fetch-data"; import NoCapsule from "../../components/capsule/NoCapsule"; export const SpacexDataView = ({ searchTextLabel = '', buttonStyle = {}, secondaryButtonStyle = {}, previousTextLabel, nextTextLabel }: ISpacexDataView) => { const [path, setPath] = useState<string>(CAPSULE_BASE_URL); const [showModal, setShowModal] = useState(false); const {capsules, total, loading} = useCapsuleFetchData(path); const [filter, setFilter] = useState<IFilter>({...initialFilter}); const onFiltered = (filtersData: object) => { setFilter({ ...filter, [filtersData.name]: filtersData.value }) } const onSearched = () => { setPath(buildQueryByParameters(filter, CAPSULE_BASE_URL)); } const onResetFilter = () => { setPath(buildQueryByParameters(initialFilter, CAPSULE_BASE_URL)); setFilter(initialFilter); } // @ts-ignore const [selectedCapsule, setSelectedCapsule] = useState<ICapsuleItem>(null); const onSelectCapsule = (capsule: ICapsule) => { setShowModal(true); setSelectedCapsule({ capsule, isShortView: false, }); }; const onChangePage = (page: number) => { onFiltered({ name: 'page', value: page, }); setPath(buildQueryByParameters({ ...filter, page }, CAPSULE_BASE_URL)); } return ( <> <Search filter={filter} onFiltered={onFiltered} onSearched={onSearched} searchText={searchTextLabel} searchButtonstyle={buttonStyle} /> <> { loading ? <LoadingSpinner count={4}/> : <div className="capsules-area"> { capsules.map((capsule, index) => ( <div onClick={() => onSelectCapsule(capsule)} key={index}> <CapsuleItem capsule={capsule} isShortView={true}/> </div> )) } <NoCapsule length={capsules.length} filterResetButtonStyle={buttonStyle} onResetFilter={onResetFilter} /> </div> } </> <Modal show={showModal} onCloseModal={() => setShowModal(false)} title={`#${selectedCapsule?.capsule?.capsule_serial}`} > {selectedCapsule !== null && <div> <CapsuleItem capsule={selectedCapsule.capsule} isShortView={false}/> </div>} </Modal> { (!loading && capsules.length > 0) && <Pagination totalItems={total} pageItems={capsules.length} onChangePage={onChangePage} currentPage={filter.page === undefined ? 1 : filter.page} previousTextLabel={previousTextLabel} nextTextLabel={nextTextLabel} buttonStyle={buttonStyle} secondaryButtonStyle={secondaryButtonStyle} /> } </> ); }; domReady(function () { const container = document.querySelector("#bsf-spacex-spacex-data-view"); if (container === null) { return; } const searchTextLabel = container.getAttribute("data-search-text-label") ?? __('Search', 'bsf-spacex'); const previousTextLabel = container.getAttribute("data-prev-text-label") ?? __('Previous', 'bsf-spacex'); const nextTextLabel = container.getAttribute("data-next-text-label") ?? __('Next', 'bsf-spacex'); const buttonColorBg = container.getAttribute("data-button-color-bg"); const buttonColorText = container.getAttribute("data-button-color-text"); const buttonStyle = { backgroundColor: buttonColorBg, color: buttonColorText } const buttonColorBgSecondary = container.getAttribute("data-button-color-bg-secondary"); const buttonColorTextSecondary = container.getAttribute("data-button-color-text-secondary"); const buttonStyleSecondary = { backgroundColor: buttonColorBgSecondary, color: buttonColorTextSecondary } const observer = new IntersectionObserver( function (entries) { render( <SpacexDataView searchTextLabel={searchTextLabel} buttonStyle={buttonStyle} secondaryButtonStyle={buttonStyleSecondary} previousTextLabel={previousTextLabel} nextTextLabel={nextTextLabel} />, container ); } ); observer.observe(container); });