mirror of
https://github.com/oceanprotocol/market.git
synced 2024-06-30 13:51:42 +02:00
* migrate to Next.js * migrate scripts * generate markdown pages * make all the markdown work * fix profile, fix image loading * git+ssh → git+https, again * bump packages * maybe windows build fix * add public to gitignore Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro> * Next.js v12! Webpack 5! No build hacks anymore * json import fixes * fixes Co-authored-by: mihaisc <mihai.scarlat@smartcontrol.ro>
108 lines
3.4 KiB
TypeScript
108 lines
3.4 KiB
TypeScript
import React, { ReactElement, useState, useEffect, useCallback } from 'react'
|
|
import AssetList from '@shared/AssetList/AssetList'
|
|
import queryString from 'query-string'
|
|
import Filters from './Filters'
|
|
import Sort from './sort'
|
|
import { getResults, updateQueryStringParameter } from './utils'
|
|
import { useUserPreferences } from '@context/UserPreferences'
|
|
import { useCancelToken } from '@hooks/useCancelToken'
|
|
import styles from './index.module.css'
|
|
import { useRouter } from 'next/router'
|
|
|
|
export default function SearchPage({
|
|
setTotalResults,
|
|
setTotalPagesNumber
|
|
}: {
|
|
setTotalResults: (totalResults: number) => void
|
|
setTotalPagesNumber: (totalPagesNumber: number) => void
|
|
}): ReactElement {
|
|
const router = useRouter()
|
|
const [parsed, setParsed] = useState<queryString.ParsedQuery<string>>()
|
|
const { chainIds } = useUserPreferences()
|
|
const [queryResult, setQueryResult] = useState<PagedAssets>()
|
|
const [loading, setLoading] = useState<boolean>()
|
|
const [serviceType, setServiceType] = useState<string>()
|
|
const [accessType, setAccessType] = useState<string>()
|
|
const [sortType, setSortType] = useState<string>()
|
|
const [sortDirection, setSortDirection] = useState<string>()
|
|
const newCancelToken = useCancelToken()
|
|
|
|
useEffect(() => {
|
|
const parsed = queryString.parse(location.search)
|
|
const { sort, sortOrder, serviceType, accessType } = parsed
|
|
setParsed(parsed)
|
|
setServiceType(serviceType as string)
|
|
setAccessType(accessType as string)
|
|
setSortDirection(sortOrder as string)
|
|
setSortType(sort as string)
|
|
}, [router])
|
|
|
|
const updatePage = useCallback(
|
|
(page: number) => {
|
|
const { pathname, query } = router
|
|
const newUrl = updateQueryStringParameter(
|
|
pathname + query,
|
|
'page',
|
|
`${page}`
|
|
)
|
|
return router.push(newUrl)
|
|
},
|
|
[router]
|
|
)
|
|
|
|
const fetchAssets = useCallback(
|
|
async (parsed: queryString.ParsedQuery<string>, chainIds: number[]) => {
|
|
setLoading(true)
|
|
setTotalResults(undefined)
|
|
const queryResult = await getResults(parsed, chainIds, newCancelToken())
|
|
setQueryResult(queryResult)
|
|
setTotalResults(queryResult.totalResults)
|
|
setTotalPagesNumber(queryResult.totalPages)
|
|
setLoading(false)
|
|
},
|
|
[newCancelToken, setTotalPagesNumber, setTotalResults]
|
|
)
|
|
useEffect(() => {
|
|
if (!parsed || !queryResult) return
|
|
const { page } = parsed
|
|
if (queryResult.totalPages < Number(page)) updatePage(1)
|
|
}, [parsed, queryResult, updatePage])
|
|
|
|
useEffect(() => {
|
|
if (!parsed || !chainIds) return
|
|
fetchAssets(parsed, chainIds)
|
|
}, [parsed, chainIds, newCancelToken, fetchAssets])
|
|
|
|
return (
|
|
<>
|
|
<div className={styles.search}>
|
|
<div className={styles.row}>
|
|
<Filters
|
|
serviceType={serviceType}
|
|
accessType={accessType}
|
|
setServiceType={setServiceType}
|
|
setAccessType={setAccessType}
|
|
addFiltersToUrl
|
|
/>
|
|
<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={updatePage}
|
|
/>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|