\n \n Showing {items.length.toString().padStart(2, '0')} of {resultsTotal.toString().padStart(2, '0')}\n \n {isFiltered && (\n
\n\n \n \n
\n )}\n \n
\n \n )\n}\n\nBlogHeader.propTypes = {\n items: PropTypes.arrayOf(PropTypes.object),\n resultsTotal: PropTypes.number,\n filters: PropTypes.object,\n handleFilter: PropTypes.func,\n isFiltered: PropTypes.bool,\n handleReset: PropTypes.func,\n}\n\nexport default BlogHeader\n","import PropTypes from 'prop-types'\n\nfunction Post({ title, url, publish_date, thumbnail, summary }) {\n return (\n \n
\n \n \n
\n )\n}\n\nPost.propTypes = {\n title: PropTypes.string,\n url: PropTypes.string,\n publish_date: PropTypes.string,\n thumbnail: PropTypes.string,\n summary: PropTypes.string,\n}\n\nexport default Post\n","import PropTypes from 'prop-types'\nimport Post from './Post'\n\nfunction Posts({ items }) {\n return (\n \n 
\n
\n \n\n \n
\n {publish_date}
\n\n \n \n {title}\n \n
\n\n \n \n {items.map((item) => (\n
\n )\n}\n\nPosts.propTypes = {\n items: PropTypes.arrayOf(PropTypes.object),\n}\n\nexport default Posts\n","import { useState, useEffect, useRef } from 'react'\nimport PropTypes from 'prop-types'\nimport BlogHeader from './BlogHeader'\nimport Posts from './Posts'\n\nfunction App({ data, endpoint }) {\n const initialLoad = useRef(true)\n const [items, setItems] = useState(data.items)\n const [isLoading, setIsLoading] = useState(false)\n const [resultsHasMore, setResultsHasMore] = useState(data.results_has_more)\n const [resultsOffset, setResultsOffset] = useState(data.results_offset)\n const [resultsTotal, setResultsTotal] = useState(data.results_total)\n const [filters, setFilters] = useState(data.filters)\n\n const handleLoadMore = () => {\n const url = new URL(`${endpoint}more?${data.url_params}`)\n url.searchParams.append('offset', resultsOffset)\n\n for (const [key, value] of Object.entries(filters)) {\n url.searchParams.append(key, value)\n }\n\n setIsLoading(true)\n\n ajax\n .url(url.href)\n .get()\n .json((res) => {\n if (res.success) {\n setResultsOffset(res.results_offset)\n setResultsHasMore(res.results_has_more)\n setItems([...items, ...res.items])\n }\n })\n .finally(() => {\n setIsLoading(false)\n })\n }\n\n const handleFilter = (name, value) => {\n setFilters((prevState) => ({\n ...prevState,\n [name]: value,\n }))\n }\n\n useEffect(() => {\n if (initialLoad.current) {\n initialLoad.current = false\n return\n }\n\n const url = new URL(`${endpoint}fetch?${data.url_params}`)\n url.searchParams.append('offset', 0)\n\n for (const [key, value] of Object.entries(filters)) {\n url.searchParams.append(key, value)\n }\n\n setIsLoading(true)\n\n ajax\n .url(url.href)\n .get()\n .json((res) => {\n if (res.success) {\n setResultsOffset(res.results_offset)\n setResultsHasMore(res.results_has_more)\n setResultsTotal(res.results_total)\n setItems(res.items)\n }\n })\n .finally(() => {\n setIsLoading(false)\n })\n }, [filters])\n\n const handleReset = () => {\n window.location.href = endpoint\n }\n\n return (\n \n
\n \n
\n\n {items.length === 0 ? (\n \n
\n ) : (\n No posts found.
\n \n \n
\n )}\n \n {items.length.toString().padStart(2, '0')} of {data.results_total.toString().padStart(2, '0')}\n
\n\n {resultsHasMore && (\n \n \n
\n )}\n \n
\n )\n}\n\nListingListItem.propTypes = {\n image: PropTypes.string,\n title: PropTypes.string,\n categories: PropTypes.string,\n directions_url: PropTypes.string,\n website: PropTypes.string,\n has_address: PropTypes.bool,\n street_address: PropTypes.string,\n city: PropTypes.string,\n state: PropTypes.string,\n zip: PropTypes.string,\n phone: PropTypes.string,\n phone_url: PropTypes.string,\n email: PropTypes.string,\n}\n\nexport default ListingListItem\n","import PropTypes from 'prop-types'\n\nfunction ListingGridItem({\n image,\n title,\n categories,\n directions_url,\n website,\n has_address,\n street_address,\n city,\n state,\n zip,\n phone,\n phone_url,\n email,\n}) {\n const hasCtas = directions_url || website\n const hasContact = phone || email\n\n return (\n \n 
\n
\n\n \n
\n \n
\n \n
\n\n {(has_address || hasContact) && (\n {title}
\n\n{categories}
\n\n {hasCtas && (\n \n {directions_url && (\n \n Directions\n \n )}\n\n {website && (\n \n Details\n \n )}\n
\n )}\n \n {has_address && (\n
\n )}\n \n \n\n
\n )}\n\n {hasContact && (\n \n {street_address}\n
\n {city}, {state} {zip}\n
\n \n {city}, {state} {zip}\n
\n \n\n
\n )}\n \n {phone && (\n
\n \n \n {phone}\n \n
\n )}\n {email && (\n \n \n {email}\n \n
\n )}\n \n
\n )\n}\n\nListingGridItem.propTypes = {\n image: PropTypes.string,\n title: PropTypes.string,\n categories: PropTypes.string,\n directions_url: PropTypes.string,\n website: PropTypes.string,\n has_address: PropTypes.bool,\n street_address: PropTypes.string,\n city: PropTypes.string,\n state: PropTypes.string,\n zip: PropTypes.string,\n phone: PropTypes.string,\n phone_url: PropTypes.string,\n email: PropTypes.string,\n}\n\nexport default ListingGridItem\n","import PropTypes from 'prop-types'\nimport ListingListItem from './ListingListItem'\nimport ListingGridItem from './ListingGridItem'\n\nfunction Listings({ items, view }) {\n if (view === 'list') {\n return (\n \n \n
\n\n \n
\n \n
\n\n {(hasCtas || has_address || hasContact) && (\n {title}
\n\n{categories}
\n \n {hasCtas && (\n
\n )}\n \n {directions_url && (\n \n Directions\n \n )}\n\n {website && (\n \n Details\n \n )}\n
\n )}\n\n {(has_address || hasContact) && (\n \n {has_address && (\n
\n )}\n \n \n\n
\n )}\n\n {hasContact && (\n \n {street_address}\n
\n {city}, {state} {zip}\n
\n \n {city}, {state} {zip}\n
\n \n\n
\n )}\n \n {phone && (\n
\n \n \n {phone}\n \n
\n )}\n {email && (\n \n \n {email}\n \n
\n )}\n \n {items.map((item) => (\n
\n )\n }\n\n if (view === 'grid') {\n return (\n \n {items.map((item) => (\n
\n )\n }\n}\n\nListings.propTypes = {\n items: PropTypes.arrayOf(PropTypes.object),\n view: PropTypes.string,\n}\n\nexport default Listings\n","import PropTypes from 'prop-types'\nimport easydropdown from 'easydropdown'\nimport { useEffect, useRef } from 'react'\n\nfunction Sort({ name, value, handleFilter }) {\n const ref = useRef()\n const eddRef = useRef()\n\n useEffect(() => {\n if (ref.current) {\n const edd = easydropdown(ref.current, {\n behavior: {\n liveUpdates: true,\n },\n })\n\n eddRef.current = edd\n\n ref.current.addEventListener('change', (e) => {\n handleFilter(e.target.name, e.target.value)\n })\n }\n\n return () => {\n eddRef.current.destroy()\n }\n }, [ref])\n\n return (\n \n )\n}\n\nSort.propTypes = {\n name: PropTypes.string,\n value: PropTypes.string,\n handleFilter: PropTypes.func,\n}\n\nexport default Sort\n","import PropTypes from 'prop-types'\nimport Sort from './Sort'\n\nfunction ListingsHeader({ items, resultsTotal, view, setView, filters, handleFilter, isFiltered, handleReset }) {\n return (\n \n \n Showing {items.length.toString().padStart(2, '0')} of {resultsTotal.toString().padStart(2, '0')}\n \n {isFiltered && (\n
\n\n \n \n
\n )}\n \n
\n \n )\n}\n\nListingsHeader.propTypes = {\n items: PropTypes.arrayOf(PropTypes.object),\n resultsTotal: PropTypes.number,\n view: PropTypes.string,\n setView: PropTypes.func,\n filters: PropTypes.object,\n handleFilter: PropTypes.func,\n isFiltered: PropTypes.bool,\n handleReset: PropTypes.func,\n}\n\nexport default ListingsHeader\n","import { useState, useEffect, useRef } from 'react'\nimport PropTypes from 'prop-types'\nimport easydropdown from 'easydropdown'\n\nfunction ListingsSearch({ categories, filters, handleFilter }) {\n const categoryRef = useRef()\n const subcategoryRef = useRef()\n const categoryEddRef = useRef()\n const subcategoryEddRef = useRef()\n const [searchOpen, setSearchOpen] = useState(window.matchMedia('(min-width: 768px)').matches)\n const [searchTerm, setSearchTerm] = useState(filters.search)\n const [subcategories, setSubcategories] = useState([])\n\n useEffect(() => {\n if (categoryRef.current) {\n const edd = easydropdown(categoryRef.current, {\n behavior: {\n openOnFocus: true,\n maxVisibleItems: 12,\n liveUpdates: true,\n },\n })\n\n categoryEddRef.current = edd\n\n categoryRef.current.addEventListener('change', (e) => {\n const selectedCategory = categories.find((x) => x.id === parseInt(e.target.value, 10))\n\n handleFilter(e.target.name, e.target.value)\n\n if (selectedCategory) {\n setSubcategories(selectedCategory.subcategories)\n }\n })\n }\n\n return () => {\n categoryEddRef.current.destroy()\n }\n }, [categoryRef])\n\n useEffect(() => {\n if (subcategoryRef.current) {\n const edd = easydropdown(subcategoryRef.current, {\n behavior: {\n openOnFocus: true,\n maxVisibleItems: 12,\n liveUpdates: true,\n },\n })\n\n subcategoryEddRef.current = edd\n\n subcategoryRef.current.addEventListener('change', (e) => {\n handleFilter(e.target.name, e.target.value)\n })\n }\n\n return () => {\n subcategoryEddRef.current.destroy()\n }\n }, [subcategoryRef])\n\n useEffect(() => {\n setSearchTerm(filters.search)\n }, [filters])\n\n const handleSubmit = (e) => {\n e.preventDefault()\n\n if (searchTerm !== '') {\n handleFilter('search', searchTerm)\n }\n }\n\n return (\n <>\n \n
\n\n \n setView('list')}\n className={`w-6 h-6 transition-colors ${\n view === 'list' ? 'text-brand-red' : 'text-gray-300 hover:text-gray-400'\n }`}\n >\n \n \n\n setView('grid')}\n className={`w-6 h-6 transition-colors ${\n view === 'grid' ? 'text-brand-red' : 'text-gray-300 hover:text-gray-400'\n }`}\n >\n \n \n
\n \n
\n \n
\n\n {items.length === 0 ? (\n \n
\n ) : (\n No listings found.
\n \n \n
\n )}\n \n {items.length.toString().padStart(2, '0')} of {resultsTotal.toString().padStart(2, '0')}\n
\n\n {resultsHasMore && (\n \n \n
\n )}\n