Release 2025-05-19
This commit is contained in:
pluja
@@ -1,700 +0,0 @@
|
||||
---
|
||||
import { ServiceVisibility } from '@prisma/client'
|
||||
import { z } from 'astro:schema'
|
||||
import { groupBy, orderBy } from 'lodash-es'
|
||||
import seedrandom from 'seedrandom'
|
||||
|
||||
import Button from '../components/Button.astro'
|
||||
import Pagination from '../components/Pagination.astro'
|
||||
import ServiceFiltersPill from '../components/ServiceFiltersPill.astro'
|
||||
import ServicesFilters from '../components/ServicesFilters.astro'
|
||||
import ServicesSearchResults from '../components/ServicesSearchResults.astro'
|
||||
import {
|
||||
currencies,
|
||||
currenciesZodEnumBySlug,
|
||||
currencySlugToId,
|
||||
getCurrencyInfo,
|
||||
} from '../constants/currencies'
|
||||
import { getNetworkInfo, networks } from '../constants/networks'
|
||||
import {
|
||||
getVerificationStatusInfo,
|
||||
verificationStatuses,
|
||||
verificationStatusesZodEnumBySlug,
|
||||
verificationStatusSlugToId,
|
||||
} from '../constants/verificationStatus'
|
||||
import BaseLayout from '../layouts/BaseLayout.astro'
|
||||
import { areEqualArraysWithoutOrder, zodEnumFromConstant } from '../lib/arrays'
|
||||
import { parseIntWithFallback } from '../lib/numbers'
|
||||
import { zodParseQueryParamsStoringErrors } from '../lib/parseUrlFilters'
|
||||
import { prisma } from '../lib/prisma'
|
||||
import { makeSortSeed } from '../lib/sortSeed'
|
||||
import { transformCase } from '../lib/strings'
|
||||
|
||||
import type { AttributeType, Prisma } from '@prisma/client'
|
||||
|
||||
const MIN_CATEGORIES_TO_SHOW = 8
|
||||
const MIN_ATTRIBUTES_TO_SHOW = 8
|
||||
|
||||
const PAGE_SIZE = 30
|
||||
|
||||
const sortOptions = [
|
||||
{
|
||||
value: 'score-desc',
|
||||
label: 'Score (High → Low)',
|
||||
orderBy: {
|
||||
key: 'overallScore',
|
||||
direction: 'desc',
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 'score-asc',
|
||||
label: 'Score (Low → High)',
|
||||
orderBy: {
|
||||
key: 'overallScore',
|
||||
direction: 'asc',
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 'name-asc',
|
||||
label: 'Name (A → Z)',
|
||||
orderBy: {
|
||||
key: 'name',
|
||||
direction: 'asc',
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 'name-desc',
|
||||
label: 'Name (Z → A)',
|
||||
orderBy: {
|
||||
key: 'name',
|
||||
direction: 'desc',
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 'recent',
|
||||
label: 'Date listed (New → Old)',
|
||||
orderBy: {
|
||||
key: 'listedAt',
|
||||
direction: 'desc',
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 'oldest',
|
||||
label: 'Date listed (Old → New)',
|
||||
orderBy: {
|
||||
key: 'listedAt',
|
||||
direction: 'asc',
|
||||
},
|
||||
},
|
||||
] as const satisfies {
|
||||
value: string
|
||||
label: string
|
||||
orderBy: {
|
||||
key: keyof Prisma.ServiceSelect
|
||||
direction: 'asc' | 'desc'
|
||||
}
|
||||
}[]
|
||||
|
||||
const defaultSortOption = sortOptions[0]
|
||||
|
||||
const modeOptions = [
|
||||
{
|
||||
value: 'or',
|
||||
label: 'OR',
|
||||
},
|
||||
{
|
||||
value: 'and',
|
||||
label: 'AND',
|
||||
},
|
||||
] as const satisfies {
|
||||
value: string
|
||||
label: string
|
||||
}[]
|
||||
|
||||
const attributeOptions = [
|
||||
{
|
||||
value: 'yes',
|
||||
prefix: 'Has',
|
||||
},
|
||||
{
|
||||
value: 'no',
|
||||
prefix: 'Not',
|
||||
},
|
||||
{
|
||||
value: '',
|
||||
prefix: '',
|
||||
},
|
||||
] as const satisfies {
|
||||
value: string
|
||||
prefix: string
|
||||
}[]
|
||||
|
||||
const {
|
||||
data: filters,
|
||||
hasDefaultData: hasDefaultFilters,
|
||||
redirectUrl,
|
||||
} = zodParseQueryParamsStoringErrors(
|
||||
{
|
||||
categories: z.array(z.string()),
|
||||
verification: z
|
||||
.array(verificationStatusesZodEnumBySlug.transform((slug) => verificationStatusSlugToId(slug)))
|
||||
.default(
|
||||
verificationStatuses
|
||||
.filter((verification) => verification.default)
|
||||
.map((verification) => verification.slug)
|
||||
),
|
||||
'min-score': z.coerce.number().default(0),
|
||||
'user-rating': z.coerce.number().int().min(0).max(5).default(0),
|
||||
q: z.string().default(''),
|
||||
currencies: z.array(currenciesZodEnumBySlug.transform((slug) => currencySlugToId(slug))),
|
||||
'currency-mode': zodEnumFromConstant(modeOptions, 'value').default('or'),
|
||||
'attribute-mode': zodEnumFromConstant(modeOptions, 'value').default('or'),
|
||||
sort: zodEnumFromConstant(sortOptions, 'value').default(defaultSortOption.value),
|
||||
'sort-seed': z
|
||||
.string()
|
||||
.transform((seed) => (Astro.url.searchParams.has('page') ? seed : makeSortSeed()))
|
||||
.default(makeSortSeed()),
|
||||
'max-kyc': z.coerce.number().int().min(0).max(4).default(4),
|
||||
networks: z.array(zodEnumFromConstant(networks, 'slug')),
|
||||
attr: z
|
||||
.record(z.coerce.number().int().positive(), zodEnumFromConstant(attributeOptions, 'value'))
|
||||
.optional(),
|
||||
page: z.coerce.number().int().min(1).default(1),
|
||||
},
|
||||
Astro,
|
||||
{
|
||||
ignoredKeysForDefaultData: ['sort-seed'],
|
||||
cleanUrl: {
|
||||
removeUneededObjectParams: true,
|
||||
removeParams: {
|
||||
verification: { if: 'default' },
|
||||
q: { if: 'default' },
|
||||
sort: { if: 'default' },
|
||||
'currency-mode': { if: 'another-is-unset', prop: 'currencies' },
|
||||
'attribute-mode': { if: 'another-is-unset', prop: 'attr' },
|
||||
'min-score': { if: 'default' },
|
||||
'user-rating': { if: 'default' },
|
||||
'max-kyc': { if: 'default' },
|
||||
},
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
if (redirectUrl) return Astro.redirect(redirectUrl.toString())
|
||||
|
||||
export type ServicesFiltersObject = typeof filters
|
||||
|
||||
const [categories, [services, totalServices, hadToIncludeCommunityContributed]] =
|
||||
await Astro.locals.banners.tryMany([
|
||||
[
|
||||
'Unable to load category filters.',
|
||||
() =>
|
||||
prisma.category.findMany({
|
||||
select: {
|
||||
name: true,
|
||||
slug: true,
|
||||
icon: true,
|
||||
_count: {
|
||||
select: {
|
||||
services: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
],
|
||||
[
|
||||
'Unable to load services.',
|
||||
async () => {
|
||||
const groupedAttributes = groupBy(
|
||||
Object.entries(filters.attr ?? {}).flatMap(([key, value]) => {
|
||||
const id = parseIntWithFallback(key)
|
||||
if (id === null) return []
|
||||
return [{ id, value }]
|
||||
}),
|
||||
'value'
|
||||
)
|
||||
const where = {
|
||||
listedAt: {
|
||||
lte: new Date(),
|
||||
},
|
||||
categories: filters.categories.length ? { some: { slug: { in: filters.categories } } } : undefined,
|
||||
verificationStatus: {
|
||||
in: filters.verification,
|
||||
},
|
||||
serviceVisibility: ServiceVisibility.PUBLIC,
|
||||
overallScore: { gte: filters['min-score'] },
|
||||
acceptedCurrencies: filters.currencies.length
|
||||
? filters['currency-mode'] === 'and'
|
||||
? { hasEvery: filters.currencies }
|
||||
: { hasSome: filters.currencies }
|
||||
: undefined,
|
||||
kycLevel: {
|
||||
lte: filters['max-kyc'],
|
||||
},
|
||||
AND: [
|
||||
...(filters['user-rating'] > 0
|
||||
? [
|
||||
{
|
||||
averageUserRating: {
|
||||
gte: filters['user-rating'],
|
||||
},
|
||||
} satisfies Prisma.ServiceWhereInput,
|
||||
]
|
||||
: []),
|
||||
...(filters.q
|
||||
? [
|
||||
{
|
||||
OR: [
|
||||
{ name: { contains: filters.q, mode: 'insensitive' as const } },
|
||||
{ description: { contains: filters.q, mode: 'insensitive' as const } },
|
||||
],
|
||||
} satisfies Prisma.ServiceWhereInput,
|
||||
]
|
||||
: []),
|
||||
...(filters.networks.length
|
||||
? [
|
||||
{
|
||||
OR: [
|
||||
...(filters.networks.includes('onion') ? [{ onionUrls: { isEmpty: false } }] : []),
|
||||
...(filters.networks.includes('i2p') ? [{ i2pUrls: { isEmpty: false } }] : []),
|
||||
...(filters.networks.includes('clearnet') ? [{ serviceUrls: { isEmpty: false } }] : []),
|
||||
],
|
||||
} satisfies Prisma.ServiceWhereInput,
|
||||
]
|
||||
: []),
|
||||
...(filters.attr && (groupedAttributes.yes?.length ?? 0) + (groupedAttributes.no?.length ?? 0) > 0
|
||||
? [
|
||||
{
|
||||
AND: [
|
||||
...(groupedAttributes.yes && groupedAttributes.yes.length > 0
|
||||
? [
|
||||
{
|
||||
[filters['attribute-mode'] === 'and' ? 'AND' : 'OR']: groupedAttributes.yes.map(
|
||||
({ id }) =>
|
||||
({
|
||||
attributes: {
|
||||
some: {
|
||||
attribute: {
|
||||
id,
|
||||
},
|
||||
},
|
||||
},
|
||||
}) satisfies Prisma.ServiceWhereInput
|
||||
),
|
||||
},
|
||||
]
|
||||
: []),
|
||||
...(groupedAttributes.no && groupedAttributes.no.length > 0
|
||||
? [
|
||||
{
|
||||
[filters['attribute-mode'] === 'and' ? 'AND' : 'OR']: groupedAttributes.no.map(
|
||||
({ id }) =>
|
||||
({
|
||||
attributes: {
|
||||
none: {
|
||||
attribute: {
|
||||
id,
|
||||
},
|
||||
},
|
||||
},
|
||||
}) satisfies Prisma.ServiceWhereInput
|
||||
),
|
||||
},
|
||||
]
|
||||
: []),
|
||||
],
|
||||
},
|
||||
]
|
||||
: []),
|
||||
],
|
||||
} as const satisfies Prisma.ServiceWhereInput
|
||||
|
||||
const select = {
|
||||
id: true,
|
||||
...(Object.fromEntries(sortOptions.map((option) => [option.orderBy.key, true])) as Record<
|
||||
(typeof sortOptions)[number]['orderBy']['key'],
|
||||
true
|
||||
>),
|
||||
} as const satisfies Prisma.ServiceSelect
|
||||
|
||||
let [unsortedServices, totalServices] = await prisma.service.findManyAndCount({
|
||||
where,
|
||||
select,
|
||||
})
|
||||
let hadToIncludeCommunityContributed = false
|
||||
|
||||
if (totalServices === 0 && !where.verificationStatus.in.includes('COMMUNITY_CONTRIBUTED')) {
|
||||
const [unsortedServiceCommunityServices, totalCommunityServices] =
|
||||
await prisma.service.findManyAndCount({
|
||||
where: {
|
||||
...where,
|
||||
verificationStatus: {
|
||||
...where.verificationStatus,
|
||||
in: [...where.verificationStatus.in, 'COMMUNITY_CONTRIBUTED'],
|
||||
},
|
||||
},
|
||||
select,
|
||||
})
|
||||
|
||||
if (totalCommunityServices !== 0) {
|
||||
hadToIncludeCommunityContributed = true
|
||||
unsortedServices = unsortedServiceCommunityServices
|
||||
totalServices = totalCommunityServices
|
||||
}
|
||||
}
|
||||
|
||||
const rng = seedrandom(filters['sort-seed'])
|
||||
const selectedSort = sortOptions.find((sort) => sort.value === filters.sort) ?? defaultSortOption
|
||||
|
||||
const sortedServices = orderBy(
|
||||
unsortedServices,
|
||||
[selectedSort.orderBy.key, () => rng()],
|
||||
[selectedSort.orderBy.direction, 'asc']
|
||||
).slice((filters.page - 1) * PAGE_SIZE, filters.page * PAGE_SIZE)
|
||||
|
||||
const unsortedServicesWithInfo = await prisma.service.findMany({
|
||||
where: {
|
||||
id: {
|
||||
in: sortedServices.map((service) => service.id),
|
||||
},
|
||||
},
|
||||
select: {
|
||||
name: true,
|
||||
slug: true,
|
||||
description: true,
|
||||
overallScore: true,
|
||||
privacyScore: true,
|
||||
trustScore: true,
|
||||
kycLevel: true,
|
||||
imageUrl: true,
|
||||
verificationStatus: true,
|
||||
acceptedCurrencies: true,
|
||||
attributes: {
|
||||
select: {
|
||||
attribute: {
|
||||
select: {
|
||||
id: true,
|
||||
slug: true,
|
||||
title: true,
|
||||
category: true,
|
||||
type: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
categories: {
|
||||
select: {
|
||||
name: true,
|
||||
icon: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
const sortedServicesWithInfo = orderBy(
|
||||
unsortedServicesWithInfo,
|
||||
[
|
||||
selectedSort.orderBy.key,
|
||||
// Now we can shuffle indeternimistically, because the pagination was already applied
|
||||
() => Math.random(),
|
||||
],
|
||||
[selectedSort.orderBy.direction, 'asc']
|
||||
)
|
||||
|
||||
return [sortedServicesWithInfo, totalServices, hadToIncludeCommunityContributed] as const
|
||||
},
|
||||
[[] as [], 0, false] as const,
|
||||
],
|
||||
])
|
||||
|
||||
const attributeIcons = {
|
||||
GOOD: {
|
||||
icon: 'ri:check-line',
|
||||
iconClass: 'text-green-400',
|
||||
},
|
||||
BAD: {
|
||||
icon: 'ri:close-line',
|
||||
iconClass: 'text-red-400',
|
||||
},
|
||||
WARNING: {
|
||||
icon: 'ri:alert-line',
|
||||
iconClass: 'text-yellow-400',
|
||||
},
|
||||
INFO: {
|
||||
icon: 'ri:information-line',
|
||||
iconClass: 'text-blue-400',
|
||||
},
|
||||
} as const satisfies Record<AttributeType, { icon: string; iconClass: string }>
|
||||
|
||||
const attributes = await Astro.locals.banners.try(
|
||||
'Unable to load attribute filters.',
|
||||
() =>
|
||||
prisma.attribute.findMany({
|
||||
select: {
|
||||
id: true,
|
||||
slug: true,
|
||||
title: true,
|
||||
category: true,
|
||||
type: true,
|
||||
_count: {
|
||||
select: {
|
||||
services: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
orderBy: [{ category: 'asc' }, { type: 'asc' }, { title: 'asc' }],
|
||||
}),
|
||||
[]
|
||||
)
|
||||
|
||||
const attributesByCategory = orderBy(
|
||||
Object.entries(
|
||||
groupBy(
|
||||
attributes.map((attr) => ({
|
||||
...attr,
|
||||
...attributeIcons[attr.type],
|
||||
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
|
||||
value: filters.attr?.[attr.id] || undefined,
|
||||
})),
|
||||
'category'
|
||||
)
|
||||
).map(([category, attributes]) => ({
|
||||
category,
|
||||
attributes: orderBy(
|
||||
attributes,
|
||||
['value', 'type', '_count.services', 'title'],
|
||||
['asc', 'asc', 'desc', 'asc']
|
||||
).map((attr, i) => ({
|
||||
...attr,
|
||||
showAlways: i < MIN_ATTRIBUTES_TO_SHOW || attr.value !== undefined,
|
||||
})),
|
||||
})),
|
||||
['category'],
|
||||
['asc']
|
||||
)
|
||||
|
||||
const categoriesSorted = orderBy(
|
||||
categories?.map((category) => {
|
||||
const checked = filters.categories.includes(category.slug)
|
||||
|
||||
return {
|
||||
...category,
|
||||
checked,
|
||||
}
|
||||
}),
|
||||
['checked', '_count.services', 'name'],
|
||||
['desc', 'desc', 'asc']
|
||||
).map((category, i) => ({
|
||||
...category,
|
||||
showAlways: i < MIN_CATEGORIES_TO_SHOW || category.checked,
|
||||
}))
|
||||
|
||||
const filtersOptions = {
|
||||
currencies,
|
||||
categories: categoriesSorted,
|
||||
sort: sortOptions,
|
||||
modeOptions,
|
||||
network: networks,
|
||||
verification: verificationStatuses,
|
||||
attributesByCategory,
|
||||
} as const
|
||||
|
||||
export type ServicesFiltersOptions = typeof filtersOptions
|
||||
|
||||
//
|
||||
---
|
||||
|
||||
<BaseLayout
|
||||
pageTitle="Find KYC-free Services"
|
||||
description="Find services that don't require KYC (Know Your Customer) verification for better privacy and control over your data."
|
||||
widthClassName="max-w-none"
|
||||
htmx
|
||||
showSplashText
|
||||
breadcrumbs={[
|
||||
{
|
||||
name: 'Services',
|
||||
url: '/',
|
||||
},
|
||||
]}
|
||||
>
|
||||
<div class="flex flex-col gap-4 sm:flex-row sm:gap-8">
|
||||
<div class="flex items-stretch sm:hidden">
|
||||
{
|
||||
!hasDefaultFilters ? (
|
||||
<div class="-ml-4 flex flex-1 items-center gap-2 overflow-x-auto mask-r-from-[calc(100%-var(--spacing)*16)] pr-12 pl-4">
|
||||
{filters.q && (
|
||||
<ServiceFiltersPill text={`"${filters.q}"`} searchParamName="q" searchParamValue={filters.q} />
|
||||
)}
|
||||
|
||||
{!areEqualArraysWithoutOrder(
|
||||
filters.verification,
|
||||
filtersOptions.verification
|
||||
.filter((verification) => verification.default)
|
||||
.map((verification) => verification.value)
|
||||
) &&
|
||||
filters.verification.map((verificationStatus) => {
|
||||
const verificationStatusInfo = getVerificationStatusInfo(verificationStatus)
|
||||
|
||||
return (
|
||||
<ServiceFiltersPill
|
||||
text={verificationStatusInfo.label}
|
||||
icon={verificationStatusInfo.icon}
|
||||
iconClass={verificationStatusInfo.classNames.icon}
|
||||
searchParamName="verification"
|
||||
searchParamValue={verificationStatusInfo.slug}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
|
||||
{filters.categories.map((categorySlug) => {
|
||||
const category = categories?.find((c) => c.slug === categorySlug)
|
||||
if (!category) return null
|
||||
|
||||
return (
|
||||
<ServiceFiltersPill
|
||||
text={category.name}
|
||||
icon={category.icon}
|
||||
searchParamName="categories"
|
||||
searchParamValue={categorySlug}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
{filters.currencies.map((currencyId) => {
|
||||
const currency = getCurrencyInfo(currencyId)
|
||||
|
||||
return (
|
||||
<ServiceFiltersPill
|
||||
text={currency.name}
|
||||
searchParamName="currencies"
|
||||
searchParamValue={currency.slug}
|
||||
icon={currency.icon}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
{filters.networks.map((network) => {
|
||||
const networkOption = getNetworkInfo(network)
|
||||
|
||||
return (
|
||||
<ServiceFiltersPill
|
||||
text={networkOption.name}
|
||||
icon={networkOption.icon}
|
||||
searchParamName="networks"
|
||||
searchParamValue={network}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
{filters['max-kyc'] < 4 && (
|
||||
<ServiceFiltersPill
|
||||
text={`KYC Lvl ≤ ${filters['max-kyc'].toLocaleString()}`}
|
||||
icon="ri:shield-keyhole-line"
|
||||
searchParamName="max-kyc"
|
||||
/>
|
||||
)}
|
||||
{filters['user-rating'] > 0 && (
|
||||
<ServiceFiltersPill
|
||||
text={`Rating ≥ ${filters['user-rating'].toLocaleString()}★`}
|
||||
icon="ri:star-fill"
|
||||
searchParamName="user-rating"
|
||||
/>
|
||||
)}
|
||||
{filters['min-score'] > 0 && (
|
||||
<ServiceFiltersPill
|
||||
text={`Score ≥ ${filters['min-score'].toLocaleString()}`}
|
||||
icon="ri:medal-line"
|
||||
searchParamName="min-score"
|
||||
/>
|
||||
)}
|
||||
{filters['attribute-mode'] === 'and' && filters.attr && Object.keys(filters.attr).length > 1 && (
|
||||
<ServiceFiltersPill
|
||||
text="Attributes: AND"
|
||||
icon="ri:filter-3-line"
|
||||
searchParamName="attribute-mode"
|
||||
searchParamValue="and"
|
||||
/>
|
||||
)}
|
||||
{filters.attr &&
|
||||
Object.entries(filters.attr)
|
||||
.filter((entry): entry is [string, 'no' | 'yes'] => entry[1] === 'yes' || entry[1] === 'no')
|
||||
.map(([attributeId, attributeValue]) => {
|
||||
const attribute = attributes.find((attr) => String(attr.id) === attributeId)
|
||||
if (!attribute) return null
|
||||
const valueInfo = attributeOptions.find((option) => option.value === attributeValue)
|
||||
const prefix = valueInfo?.prefix ?? transformCase(attributeValue, 'title')
|
||||
return (
|
||||
<ServiceFiltersPill
|
||||
text={`${prefix}: ${attribute.title}`}
|
||||
searchParamName={`attr-${attributeId}`}
|
||||
searchParamValue={attributeValue}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
<div class="text-day-500 flex flex-1 items-center">No filters</div>
|
||||
)
|
||||
}
|
||||
|
||||
<Button as="label" for="show-filters" label="Filters" icon="ri:filter-3-line" />
|
||||
</div>
|
||||
|
||||
<input
|
||||
type="checkbox"
|
||||
id="show-filters"
|
||||
name="show-filters"
|
||||
class="peer hidden"
|
||||
checked={Astro.url.searchParams.has('show-filters')}
|
||||
/>
|
||||
<div
|
||||
class="bg-night-700 fixed top-0 left-0 z-50 h-dvh w-dvw shrink-0 translate-y-full overflow-y-auto overscroll-contain border-t border-green-500/30 px-8 pt-4 transition-transform peer-checked:translate-y-0 sm:relative sm:z-auto sm:h-auto sm:w-64 sm:translate-y-0 sm:overflow-visible sm:border-none sm:bg-none sm:p-0"
|
||||
>
|
||||
<ServicesFilters
|
||||
searchResultsId="search-results"
|
||||
showFiltersId="show-filters"
|
||||
filters={{
|
||||
...filters,
|
||||
'sort-seed': makeSortSeed(),
|
||||
}}
|
||||
options={filtersOptions}
|
||||
hasDefaultFilters={hasDefaultFilters}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<ServicesSearchResults
|
||||
services={services}
|
||||
id="search-results"
|
||||
currentPage={filters.page}
|
||||
total={totalServices}
|
||||
pageSize={PAGE_SIZE}
|
||||
sortSeed={filters['sort-seed']}
|
||||
filters={filters}
|
||||
hadToIncludeCommunityContributed={hadToIncludeCommunityContributed}
|
||||
/>
|
||||
</div>
|
||||
{
|
||||
totalServices > PAGE_SIZE && (
|
||||
<Pagination
|
||||
currentPage={filters.page}
|
||||
totalPages={Math.ceil(totalServices / PAGE_SIZE)}
|
||||
sortSeed={filters['sort-seed']}
|
||||
class="js:hidden mt-8"
|
||||
/>
|
||||
)
|
||||
}
|
||||
</BaseLayout>
|
||||
|
||||
<script>
|
||||
////////////////////////////////////////////////////////////
|
||||
// Optional script for removing sort-seed from URL. //
|
||||
// This helps keep URLs cleaner when sharing. //
|
||||
////////////////////////////////////////////////////////////
|
||||
|
||||
import { addOnLoadEventListener } from '../lib/onload'
|
||||
|
||||
addOnLoadEventListener(() => {
|
||||
const url = new URL(window.location.href)
|
||||
if (url.searchParams.has('sort-seed')) {
|
||||
url.searchParams.delete('sort-seed')
|
||||
window.history.replaceState({}, '', url)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
Reference in New Issue
Block a user