import algoliasearch from 'algoliasearch/lite' import { InstantSearch, SearchBox, SortBy, useInfiniteHits, useRange, useRefinementList, useSortBy, useToggleRefinement, } from 'react-instantsearch-hooks-web' import { Contract } from '../../common/contract' import { Sort, useInitialQueryAndSort, useUpdateQueryAndSort, } from '../hooks/use-sort-and-query-params' import { ContractsGrid } from './contract/contracts-list' import { Row } from './layout/row' import { useEffect, useState } from 'react' import { Spacer } from './layout/spacer' import { useRouter } from 'next/router' const searchClient = algoliasearch( 'GJQPAYENIF', '75c28fc084a80e1129d427d470cf41a3' ) const sortIndexes = [ { label: 'Newest', value: 'contracts-newest' }, { label: 'Oldest', value: 'contracts-oldest' }, { label: 'Most traded', value: 'contracts-most-traded' }, { label: '24h volume', value: 'contracts-24-hour-vol' }, { label: 'Closing soon', value: 'contracts-closing-soon' }, { label: 'Closed', value: 'contracts-closed' }, { label: 'Resolved', value: 'contracts-resolved' }, ] export function ContractSearch(props: { querySortOptions?: { defaultSort: Sort filter?: { creatorId?: string tag?: string } shouldLoadFromStorage?: boolean } }) { const { querySortOptions } = props const { initialSort } = useInitialQueryAndSort(querySortOptions) const sort = sortIndexes .map(({ value }) => value) .includes(`contracts-${initialSort ?? ''}`) ? initialSort : querySortOptions?.defaultSort console.log('sort', sort) if (!sort) return <> return ( ) } export function ContractSearchInner(props: { querySortOptions?: { defaultSort: Sort filter?: { creatorId?: string tag?: string } shouldLoadFromStorage?: boolean } }) { const { querySortOptions } = props const { initialQuery } = useInitialQueryAndSort(querySortOptions) const { query, setQuery, setSort } = useUpdateQueryAndSort({ shouldLoadFromStorage: true, }) useEffect(() => { console.log('initial query', initialQuery) setQuery(initialQuery) }, [initialQuery]) const { currentRefinement: index } = useSortBy({ items: [], }) useEffect(() => { console.log('setting query', query) setQuery(query) }, [query]) useEffect(() => { console.log('effect sort', 'curr', index) const sort = index.split('contracts-')[1] as Sort if (sort) { setSort(sort) } }, [index]) const creatorId = querySortOptions?.filter?.creatorId useFilterCreator(creatorId) const tag = querySortOptions?.filter?.tag useFilterTag(tag) if ( !creatorId || index === 'contracts-closed' || index === 'contracts-resolved' ) { // eslint-disable-next-line react-hooks/rules-of-hooks useFilterClosed(index) // eslint-disable-next-line react-hooks/rules-of-hooks useFilterResolved(index) } const { showMore, hits, isLastPage } = useInfiniteHits() const contracts = hits as any as Contract[] const router = useRouter() const hasLoaded = contracts.length > 0 || router.isReady return (
{hasLoaded && ( )}
) } const useFilterCreator = (creatorId: string | undefined) => { const { refine } = useRefinementList({ attribute: 'creatorId' }) useEffect(() => { if (creatorId) refine(creatorId) }, [creatorId, refine]) } const useFilterTag = (tag: string | undefined) => { const { refine } = useRefinementList({ attribute: 'lowercaseTags' }) useEffect(() => { if (tag) refine(tag.toLowerCase()) }, [tag, refine]) } const useFilterClosed = (index: string) => { const [now] = useState(Date.now()) useRange({ attribute: 'closeTime', min: index === 'contracts-resolved' || index === 'contracts-closed' ? 0 : now, max: index === 'contracts-closed' ? now : undefined, }) } const useFilterResolved = (index: string) => { const { refine: refineResolved } = useToggleRefinement({ attribute: 'isResolved', on: true, off: false, }) useEffect(() => { console.log( 'effect', 'curr', index, 'update', index === 'contracts-resolved' ) refineResolved({ isRefined: index !== 'contracts-resolved' }) }, [index]) }