2020-07-01 18:13:32 +02:00
|
|
|
import React, { ReactElement, useState, useEffect } from 'react'
|
2021-06-10 11:06:26 +02:00
|
|
|
import Permission from '../../organisms/Permission'
|
2021-02-05 14:00:30 +01:00
|
|
|
import AssetList from '../../organisms/AssetList'
|
2020-07-01 18:13:32 +02:00
|
|
|
import queryString from 'query-string'
|
2021-09-03 14:50:09 +02:00
|
|
|
import Filters from './Filters'
|
2021-01-21 10:42:05 +01:00
|
|
|
import Sort from './sort'
|
2021-02-05 14:00:30 +01:00
|
|
|
import { getResults } from './utils'
|
|
|
|
import { navigate } from 'gatsby'
|
|
|
|
import { updateQueryStringParameter } from '../../../utils'
|
2021-07-07 08:45:20 +02:00
|
|
|
import { useUserPreferences } from '../../../providers/UserPreferences'
|
2021-09-24 13:56:42 +02:00
|
|
|
import { useCancelToken } from '../../../hooks/useCancelToken'
|
2021-09-03 14:50:09 +02:00
|
|
|
import styles from './index.module.css'
|
2020-07-01 18:13:32 +02:00
|
|
|
|
|
|
|
export default function SearchPage({
|
2021-01-13 10:15:50 +01:00
|
|
|
location,
|
2021-09-15 12:50:41 +02:00
|
|
|
setTotalResults,
|
|
|
|
setTotalPagesNumber
|
2020-07-01 18:13:32 +02:00
|
|
|
}: {
|
|
|
|
location: Location
|
2021-01-13 10:15:50 +01:00
|
|
|
setTotalResults: (totalResults: number) => void
|
2021-09-15 12:50:41 +02:00
|
|
|
setTotalPagesNumber: (totalPagesNumber: number) => void
|
2020-07-01 18:13:32 +02:00
|
|
|
}): ReactElement {
|
|
|
|
const parsed = queryString.parse(location.search)
|
2021-09-14 17:18:15 +02:00
|
|
|
const { text, owner, tags, page, sort, sortOrder, serviceType, accessType } =
|
|
|
|
parsed
|
2021-07-07 08:45:20 +02:00
|
|
|
const { chainIds } = useUserPreferences()
|
2021-09-24 11:38:32 +02:00
|
|
|
const [queryResult, setQueryResult] = useState<any>()
|
2020-07-15 15:47:25 +02:00
|
|
|
const [loading, setLoading] = useState<boolean>()
|
2021-02-23 22:51:02 +01:00
|
|
|
const [service, setServiceType] = useState<string>(serviceType as string)
|
2021-09-14 17:18:15 +02:00
|
|
|
const [access, setAccessType] = useState<string>(accessType as string)
|
2021-01-21 10:42:05 +01:00
|
|
|
const [sortType, setSortType] = useState<string>(sort as string)
|
|
|
|
const [sortDirection, setSortDirection] = useState<string>(
|
|
|
|
sortOrder as string
|
|
|
|
)
|
2021-09-24 13:56:42 +02:00
|
|
|
const newCancelToken = useCancelToken()
|
2020-07-01 18:13:32 +02:00
|
|
|
|
2021-09-27 10:16:32 +02:00
|
|
|
async function fetchAssets() {
|
|
|
|
setLoading(true)
|
|
|
|
setTotalResults(undefined)
|
|
|
|
const queryResult = await getResults(parsed, chainIds, newCancelToken())
|
|
|
|
|
|
|
|
setQueryResult(queryResult)
|
|
|
|
setTotalResults(queryResult.totalResults)
|
|
|
|
setTotalPagesNumber(queryResult.totalPages)
|
|
|
|
setLoading(false)
|
|
|
|
}
|
2020-07-01 18:13:32 +02:00
|
|
|
|
2021-02-05 14:00:30 +01:00
|
|
|
function setPage(page: number) {
|
|
|
|
const newUrl = updateQueryStringParameter(
|
|
|
|
location.pathname + location.search,
|
|
|
|
'page',
|
|
|
|
`${page}`
|
|
|
|
)
|
|
|
|
return navigate(newUrl)
|
|
|
|
}
|
|
|
|
|
2021-09-27 10:16:32 +02:00
|
|
|
useEffect(() => {
|
|
|
|
async function initSearch() {
|
|
|
|
await fetchAssets()
|
|
|
|
}
|
|
|
|
initSearch()
|
|
|
|
}, [text, owner, tags, sort, page, sortOrder, chainIds, newCancelToken])
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
if (page !== '1') {
|
|
|
|
setPage(1)
|
|
|
|
} else {
|
|
|
|
fetchAssets()
|
|
|
|
}
|
|
|
|
}, [serviceType, accessType])
|
|
|
|
|
2020-07-01 18:13:32 +02:00
|
|
|
return (
|
2021-06-10 11:06:26 +02:00
|
|
|
<Permission eventType="browse">
|
|
|
|
<>
|
|
|
|
<div className={styles.search}>
|
|
|
|
<div className={styles.row}>
|
2021-09-03 14:50:09 +02:00
|
|
|
<Filters
|
2021-06-10 11:06:26 +02:00
|
|
|
serviceType={service}
|
2021-09-14 17:18:15 +02:00
|
|
|
accessType={access}
|
2021-06-10 11:06:26 +02:00
|
|
|
setServiceType={setServiceType}
|
2021-09-14 17:18:15 +02:00
|
|
|
setAccessType={setAccessType}
|
2021-09-27 10:16:14 +02:00
|
|
|
addFiltersToUrl
|
2021-06-10 11:06:26 +02:00
|
|
|
/>
|
|
|
|
<Sort
|
|
|
|
sortType={sortType}
|
|
|
|
sortDirection={sortDirection}
|
|
|
|
setSortType={setSortType}
|
|
|
|
setSortDirection={setSortDirection}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className={styles.results}>
|
|
|
|
<AssetList
|
|
|
|
assets={queryResult?.results}
|
|
|
|
showPagination
|
|
|
|
isLoading={loading}
|
|
|
|
page={queryResult?.page}
|
|
|
|
totalPages={queryResult?.totalPages}
|
|
|
|
onPageChange={setPage}
|
2021-01-21 10:42:05 +01:00
|
|
|
/>
|
|
|
|
</div>
|
2021-06-10 11:06:26 +02:00
|
|
|
</>
|
|
|
|
</Permission>
|
2020-07-01 18:13:32 +02:00
|
|
|
)
|
|
|
|
}
|