457 lines
17 KiB
JavaScript
457 lines
17 KiB
JavaScript
import React, { startTransition, useDeferredValue, useEffect, useRef, useState } from 'react'
|
|
import { createRoot } from 'react-dom/client'
|
|
import CategoryCard from '../components/category/CategoryCard'
|
|
import Pagination from '../components/forum/Pagination'
|
|
|
|
const SORT_OPTIONS = [
|
|
{ value: 'popular', label: 'Popular' },
|
|
{ value: 'az', label: 'A-Z' },
|
|
{ value: 'artworks', label: 'Most artworks' },
|
|
]
|
|
|
|
const PAGE_SIZE = 24
|
|
|
|
const numberFormatter = new Intl.NumberFormat()
|
|
|
|
function LoadingGrid() {
|
|
return (
|
|
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
|
|
{Array.from({ length: 8 }).map((_, index) => (
|
|
<div key={index} className="aspect-[4/5] animate-pulse rounded-2xl border border-white/8 bg-white/[0.04]" />
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function EmptyState({ query }) {
|
|
return (
|
|
<div className="rounded-[28px] border border-dashed border-white/14 bg-black/20 px-6 py-14 text-center backdrop-blur-sm">
|
|
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-white/35">No matching categories</p>
|
|
<h2 className="mt-3 text-2xl font-semibold tracking-[-0.03em] text-white">Nothing matched "{query}"</h2>
|
|
<p className="mx-auto mt-3 max-w-xl text-sm leading-7 text-white/58">
|
|
Try a shorter term or switch sorting to browse the full category directory again.
|
|
</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function ErrorState({ onRetry }) {
|
|
return (
|
|
<div className="rounded-[28px] border border-rose-400/20 bg-rose-500/8 px-6 py-14 text-center shadow-[0_30px_70px_rgba(0,0,0,0.2)]">
|
|
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-rose-200/70">Unable to load categories</p>
|
|
<h2 className="mt-3 text-2xl font-semibold tracking-[-0.03em] text-white">The directory API did not respond cleanly.</h2>
|
|
<p className="mx-auto mt-3 max-w-xl text-sm leading-7 text-white/58">
|
|
Refresh the list and try again. If this persists, the API route or cache payload needs inspection.
|
|
</p>
|
|
<button
|
|
type="button"
|
|
onClick={onRetry}
|
|
className="mt-6 inline-flex items-center justify-center rounded-full border border-rose-300/35 bg-rose-400/12 px-5 py-3 text-sm font-semibold text-rose-100 transition hover:border-rose-200/55 hover:bg-rose-400/20"
|
|
>
|
|
Retry request
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function getInitialPage() {
|
|
if (typeof window === 'undefined') {
|
|
return 1
|
|
}
|
|
|
|
const rawPage = Number(new URL(window.location.href).searchParams.get('page') || 1)
|
|
|
|
if (!Number.isFinite(rawPage) || rawPage < 1) {
|
|
return 1
|
|
}
|
|
|
|
return Math.floor(rawPage)
|
|
}
|
|
|
|
function getInitialSort() {
|
|
if (typeof window === 'undefined') {
|
|
return 'popular'
|
|
}
|
|
|
|
const sort = new URL(window.location.href).searchParams.get('sort') || 'popular'
|
|
return SORT_OPTIONS.some((option) => option.value === sort) ? sort : 'popular'
|
|
}
|
|
|
|
function getInitialSearchQuery() {
|
|
if (typeof window === 'undefined') {
|
|
return ''
|
|
}
|
|
|
|
return new URL(window.location.href).searchParams.get('q') || ''
|
|
}
|
|
|
|
function syncQueryState({ page, sort, query }) {
|
|
if (typeof window === 'undefined') {
|
|
return
|
|
}
|
|
|
|
const url = new URL(window.location.href)
|
|
|
|
if (page <= 1) {
|
|
url.searchParams.delete('page')
|
|
} else {
|
|
url.searchParams.set('page', String(page))
|
|
}
|
|
|
|
if (sort === 'popular') {
|
|
url.searchParams.delete('sort')
|
|
} else {
|
|
url.searchParams.set('sort', sort)
|
|
}
|
|
|
|
if (query.trim() === '') {
|
|
url.searchParams.delete('q')
|
|
} else {
|
|
url.searchParams.set('q', query)
|
|
}
|
|
|
|
window.history.replaceState({}, '', url.toString())
|
|
}
|
|
|
|
function CategoriesPage({ apiUrl = '/api/categories', pageTitle = 'Categories', pageDescription = '' }) {
|
|
const [categories, setCategories] = useState([])
|
|
const [popularCategories, setPopularCategories] = useState([])
|
|
const [meta, setMeta] = useState({ current_page: 1, last_page: 1, per_page: PAGE_SIZE, total: 0 })
|
|
const [summary, setSummary] = useState({ total_categories: 0, total_artworks: 0 })
|
|
const [loading, setLoading] = useState(true)
|
|
const [loadingMore, setLoadingMore] = useState(false)
|
|
const [error, setError] = useState(false)
|
|
const [searchQuery, setSearchQuery] = useState(() => getInitialSearchQuery())
|
|
const [sort, setSort] = useState(() => getInitialSort())
|
|
const [currentPage, setCurrentPage] = useState(() => getInitialPage())
|
|
const deferredQuery = useDeferredValue(searchQuery)
|
|
const sentinelRef = useRef(null)
|
|
|
|
const loadCategories = async ({ signal, page, query, activeSort, append = false }) => {
|
|
if (append) {
|
|
setLoadingMore(true)
|
|
} else {
|
|
setLoading(true)
|
|
}
|
|
|
|
setError(false)
|
|
|
|
try {
|
|
const params = new URLSearchParams({
|
|
page: String(page),
|
|
per_page: String(PAGE_SIZE),
|
|
sort: activeSort,
|
|
})
|
|
|
|
if (query.trim() !== '') {
|
|
params.set('q', query.trim())
|
|
}
|
|
|
|
const response = await fetch(`${apiUrl}?${params.toString()}`, {
|
|
headers: {
|
|
Accept: 'application/json',
|
|
'X-Requested-With': 'XMLHttpRequest',
|
|
},
|
|
credentials: 'same-origin',
|
|
signal,
|
|
})
|
|
|
|
if (!response.ok) {
|
|
throw new Error('Failed to load categories')
|
|
}
|
|
|
|
const payload = await response.json()
|
|
const nextCategories = Array.isArray(payload?.data) ? payload.data : []
|
|
|
|
setCategories((previous) => {
|
|
if (!append) {
|
|
return nextCategories
|
|
}
|
|
|
|
const seenIds = new Set(previous.map((category) => category.id))
|
|
const merged = [...previous]
|
|
|
|
nextCategories.forEach((category) => {
|
|
if (!seenIds.has(category.id)) {
|
|
merged.push(category)
|
|
}
|
|
})
|
|
|
|
return merged
|
|
})
|
|
setPopularCategories(Array.isArray(payload?.popular_categories) ? payload.popular_categories : [])
|
|
setMeta(payload?.meta || { current_page: 1, last_page: 1, per_page: PAGE_SIZE, total: 0 })
|
|
setSummary(payload?.summary || { total_categories: 0, total_artworks: 0 })
|
|
|
|
if ((payload?.meta?.current_page ?? page) !== currentPage) {
|
|
setCurrentPage(payload?.meta?.current_page ?? page)
|
|
}
|
|
} catch (requestError) {
|
|
if (requestError?.name !== 'AbortError') {
|
|
setError(true)
|
|
}
|
|
} finally {
|
|
if (!signal?.aborted || signal === undefined) {
|
|
setLoading(false)
|
|
setLoadingMore(false)
|
|
}
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
const controller = new AbortController()
|
|
|
|
void loadCategories({
|
|
signal: controller.signal,
|
|
page: currentPage,
|
|
query: deferredQuery,
|
|
activeSort: sort,
|
|
append: false,
|
|
})
|
|
|
|
return () => controller.abort()
|
|
}, [apiUrl, deferredQuery, sort])
|
|
|
|
useEffect(() => {
|
|
syncQueryState({ page: currentPage, sort, query: deferredQuery })
|
|
}, [currentPage, deferredQuery, sort])
|
|
|
|
const handlePageChange = (page) => {
|
|
setCategories([])
|
|
setCurrentPage(page)
|
|
|
|
void loadCategories({
|
|
page,
|
|
query: deferredQuery,
|
|
activeSort: sort,
|
|
append: false,
|
|
})
|
|
|
|
if (typeof window !== 'undefined') {
|
|
window.scrollTo({ top: 0, behavior: 'smooth' })
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
const sentinel = sentinelRef.current
|
|
const hasMore = meta.current_page < meta.last_page
|
|
|
|
if (!sentinel || loading || loadingMore || error || !hasMore) {
|
|
return undefined
|
|
}
|
|
|
|
const observer = new IntersectionObserver((entries) => {
|
|
const firstEntry = entries[0]
|
|
|
|
if (!firstEntry?.isIntersecting) {
|
|
return
|
|
}
|
|
|
|
const nextPage = meta.current_page + 1
|
|
setCurrentPage(nextPage)
|
|
void loadCategories({
|
|
page: nextPage,
|
|
query: deferredQuery,
|
|
activeSort: sort,
|
|
append: true,
|
|
})
|
|
}, { rootMargin: '320px 0px' })
|
|
|
|
observer.observe(sentinel)
|
|
|
|
return () => observer.disconnect()
|
|
}, [deferredQuery, error, loading, loadingMore, meta.current_page, meta.last_page, sort])
|
|
|
|
const handleRetry = () => {
|
|
void loadCategories({
|
|
page: currentPage,
|
|
query: deferredQuery,
|
|
activeSort: sort,
|
|
append: false,
|
|
})
|
|
}
|
|
|
|
const loadedCount = categories.length
|
|
const showingStart = loadedCount > 0 ? 1 : 0
|
|
const showingEnd = loadedCount
|
|
const hasMorePages = meta.current_page < meta.last_page
|
|
|
|
return (
|
|
<div className="pb-24 text-white">
|
|
<section className="relative overflow-hidden">
|
|
<div className="absolute inset-x-0 top-0 h-[28rem] bg-[radial-gradient(circle_at_top_left,rgba(34,211,238,0.12),transparent_38%),radial-gradient(circle_at_top_right,rgba(249,115,22,0.14),transparent_34%)]" />
|
|
<div className="relative w-full px-6 pb-8 pt-14 sm:px-8 sm:pt-20 xl:px-10 2xl:px-14 lg:pt-24">
|
|
<div className="grid gap-8 lg:grid-cols-[minmax(0,1.2fr)_20rem] lg:items-end">
|
|
<div>
|
|
<div className="inline-flex rounded-full border border-white/10 bg-white/[0.04] px-4 py-2 text-xs font-semibold uppercase tracking-[0.24em] text-white/50 backdrop-blur-sm">
|
|
Category directory
|
|
</div>
|
|
<h1 className="mt-5 max-w-4xl text-4xl font-semibold tracking-[-0.05em] text-white sm:text-5xl lg:text-6xl">
|
|
{pageTitle}
|
|
</h1>
|
|
<p className="mt-5 max-w-2xl text-base leading-8 text-white/62 sm:text-lg">
|
|
{pageDescription || 'Browse all wallpapers, skins, themes and digital art categories'}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid gap-4 sm:grid-cols-3 lg:grid-cols-1">
|
|
<div className="rounded-[24px] border border-white/10 bg-black/22 p-5 backdrop-blur-md shadow-[0_24px_60px_rgba(0,0,0,0.24)]">
|
|
<p className="text-xs font-semibold uppercase tracking-[0.2em] text-white/40">Categories</p>
|
|
<p className="mt-3 text-3xl font-semibold tracking-[-0.04em] text-white">{numberFormatter.format(summary.total_categories)}</p>
|
|
</div>
|
|
<div className="rounded-[24px] border border-white/10 bg-black/22 p-5 backdrop-blur-md shadow-[0_24px_60px_rgba(0,0,0,0.24)]">
|
|
<p className="text-xs font-semibold uppercase tracking-[0.2em] text-white/40">Artworks indexed</p>
|
|
<p className="mt-3 text-3xl font-semibold tracking-[-0.04em] text-white">{numberFormatter.format(summary.total_artworks)}</p>
|
|
</div>
|
|
<div className="rounded-[24px] border border-white/10 bg-black/22 p-5 backdrop-blur-md shadow-[0_24px_60px_rgba(0,0,0,0.24)]">
|
|
<p className="text-xs font-semibold uppercase tracking-[0.2em] text-white/40">View</p>
|
|
<p className="mt-3 text-3xl font-semibold tracking-[-0.04em] text-white">Grid</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-10 rounded-[30px] border border-white/10 bg-black/25 p-4 shadow-[0_30px_80px_rgba(0,0,0,0.25)] backdrop-blur-xl sm:p-5">
|
|
<div className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_16rem] lg:items-center">
|
|
<label className="relative block">
|
|
<span className="pointer-events-none absolute left-4 top-1/2 -translate-y-1/2 text-white/35">
|
|
<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" className="h-5 w-5">
|
|
<path fillRule="evenodd" d="M8.5 3a5.5 5.5 0 1 0 3.473 9.765l3.63 3.63a.75.75 0 1 0 1.06-1.06l-3.63-3.63A5.5 5.5 0 0 0 8.5 3Zm-4 5.5a4 4 0 1 1 8 0 4 4 0 0 1-8 0Z" clipRule="evenodd" />
|
|
</svg>
|
|
</span>
|
|
<input
|
|
type="search"
|
|
value={searchQuery}
|
|
onChange={(event) => {
|
|
const value = event.target.value
|
|
startTransition(() => {
|
|
setSearchQuery(value)
|
|
setCurrentPage(1)
|
|
})
|
|
}}
|
|
placeholder="Search categories"
|
|
aria-label="Search categories"
|
|
className="h-14 w-full rounded-2xl border border-white/10 bg-white/[0.04] pl-12 pr-4 text-sm text-white placeholder:text-white/28 focus:border-cyan-300/45 focus:outline-none focus:ring-2 focus:ring-cyan-300/15"
|
|
/>
|
|
</label>
|
|
|
|
<label className="block">
|
|
<span className="mb-2 block text-xs font-semibold uppercase tracking-[0.2em] text-white/38">Sort by</span>
|
|
<select
|
|
value={sort}
|
|
onChange={(event) => {
|
|
setSort(event.target.value)
|
|
setCurrentPage(1)
|
|
}}
|
|
aria-label="Sort categories"
|
|
className="h-14 w-full rounded-2xl border border-white/10 bg-white/[0.04] px-4 text-sm text-white focus:border-orange-300/45 focus:outline-none focus:ring-2 focus:ring-orange-300/12"
|
|
>
|
|
{SORT_OPTIONS.map((option) => (
|
|
<option key={option.value} value={option.value} className="bg-slate-950 text-white">
|
|
{option.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="w-full px-6 sm:px-8 xl:px-10 2xl:px-14">
|
|
{!loading && !error && deferredQuery.trim() === '' && popularCategories.length > 0 && (
|
|
<div className="mb-10 rounded-[28px] border border-white/10 bg-white/[0.03] p-5 shadow-[0_24px_60px_rgba(0,0,0,0.18)] backdrop-blur-sm">
|
|
<div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
|
|
<div>
|
|
<p className="text-xs font-semibold uppercase tracking-[0.22em] text-white/38">Popular categories</p>
|
|
<h2 className="mt-2 text-2xl font-semibold tracking-[-0.04em] text-white">Start with the busiest destinations</h2>
|
|
</div>
|
|
<div className="flex flex-wrap gap-3">
|
|
{popularCategories.map((category) => (
|
|
<a
|
|
key={category.id}
|
|
href={category.url}
|
|
className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-black/20 px-4 py-2 text-sm text-white/72 transition hover:border-white/20 hover:bg-white/[0.05] hover:text-white"
|
|
>
|
|
<span>{category.name}</span>
|
|
<span className="text-white/38">{numberFormatter.format(category.artwork_count)}</span>
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="mb-6 flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
|
|
<div>
|
|
<p className="text-xs font-semibold uppercase tracking-[0.22em] text-white/38">Directory results</p>
|
|
<h2 className="mt-2 text-2xl font-semibold tracking-[-0.04em] text-white">
|
|
{numberFormatter.format(meta.total)} categories visible
|
|
</h2>
|
|
</div>
|
|
{!loading && !error && meta.total > 0 ? (
|
|
<p className="text-sm text-white/52">
|
|
Showing {numberFormatter.format(showingStart)} to {numberFormatter.format(showingEnd)} of {numberFormatter.format(meta.total)} categories.
|
|
</p>
|
|
) : (
|
|
<p className="text-sm text-white/52">
|
|
Browse all wallpapers, skins, themes and digital art categories.
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
{loading && <LoadingGrid />}
|
|
{!loading && error && <ErrorState onRetry={handleRetry} />}
|
|
{!loading && !error && meta.total === 0 && <EmptyState query={deferredQuery} />}
|
|
|
|
{!loading && !error && meta.total > 0 && (
|
|
<>
|
|
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
|
|
{categories.map((category, index) => (
|
|
<CategoryCard key={category.id} category={category} index={index} />
|
|
))}
|
|
</div>
|
|
|
|
<div ref={sentinelRef} className="h-6 w-full" aria-hidden="true" />
|
|
|
|
{loadingMore && (
|
|
<div className="mt-6 flex items-center justify-center gap-3 rounded-2xl border border-white/8 bg-black/18 px-4 py-4 text-sm text-white/56 backdrop-blur-sm">
|
|
<span className="h-2.5 w-2.5 animate-pulse rounded-full bg-cyan-300" />
|
|
Loading more categories
|
|
</div>
|
|
)}
|
|
|
|
<div className="mt-10 flex flex-col items-center justify-center gap-3 rounded-[24px] border border-white/8 bg-black/18 px-4 py-5 backdrop-blur-sm">
|
|
<p className="text-sm text-white/46">
|
|
Loaded through page {numberFormatter.format(meta.current_page)} of {numberFormatter.format(meta.last_page)}
|
|
</p>
|
|
<Pagination meta={meta} onPageChange={handlePageChange} />
|
|
{hasMorePages && (
|
|
<p className="text-xs uppercase tracking-[0.2em] text-white/28">
|
|
Scroll to load the next page automatically
|
|
</p>
|
|
)}
|
|
</div>
|
|
</>
|
|
)}
|
|
</section>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const mountElement = document.getElementById('categories-page-root')
|
|
|
|
if (mountElement) {
|
|
let props = {}
|
|
|
|
try {
|
|
const propsElement = document.getElementById('categories-page-props')
|
|
props = propsElement ? JSON.parse(propsElement.textContent || '{}') : {}
|
|
} catch {
|
|
props = {}
|
|
}
|
|
|
|
createRoot(mountElement).render(<CategoriesPage {...props} />)
|
|
}
|
|
|
|
export default CategoriesPage
|