317 lines
11 KiB
TypeScript
317 lines
11 KiB
TypeScript
import { useQuery, useSuspenseQuery } from '@tanstack/react-query'
|
|
import { createFileRoute, Link } from '@tanstack/react-router'
|
|
import { Check, Filter, FilterX, LayoutGrid, List, Loader2, Search, SmilePlus, X } from 'lucide-react'
|
|
import { useEffect, useState } from 'react'
|
|
import { Helmet } from 'react-helmet-async'
|
|
|
|
import { Pagination } from '~/components/pagination'
|
|
import { Alert, AlertDescription, AlertTitle } from '~/components/ui/alert'
|
|
import { Button } from '~/components/ui/button'
|
|
import { Card, CardContent } from '~/components/ui/card'
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from '~/components/ui/dropdown-menu'
|
|
import { Input } from '~/components/ui/input'
|
|
import { Skeleton } from '~/components/ui/skeleton'
|
|
|
|
import { useDebouncedCallback } from '~/hooks/use-debounced-callback'
|
|
import { useLocalStorage } from '~/hooks/use-local-storage'
|
|
import { assetUrl } from '~/lib/directus'
|
|
import { categoriesQuery, vendorsListQuery } from '~/lib/queries'
|
|
import { cn } from '~/lib/utils'
|
|
|
|
type Search = {
|
|
page?: number
|
|
q?: string
|
|
category?: string
|
|
}
|
|
|
|
export const Route = createFileRoute('/vendors/')({
|
|
validateSearch: (search: Record<string, unknown>): Search => ({
|
|
page: search.page ? Number(search.page) : undefined,
|
|
q: typeof search.q === 'string' ? search.q : undefined,
|
|
category: typeof search.category === 'string' ? search.category : undefined,
|
|
}),
|
|
loaderDeps: ({ search }) => search,
|
|
loader: async ({ context: { queryClient } }) => {
|
|
await queryClient.ensureQueryData(categoriesQuery)
|
|
},
|
|
component: VendorsPage,
|
|
})
|
|
|
|
type Layout = 'GRID' | 'LIST'
|
|
|
|
function truncateDescription(desc: string | null | undefined): string {
|
|
if (!desc) return ''
|
|
const head = desc.substring(0, 80)
|
|
const end = head.lastIndexOf(' ')
|
|
return desc.substring(0, end > 0 ? end : head.length) + ' …'
|
|
}
|
|
|
|
function VendorsPage() {
|
|
const { page = 1, q = '', category = '' } = Route.useSearch()
|
|
const navigate = Route.useNavigate()
|
|
|
|
const { data: categories } = useSuspenseQuery(categoriesQuery)
|
|
|
|
const [perPage, setPerPage] = useLocalStorage<number>('perPage', 12)
|
|
const [layout, setLayout] = useLocalStorage<Layout>('layout', 'GRID')
|
|
|
|
const [searchInput, setSearchInput] = useState(q)
|
|
useEffect(() => {
|
|
setSearchInput(q)
|
|
}, [q])
|
|
|
|
const pushSearch = useDebouncedCallback((value: string) => {
|
|
navigate({ search: (s) => ({ ...s, q: value || undefined, page: undefined }) })
|
|
}, 500)
|
|
|
|
const {
|
|
data: response,
|
|
error,
|
|
isFetching,
|
|
} = useQuery(vendorsListQuery({ page, perPage, search: q, category }))
|
|
|
|
const vendors = response?.data ?? []
|
|
const filterCount = response?.meta?.filter_count ?? 0
|
|
const lastPage = Math.max(1, Math.ceil(filterCount / perPage))
|
|
|
|
useEffect(() => {
|
|
if (response && page > lastPage) {
|
|
navigate({ search: (s) => ({ ...s, page: lastPage }), replace: true })
|
|
}
|
|
}, [response, page, lastPage, navigate])
|
|
|
|
const isEmpty = !isFetching && filterCount === 0
|
|
|
|
return (
|
|
<section>
|
|
<Helmet>
|
|
<title>Vendors</title>
|
|
</Helmet>
|
|
|
|
<div className="mb-5 flex flex-col items-stretch gap-4 md:flex-row md:items-center md:justify-between">
|
|
<h1 className="text-2xl font-bold">Vendors</h1>
|
|
<div className="flex h-9 items-center justify-center">
|
|
{isFetching && <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />}
|
|
</div>
|
|
<div className="flex flex-wrap items-center gap-3">
|
|
<div className="relative">
|
|
<Search className="pointer-events-none absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
|
<Input
|
|
className="pl-9 pr-9"
|
|
placeholder="Search vendors"
|
|
value={searchInput}
|
|
onChange={(e) => {
|
|
const v = e.target.value.toLowerCase()
|
|
setSearchInput(v)
|
|
pushSearch(v)
|
|
}}
|
|
/>
|
|
{searchInput && (
|
|
<button
|
|
type="button"
|
|
aria-label="Clear search"
|
|
onClick={() => {
|
|
setSearchInput('')
|
|
pushSearch('')
|
|
}}
|
|
className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
|
|
>
|
|
<X className="h-4 w-4" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="outline" size="icon" aria-label="Filter by category">
|
|
{category ? <FilterX /> : <Filter />}
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
{categories.map((cat) => (
|
|
<DropdownMenuItem
|
|
key={cat.slug}
|
|
disabled={category === cat.slug}
|
|
onSelect={() =>
|
|
navigate({ search: (s) => ({ ...s, category: cat.slug, page: undefined }) })
|
|
}
|
|
>
|
|
{category === cat.slug && <Check className="h-4 w-4" />}
|
|
{cat.name}
|
|
</DropdownMenuItem>
|
|
))}
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem
|
|
onSelect={() => navigate({ search: (s) => ({ ...s, category: undefined, page: undefined }) })}
|
|
>
|
|
Clear
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
|
|
<div className="inline-flex rounded-md border">
|
|
<Button
|
|
variant={layout === 'GRID' ? 'secondary' : 'ghost'}
|
|
size="icon"
|
|
className="rounded-r-none"
|
|
onClick={() => setLayout('GRID')}
|
|
aria-label="Grid layout"
|
|
disabled={layout === 'GRID'}
|
|
>
|
|
<LayoutGrid />
|
|
</Button>
|
|
<Button
|
|
variant={layout === 'LIST' ? 'secondary' : 'ghost'}
|
|
size="icon"
|
|
className="rounded-l-none border-l"
|
|
onClick={() => setLayout('LIST')}
|
|
aria-label="List layout"
|
|
disabled={layout === 'LIST'}
|
|
>
|
|
<List />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{error && (
|
|
<Alert variant="destructive" className="my-3">
|
|
<AlertDescription>There was an error processing your request</AlertDescription>
|
|
</Alert>
|
|
)}
|
|
|
|
{layout === 'GRID' ? (
|
|
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
|
|
{isFetching && !response
|
|
? Array.from({ length: perPage }).map((_, k) => (
|
|
<Card key={k}>
|
|
<Skeleton className="h-40 rounded-none" />
|
|
<CardContent className="pt-4">
|
|
<Skeleton className="mb-2 h-6" />
|
|
<Skeleton className="mb-1 h-4" />
|
|
<Skeleton className="h-4" />
|
|
</CardContent>
|
|
</Card>
|
|
))
|
|
: vendors.map((v) => (
|
|
<Card key={v.id} className="group relative hover:border-primary/40">
|
|
<img
|
|
src={assetUrl(v.logo, 'logo-card')}
|
|
alt={v.name}
|
|
width={250}
|
|
height={150}
|
|
className="h-40 w-full rounded-t-lg bg-white object-contain"
|
|
/>
|
|
<CardContent className="pt-4">
|
|
<Link
|
|
to="/vendors/$slug"
|
|
params={{ slug: v.slug }}
|
|
className="mb-2 block text-base font-extrabold after:absolute after:inset-0"
|
|
>
|
|
{v.name}
|
|
</Link>
|
|
<p className="text-sm text-muted-foreground">{truncateDescription(v.description)}</p>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="overflow-hidden rounded-md border">
|
|
<table className="w-full caption-bottom text-sm">
|
|
<tbody>
|
|
{isFetching && !response
|
|
? Array.from({ length: perPage }).map((_, k) => (
|
|
<tr key={k} className="border-b">
|
|
<td className="w-[10%] p-3">
|
|
<Skeleton className="h-12 w-12" />
|
|
</td>
|
|
<td className="w-[30%] p-3">
|
|
<Skeleton className="h-6" />
|
|
</td>
|
|
<td className="w-[60%] p-3">
|
|
<Skeleton className="h-6" />
|
|
</td>
|
|
</tr>
|
|
))
|
|
: vendors.map((v) => (
|
|
<tr key={v.id} className="border-b last:border-0 hover:bg-accent/50">
|
|
<td className="w-[10%] p-3 align-middle">
|
|
<img
|
|
src={assetUrl(v.logo, 'logo-card')}
|
|
alt={v.name}
|
|
className="h-12 w-12 rounded-md bg-white object-contain"
|
|
/>
|
|
</td>
|
|
<td className="w-[30%] p-3 align-middle font-medium">
|
|
<Link to="/vendors/$slug" params={{ slug: v.slug }} className="hover:underline">
|
|
{v.name}
|
|
</Link>
|
|
</td>
|
|
<td className="w-[60%] p-3 align-middle text-muted-foreground">
|
|
{truncateDescription(v.description)}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
|
|
{isEmpty && (
|
|
<Alert variant="info" className={cn('my-3 rounded-md py-10')}>
|
|
<div className="flex flex-col items-center gap-2 text-center">
|
|
<SmilePlus className="h-8 w-8" />
|
|
<AlertTitle className="mt-4 text-lg">No results found.</AlertTitle>
|
|
<AlertDescription className="max-w-sm">
|
|
Try refining your search term and filters …
|
|
</AlertDescription>
|
|
</div>
|
|
</Alert>
|
|
)}
|
|
|
|
{filterCount > perPage && (
|
|
<>
|
|
<Pagination
|
|
page={page}
|
|
itemsPerPage={perPage}
|
|
totalItems={filterCount}
|
|
buildSearch={(p) => ({
|
|
q: q || undefined,
|
|
category: category || undefined,
|
|
page: p,
|
|
})}
|
|
/>
|
|
<div className="mt-5 flex items-center justify-center gap-2">
|
|
<span className="text-sm">Results per page:</span>
|
|
<div className="inline-flex rounded-md border">
|
|
{[12, 24, 48].map((n, i) => (
|
|
<Button
|
|
key={n}
|
|
variant={perPage === n ? 'secondary' : 'ghost'}
|
|
size="sm"
|
|
disabled={perPage === n}
|
|
onClick={() => setPerPage(n)}
|
|
className={cn(
|
|
'rounded-none',
|
|
i === 0 && 'rounded-l-md',
|
|
i === 2 && 'rounded-r-md',
|
|
i > 0 && 'border-l',
|
|
)}
|
|
>
|
|
{n}
|
|
</Button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
</section>
|
|
)
|
|
}
|