balmet.com

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs

RowByTax.js (3086B)

      1 import { useState, useEffect } from '@wordpress/element'
      2 import { Templates as TemplatesApi } from '../../api/Templates'
      3 import { useTemplatesStore } from '../../state/Templates'
      4 import TemplateButton, { TemplateButtonSkeleton } from '../../components/TemplateButton'
      5 import { useIsMounted } from '../../hooks/helpers'
      6 import { useGlobalStore } from '../../state/GlobalState'
      7 import { __ } from '@wordpress/i18n'
      8 import { useTaxonomyStore } from '../../state/Taxonomies'
      9 
     10 const apiResponses = new Map()
     11 
     12 export default function RowByTax({ searchParams, title, tax }) {
     13     const updateTaxonomies = useTemplatesStore(state => state.updateTaxonomies)
     14     const toggleOpenedTaxonomy = useTaxonomyStore(state => state.toggleOpenedTaxonomy)
     15     const [templates, setTemplates] = useState([])
     16     const [howManyToFetch, setHowManyToFetch] = useState()
     17     const setActiveTemplate = useTemplatesStore(state => state.setActive)
     18     const isModalOpen = useGlobalStore(state => state.open)
     19     const isMounted = useIsMounted()
     20 
     21     useEffect(() => {
     22         setHowManyToFetch(window.innerWidth < 1600 ? 3 : 4)
     23     }, [])
     24 
     25     useEffect(() => {
     26         if (!isMounted.current || !howManyToFetch || !isModalOpen) {
     27             return
     28         }
     29         const key = JSON.stringify(Object.assign(searchParams, { pageSize: howManyToFetch, force: true }))
     30         if (apiResponses.has(key)) {
     31             setTemplates(apiResponses.get(key))
     32             return
     33         }
     34         TemplatesApi.get(searchParams, { pageSize: howManyToFetch, force: true }).then((response) => {
     35             if (response?.records?.length && isMounted.current) {
     36                 apiResponses.set(key, response.records)
     37                 setTemplates(response.records)
     38             }
     39         })
     40     }, [searchParams, isMounted, howManyToFetch, isModalOpen])
     41 
     42     return <section>
     43         <div className="flex justify-between">
     44             <h2 className="text-2xl mb-2 text-extendify-main uppercase m-0 text-left font-bold">
     45                 {title}
     46             </h2>
     47             <button
     48                 onClick={() => {
     49                     updateTaxonomies({ [tax]: title })
     50                     toggleOpenedTaxonomy('tax_pattern_types', true)
     51                 }}
     52                 type="button"
     53                 className="components-button">{ __('View all', 'extendify-sdk') }</button>
     54         </div>
     55         <ul className="flex-grow gap-6 grid xl:grid-cols-2 2xl:grid-cols-3 3xl:grid-cols-4 pb-16 m-0">
     56             {/* TODO: we may want to keep intermediary state to have a better loading experience */}
     57             {templates.length === 0 && Array.from({ length: howManyToFetch }, (_, i) => <TemplateButtonSkeleton key={i}/>)}
     58             {templates.map((template) => {
     59                 return <li key={template.id}>
     60                     <TemplateButton
     61                         template={template}
     62                         setActiveTemplate={() => setActiveTemplate(template)}
     63                         imageLoaded={() => {}}
     64                     />
     65                 </li>
     66             })}
     67         </ul>
     68     </section>
     69     // return <div>
     70 }